【自主制作】SNSキャンペーンバナートレース

OVERVIEW

SHElikes PROデザイナーの課題として実施。SNSキャンペーンバナーのトレースを通し、配色・情報設計・デザインの分析、資料の作成を行いました。【制作年月:2025.4/制作期間:1週間/制作時間:80分/使用ツール:Photoshop】

【目次】

  • トレース内容
  • 配色について
  • 観察と分析
  • 課題を通して学んだこと

◾️トレース内容

【トレースのポイント】

  • ガイドを使用し、フォントや画像サイズの他に、余白の位置も意識してトレースした。
  • 素材は元画像のものを使用するのではなく、できる限り近いものを探して切り抜き配置した。明度・彩度に関しても調整レイヤーを使用し、見本に近づけた。
  • フォント検索は、あらかじめフォントの特徴(Ex.縦長で細め)を押さえPhotoshopの機能にあるマッチフォントを利用することで、候補を絞り時間短縮させた。
  • 分析シートのターゲットには、より具体的になるよう年代や性別を入れて作成した。



◾️配色について

【配色分析のポイント】

  • それぞれの色が、色相環ではどこに位置してどんな関係性なのか、色によってどんな印象を与えるのかを考えながら分析した。
  • 色だけではなく明度・彩度も一緒に分析することで、ターゲットを絞りやすくなる。
  • テキストが多くなるため、ポイントとなる部分は下線を敷くことで見やすくなるよう配慮した。



◾️観察と分析

【観察と分析のポイント】

  • 分析する際に、情報設計とビジュアルデザインに分けて観察をした。
  • 各記載内容でポイントとなる箇所には下線を敷き、目線をいきやすくしている。
  • 観察項目ごとに、文章内の下線やバナーに誘導する線の配色を変えた。バナー内で使用されている色を使いまとめることで、全体的なまとまりを意識した。



◾️課題を通して学んだこと

今回のバナートレースを通して、最も伝えるべき情報(今回は“500“の部分)は思っている以上にジャンプ率をつけていると学びました。さらに数字の部分は、他の文章に比べてより分かりやすく、目立たせるようなフォントを選ぶと良いということも理解しました。テキストをまとめて配置することで、ユーザーの目線を迷わせることなく、アピールしたい情報を伝えられるのだということも学びました。

配色に関しては、3色でまとめることを意識し、商品画像の中に使われている色を使用すると全体にまとまりがでることも分かりました。テキストだけではなく、商品画像を入れることでユーザーはよりキャンペーン内容を理解しやすく、キャンペーン対してもアクションを起こすことへの後押しをする意図があるのではないかと考えました。

特に数字を出すことで訴求ポイントとするバナーを制作する際は、より目立たせて・分かりやすくユーザーに伝えることが重要だと考えるので、今後のデザイン活動でも今回の学びを活かしていきたいです。