【基本情報】

• 担当範囲: 企画 / 構成 / デザイン

• 使用ツール: Figma

• 制作期間: 計4日（Aパターン: 2日 / Bパターン: 2日）

 

​

【コンセプト】

「視覚から届ける、夏の清涼感と購入への期待感」
20〜30代をメインターゲットに、季節限定商品への期待感を高める「洗練された爽やかさ」を表現。

アイスクリーム店のホームページ最上部（メインビジュアル）に掲載され、クリック後にそのままスムーズな注文画面へ誘導することを想定した2パターンのデザインを提案しました。

 

 

【各パターンの設計とデザインの根拠】

​

Aパターン：王道・ポップな「認知拡大」デザイン（中央円形フレーム）

ホームページを訪れたユーザーへ、新商品を瞬時に印象づけて購入を促す王道の設計です。

​

1.季節感を捉えたカラーと質感:

「涼しげ・爽やか」をキーワードに、ミントグリーンの背景と鮮やかなイエローのゆずを配置。コントラストを抑えた明るいトーンでまとめることで、夏の暑さを忘れさせる清涼感と親しみやすいポップな印象を両立させました。

​

2.瞬時に伝わる視覚設計:

ユーザーが最初に目にする「視覚的な起点（アイキャッチ）」として、「ゆず香る、夏のフレーバー」を中央に設計。円形のフレームで囲むことで周囲の装飾と明確に差別化し、商品カテゴリーを瞬時に認識できるよう工夫しています。

​

3.安心感を醸成する権威性パーツ:

「BEST OF SUMMER賞 受賞」のアイコンを左側に配置。明るいデザインの中に品質を客観的に保証するアクセントを加えることで、クリックして注文画面に進むことへの安心感と購買意欲を自然に促しています。

 

Bパターン：Zの法則を用いた「情緒・CV重視」デザイン（左右セパレート）

夏の思い出に寄り添うような情緒的な世界観と、限定商品らしい「今しか買えない特別感（即時性）」を掛け合わせた設計です。

 

1.視線誘導を意識したセパレートレイアウト:

左側にシズル感溢れる「ゆず」のクローズアップ写真を、右側に情報を集約。左から右へ流れる視線の動き（Zの法則）を活用し、「香り」を連想させた直後に「再入荷・受賞」という裏付け情報を届けることで、スムーズな情報伝達と購入意欲の喚起を狙っています。

​

2.清涼感を演出するスカイブルーと曲線:

右側の背景には、夏の空や水を連想させる鮮やかなブルーを採用。写真との境界線を「波」のような有機的なライン（曲線）にすることで、画面にリズム感を与え、涼しげな印象をさらに強調しました。

​

3.情緒と視認性を両立させたタイポグラフィ:

• メインキャッチには明朝体を使用し、一文字ずつ配置や高さを微調整することで、コピーが持つ「ひと夏の思い出」という情緒的な余韻を表現。

• スペック情報には英語のセリフ体とゴシック体を組み合わせ、情報の優先順位を明確化しました。

• 行動を促す「再入荷」バッジ: 右上にビビッドなピンクのフラワー型アイコンを配置。寒色系の背景の中で目立つ色を用いることで、最も伝えたい「再入荷」という即時性を際立たせ、クリックを誘発する強力なフックとしています。