バナーを模写してみよう

バナーとは

サムネイル画像と用途は同じだが、よりサイズが大きくなる。また、求められるバナーサイズは案件ごとに異なるため、柔軟に対応しよう。

▼バナー作成で用いられるツール
バナー作成時は写真加工が非常に多いため、Photoshopを使用することが多い。

▼バナー研究
どんなバナーが売れるのか？　他人が作成したバナーを研究することが大切。また、バナー作成の練習には模写が有効。情報構成の模写とPhotoshopの操作技術の模写を意識する。
レイアウト（余白・グループ化・アクセント）、フォント（文字の読みやすさ）、配色（読みやすさを維持しつつ、作品の世界観を守れているか）を意識してバナーの模写を行おう

▼バナー模写の流れ（情報構成の模写）

1. バナーの構成を見る
   →バナーのサイズ、縦長か？横長か？
   →バナーを構成するパーツを把握する（文字情報の数：タイトル、キャッチコピー、期間、送料無料など）
2. バナーの入口と出口を考える
   →バナーの入口（出現す場所）
   →バナーの出口（目的）：商品を購入させることが目的。そのためにはいつまでに申し込まなければいけないのか、送料は無料なのか等の情報が必要
3. 何が一番伝えたいのか考える（情報の優先度）
   【タイトル】 ＞ 目的【期間・送料無料】 ＞ デザイン要素【キャッチコピー】

▼バナー１個にかけられる時間
１時間以内に１個作成しよう。１時間以上かけて制作すると目が慣れてしまうので、時間をかけてはいけない。バナー作成に１時間以上かかると予算をオーバーし、技術力の無いデザイナーと認識されることも。（就職時の技術テストの制限時間も１時間のことが多い）

１時間以内に作成できる写真加工技術、レイアウトデザインを用いよう。

サイト利用者がバナーを認識する時間は0.7秒。
バナーは興味が無い人にとっては無いものと同じ。デザインを凝りすぎるのは、手間に対して効果が薄いということをしっかり理解しよう。

作成のポイント

レイアウト

まずは、それぞれの面積を意識しよう。面積が大きいほどメッセージ性が大きくなる。

▼余白
ホワイトスペースとよばれる何も配置していない部分のこと。
ゆとりを持って配置すると見やすくなる。余白が美しければ、作品も美しくなる。

• 作品の周りに余白を取る：余白が多いほどオシャレな印象
• 各項目の周りにも余白を取る：見出しと内容の差が付く
• 枠の中は窮屈にしない

▼配置した内容のグループ化
関連の強い文章と写真同士を近くに配置する。

• 近接：関連する項目をまとめてグループ化する際に、それぞれのグループ間の距離を少し大きめに取る
• 整列
• 反復：フォント、罫線、色、アイコンなどを統一する

▼アクセント
目立たせるための表現方法。

• コントラスト：情報の優先度を考慮し、重要な要素はより目立たせる
• ジャンプ率を変える：本文の文字サイズに対するタイトルや見出しの文字サイズの比率のこと。
  ジャンプ率が低いと落ち着いた印象になり、ジャンプ率が高いと躍動感のある印象になる
• アイキャッチ：可読性を損なわずに、一瞬で人の目を捉えるための素材のこと（イラスト、写真、吹き出し、太文字）

文字

以下のポイントをしっかり押さえよう。

• 可読性：文章が読みやすいか
• 視認性：パッと見た瞬間の認識しやすさ
• 判読性：誤読がないか

配色

色でデザインの邪魔をしない。
また、以下のポイントをしっかり押さえよう。

• CMYK（印刷物）とRGB（Web）では色数が大きく異なる
• 「陰影」として表現するのか「柄」として表現するのか
• グラデーションの使い方に注意。安易なグラデーションは違和感でしかない。

模写紹介

• 制作時間：1時間30分
• 使用ツール：Photoshop
• サイズ：800×410ピクセル
• 感想：【290】の光が照っている効果の付け方が分からなかった。また、【ビール】の文字をレイヤースタイルの境界線で太らせたところ、文字がつぶれてしまった。