Internship Blog June 2017

インターンシップ生ブログ

未分類

バナー作成のコツ

投稿日:2017年6月7日 更新日:

こんにちは。MIYAです。
実習4日目。本日の実習では、バナーのトレース作業を行いました。

ちなみに、これが本日トレースした作品の1つです。

1つのバナーの中には沢山の情報が詰め込まれています。これらの情報をいかに分かりやすくデザインするか、なかなか難しいです。そこで本日は、バナーを作成する時のコツについてご紹介いたします。

そもそもバナーの役割とは

WebサイトやSNSのタイムライン、スマートフォンのアプリ等様々なところで見かけるバナー(Banner)ですが、直訳すると「旗」「のぼり」という意味だそうです。

その名の通り、バナーは、Webサイト上で宣伝を行うために作られた「のぼり」です。見る人の興味を引き付けて、クリックしてもらい、広告サイトへと誘導すること。これがバナーの役割です。

バナー作成のコツ

バナーのサイズは様々です。バナーの大きさ、Webサイト上のどこに配置するかによってバナーの掲載費用が変わってきます。そういった限られた条件でいかにいかに魅力的な広告をデザインするかが、バナー作成の技の見せどころです。

また、バナー1つの制作単価は低価格であるため、短時間で仕上げる技量も求められます。バナー1つ作るのに1時間弱というのが一般的な感覚なようです。

では、バナーを作成する際にデザインに迷う時間を減らすために、考え方のコツをご紹介します。

1.配置を揃える

バナーの中には、テキストやイラスト、写真等様々な要素が組み合わさっています。それらの要素を配置する際に、揃えられるものは揃えて配置すると美しく見えます。

まず、バナー作成時には、バナーサイズの枠に縦と横方向の補助線を引き、全体のバランスを見ます。これを基に、さらに補助線を付け加えながら、囲われた空間に対して要素を左揃え、中央揃え、右揃えにするか考えながら配置していきます。

2.余白をとる

バナーは小さく限られたサイズではありますが、余白をきちんと取り入れることで、窮屈感がく見やすいデザインとなります。枠の周囲や、文字、図との間にも余白を取り入れることを考えて見ましょう。

3.強弱を付ける

バナーに掲載する情報の中で一番見て欲しいところはどこなのか、デザインする要素の重要度を決めて、表示の仕方に強弱を付けることが重要です。これにより、読み手側に重要な情報が一目で伝わるようになります。

色んなバナーデザインを見て勉強しよう

バナーの作成スキルをアップさせるためには、色んな方々が作成したバナーを沢山見ることが有効です。色んなバナーを集めている参考サイトを2つご紹介します。

・バナーデザイン専門ギャラリーサイト「レトロバナー」
http://retrobanner.net/

バナーのサイズ、色、業種、テイストからバナーを絞り込む事ができとても見やすいです。

・バナーデザインギャラリー「Banner Design Gallery」

http://www.banner-design-gallery.com/

カテゴリー別に絞り込むこともでき、さらに人気順、新着順に表示することもできます。

デザインのパターンを覚えよう

バナートレースによって沢山のバナーを作成し、参考サイトで色んなデザインを見ていくことでバナーデザインのパターンが見えてくるそうです。

私もその域に達することができるよう、これからも特訓していきたいと思います!

-未分類

執筆者:


comment

関連記事

読み手に伝わるブログの書き方

こんにちは。MIYAです。 インターン2日目の今日は、ブログの書き方についてご紹介したいと思います。 今回は、インターンブログを書く初日にふたっぱの方に教えていただいたこと、自分自身が勉強したこと等を …

人物写真をデッサン風に加工する方法

こんにちは。MIYAです。 実習15日目。今週もWebサイトのパーツをゴリゴリ作成しております。 今回は、Photoshopを使って人物写真をデッサン風にアレンジする方法をご紹介します。 ちなみに、も …

自己紹介

はじめまして、北野と申します。 本日より、株式会社ふたっぱ様にて実習生としてお世話になります。 実習生といいましても、年季が入っておりまして、サイトってなに?サーバーってなに?と、そもそもからはじめな …

パーツがいっぱい

こんにちは、北野です。 実習7日目です。   今日からは、パーツの作成です。 グローバルナビゲーションや、ボタン、アイコンなどなど、サイトを構成するいろいろなパーツです。   &n …

Photoshopでキラキラ効果を作る方法

こんにちは。MIYAです。 実習8日目。本日は、Webサイトで使う、見出しやグローバルナビゲーション、リンクボタン等のパーツデザインの作成をしました。大物から小物まで様々ですが、その中で作成した1つが …