塾長 尾上こんにちは！ぬるま湯デザイン塾の尾上です。
メモりすこんにちは！Webデザイナーのメモりすです。
「バナーを作ってみたいけど、センスがないと作れないのでは…？」
そんな不安から、検索だけして手が止まっていませんか？実はバナー作りは、センスの有無ではなく「決める順番」を知っているかどうかで差がつきます。
この記事では、初心者がバナーを作るときにつまずきやすいポイントから、作る前に決めておくべきこと、実際の制作手順、そして「初心者っぽさ」が抜けるコツまで、順を追って解説します。
バナー作りで最初につまずくポイントとは
メモりすとりあえずCanvaを開いてみたけど、何から作ればいいのか分からなくて固まっちゃった…。
塾長 尾上それ、順番の問題だよ。目的→サイズ→素材→レイアウトの順で進めれば迷わなくなる。
バナー作りで多くの初心者がつまずくのは、目的やサイズを決めないまま、いきなりCanvaやPhotoshopといったデザインソフトを開いてしまうことです。
真っ白なキャンバスを前に「何から手をつければいいのか」が分からず、手が止まってしまうのです。
つまずきの正体は「センスがない」ことではなく、制作なでの順番が整理されていないことです。次の章からステップを一つずつ具体的に見ていきましょう。
1、バナーを作る前に決めておく3つのこと
1-1 誰に・何を伝えるバナーか（目的とターゲット）
バナー制作でまず言語化すべきなのは、
- 誰に
- 何を伝えるか
という目的です。
- 新商品のセールを知らせたい
- サービスへのお問い合わせを促したい
- LINE登録を促したい
これらの目的によって使う色・文言・レイアウトの優先順位は変わります。
ここを曖昧にしたまま作り始めると、後からどれだけ配色やフォントを調整しても、伝えたいことがぼやけたバナーになってしまいます。
1-2 掲載する場所を決める
次に決めるのは掲載場所です。
- Web広告として配信する
- SNSの投稿として使う
- 自社サイトのバナーとして使う
などによって、求められる仕様(サイズ・ファイル形式・容量)が異なります。掲載場所を先に決めておかないと、後になってサイズを作り直す二度手間が発生します。
- Web広告→Google広告などの管理画面から入稿する「ディスプレイ広告」
- SNS投稿→Instagramのフィード投稿やストーリーズ
- 自社サイト→ランディングページ(LP)のファーストビューやサイドバーに設置するバナー
同じ「バナー」という言葉でも、掲載先が変われば読者の目に触れるタイミングも画面サイズも変わります。まずは「どこに、どんな形で表示されるか」を具体的にイメージしておくと、この先のサイズ確認や素材選びがスムーズに進みます。
1-3 使用するサイズを確認する
掲載場所が決まったら、そこで求められるサイズを確認します。一例として、Google広告のアップロード型ディスプレイ広告(イメージアセット)では、次のようなサイズが使われています。
パソコン向け
300×250px／336×280px／728×90px／970×90px／468×60px／300×600px／160×600px／250×250px／200×200px
モバイル向け
300×200px／300×50px／300×100px／250×250px／200×200px
出典: Google広告ヘルプ「レスポンシブ ディスプレイ広告のサイズ」
メモりすサイズの種類、こんなにあるんだ……全部覚えるのかと思うと気が重いです。
塾長 尾上覚える必要はないよ。掲載場所が決まれば、使うサイズは自然と1〜2種類に絞られるからね。
種類は多く見えますが、すべてを暗記する必要はありません。まずは自分が掲載したい媒体で指定されているサイズだけを確認すれば十分です。
2、初心者でも迷わないバナー制作の手順
目的・掲載場所・サイズが決まったら、ここからは実際の制作作業です。
2-1 使うツールを決める
目的・掲載場所・サイズが決まったら、いよいよ制作です。初心者が扱いやすいツールとしては、テンプレートが豊富なCanva、デザインの自由度が高いPhotoshopがよく挙げられます。
1、Canva
検索窓に「バナー」や作りたい用途のキーワードを入力すると、あらかじめレイアウトが組まれたテンプレートが一覧で表示されます。
2、Photoshop
テンプレートに頼らず自由にレイアウトを組みたい場合や、同じデザインを複数サイズへ展開したい場合に向いています。
最初の1枚を作る段階では、テンプレートを土台に手早く形にできるCanvaから始め、慣れてきたら自由度の高いPhotoshopを試す、という進め方でも問題ありません。
2-2 素材とテキストを準備する
ツールを開く前に、使う画像素材・キャッチコピー・ロゴなどを手元に揃えておきましょう。レイアウトを組みながら素材を探すと、そのつど手が止まり、時間ばかりかかってしまいます。
なので先に「使う要素」をリストアップしておくことで、制作作業に集中できます。
- メインの画像や写真
- 見出しになる短いキャッチコピー
- 補足の説明文
- ロゴやアイコンなどのブランド要素
- 行動を促す文言（「詳しくはこちら」など）
使う候補を先に書き出しておくとレイアウトを組みやすくなります。とくにキャッチコピーは、作る前に言語化した「誰に・何を伝えるか」をそのまま短い言葉に落とし込むイメージで考えると、後から文言を迷いにくくなります。
2-3 レイアウトを組んで書き出す
素材が揃ったら、決めておいたサイズに合わせてレイアウトを組み、最後に書き出します。書き出すときのファイル形式や容量にも決まりがある場合があります。
Google広告のアップロード型イメージ広告
ファイル形式はGIF・JPG・PNG、最大ファイルサイズは150KBと定められています。
出典: Google広告ヘルプ「アップロードするディスプレイ広告のファイル仕様」)
これはあくまでGoogle広告に入稿する場合の目安で、SNS投稿など他の掲載先では別の基準が設けられていることもあるため、掲載先ごとに確認する習慣をつけておくと安心です。
塾長 尾上書き出す前に縮小表示で見た目を確認すると、原寸だと気づかない文字のつぶれが見つかることがあるよ。
初心者っぽさが抜けるバナー上達の5つのコツ
ここまでの手順どおりに作れば、バナーとして成立するものはできあがります。ここからは、さらに「初心者っぽさ」を抜けるための判断基準を5つ紹介します。
1、文字を詰め込みすぎない
伝えたいことを1つに絞り、情報を削る勇気を持つ。見出し・補足の説明・行動を促す文言など、載せる要素を絞り込むと格段に読みやすくなります。
2、余白を使う
要素を詰めるより、余白で情報を目立たせる。文字や画像の周りに何も置かないスペースを意識的に残すだけで、詰め込み感がなくなり要素が読み取りやすくなります。
3、フォントの種類を絞る
使うフォントは1〜2種類までにし、ばらつきを抑える。太さ(ウェイト)を変えて強弱をつければ、フォントの種類を増やさなくても十分にメリハリを出せます。
4、要素の優先順位(コントラスト)をつける
一番伝えたい要素を、色やサイズで際立たせる。すべての文字を同じ大きさ・同じ色で並べてしまうと、何を一番伝えたいのかが読み手に伝わりません。
5、行動を促す文言を目立たせる
「詳しくはこちら」などのCTA文言は、他の要素より視認性を高くする。ボタンのような枠で囲む、周囲と違う色にするなど、「ここを押せばいい」と一目で分かる工夫をしましょう。
これらはすべて「センスがあるかないか」ではなく、確認すればチェックできる基準です。作ったバナーを見返すとき、この5つに沿っているかを一つずつ確かめてみてください。
メモりすセンスの話じゃなくて、チェックリストみたいに確認できるんだね。これなら自分でも見直せそう!
練習で作ったバナーは、案件を探すときの実績としても活かせます。副業としてWebデザインを始めたい方は以下の関連記事も参考にしてみてください。
まとめ
バナー作りは「センスがあるかないか」ではなく、
- 目的
- 掲載場所とサイズ
- 素材
- レイアウト
という決める順番を守れば、あなたも取り組めす。今回紹介した4つのステップと5つの上達のコツを見ながら、まずは1枚作ってみてください。自分にWebデザインが向いているかどうかがきになる方は以下のイベントもおすすめです。
Webデザインの学び方に関する情報を受け取りたい方は、ぬるま湯デザイン塾のLINEにご登録ください。5日間チャレンジ（無料体験）も実施中です。
5日間チャレンジの内容や案内時期などの詳細については、LINEでご案内します。
＼ LINEのお友達登録はこちらから ／
参考にした情報源
- Google広告ヘルプ「レスポンシブ ディスプレイ広告のサイズ」 https://support.google.com/google-ads/answer/7031480
- Google広告ヘルプ「アップロードするディスプレイ広告のファイル仕様」 https://support.google.com/google-ads/answer/1722096
塾長 尾上次のブログでもまたお会いしましょう！
メモりすバイバイ！またね！
