Mallika hair&spa
ヘアサロンWebサイト コーディング外注対応
プロジェクト概要
プロジェクト概要
広島県にあるヘアサロン「Mallika hair&spa」様のWebサイト制作において、Net:Engage; は株式会社オーエスプランニング様からの依頼で、フロントエンドコーディングと WordPress 実装を担当しました。
オーエスプランニング様が設計・デザインされた、
- 落ち着いた世界観とサロンの雰囲気
- メニュー・スタイル・スタッフ紹介が整理されたレイアウト
- スマートフォンからの閲覧を前提とした構成
といった部分を崩さず再現することに加え、
- カットやカラーなどの料金メニュー
- スタイルギャラリー（ヘアカタログ）
- ブログ／お知らせ
- スタッフ紹介
など、更新頻度の高いコンテンツをサロン側で運用しやすいWordPress構成に落とし込むことが求められました。
そこで、BEM＋SCSSを用いたコンポーネント設計で、トップページのヒーロー、メニュー一覧、スタイルギャラリー、ブログカードなどをパターン化。
WordPressでは、スタイル・ブログ・メニューなどをカスタム投稿タイプとして実装し、管理画面から追加・編集すれば自動的に各ページに反映されるように構築しています。
また、予約前のユーザーの大半がスマートフォンでサイトを閲覧することを想定し、モバイルの見やすさ・操作しやすさを重視したレスポンシブ実装を行いました。
※デザイン：株式会社オーエスプランニング（https://osplan.jp/）
制作のポイント
-
BEM＋SCSSによるサロンサイト向けコンポーネント設計
ヘアサロンのサイトでは、
• トップのイメージ写真とキャッチコピー
• メニュー（料金表）
• スタイルギャラリー
• スタッフ紹介カード
• ブログ／お知らせ一覧
といった要素が繰り返し登場します。
これらをBEMルールとSCSSでコンポーネント化することで、
ページ追加やレイアウト変更が入っても影響範囲を最小限に抑えられる構造としました。
同時に、今後の美容室系サイト制作にも流用しやすいコードベースになっています。 -
WordPressによるメニュー・スタイル・ブログの一元管理
サロン側で更新しやすいことを重視し、
• スタイルギャラリー：スタイル名／担当スタイリスト／カテゴリ（レディース／メンズ etc.）／写真
• メニュー：メニュー名／価格／説明
• ブログ・お知らせ：タイトル／本文／アイキャッチ画像／カテゴリ
といった入力項目をカスタム投稿＋カスタムフィールドで整備。
管理画面から投稿するだけで、トップページや各一覧ページに自動反映されるように実装しています。 -
スマホファーストのレイアウト・UI調整
ユーザーの閲覧環境を「ほぼスマホ」と想定し、
• 予約前に知りたい情報（メニュー・スタイル・場所・営業時間）にすぐ辿り着ける導線
• タップしやすいボタンサイズと余白
• 画像主体のスタイルギャラリーでも重くなりすぎないようなレイアウト
を意識してレスポンシブ実装を行いました。
特にメニュー部分は、縦スクロール前提で読みやすい情報量に調整しています。 -
画像最適化と表示速度への配慮
ヘアスタイル写真やサロン写真が多くなることを踏まえ、
• 画像圧縮
• 適切なサイズの出し分け（サムネイル／大サイズ）
• 遅延読み込み（lazyload）
などを組み込むことで、
スマートフォン回線でもなるべくストレスなく表示されるようにチューニングしています。
公開後の変化
スタイル写真・ブログの更新頻度アップ
WordPressのカスタム投稿でスタイルギャラリーやブログを実装したことで、
カットやカラー後の写真をスタッフが自ら追加しやすくなり、
SNSと連携しながら「最近のスタイル」を継続的に発信できるようになりました。
予約前の不安解消につながる情報整理
メニュー・料金・スタイル・スタッフ紹介を整理して掲載したことで、
初めて来店するお客様が
• 料金イメージ
• サロンの雰囲気
• 得意なスタイル
• 担当してくれそうなスタッフの人柄
を事前に把握しやすくなりました。
その結果、来店前の問い合わせ内容が整理され、予約動線としても機能しやすい構成になっています。
スマートフォンからの閲覧性向上
レスポンシブ対応とスマホ前提のUIにより、
InstagramなどSNSから流入したユーザーが、そのままスマホで
• メニュー
• スタイル
• アクセス情報
をスムーズに確認できるようになりました。
「SNS → 公式サイト → 予約」の流れを作りやすいサイトになっています。
制作会社・自社で再利用しやすい美容室サイトのベース
BEM＋SCSSとコンポーネント設計によって、
オーエスプランニング様側での別サロン案件や、
Net:Engage; 自身が今後手がける美容室サイトでも再利用しやすいコードとなり、
同ジャンルの制作効率向上にもつながる実装になっています。