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

お客様が予約する画面に、施設のロゴとテーマカラーを表示する設定と、予約画面を試す方法。

このページの内容

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

始める前に

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

ロゴを選ぶ

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

「テーマカラー」の色の欄を押して、色を選びます。
プレビューで確かめる

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

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

ロゴと色の設定と、予約画面のプレビュー。

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

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

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

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

明るい黄色は、白い文字が読みにくいため保存できない。

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

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

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

AI アシスタントをつないでいれば、ロゴと色の案をアシスタントに出してもらえます（ツール名は draft_brand）。つなぎ方は、AI アシスタントとつなぐをご覧ください。案が届くと、「予約画面」タブに「AIアシスタントから、ロゴと色の案が届いています」と表示されます。

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