【実践課題】バナートレース＃１_SNSキャンペーン

• 制作時間：2時間
• 制作範囲：Webバナートレース
• 制作ツール：Photoshop

制作物

制作過程

【STEP1】類似バナーの観察

見本バナー以外で、「中央に数字が大きく配置」・「文字が多く印象的な写真を使用」されている類似バナー（引用元：https://www.kagome.co.jp/campaign/ysline/ ）を選定し、同類のバナーでよく使われているデザイン特徴を観察した。

• 一番目立たせたい文字を全面積の1／3程度と広く使用して印象を強めている。
• 文字量が多い場合は情報に優先順位を明確につけている。例えば『月日』の中でも日付は月よりジャンプ率を2倍以上高め、一文字毎に意図を持ってレイアウトしている。
  

【STEP2】見本バナーの観察

このバナーのターゲット・目的は何か、全体のレイアウト・情報設計はどのようにされているか、使用しているフォント・文字サイズ・写真やあしらいの使い方・加工の仕方・配色はどのようにしているか、について観察し言語化した。

【STEP3】トレース

STEP2までに理解した内容を頭に置きながら、見本バナーをなぞる形でトレースした。トレースするうえで工夫した点は以下となる。

• 背景右上・左下に配置されているあしらいをペンツールを使って自作したことで曲線表現のスキルを向上させた。
• 左下商品写真は見本と近いものをパーツ毎に探し、切り抜き・組み合わせて再現した。得意である色彩感度を活かながらカラーバランスを調整し見本に近づけた。
• フォントはPhotoshopのマッチフォント機能を使用し極力近いものを探した。

制作を通しての学び

• 最も伝えたい要素（今回のバナーだと『500』の文字）については、自分が想定していた以上に大きくするくらいが適切（このくらい大きくすることで印象に残る）ことを学んだ。
• 商材（今回は青汁）の色調に合わせて配色やあしらいを選定することで、バナー全体にまとまりがでることを学んだ。