RAFRA 美容液オイルクレンジング
新商品「美容液オイルクレンジング」のプロモーション施策として、ECサイト向けキャンペーンページの情報設計・デザイン・コーディングを一貫して担当しました。
- （取り組み）
-
- ECならではのユーザー視点で訴求ビジュアルを最適化
当初、店頭用メインビジュアルと同様に、別商品の「クレンジングバーム」の画像を使用する方針でしたが、ECでは実際の商品を手に取れないことから、誤認や離脱のリスクが高いと判断。そこで、新商品である「美容液オイルクレンジング」のビジュアルをファーストビューに使用する提案を行い、採用されました。
- 購入導線を意識した情報設計とコンテンツ構成
ファーストビューではわずか0.3秒で印象が決まるため、視覚的に商品特徴が直感的に伝わるよう意識して構成。
提供された商品情報をもとに、ユーザーがスムーズに理解・比較・購入できるよう、商品特長の整理・ワイヤーフレーム設計を実施。また、写真素材の形式やサイズについても仕様を定義し、Web展開がスムーズに進むよう整えました。
- 比較・選択を示すデザイン設計で商品訴求を強化
デザイン面では、ブランドカラーであるピンクを基調にシンプルで洗練された印象に統一し、人気商品の「クレンジングバーム」との比較コンテンツを追加することで、ユーザーが用途や好みに応じて選びやすい構成にしました。
- デザイン再現性とレスポンシブ最適化を両立した実装
その後、デザインを忠実に再現しながら、レスポンシブ対応を含めたコーディングに実装。PC・スマートフォンの双方で快適に閲覧・購入できるよう最適化しました。
- 取り組み結果
その結果、新商品の初動売上は好調なスタートを記録し、キャンペーンページが販売促進に大きく貢献しました。
| URL | already closed |
|---|---|
| 制作時間 | 1ヶ月 |
| プロジェクト人数 | 5人 |
| 担当フェーズ | デザイン、コーディング |
| 使用ツール | Photoshop/XD/HTML/CSS/Javascript |
