ヘアサロンのWebサイト
- サンプルサイトの会社名、店舗名、所在地、人物名、メニューや価格などは全て架空のものです。
- また、サンプルサイトのお問い合わせフォームは見た目のみで実際の送信はできません。
- 画面内で操作できます。
要件定義
【目的】
- 認知拡大と来店予約の増加。
- 競合店との差別化。
- サロンの理念に共感するスタイリスト・アシスタントの獲得。
【ターゲット】
- メインターゲット： 20代後半〜40代の女性。トレンドには敏感だが、派手さよりも「自分らしさ」や「素材の美しさ」を重視する層。
- サブターゲット（採用）： 美容師免許を持つ求職者。技術向上だけでなく、チームワークや職場環境の良さを重視する層。
【機能要件】
- レスポンシブWebデザイン: スマートフォンからのアクセスが7〜8割を占める美容業界の特性を考慮し、モバイルファーストでの設計・実装を徹底。
- Google Maps埋め込み表示
- 予約サイトへのリンク設置（今回はダミー）
デザインや実装のポイント
【カラーリング】
- モスグリーン（メインカラー）：植物や自然を連想させ、「癒やし」「オーガニック」「落ち着き」といったサロンのコンセプトを象徴する色として選定。視覚的な安らぎを与えるとともに、洗練された大人の隠れ家的な雰囲気を演出している。
- テラコッタ / ブラウン（アクセントカラー）：ボタンには大地の温もりを感じさせるブラウン系を採用。全体のトーン＆マナーを崩すことなく、重要な導線を自然に強調している。
【レイアウト & UI】
- 余白（ホワイトスペース）の活用: 情報の密度を意図的に下げ、ゆったりとした余白を設けることで「サロンの空気感」や「ラグジュアリー感」を表現。
- タイポグラフィ: フォントは可読性と優雅さを兼ね備えたセリフ体（明朝系）を使用し、派手さよりも上品さや素材の美しさを重視する層に馴染む印象に。
- ナビゲーション設計: ヘッダーおよびフッターには、ユーザーが迷わずに「予約（Reserve）」や「各店舗情報」にアクセスできる導線を配置。特にコンバージョンポイントである予約ボタンは、デザインに馴染ませつつも視認性を確保している。
【その他】
- リクルートコンテンツの強化: 一般的な募集要項の羅列にとどまらず、「求める人物像」や「サロンで働くメリット」を明確に言語化。エントリーフォームを同ページ内に配置することで、興味を持った求職者が熱量の高い状態で応募できるよう動線設計を行っている。