Facebook 【架空案件】LumiEye様カラーコンタクトバナー
Logo

【架空案件】LumiEye様カラーコンタクトバナー

クレジット
Avatar
WEBデザイナー
ディレクター
【架空案件】LumiEye様カラーコンタクトバナー-1
シェア
制作ノート
制作について

1. 配置(レイアウト)

要素同士の役割が明確に分け、メリハリをつけました。

  • 右重心のビジュアル配置は、実際に装着した際の「きれいな瞳」のイメージをダイレクトに伝えれるよう意識しました。
  • 左側の情報集約する(左上の最も目立つ位置にメインコピーを配置し、その下に商品の特徴を示すアイコン、さらに左下から中央にかけてレンズのバリエーションと目のアップ画像をまとめる)ことで、ビジュアル領域と情報領域を整理しています。
  • 最下部の帯による区切り: 一番下にイエローのグラデーション帯を設け、レンズの専門的な数値データを隔離して配置し、メインの画像領域を洗練させた印象形成を促します。

2. 情報設計(情報の優先順位と視線誘導)

ユーザーが商品に興味を持ち、詳細を確認するまでの心理プロセスに沿った設計をしました。

  • 自然な視線誘導: ユーザーの視線は、まず左上の大きなコピー「自然に大きく…」に入り、そのまま右の美しいモデルの顔へと移ります。そこから下へ視線を移すと、左側のアイコンやレンズのバリエーションに入り、右下のブランドロゴを経て、最後に最下部のスペック情報へと流れるように設計しています。(Z型の視線誘導)。
  • 情報の階層化:理想のイメージ(ベネフィット): 「自然に大きくきれいな瞳」というコピーとモデル写真で、まずはユーザーの憧れを喚起します。検討材料: 次に、「1DAY」「度あり/なし」といった購入に必要な条件や、具体的なカラーラインナップを提示します。詳細情報: 最後に、さらに詳しいサイズ感を知りたい購入意欲の高いユーザー向けに数値を提示しています。

3. 配色(カラーリング)

商品の「ナチュラルさ」を強調する、統一感のあるカラーで仕上げました。

  • 温かみのある暖色系トーン: 全体的にイエロー、ベージュ、ブラウンといった肌馴染みの良いカラーでまとめられており、大人っぽさと優しさを感じさせることができるよう意識しました。
  • 背景のぼかし効果: 背景に配置された黄色い花が、華やかで春らしい季節感を演出しつつも、大きくぼかされているため、主役であるモデルや文字情報を邪魔せずとも明るい印象が出るよう意識しています。
  • 文字色の工夫: メインコピーや下の帯の文字には、真っ黒ではなくダークグレーやダークブラウンが使用されています。これにより、十分な可読性を保ちながらも、全体的に柔らかくナチュラルな雰囲気を壊さないように調整しました。
シェア
Webデザイナー Ranの他の作品