Hairsalon テーマ（美容室・ビューティーサロン）
Hairsalon テーマ（美容室・ビューティーサロン）
美容室とビューティーサロンのための Zittme 公式テーマ Hairsalon（hairsalon）のマニュアルです。トップ画面いっぱいに広がるスライダーから始まり、施術メニュー、デザイナー、スタイル、店舗案内、予約誘導の枠へと続きます。施術とデザイナーは予約モジュールから、店舗情報は支店モジュールからそのまま取り込むので、トップ画面と予約画面の内容が食い違うことはありません。墨色とアイボリーの背景にブロンズのポイントを重ね、フォントはテーマに含まれているため外部 CDN を使いません。
構成
| 構成要素 | 場所 | 役割 |
|---|---|---|
| レイアウト | themes/hairsalon/layouts/hairsalon | サイトの骨格 + トップ画面（スライダー・紹介・施術・デザイナー・スタイル・店舗・予約誘導） |
| 予約スキン | themes/hairsalon/modules/reservation | 施術一覧・店舗/デザイナー/日付・時間の選択・予約確認・結果・マイ予約 |
| 支店スキン | themes/hairsalon/modules/branch | 店舗一覧（地域フィルター）・店舗詳細（営業時間・定休日・地図・設備） |
| 掲示板スキン | themes/hairsalon/modules/board | 写真型（ルックブック）・リスト型（ジャーナル） |
| 会員・メッセージスキン | themes/hairsalon/modules/{member, communication} | ログイン・会員登録・会員情報・メッセージ |
| zittme Pay スキン | themes/hairsalon/modules/zittme_pay | 予約金の決済・決済結果・銀行振込の案内 |
インストールと適用
- ストアからインストールするか、
themes/hairsalonに解凍します。 - 管理者 > デザイン設定で Hairsalon を選んで適用します。
- 予約モジュールをインストールして予約ページ（例：mid
reservation）を作成したら、レイアウト設定 > 基本 > 予約ページのアドレスに/reservationを入力します。上部の予約ボタンとデザイナーカードの「このデザイナーで予約」がこのアドレスにつながります。 - 店舗が複数ある場合は、支店モジュールで店舗を登録します。支店モジュールがなくてもテーマは動作し、トップ画面の店舗案内の枠だけが表示されません。
- 予約金を受け取るには、zittme Pay をインストールして決済手段（銀行振込または PG）を有効にします。
- ポイントカラー：基本はブロンズ（#b08d57）です。ポイントカラーを変えると、ボタン上の文字色（白/墨色）と文字として使うポイントカラー（ラベル・リンク）をテーマが自動で選び、明るい色を選んでも文字が読めるようにコントラストを合わせます。
- ロゴ：ロゴ画像がなければロゴテキスト、それもなければサイトタイトルを使います。スライダーの上では「明るいロゴ画像」を使います。
- ページタイプ：サイトマップのメニュークラスに
mを入力するとそのメニューをトップ画面のように、sを入力するとサブページとして描画します。 - 施術一覧：分類ごとに施術・説明・所要時間・価格。施術を押すと予約ステップに進みます。
- 店舗・デザイナー・日付と時間：店舗を選ぶと、その店舗のデザイナーだけが残ります。「デザイナー指定なし」を選ぶと、対応可能な方を割り当てます。空きのない日は押せず、今月に残りの日がない場合は翌月を先に表示します。
- 予約確認：名前・連絡先・メールアドレス・照会パスワード（非会員）・ご要望と個人情報収集への同意。予約金がある場合は「決済して予約」で zittme Pay の決済画面に進みます。
- 結果・マイ予約：予約番号と状態を表示します。非会員はマイ予約で予約番号と照会パスワードを使って確認します。会員はポイント・クーポンボックスも一緒に確認できます。
推奨環境：Zittme 1.0.2 以上、予約 1.0.0 以上。レスポンシブテーマなので、モバイル専用ビューはオフにすることを推奨します。
トップ画面の構成
レイアウト設定のトップ画面スライダーとトップ画面構成タブで設定します。サイトのトップ（開始メニュー）は、別途指定しなくてもトップ画面として扱われます。
| 枠 | 設定 | 内容 | |||
|---|---|---|---|---|---|
| スライダー | スライド、切り替え間隔、高さ | 1 行に一つずつ `image-url \ | small-text \ | large-text \ | link。大きな文言の中の \n` は改行に変わります。間隔を 0 にすると自動で切り替わりません。 |
| 紹介 | 紹介文・本文・署名 | スライダーの下に一文と短い段落。文言を空欄にすると枠を隠します。 | |||
| 施術メニュー | 施術メニューを表示 | 予約モジュールに登録した施術を分類ごとにまとめ、所要時間と価格を表示します。 | |||
| デザイナー | デザイナーを表示 | 予約モジュールの担当者を横に流れるカードで表示します。写真がない場合は名前の最初の文字を大きく表示します。 | |||
| スタイル | スタイル掲示板のアドレス・件数、ルックブック写真 | 掲示板 mid を入力するとその掲示板の写真を、空欄にすると「ルックブック写真」に入力した画像をモザイクで表示します。モザイクが空きなく埋まるよう、5 枚単位に合わせて表示します（例：7 枚なら 5 枚）。 | |||
| 店舗案内 | 支店案内を表示 | 支店モジュールの店舗を、営業中/営業終了の表示とともに表示します。 | |||
| 予約誘導 | 締めの文言・背景画像 | トップ画面の一番下の予約ボタン枠。文言を空欄にすると隠します。 |
色とロゴ
予約画面（予約スキン）
掲示板
掲示板設定の一覧の形で選びます。写真が主役なら gallery（ルックブック）、文章が主役なら journal（お知らせ・ジャーナル）です。コメントは非会員もニックネーム・パスワードで残せます（掲示板の権限に従います）。
フッター
レイアウト設定 > フッターで、事業者情報（改行で複数行）、ソーシャルアドレス（name | url）、著作権の文言を入力します。