デザインの設定
このページでは、予約フォームの色をサイトのブランドカラーに合わせて調整する方法を解説します。
カスタマイズできる項目
管理画面の Smart Booking → 設定 → デザイン タブから、以下7項目の色をカスタマイズできます。
| 項目 | 反映箇所 |
|---|---|
| ボタン色 | 「予約内容の確認」「予約を確定する」など主要なボタンの背景色 |
| 日付選択色 | カレンダーで日付を選択したときのハイライト色 |
| 時間帯選択色 | 時間枠ボタンを選択したときのハイライト色 |
| 必須マーク色 | 必須項目ラベル横の「必須」バッジの色 |
| フォーカス色 | 入力欄をクリックしたときの枠線色（アクセシビリティ対応） |
| 残りわずかの色（警告色） | 時間枠が「残りわずか」のときの枠線・背景・バッジの色（この色から薄い背景色を自動計算して使います） |
| 満席・締切の色（無効色） | 時間枠が「満席」「締切」のときの文字・バッジの色（満席と締切で同じ色を使います） |
画面の右側には 予約フォームのプレビュー が表示され、色を変更するとその場で反映されます。 ただし 残りわずかの色（警告色） と 満席・締切の色（無効色） はプレビューには反映されません。 この2つは保存したうえで、実際の予約フォームで見え方をご確認ください。背景と文字の組み合わせが読みにくくならないかもあわせて確認すると安心です。
手順: 色を変更する
- 設定 → デザイン タブを開きます。
- 各項目のカラーピッカーをクリックして色を選びます。
- HEX値（例:
#3B82F6）を直接入力することもできます。 - カラー項目の下にある テーマ設定を保存 ボタンをクリックします。
- 予約フォームを開いて、変更が反映されているか確認します。
テーマ設定を保存 は、変更したところが1つもないとクリックできません。
おすすめの設定例
サイトのブランドカラーが青系の場合:
- ボタン色:
#3B82F6（青） - 日付選択色:
#1E40AF（濃い青） - 時間帯選択色:
#1E40AF - 必須マーク色:
#EF4444（赤・標準のままでOK） - フォーカス色:
#3B82F6
落ち着いたサロンの場合:
- ボタン色:
#374151（グレー） - 日付選択色:
#374151 - 時間帯選択色:
#374151 - フォーカス色:
#9CA3AF
色を初期値に戻す
- 設定 → デザイン タブを開きます。
- デフォルトに戻す ボタンをクリックします。7項目すべての入力欄が、プラグイン既定の配色に置き換わります。
- この時点ではまだ保存されていません。続けて テーマ設定を保存 ボタンをクリックして確定してください。
デフォルトに戻す は入力欄の値を書き換えるだけのボタンです。保存せずに画面を離れると、元の色のままになります。 すでにすべての項目が初期値になっている場合は、変更したところが無いため テーマ設定を保存 はクリックできません。
**カラー入力欄を空にして保存することはできません。**空欄のまま テーマ設定を保存 をクリックすると、その項目に「カラーコードは #RRGGBB 形式で入力してください。」と表示され、画面には「カラーコードの形式を確認してください。」という通知が出て、保存は行われません。 色を入力するときは
#に続けて6桁（例:#3B82F6）で指定してください。#FFFのような3桁の書き方も同じエラーになります。初期値に戻したいときは、上の手順で デフォルトに戻す をお使いください。
次のステップ
予約受付時のメール通知をカスタマイズするには、メール通知の設定 をご覧ください。 設定 画面のほかのタブ（基本設定 メール通知 外部連携 サポート）にどの項目があるかは、設定リファレンス にまとめています。