バナーってどう作るの？初心者でも迷わない基本手順をやさしく解説

バナーってよく聞くけど、どうやって作るの？

Webデザイン副業に興味を持ち始めた方から、よくいただく質問です。

Webデザインの案件を見ていると、
「バナー制作」という言葉がたくさん出てきますよね。

なんだか難しそう…センスが必要そう…
そう感じて、手が止まってしまう方も多いです。

でも、どうか安心してください！
バナー制作は手順を知れば、初心者でもちゃんと作れるものなんです＾＾

今日は、デザイン未経験からスタートした私の経験を元に、
「最初の1枚」を作るための考え方と流れを、やさしく整理しますね。

店長 しおん

最初はうまく作れなくて大丈夫ですよ。私も最初は全然できませんでした。一緒に一歩ずついきましょう

バナーとは？どんな場面で使われるの？

まずは、「バナーって何？」というところから整理してみましょう。

バナーとは、Web上で使われる広告・案内用の画像のことです。

よく使われる場所は、こんなところです。

バナーの役割は、ただ「目立つこと」ではありません。

見た人に、
「気になる」「クリックしたい」「続きが見たい」
そう思ってもらうことが、いちばん大切な目的です。

Webデザイン副業では、バナー制作はとてもよくある案件です。

「Webデザイン副業って、どんな案件があるの？」と気になっている方は、
下記の記事も参考になりますよ。

あわせて読みたい

Webデザイン副業のよくある案件とは？初心者が最初に選びやすい仕事をやさしく解説

初心者がつまずきやすい「バナー作りの誤解」

バナー制作でつまずく原因は、
実は「センスがないから」ではありません。

多くの初心者さんが、こんな誤解をしています。

でも実際は、
バナーでいちばん大事なのはおしゃれさではありません。

「誰に」「何を」「どうしてほしいか」
この順番を整理できているかどうか、なんです。

店長 しおん

センスよりも、考える順番のほうがずっと大事ですよ。ここを押さえるだけで、グッと作りやすくなります

バナー制作の全体の流れを先に見てみよう

ここで、バナー制作の全体像を先に見ておきましょう。

バナー作りは、だいたいこの5ステップです。

この順番で進めれば、
「何からやればいいか分からない…」と迷うことが少なくなります。

いきなりツールを開いて作り始めなくてOKです＾＾

手順①｜目的・ゴールを決める

まず最初に考えるのは、
このバナーは何のために作るのか？という目的です。

たとえば、

そして、
「誰に向けたバナーなのか」も一緒に考えます。

これを、ターゲットと言います。

目的とターゲットが決まらないと、
デザインの方向性は決まりません。

Webデザインのお仕事では、
クライアントがここをはっきり決めていないことも多いです。

その場合は、
「どんな人に見てほしいですか？」
「最終的にどうしてほしいですか？」と、
一緒に整理してあげることも大切です。

ここまで考えられるようになると、
デザイナーとしての価値も、単価も、少しずつ上がっていきますよ＾＾

手順②｜入れる情報を整理する

次にやることは、
バナーに入れる情報を整理することです。

よくある失敗が、
「全部入れたくなってしまう」こと。

バナーは、とても小さなスペースです。

だからこそ、

このように、
情報に優先順位をつけることが大切です。

全部入れない勇気も、デザインには必要なんです。

文字が多すぎると、
結局、何も伝わらなくなってしまいます。

手順③｜ざっくりレイアウトを考える

次は、レイアウトを考えます。

ここでのポイントは、
いきなり作り込まないこと。

文字をどこに置くか、
画像はどこに入れるか、
視線がどんな順番で流れるか。

このあたりを、ざっくり決めます。

紙にペンで描いてもOKですし、
頭の中で整理するだけでも大丈夫です。

「上から順に読ませたいのか」
「一瞬で目に入る配置にしたいのか」
目的に合わせて考えてみてくださいね。

店長 しおん

ここを丁寧にやるだけで、後のデザイン作業がぐっと楽になりますよ

手順④｜ツールでデザインを作る

レイアウトが決まったら、
いよいよツールを使ってデザインを作っていきます。

バナー制作でよく使われるツールは、主にこの2つです。

初心者さんの場合、
どちらから始めてもOKです＾＾

Canvaで作る場合

Canvaは、テンプレートが豊富で、
直感的に操作できるのが特徴です。

「まずはデザインに触れてみたい」
「無料で試したい」
という方には、とても向いています。

Adobeで作る場合

副業としてしっかり稼いでいきたい場合は、
Adobe（Photoshop / Illustrator）を使えるようになるのがおすすめです。

案件数・単価ともに、
Adobe指定のほうが多いのが現実です。

私は、普段の仕事では
Illustratorをメインに使ってバナーを作っています。

フォントは、
明朝体かゴシック体かを目的に合わせて選び、

色も、
「なんとなく」ではなく、
与えたい印象を意識して決めます。

「CanvaとAdobe、どっちを使うべき？」と迷っている方は、
こちらの記事も参考になりますよ。

あわせて読みたい

CanvaとAdobeはどっちを使うべき？初心者が迷わないデザインソフトの選び方をやさしく解説

手順⑤｜見直し・整えで差がつくポイント

デザインが一通りできたら、
必ず見直しをしましょう。

ここで差がつくポイントは、次のようなところです。

特に初心者さんは、
文字間・行間・余白を少し広めに取ると、
ぐっと見やすくなります。

基本は、
縦と横をきれいに揃えること。

ガイドや整列機能を使って、
きっちり揃えてあげましょう。

時間があれば、
一晩置いてから見直すのもおすすめです。

翌日見ると、
「あ、ここ読みにくいな」と気づけることがよくあります。

初心者さんによくある失敗例

ここで、よくある失敗例も知っておきましょう。

また、余白についても注意が必要です。

余白はあってOKですが、
意味のない余白はNGです。

「なんとなく余ってしまった」ではなく、
「ここはスッキリ見せたいから、この余白を取っている」
と説明できることが大切です。

店長 しおん

失敗しても大丈夫ですよ。むしろ、失敗しながら覚えるのがいちばん早いです

しおん店長の体験談｜私も最初は全然できませんでした

私も、最初からバナーが作れたわけではありません。

デザインが苦手で、
「向いてないんじゃないか…」
と思ったことも、何度もあります。

特にバナーは苦手でした。

会社では、
先輩や上司から何度もやり直しを言われ、
正直、つらかったです。

でも、
作っては直し、
また作っては直し、を繰り返すうちに、

少しずつ「こうすればいいんだ」という感覚がつかめてきました。

そのときに感じたのが、
上手くなる前に、まず慣れることが大事だということです。

たくさん見て、
真似して、
作ってみる。

これを繰り返すことで、
ちゃんと作れるようになります＾＾

バナー制作は「練習と副業」がつながりやすい

バナー制作は、
練習と副業がとてもつながりやすい分野です。

「まずは自分用に作ってみる」
「架空の案件を想定して作ってみる」

それだけでも、
立派な練習になります。

小さな「できた」を積み重ねたい方は、
こちらの記事も参考になりますよ。

あわせて読みたい

まず触ってみよう！デザイン初心者が自信をつける「ちいさな成功体験」のつくり方

まとめ

バナー制作は、
手順を知れば、決して怖いものではありません。

まずは、
1枚、気軽に作ってみることから始めてみてください。

店長 しおん

うまくいかなくても大丈夫ですよ。作った分だけ、必ず前に進んでいます＾＾

デザインオンラインカフェ店長 しおん

Web & グラフィックデザイナー

Webデザインやグラフィックデザインをはじめて学ぶ方が、“むずかしい” より “楽しい” を感じられるように、やさしく丁寧に解説しています。これまでデザイナーとしてさまざまな制作に携わりながら、初心者の学習サポートや、デザインの基本を伝える活動を続けてきました。「副業としてデザインを始めたい」「基礎からゆっくり学びたい」そんな方が安心して学べる空間をつくっていきます。ゆっくりお茶を飲むような気持ちで、読んでいただけたら嬉しいです！