1

【初心者向け】バナーを作成する手順やポイントが学べる記事まとめ


ホームページやブログ、どんなWebサイトにももれなく表示されているバナー広告の数々。
サイズも小さいものが多く、一見画像製作も簡単そうに見えますが、
限られた範囲の中に目に付きやすくわかり易いキャッチコピーを配置するなど、
ユーザーの目を引く効果的なバナー広告には一定のルールが存在します。
今回はそんな効果的なバナー広告を作るための基本を紹介しているサイトをまとめてみました。

バナーの作り方を説明している記事

キャッチコピーや写真素材にフォント選び・・・
何から手を付けていいか分からない、なんてことはありませんか?
バナー広告の作成手順を説明している記事をまとめました。

1 pixel

1 pixel

http://ameblo.jp/ca-1pixel/entry-11544230753.html

受注から制作までの工程を説明しています。
スムーズに制作を行うためには優先順位を立てることが重要です。
何を誰にどういう風に伝えるバナーなのかをはっきり決めておきましょう。

 

ポケットラボ

バナー1つ制作するのだけでも難しいですよね。限られたスペースに訴求したい内容ときちんと伝えれるようなバナーを作らなければなりません。そんなバナー制作時に覚えているときっと便利なことや制作するコツなどを紹介

http://nh-lab.com/newcomer-web-designer-banner-tutorial/

限られたスペースに訴求したい内容ときちんと伝えれるようなバナーを作らなければなりません。
そんなバナー制作の時に覚えているときっと便利なことや、
制作するコツなどを紹介しています。

 

LISKUL &raquo

広告バナーって「ひとつや2つくらいすぐできるだろう」と思っていても案外時間がかかってしまいますよね。Webサイト制作と同じように配色やレイアウトなどの一つひとつに迷ってしまう方も多いと思います。そんな方のために、今回は初心者の方でも高品質なバナーを早く簡単に作る秘訣をお教えます。

http://liskul.com/cr_45minbanner-4240

広告バナーって簡単なように見えて案外時間がかかってしまうバナー広告の制作。
Webサイト制作と同じように配色やレイアウトなどの一つひとつに迷ってしまう方も多いと思います。
そんな方のために、初心者の方でも高品質なバナーを早く簡単に作る秘訣を紹介しています。

 

ハカセの研究室


Photoshopでのバナーの作り方(楽天などネットショップ運営者向け)

http://hakase-labo.com/2014/08/05/make_banner/

バナー画像を作る際に使うソフトはFireworks、Photoshop、GIMPなど、環境によって様々ですが
この記事では一番オーソドックスなPhotosyopでの作成について紹介しています。
ほかのソフトでも応用は可能です。

 

Sanow Labs blog(サノウラボブログ)

Sanow Labs blog(サノウラボブログ)

http://blog.sanowlabs.jp/?p=8032

こちらもPhotoshopでの作成方法を紹介しています。
バナーを作るにあたって必要な準備やレイアウトやデザインの工程を、
レイヤー効果など、より細かい手順がわかりやすく解説されています。

 

nanapi TechBlog

nanapi TechBlog

http://blog.nanapi.co.jp/tech/2013/10/02/make-banner-speedy/

バナー制作の際、レイアウトやコンセプトがまとめ切らずに時間がかかってしまうことってありますよね。
ポイントを抑えながら制作すると短縮できる場合があります。
モノクロにして視認性をチェックするというのは意外と重要かと思います。

 

神戸ホームページ制作センター

デザイナー視点で見る!イケてるバナーとトホホなバナー~イケてるバナー編~

http://hm-solution.jp/web/post1580.html

レイアウトのサンプルがまとめられています。
縦や横、斜めに範囲を割っているものや、色味などをカテゴリー分けを行って
効果を解説しています。

 

株式会社LIG

新米デザイナーは知っておきたい、“美しい”バナーを“効率的”に制作するための10のステップ

http://liginc.co.jp/web/design/photoshop/128520

美しいバナーを作るためには、必要なものを全て準備してから始めることが大切です。
制作をはじめてから迷わないように、何を表す広告なのかを明確化し、
打ち出さないといけない材料をまずは全部並べてみましょう。

 

LINE Corporation ディレクターブログ

ディレクターなら知っておきたい「バナー広告制作の基礎知識」

http://directorblog.jp/archives/51725297.html

この記事では、バナーを設置するにあたっての考え方、目的、傾向などを説明しています。
また、効果の高いレイアウトテクニックも紹介しています。
ただ画像を作って貼るのではなく、目的に沿って制作して設置しましょう。

 

LISKUL &raquo

15

http://liskul.com/banner_reference-839

知っているだけで成果が変わる5つのポイントを紹介しています。
視点の流れやバランス、デザインするうえで意味を持たせることが重要です。
上手なキャッチコピーの強調仕方とは?

 

FEVDES BLOG


FEVDES BLOG

http://blog.idea-clippin.com/?p=540

キャッチコピー、サブタイトルなど文字を組む際に迷っていませんか?
デザインの引き出しを作って、
「クライアントに『自分でもつくれる』と思わせない」制作を心がけましょう。

 

様々なケースを比較し、解析している記事

バナーの製作には、設置場所や内容に合わせたリサーチも欠かせません。
最近はスマートフォンやタブレットなど様々な端末からホームページの閲覧を行うので、
それぞれの用途に合ったバナーの設置が必要になります。

 

LINE Corporation ディレクターブログ

100種以上の自社広告運用でわかった!バナー広告クリエイティブ4つの基本

http://directorblog.jp/archives/51763240.html

100種以上の自社広告の運用でわかったことをまとめています。
バナー広告を設置する際の4つの基本をご紹介。
フォントやイラスト、比べてみるとこんなに違いが!?

 

デザインブログ

デザイン初心者が学んだちょっとしたコツで変わる!バナーの小技

http://designblog.ecstudio.jp/design-2/designer-banner-tips.html

一見大きな違いには思えませんが、目に留まる確率は圧倒的に違います。
たった数ピクセルのフォントの変化や余白でキャッチコピーの読みやすさが変わります。
簡単なことですが重要なコツです。

 

たくさんのバナーを集めたショーケースサイト

バナー制作のアイデアに悩んだら、バナー画像をたくさん集めたショーケースサイトを覗いてみてはどうでしょうか?

 

レトロバナー

「レトロバナー」はバナーデザイン専門のギャラリーサイトです。サイズ・色・業種・テイストからバナーを絞り込む事ができ、バナーを一覧でチェックできます。バナーデザインの新たなアイデア・発想の源として要チェック!

http://retrobanner.net/

「レトロバナー」はバナーデザイン専門のギャラリーサイトです。
サイズ・色・業種・テイストからバナーを絞り込む事ができ、バナーを一覧でチェックできます。
バナーデザインの新たなアイデア・発想の源として要チェック!

 

バナーデザインをまとめたサイトです。様々なバナーのデザインをサイズや色から選んで一覧でチェック!バナー作成の参考にご活用ください!

http://banner.keizine.net/

こちらもバナーデザインをまとめたサイトです。
様々なバナーのデザインをサイズや色から選んで一覧でチェック!
検索できるのは便利で嬉しいですね。

 

『バナーデザインギャラリー | Banner Design Gallery』は、皆様からのご投稿情報を基に、かっこいいバナー・かわいいバナー・クリエイティブなバナーなどをまとめて一覧できる、バナー専門のギャラリーサイトです。

http://banner.keizine.net/

ユーザーから送られた投稿情報を基に、様々なカテゴリーわけがされています。
かっこいいバナー・かわいいバナー・クリエイティブなバナーなどを、
まとめて一覧できる、バナー専門のギャラリーサイトです。

 

Croppy(クロッピィ)

10

http://croppy.org/

バナーだけでなくバナースペースまるごとの掲載もあります。
バナーは単体で掲載されることはあまりないので、
実際webサイトで使用するときの参考になりますね。

 

ホームページ作成 AKAIRO株式会社(アカイロ)

http://aka-iro.jp/bd/

http://croppy.org/

バナーだけでなくボタンやメインビジュアルサンプルも掲載されています。
色みやテイストなど、欲しいデザインを探しやすいのが魅力です。
リサーチにも最適です。

 

ブブンデザインアーカイブ

ブブンデザインアーカイブ

http://bubundesignarchive.jp/bnn/

こちらもバナーのみならずロゴやメインビジュアルなどパーツがたくさん揃っています。
ボタンなど細かな分類がされていたり、業界別のアーカイブもあるので、
掲載する業種の基本テイストがわかって便利です。

 

バナーデザイン一覧

バナーデザイン一覧

http://m-plotworks.web9.jp/bannerdesign/index.html

バナーを作成する際、複数のサイズのものを作成する場合が多いと思います。
このサイトではバナーサイズごとにバナー広告を紹介しています。
サイズごとに並べてみると、レイアウトに共通点が見つかるなど新しい発見があります。

最後に

バナー広告一つにしても様々なアプローチや考え方があります。
基本のポイントを習得すると、より効果的なバナー広告が短い時間で作れるようになります。
優先順位を決めてから制作をすることが重要だということがわかりますね。
自分の引き出しを増やすためにもぜひ試してみてください。

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


bakeneko

webデザイナー8年目、現在育休中の一児の母です。

Next Articleコーディングが楽になるオンラインCSSジェネレーターまとめ