【実践課題】バナートレース＃２_化粧品プレゼントキャンペーン

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

制作物

制作過程

【STEP1】類似バナーの観察

見本バナーを上部の画像エリア、下部の文字エリアの2つに分け、各エリアがどのような表現となっているか類似バナーから観察した。

• 【上部エリア】背後から商品に光が当たっている様子を光と影で表現している。きらびやかで高級な印象を作り、商品を一層目立たせている。
• 【下部エリア】一列文字が複数行あるがそれぞれの文字サイズを変え、かつ縦線や囲み枠も取り入れることで乱雑にならずに情報を整頓し、読みやすさを担保している。

【STEP2】見本バナーの観察

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

【STEP3】トレース

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

• 商品画像下部の反射影は生成AIを使用し、効率的に制作した。
• バナー下部の「PRESENT」のアイコンはペンツールを使用し得意とする曲線表現スキルを活かした。
• 背景の塗りはグラデーションツールを使用し色調を微調整させ見本に近いグラデーションとなるようにした。

制作を通しての学び

• 今回のバナーから受けた『高級感』という印象を、あしらいだけでなく、配色、余白、フォントといった複数の要素を組み合わせて表現していることを学んだ。心理的印象を具体的なビジュアルデザインとして如何に表現するか、に奥深さとデザイン制作の醍醐味を感じた。
• 表現力を身に付けるために、あらゆるバナーを観察し、どのような意図でデザインしているかを自分の言葉で考え、引出しを増やしていくことが重要だと感じた。