【HerTech架空案件】新商品の香水バナー

【デザインについて】

〇ビジュアルイメージ

「自分らしい香りに出会う」というコンセプトをもとに、上品で落ち着いた雰囲気を意識して制作しました。

フレグランスは目に見えない商品だからこそ、写真や余白を活かして香りの繊細さや透明感が伝わるように工夫しています。また、余計な装飾を減らすことで商品写真を引き立て、ブランドの世界観が伝わるデザインを目指しました。

〇カラー

全体的にやわらかく落ち着いた色味でまとめることで、フレグランスブランドらしい上質な印象を表現しました。

ベースカラーには明るいグレーを使用し、清潔感とやさしい雰囲気を演出しています。文字やボタンには落ち着いたグレーを使用することで、読みやすさと高級感の両立を意識しました。また、アクセントとして淡いピンクベージュを取り入れ、女性らしいやわらかな印象をプラスしています。

〇タイポグラフィ

メインタイトルには高級感のあるセリフ体を使用し、ブランドの世界観が伝わるようにしました。

一方で、日本語部分は読みやすさを重視し、シンプルなフォントを選んでいます。タイトル・キャッチコピー・補足情報のサイズにメリハリをつけることで、ユーザーが自然に情報を読み進められるよう工夫しました。

〇情報設計

情報量が多くなりすぎないように意識しながら、必要な情報をわかりやすく整理しました。

まず商品写真とキャッチコピーで興味を持ってもらい、その後に商品の魅力が伝わる説明文を配置しています。また、「送料無料」「包装無料」「初回特典」「天然由来95％」といった購入の後押しになる情報をまとめて配置し、安心感を持ってもらえるようにしました。

最後にCTAボタンを配置することで、商品一覧ページへ自然に移動できる流れを意識しています。

【工夫したポイント】

① 世界観が伝わるように余白を意識したこと

フレグランス商品の上品なイメージを表現するため、要素を詰め込みすぎず、余白を多めに取りました。

情報を整理して配置することで窮屈な印象を避け、商品の魅力やブランドの世界観が伝わりやすくなるよう工夫しました。

② 視線の流れを意識したレイアウト

ユーザーが自然に情報を読み進められるよう、商品写真からキャッチコピー、補足情報、CTAボタンへと視線が流れるレイアウトを意識しました。

特にキャッチコピーは写真の近くに配置し、最初にブランドの魅力が伝わるようにしています。

③ 情報の優先順位を明確にしたこと

限られたスペースの中でも情報が伝わるよう、重要度に合わせて文字の大きさや配置を調整しました。

まずキャッチコピーで興味を引き、その後に補足情報や購入メリットを読んでもらえるようにすることで、情報が整理されて見えるよう工夫しています。

④ ブランドイメージに合う配色を選んだこと

商品の魅力を引き立てるため、全体を落ち着いた色味で統一しました。

派手な色は使わず、やわらかいグレーやピンクベージュを中心にすることで、フレグランスブランドらしい上質でやさしい印象を表現しています。

⑤ CTAボタンを目立たせたこと

全体のデザインになじませながらも、最後に行動を促せるようCTAボタンの視認性を意識しました。

文字や余白とのバランスを調整し、自然に目に入るよう工夫することで、商品ページへの導線をわかりやすくしています。