【実践課題】バナートレース#3_ドリンクメニューの告知

OVERVIEW

SHElikes PRO Designerの実践課題として実施。バナー全体を観察しターゲット・目的・ビジュアルデザインを分析のうえトレースした。講師から複数回フィードバックを受けPhotoshopの基礎操作だけでなくWebデザイン固有の表現方法や特徴への理解も深めた。

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


制作物


制作過程

【STEP1】類似バナーの観察

見本バナーと類似した構成と雰囲気を持つ類似バナーを選定し、どのような特徴があるかを観察した(引用元:https://www.gourmetbiz.net/161805/ )。

  • 果物の『苺』から連想されるピンク色や柔らかな印象をあしらいや配色、フォントで表現している。バナー全体でトンマナが統一されており、まとまりがある。

【STEP2】見本バナーの観察

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


【STEP3】トレース

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

  • 複数の苺の画像は1つづつ切り抜き、見本に近づくよう色調補正を施し、反転・回転させて配置した。
  • バナー右上の苺の装飾はペンツールを使用し、得意とする曲線表現スキルを活かした。


制作を通しての学び

  • ユーザーがバナーを一目しただけで『なにを伝えているのか』が理解できるよう、情報やレイアウトを設計することが重要かつバナー制作で最も留意すべき点だと感じた。
  • アイキャッチやアクセントカラーを効果的に使い”印象に残させる”ことも重要だと感じた。制作の意図を的確に理解したうえで、最終的にユーザーに取ってもらいたいアクションを明確に決めて制作したいと感じた。