【自主制作】冬限定一口チョコのバナー

＜制作日＞2025.10月制作

＜制作期間＞約5.5時間（7日間）

＜使用ツール＞Photoshop

＜設置場所＞自社ECサイトのサイドメニュー

■目次

　① 制作バナー

　② 制作テーマについて

　③ 情報設計 / デザインのポイント

①制作バナー

②制作テーマについて

＊テーマについては以下よりお借りしております。

・作成者：こばやす　Webデザイナー｜HTML＆CSS本出版（@kobayas_s）

・お題URL：https://note.com/kobayas/n/n7454d1ec9b95?magazine_key=m3e73ae9c2748

③情報設計・企画内容 / デザインのポイント

＊情報設計

・日付、割引率は下部にまとめ、必要な情報が一度に目に入るよう配置。

・重要情報として、商品名はサイズを大きくする、「冬季限定」は左上に配置するなどして最初に目に入るように配置した。

＊テーマ

・冬限定一口チョコ。普段高いが今だけ割引価格で販売。

＊ターゲット

・年齢：20代～40代

・性別：男女

・職業：会社員、自営業などの社会人。年収400～600万円の中所得者層。

・ライフスタイル：

都市部在住、コーヒーのお供やデザート、プレゼントでチョコレートを購入することが多い。高級チョコレートはバレンタイなどのイベントの際にしか購入しない。

・悩み：

高級チョコレートは贅沢品。自分用に買うには高価なものが多く、食べたいとは思いつつも安価なもので済ませる。贈答用にレパートリーを増やしたい。購入前に自分で味見して美味しかったものを渡したい。

＊デザインのポイント

⚫︎構成

・スペック情報を下部の帯に集中させ、視線を運びやすいように配置した。

・「冬季限定」は目立たせたいため、背景に白のぼかしを入れて目に留まるよう配置。

・「ちょっと一息。贅沢をお裾分け」は、縦書きにして高級感を演出した。

⚫︎画像

・チョコレートの質感が伝わる、素材アップの画像を使用。

・お皿の縁が画面の境界線となり、コピーとチョコレートを分離することで、よりチョコレートを際立たせている。

・他のチョコレートを見切れさせることで、「他にもあるのかな」という興味を持ってもらう。

⚫︎カラー

・画面全体で青・茶系使用することで統一感を演出。

・帯部分の文字にはゴールドを使用し、高級感を表現。

・帯の背景と文字色の明暗差を大きくつけ、視認性を高めた。

⚫︎フォント

・高級感・特別感を演出するため、明朝体・セリフ体を使用。

・文字間を広めに取ることで、高級感や冬の静けさを表現。

・バナーサイズが小さめのため、太めの文字を使用して可読性を確保。

⚫︎あしらい

・「ちょっと一息。贅沢をお裾分け」に白いぼかしの効果を使用し、背景との同化を防ぎ可読性を上げるとともに、雪や白い息などを連想させる「冬っぽさ」を演出。

・写真部分に雪の結晶を配置。ぼかした上で透明度とサイズを一つずつ調整することで、画面の奥行きを表現した。

・帯と画像の境界をぼかすことで、直線の強い印象を和らげた。また、お皿のザラザラした質感との繋がりを出し、帯部分と画像の一体感を高めた。