【HerTech架空案件】スキンケアブランド新商品のバナー

【制作の流れ】

HerTechの架空案件でスキンケアブランド新商品のバナーを制作しました。

制作時間：3時間

情報設計、デザインまで担当

【デザイン】

●カラー

ベースカラー：肌をきれいに見せるラベンダー

メインカラー：透明感を表現するホワイト

アクセントカラー：明るい印象と女性らしさをプラスするピンク

●タイポグラフィ

メインには「Source Han Serif JP」を使用し、ターゲットの年代に合わせ、上品で洗練された印象に仕上げました。

商品情報とCTAボタンには「游ゴシック体」を使用し、視認性と親しみやすさを意識しました。

●情報設計

〈情報の優先順位設計〉

①キャッチコピー

最上部に最も大きく配置することで、スクロール中でもユーザーの目に留まりやすいよう設計しました。

また、文字の大きさにメリハリを付けることで、キャッチコピーの内容を直感的に捉えられるよう意識しました。

「光を味方」の文字には光を感じられるようなグラデーションを使用し、「光を味方にする」というメッセージを視覚的に補強しました。

②サブコピー

「トーンアップ効果で、ノーファンデでも美しく。」をキャッチコピーの直下に配置することで、キャッチコピーで興味を持ったユーザーに商品の具体的なメリットを伝え、商品への関心を高める構成としました。

「美容液成分80％配合」を水滴の中に配置することで、みずみずしさと透明感を表現しました。

③商品名

視線が上から下へ移動すると想定し、商品特徴を確認した後に商品名を認識できるよう配置しました。

④CTAボタン

右下に「今すぐチェック」のCTAボタンを配置し、商品に興味を持ったユーザーが、詳細ページへ自然に移れるよう設計しました。

【工夫したポイント】

①視覚的訴求

「日差しを連想させる光」と「透明感のある肌の女性」の素材を組み合わせ、日差しを連想させる明るい雰囲気と、肌が守られている安心感を表現しました。

UVクリームのテクスチャーの素材を、商品画像のそばに配置することで、実際に使用した際のイメージを持ちやすくなるよう工夫しました。

②補足情報の配置

「国内最高基準」「SPF50+」「PA++++」の情報を右下の余白に配置し、メインコピーや商品画像との視覚的な干渉を避けながら、UVケア商品の機能性を補足できるよう工夫しました。

③視線導線の最適化

キャッチコピー→商品特徴→商品名→CTAの順に配置し、視線が自然とCTAへ流れるよう導線を設計しました。