【デザイン研究所が教える】初心者でもプロっぽくなる広告バナーデザインで重要な3つのコツ

どう頑張っても初心者感が出てしまう……
なかなかクライアントが満足できるデザインが作れない……

初心者Webデザイナーの中には、このような悩みを抱えている方が多いのではないでしょうか。

この記事では、SNS総フォロワー47万人以上を誇るデザインメディア「デザイン研究所」さんによるバナー添削をもとに、プロっぽく見えるデザインのコツを解説します。

初心者デザインからの脱却を目指したい方は、ぜひ参考にしてください。

■動画で内容を確認したい方はこちら!
デザ研さん
【講師プロフィール】
デザイン研究所さん(@designkenkyujo
デザイナーからノンデザイナーまでに、役立つデザインポイントをわかりやすく解説するメディア。SNS は総フォロワー数47万人以上を誇り、デザインジャンルでは日本最大級。2023年には初の著書となる「デザインのミカタ」を出版し、発売後に即大重版・Amazon総合1位(2023/8/2)を獲得。

元のデザインとプロによる添削後のバナーを確認!

はじめに添削前のバナーデザインと、添削後のバナーデザインを比較してみましょう。

添削後のほうがプロっぽいデザインになっていることがわかりますね。

どのような点を意識して添削したのかについては、次項で解説します。

デザイン研究所が教える!広告バナーデザインで重要な3つのコツ

広告バナーのクオリティを上げるためには、次の3つが重要です。

  1. タイトルデザイン
  2. 日付デザイン
  3. 使用する写真

それぞれにおけるコツをご紹介します。

1. タイトルデザインのコツ

広告バナーにおいて、タイトルのデザインは視認性や印象を大きく左右する重要な要素です。

タイトルはバナーの「顔」となる部分であり、特に初心者のデザインではここでつまずくことが多く見られます。

デザ研さん
今回のデザインは、フォントをいろいろと工夫した結果、逆に初心者っぽさが出てしまっている印象でした。
もっとシンプルにすることで、クオリティを高めていきましょう!

タイトルをロゴっぽく見せる

イベントに公式ロゴがある場合は、そのまま活用すると統一感が生まれます。

もしロゴがない場合でも、タイトルをデザイン的に処理すると、ロゴ風の視覚的なまとまりを作ることが可能です。

また、タイトルに使うフォントの選び方も重要です。

特殊なフォントは初心者には扱いが難しいこともありますが、ロゴ風のデザインを作る際には効果的に使用できます。

デザ研さん
焚き火に使う薪っぽさが出ると感じたので、「Frultur」という太めのフォントを使用してみました。

レイアウトを工夫する

タイトルのレイアウトも、デザインの完成度に関わる大きな要素の一つです。

添削前は、左右の余白が狭いことが初心者ぽさを感じさせる要因となっていました。

そこで添削では、3行の中央揃えにして左右のバランスを整えています。

「vol.2」だけ右に置いてしまうとバランスが悪くなるため、会場名を左に配置することで中央揃え感を出しています。

デザ研さん
左右にバランスよく配置することで、簡単に整った印象につながります。
ぜひ困ったときは意識してみてください!

2. 日付デザインのコツ

日付のデザインは「日付だけ」で完結させることがポイントです。

添削では、次の部分を工夫してデザインを作りました。

  • 文字の組み方を工夫する
  • 括弧を使用しない形にする
  • 曜日表記を90度回転させる
  • OPENとCLOSEを追加する
  • 文字の色をグレーから白色に変える

細かな工夫がデザインのクオリティを高めていることが伝わります。

デザ研さん
バナーはタイトルや日付など複数のデザインの集合体です。
それぞれのデザインを作り込むことで全体のクオリティが上がる」ということを意識しましょう!

3. 使用する写真のコツ

写真はバナーの大部分を占めるため、特にバナーの印象に影響を与えます。

そのため、写真の選び方や加工の仕方は特に工夫しましょう。

写真の選び方

写真を選ぶ際は、イベントの雰囲気がしっかりと伝わるものを選びましょう。

たとえば、焚き火のイベントを紹介する場合、単なる焚き火の写真ではなく、人々が楽しんでいる様子が写っている写真のほうが、より温かみや楽しさを伝えられます。

上記画像のように候補となる写真を複数用意し、並べて比較しながら最もイベントの雰囲気に合うものを選択するのも効果的です。

さらに、テキストとのバランスも考慮する必要があります。

背景の写真が強すぎると、タイトルや日付などの重要な情報が読みづらくなってしまうため、配置や加工を工夫しましょう。

写真加工のテクニック

テキストと写真の色合いが似ていて読みづらさがある場合、黒や暗めの半透明レイヤーを追加することで改善できます。

また、バナー全体の統一感を持たせるために、写真の色調補正を行い、全体の色味を調整することも重要です。

デザ研さん
写真に頼ることは初心者にとってクオリティを上げる重要なポイントです。
写真は読まなくても見るだけで内容がわかるほどビジュアルの訴求力が強いので、うまく活用しましょう!

まとめ:各要素のデザインを作り込むとバナー全体のクオリティは上がる!

広告バナーは、タイトルや日付など複数のデザインの集合体です。

そのため、それぞれのデザインを作り込むことで、バナー全体のクオリティもおのずと上がります。

特に初心者の方は、まずシンプルなデザインを意識し、フォントやレイアウトの基本を押さえることから始めてみましょう。

ぜひ、今回紹介したコツを実践して、成果の出るバナーデザインを作成してみてください!

未経験からWebデザイナーを目指すならデイトラがおすすめ!

東京フリーランスは、Webデザインを仕事にする本格スキルを学べる”デイトラ”を運営しています。

デイトラWebデザインコースでは、「理論」「言語化」「実践」を積み重ねてデザインスキルを習得できるカリキュラムが揃っています!

デザインの学習で難しいのは、自分が作ったものが良い作品なのかが判断できないこと。その悩みを解決するために、デイトラWebデザインコースには現役デザイナーから直接指導が受けられる添削課題があります。

独学では得られないプロの着眼点を知れるので、デザインスキルをぐんぐんレベルアップできますよ。

▲プロによる添削でデザインスキルを上げられる!

また、デイトラWebデザインコースは、随時教材をアップデート!一度受講したら追加された講座も無料で閲覧できるので、デザインスキルもどんどんアップデートし続けられる最高の学習環境を提供しています。

未経験からWebデザイナーを目指す方は、ぜひデイトラWebデザインコースをチェックしてみてください!

【Webスキル診断】“一生使えるスキル”を60秒で診断しよう!

「フリーランスになりたいけど、どんなスキルを身につければいいかわからない」という悩みを解決すべく、東京フリーランスでは【Webスキル診断】をLINEで無料実施中です! Web制作・Webデザイン・アプリ開発・動画編集など「自分に合った理想の働き方は何か」を見極めていただけます。

フリーランス全般カテゴリの最新記事