Facebook 【Her Tech 架空案件】日焼け止めバナー
Logo

【Her Tech 架空案件】日焼け止めバナー

クレジット
Avatar
WEBデザイナー
【Her Tech 架空案件】日焼け止めバナー-1
シェア
制作ノート
制作について

【デザインについて】

・ビジュアルイメージ

クライアント様からの「光のヴェール」と「瑞々しい透明感」というキーワードから、背景に柔らかなグラデーションと光を表現するあしらいを使用。また、シャボン玉のようなツヤ感のある円形を使用し「瑞々しい透明感」を表現。商品情報をまとめ一目で複数の悩みを解決しながら日焼け対策ができるという情報のわかりやすさを両立しました。さらに、淡いトーンでまとめつつも、文字の可読性を損なわないよう、あしらいの透明度や重なりを数ピクセル単位で微調整しました。

・カラー

メインカラーには淡いピンクを使用し、女性らしさと肌に優しいイメージを表現。背景には、外側に向かって白色が強くなるグラデーションを施し、商品を使用した際の「肌のトーンアップ」を視覚的に表現しました。

・タイポグラフィ

フォントは、「Source Han Serif JP」をメインに使用し、肌が守られているような安心感や信頼感を表現。対照的に、CTAボタンには、心理障壁を軽減し購入ページに進んでもらえるよう丸みのある「やさしさゴシック」を使用しました。また、フォントサイズに強弱をつけ、情報の優先順位を明確化し、視認性を保ちつつ必要な情報が伝わる構成にしました。

・情報設計

どの世代の方も「安心感」や「信頼感」が持てるよう、余白を取り洗練されたデザインを意識しました。また、紫外線対策だけではなくターゲットが抱える複数の悩みをこの一本で解決できることが、一目で伝わるようレイアウトをしました。

【工夫した点】

光のあしらいに対して商品画像に影を入れることで、商品画像を目立たせつつ、紫外線から肌が守られるということを表現しました。また、新商品だが信頼感を出すためにロゴを左上に配置しました。さらに、バナーを見た人が「どんな商品なのかもっと知りたい」と興味を惹き、流れでCTAボタンが押せるよう商品名と並べて配置しました。

シェア
foriio

あなたのforiioを無料で作成

fori.io/