Facebook 【HarTech架空案件】ヘアオイルバナー
Logo

【HarTech架空案件】ヘアオイルバナー

クレジット
Avatar
webデザイナー
【HarTech架空案件】ヘアオイルバナー-1
シェア
制作ノート
制作について

【ビジュアルイメージ】

ヘアケアをテーマに、ヘアオイルの持つ“ツヤ・軽さ・透明感”を視覚的に表現し上質でありながら気取らない世界観を構築しました。光が透けるような柔らかいグラデーションと、ヘアオイルがもたらす「まとまり」「潤い」「軽やかさ」を視覚的に訴求しました。余白を活かしたゆったりとしたレイアウトは、ヘアケア時間を“自分を整える小さなリチュアル”として捉えた上品さを演出しました。

【カラー】

● メインカラー:【くすみオレンジ】 髪に自然な光を宿すヘアオイルのイメージと調和するように、温かみのある色を採用。高級感と“髪がふわっと光る質感”を同時に表現している。

● アクセントカラー:【くすみブラウン】 芯の強さ・綺麗な髪を表すカラーとして設定。視覚的なやさしさを加えることで、ターゲットが抱えるヘアダメージへの不安を和らげる役割を担う。

● ベースカラー:【ライトオレンジ】 清潔感と透明感を演出するベースカラー。ヘアオイルの“軽さ”を感じさせるため、背景は極力ミニマルかつニュートラルな色設計とした

【タイポグラフィ】

しなやかで伸びやかな曲線を持つPlayfair Display を使用。大人の女性らしい上品さと、髪が流れるような軽やかな印象を同時に演出する。

女性らしさや柔らかさを強調するためYuji Syukuを使用した。

可読性を重視したシンプルな筑紫Aオールド明朝を使用。温かみのあるカラーとの相性がよく、ブランドの誠実さや“毎日使うプロダクト”としての親しみやすさを補強しました。

【情報設計】

“ストレスのない情報アクセス”を最優先に、階層が浅く迷いなく読み進められる構造を設計した。

  1. 直感的な視線誘導  画像 → 商品名 → キャッチコピー → 効果・特徴 の順に自然と目が流れるよう、余白と文字サイズに緩急をつけて配置。
  2. メリットを一目で理解できる構造  「ツヤ・まとまり・補修」などの効果はアイコン化し、短いワードで視覚的に理解できるようにした。
  3. 購入行動につながる導線設計  商品ボトルをビジュアルの中心に据え、使用イメージ → 効果 → 詳細説明 → CTA(購入・問い合わせ)へと滑らかに誘導。
  4. 世界観の統一性  トンマナ・色・光の質感・フォントすべてが一貫した「上品×透明感」のトーンで統一され、ブランド価値を視覚的に体験できる設計となります。

【改善ポイント】

修正前のデザインは、商品情報や装飾要素がやや密集しており、視線が複数方向へ分散する構成になっていた。 商品の世界観である「透明感」「上品さ」は表現されているものの、ボトルの存在感が十分に引き立っていない印象を与えていた。また、キャッチコピーと商品コピーの視認性が弱く、メインメッセージが直感的に伝わりにくい状態だった。以下の点を改善した。

【視認性の改善】

・キャッチコピーの背景処理を調整し、可読性を向上 ・情報の整理により、読みやすさを改善

【商品訴求力の強化】

・ボトル周辺の余白を広くとり、商品を主役として配置 ・ハイライト効果で“ツヤ感”と“高級感”を演出

【デザイントーンの統一】

・全体の明度を上げ、柔らかいカラーに統一 ・ブランドの持つ「女性らしさ」「透明感」と整合した世界観へ

【視線の流れの最適化】

・「キャッチコピー → 商品 → 商品情報」への自然な視線誘導を実現 ・Instagramでスクロール中でも目に留まりやすいデザインへ調整

シェア
小豆杏子の他の作品