【HerTech 架空案件】Instgram用毛穴美容液バナー

クレジット

菅原未里那

WEBデザイナー

制作ノート

制作について

【デザインについて】

⚫︎ビジュアルイメージ

淡いブルーの背景と水滴のモチーフにより、みずみずしさやうるおい、肌にすっと浸透するような使用感をイメージさせています。全体にやわらかいトーンでまとめることで、肌へのやさしさや安心感も伝えています。

中央の美容液ボトルはシンプルに配置し、余白を活かすことで洗練された印象に。

⚫︎カラー

ベースカラーは、「水」「潤い」「清潔」を表すライトブルー。スキンケア、特に「毛穴ケア」においてユーザーが求めるのは「汚れが落ちて清らかになること」と「肌が潤うこと」です。

背景の淡い水色と気泡のモチーフを合わせることで、商品を使った後の「みずみずしさ」や「透明感のある肌」を視覚的に見せています。

メインカラーは、誠実、知性、信頼を表すネイビーブルー。毛穴ケアという悩みに対して、「なんとなく良さそう」ではなく「効果が期待できる、しっかりとした製品である」という説得力を文字色から補完しています。

アクセントカラーは、「希望」「明るさ」を表すイエロー。水色の補色に近い関係にあるため、目立ちます。

毛穴の悩みという「暗い」トピックに対し、解決策である「成分」や「価格メリット」を明るい黄色で囲むことで、「これを使えば肌が明るくなる」というポジティブな期待感を抱かせます。最も重要な「50%OFF」や「購入ボタン」に配置することで、ユーザーの視線を迷わせず、最終的なアクション（クリック）へ自然に導いています。

⚫︎タイポグラフィ

フォントにはSource Han Serif JPを使用し、繊細でやわらかな印象を演出。余白を活かしたゆったりとした文字組みにすることで、落ち着きと信頼感を感じさせています。

また、「50%OFF」や「3ヶ月間半額」などの重要な訴求はサイズや太さでメリハリをつけ、視線を集める工夫をしています。可読性と世界観のバランスを取りながら、上品で統一感のあるタイポグラフィに仕上げています。

⚫︎情報設計

まず上部にキャッチコピー「毛穴悩みに、集中アプローチ。」を配置し、商品の目的を一瞬で理解できるようにしています。シンプルで余白を活かした配置にすることで、清潔感と信頼感を演出しています。

中央には商品ビジュアルを大きく配置し、最も伝えたい“商品そのもの”に視線が集まる構成に。周囲に「NEW」や「成分配合」などの補足情報を配置することで、自然な流れで特徴を理解できるようにしています。

右側には「50%OFF」の訴求を目立つ形で配置し、視覚的に強く印象づけることで購買意欲を喚起。さらに下部には「3ヶ月間半額」の情報を置き、継続利用のメリットも伝えています。

最後に誘導ボタンを最下部に配置し、情報理解の後にスムーズに「購入」という行動へつなげる導線設計になっています。

【工夫したポイント】

まず、淡いブルーと余白を活かしたレイアウトにすることで、スキンケアらしい「透明感」や「信頼感」を演出しています。情報量は多めですが、要素ごとに間隔をしっかり取ることで、圧迫感が出ないように調整しています。

また、商品を中央に配置しつつ、「NEW」「成分配合」「割引」といった情報を周囲に分散させることで、視線が自然に流れながら特徴を理解できる構成にしています。

さらに、「50%OFF」や「3ヶ月間半額」はイエローのあしらいで目立たせ、他の要素よりも視認性を高めることで、価格訴求がしっかり伝わるよう工夫しています。