Details

企画 / 構成

スキンケア選びや組み合わせに悩む人をターゲットに設定し、クレンジングからクリームまで一式で揃えられる商品構成を考案しました。
また、保湿を重視したい人向けと、敏感肌の人向けに2ラインを展開し、ユーザーが自分の肌に合った商品を選びやすいように選びやすい構成にしました。
さらに、クレンジングからクリームまで揃えると価格帯が高くなりやすいため、7日間のトライアルセットを用意し、初めてでも手に取りやすいようにしました。
商品情報についても、スキンケア初心者でも理解しやすいよう、情報量を整理しながら必要最低限の内容で分かりやすくまとめています。
そのほかにも、使用ステップの説明や人気商品のピックアップ、実際のユーザーの声を掲載することで、安心感を持って商品を選べるよう工夫しました。

デザイン

上品でやさしい世界観を表現するために、ピンクベージュをメインカラーに使用し、余白を活かした落ち着きのあるデザインにしました。
また、情報量が多くなりすぎないよう、テキストやレイアウトに余裕を持たせることで、スキンケア初心者でも見やすく、商品を比較しやすい構成を意識しています。
商品デザインでは、保湿タイプは薄ピンク、低刺激タイプは薄ベージュでカラーを分けることで、統一感を持たせながら直感的に違いを認識できるよう工夫しました。
さらに、写真や装飾も全体の世界観に馴染むようトーンを統一し、ブランドの上品さや透明感を感じられるデザインを目指しました。

コーディング

使用ステップはスライダー形式にすることで、限られたスペースでも見やすく確認できるようにしました。
また、使用ステップや商品一覧には、保湿タイプ（Moisture）と低刺激タイプ（Sensitive）を切り替えられるボタンを設置し、2ラインを比較しやすいよう工夫しています。
さらに、商品の数量変更や商品削除、即購入など、ECサイトとして利便性を意識した機能を実装しました。
カートに商品を追加するとヘッダー内のCart上部に件数が表示される仕様にするなど、視認性や使いやすさも意識して制作しました。
※商品詳細ページは「03 Moisture Lotion」,「Moisture Trial Set」の2つになります。カートへの追加はこの2つから検証できます。