# 予約画面にロゴと色をつける

> **ご利用いただけるプラン**
>
> Standard・Proプランでご利用いただけます。Freeプランでも画面に表示されますが、ご利用はStandardプランからです。

お客様が予約する画面に、施設のロゴとテーマカラーを表示できます。どちらも設定しなければ、標準の白黒の画面のままです。

## 始める前に

- Free プランでは「予約画面」タブに「Standardプランでご利用いただけます」と表示され、「使ってみたい」を押すとご希望が当社に届きます。
- 設定を変えられるのは「オーナー」と「管理者」です。「閲覧者」は見るだけです。

## ロゴと色を設定する

施設を開き、「予約画面」タブを開きます。左が「予約画面のロゴと色」、右が予約画面のプレビューです。

1. **ロゴを選ぶ**

   「ロゴの画像を選ぶ」で画像を載せます（PNG・JPEG・WebP）。ロゴを施設の写真として載せてあれば、「載せている写真から選ぶ」からも選べます。

2. **テーマカラーを選ぶ**

   「テーマカラー」の色の欄を押して、色を選びます。

3. **プレビューで確かめる**

   変更は、保存する前から右のプレビューに反映されます。表示する画面は「予約入力」「確認」「完了」「予約の確認」で、幅は「パソコン」「スマホ」で切り替えます。

4. **「保存」を押す**

   「保存しました。お客様の予約画面にも反映されます。」と表示されます。

![予約画面のロゴと色の設定。左にロゴとテーマカラー、右に予約画面のプレビューが並ぶ。](https://docs.vibebooking.ai/screenshots/ja/checkout-brand-desktop.webp)
*ロゴと色の設定と、予約画面のプレビュー。*

| 設定 | お客様の画面に出る場所 |
| --- | --- |
| ロゴ | 各画面のいちばん上、施設名の左 |
| テーマカラー | 予約確定ボタンをはじめとするボタンと、手順の進み具合を示す線 |

![施設のロゴとテーマカラーで表示された、お客様情報の入力画面。](https://docs.vibebooking.ai/screenshots/ja/checkout-details-desktop.webp)
*ロゴとテーマカラーで表示された、お客様情報の入力画面。*

元に戻すには、「ロゴを外す」または「標準の色に戻す」を押してから「保存」を押します。

## 明るすぎる色は使えない

テーマカラーの上には、白い文字がのります。白い文字が読みにくい色を選ぶと、「この色は明るすぎて、上にのる白い文字が読みにくくなります。もう少し濃い色を選んでください。」と表示され、保存できません。

基準は、白い文字とのコントラスト比 4.5:1 以上です（WCAG AA）。

![明るい黄色を選んだテーマカラー欄。明るすぎて白い文字が読みにくいという表示が出ている。](https://docs.vibebooking.ai/screenshots/ja/checkout-brand-too-light-desktop.webp)
*明るい黄色は、白い文字が読みにくいため保存できない。*

## 予約画面を試す

「予約画面を試す」を押すと、新しいタブで予約画面が開きます。お客様と同じ画面で、予約の完了まで進めます。カードは次のテスト用の内容を入れます。

| 項目 | 入れる内容 |
| --- | --- |
| カード番号 | `4242 4242 4242 4242` |
| 有効期限 | 今日より先の日付 |
| セキュリティコード | 任意の 3 桁 |

試し予約は、実際の予約にはなりません。

| 項目 | 試し予約では |
| --- | --- |
| 料金 | 請求されません。 |
| 予約システム | 予約は書き込まれません。 |
| 予約の記録 | 残りません。 |
| メール | 予約確定と領収書のメールが、ご自身のメールアドレスに届きます。件名の頭に `[PREVIEW]` がつきます。 |

![テーマカラーで表示された「予約を確定する」ボタン。](https://docs.vibebooking.ai/screenshots/ja/checkout-confirm-desktop.webp)
*予約を確定するボタンも、テーマカラーになる。*

![施設のロゴとテーマカラーで表示された、予約完了の画面。](https://docs.vibebooking.ai/screenshots/ja/checkout-done-desktop.webp)
*予約完了の画面。試し予約の予約番号は PREVIEW で始まる。*

## AI アシスタントに案を出してもらう

AI アシスタントをつないでいれば、ロゴと色の案をアシスタントに出してもらえます（ツール名は `draft_brand`）。つなぎ方は、[AI アシスタントとつなぐ](https://docs.vibebooking.ai/connect-assistant)をご覧ください。案が届くと、「予約画面」タブに「AIアシスタントから、ロゴと色の案が届いています」と表示されます。

![AIアシスタントから届いたロゴと色の案。案を反映するボタンと使わないボタンがある。](https://docs.vibebooking.ai/screenshots/ja/checkout-proposal-desktop.webp)
*AI アシスタントから届いた案。*

「案を反映する」を押すと、案がプレビューに入ります。お客様の画面が変わるのは、確かめて「保存」を押したときです。案を使わないときは「使わない」を押します。