Overview
プロジェクト概要
美容室・ヘアサロン専用のヘアケア診断サービス「BE/ME（ビーミー）」の紹介サイトを制作しました。最初の画面はモデル写真を全面に使い、紫の手書き風ロゴとコピー「お客様にあったヘアケア診断が、だれでもカンタンに。」を重ねています。右上には「今すぐ無料ではじめる」ボタンを常に表示しました。
サービスの3つのポイント（誰でもできるヘアケア診断、診断結果を自動でカルテ化、今すぐ無料で導入）に続けて、カウンセリング・カルテ・設定の3つの機能をタブレットの画面とともに説明しています。後半では、来店からカルテ化までの使い方を3ステップで、申し込みから本登録までの流れを3ステップで紹介しました。デザインから実装まで、RuxelTechチームで一貫して対応しました。
- 業種
- 美容・ヘアサロン向けサービス
- ロール
- サイト設計 / デザイン / フロントエンド実装 / レスポンシブ対応
- 技術
- HTML5 / CSS3 / JavaScript / レスポンシブ対応
TOP — トップページ
機能・使い方・申し込みを、3ステップずつで伝える
サイトの入口となるトップページを、PC版・スマホ版で掲載しています。グレーの背景に紫を1色だけ効かせ、大きな英字の見出しを薄く背景に敷いたデザインです。機能はタブレットの画面を見せながら説明し、使い方と申し込みの流れはどちらも3ステップにそろえて、導入の手軽さが伝わるようにしました。
- モデル写真と手書き風ロゴのファーストビュー
- 3つの機能をタブレット画面とともに説明
- 使い方と申し込みを3ステップで紹介
- 無料で始めるボタンを上部と各所に配置
全体をスクロールしてご覧いただけます
Results
成果
機能・使い方・申し込みの流れをそれぞれ3ステップにまとめ、サロンが導入を判断しやすいサービス紹介サイトとして制作しました。
Tech Stack
HTML5CSS3JavaScriptレスポンシブ対応