• ホーム
  • » デザインの学校 ウェブデザイン応用編 バナー制作のコツ

デザインの学校 ウェブデザイン応用編 バナー制作のコツ

皆さんこんにちは 今回のWEB応用ではバナーの制作のコツについて解説していきます。

バナーはウェブ上での広告、宣伝に使われる重要なアイコンです。そのため何よりも目立たせ、サイトにやってきた訪問者の目に留まるようデザインするのが必要となります。

制作する前に少しバナーのサイズについてふれておきましょう。
普段様々なバナーを目にすると思いますが、これらのバナーはある程度サイズが決まっています。
その中から、下に代表的なサイズをあげてみました。
用途やレイアウトに応じてどんなサイズが良いのかまず考えることが大事ですね。

では、先日の授業で制作されたバナーをご覧ください。

完成図

写真、図形、文字を様々な配色で配置してありますね。1つ1つ解説していきましょう。

◎写真
ここでの写真はドロップシャドウで効果を付けてあります。ここでの設定値は数値順に7/20/7/ー(変更せず)です。これにより写真により立体感を持たせる事が出来ます。 写真はバナーに限らず、人の目に留まりやすいものです。拡大して他の図形や文字とは区別をつける、左側など文字を読み始める所に配置するなど、人の視線を意識した配置を考えましょう。

◎図形
四角や円、三角などの基本形以外の図形も積極的に使用しましょう。線ツールで描いた太線から作れるマーカー線、星形ツールから作る事の出来るイガグリ型の図形などはその一例です。
バナー内容に沿った図形を使うよう心がけましょう。スキルアップ、能力向上といった内容であれば上向きの矢印を使うといった具合です。これらを文字と組み合わせる事で、このバナーが何を宣伝しているのか、その内容を?みやすくなります。
またここで使われているTwitterやFacebookのアイコンは、無料で使える素材として公開されているものです。有名なのは海外サイトのiconspediaなどです。

◎文字
広告の中でも特に強調したい文章は、テキストツールで1文をそのまま入力するのではなく文字にリズム感をつけて、目立たせていきましょう。
まず、「ソーシャル時代」と「攻略セミナー」の部分は変形を使い、文字を斜めにしてみましょう。少し角度がつくことで、右上がりに上昇するような印象がつきました。
「!」などの記号も単体で入力する事で、より文章に馴染みやすいよう加工する事が出来、これにより文字の表現の幅が大きく広がります。
また一つ一つの文字の大きさを変えることでリズム感をつけています。
次に「SNS」の部分です。それぞれ文字をうって、今度が右下がりに配置しました。
英語や数字は英語圏のフォントであるArial、Arial Blackなどがより綺麗に表現できます。
全体的に全て右上がりではなく緩急のついた目立つものになりましたね。

◎配色
使用する色はできるだけ統一させましょう。あまりにも別系統の色を混ぜ込んでしまうと、あまり目にしたくないデザインになってしまいます。色相環の補色の関係を意識し、目立ちながらも目に優しいそんな配色を作っていきましょう。 どうしても配色で悩む、という方は専門書やネット上にある配色見本を参考にすると良いでしょう。また日頃から様々な所にある広告や景色を見ては、その配色をインプットしてデザインに活かせるようにしておきましょう。

バナーはどれだけ人の目を引く事が出来、内容を読んでもらうかが重要です。 皆さんも様々な工夫を凝らして、より人目を集める広告作りを目指してください。


  • デザインでお困りの企業様
  • 人材や教育でお困りの企業様