概要
制作の目的
既存のエステサロン利用者やEC通販サイト内で
「会員登録のハードルを下げて、継続的にファンになってもらう」こと単なる割引案内ではなく、
ブランドの世界観や想いに共感してもらう入口にすることをゴールとして設計しました。
「会員登録のハードルを下げて、継続的にファンになってもらう」こと単なる割引案内ではなく、
ブランドの世界観や想いに共感してもらう入口にすることをゴールとして設計しました。
ターゲット
日常の中で美容・健康を大切にしたい方
すでにサロン・ブランドの商品を愛用しているリピーター様
「お得さ」だけでなく、安心感や信頼感を重視する30〜60代女性
デザインコンセプト
やわらかいパステルカラー × 花のモチーフで、上品さと親しみやすさを両立
ヒーローイメージには実際の利用シーンを想起できる写真を配置し、
「自分ごととして想像しやすい」構成に
「自分ごととして想像しやすい」構成に
セクションごとに淡いグラデーション背景を使い、
縦長LPでも読み進めやすいリズム感を意識
縦長LPでも読み進めやすいリズム感を意識
見出しはやわらかい雰囲気の書体、本文は可読性の高いゴシック体で
世界観と読みやすさのバランスを取りました。
世界観と読みやすさのバランスを取りました。
構成／情報設計
ファーストビュー
会員登録のメリットを一言で伝えるキャッチコピー
「登録ボタン」「年会費0円」など、行動を後押しする要素を集約
私たちについて（ブランドの想い）
企業の背景や想いをシンプルに紹介し、安心感と共感を醸成
会員プログラムの特徴・ストーリー
なぜこのプログラムを作ったのかをストーリー仕立てで説明
会員特典・メリット一覧
割引や特典を「3つのポイント」に整理し、一目で理解しやすいレイアウトに
おすすめの利用シーン・こんな方におすすめ
代表的なユーザー像を写真付きで紹介し、
「自分も当てはまりそう」と感じてもらう狙い
「自分も当てはまりそう」と感じてもらう狙い
参加方法（ステップ解説）
登録〜利用までの流れをステップ形式で掲載し、
初めての方でも迷わず手続きできるように設計
初めての方でも迷わず手続きできるように設計
会社情報・フッター
会社概要・問い合わせ導線・既存サイトへの導線をまとめて配置
担当範囲
クライアントとの要件整理・ディレクション
構成ラフ・ワイヤーフレーム作成
デザイン（PC/SP）
コーディング（HTML/CSS・レスポンシブ対応）
既存ECカート管理画面内でのテンプレート編集にて実装
工夫したポイント
スマホファーストでの読みやすさ
スマホで縦スクロールしたときに、
「テキストブロック → 写真 → CTA」のリズムで自然に読めるように設計
「テキストブロック → 写真 → CTA」のリズムで自然に読めるように設計
世界観を壊さない情報量の整理
会員特典や注意事項はどうしても情報が多くなりがちなので、
「重要な一文＋詳細テキスト」で階層化し、
全体の雰囲気を保ちながら読ませる構成にしました。
「重要な一文＋詳細テキスト」で階層化し、
全体の雰囲気を保ちながら読ませる構成にしました。
ブランドらしさの表現
既存サイトのトンマナ（色・書体・モチーフ）を踏襲しつつ、
会員ページならではの特別感・ワクワク感が出るように
ボタンデザインや装飾アイコンをオリジナルで作成。
会員ページならではの特別感・ワクワク感が出るように
ボタンデザインや装飾アイコンをオリジナルで作成。
使用ツール
Figma / illustrator / Photoshop
HTML / CSS（レスポンシブ対応）
既存ECカート管理画面内でのテンプレート編集