# 公開サイトのデザインを設定する

- カテゴリ: サイトの見せ方を整える
- 正規 URL: https://spekan.jp/manual/articles/02-02
- 最終更新日: 2026-10-15

公開サイトの公開／非公開と、色・ロゴ・背景画像などの見た目は、「サイト設定」の「外観」タブでまとめて設定します。

## この記事でわかること
- 公開サイトの外観を設定する手順
- 設定できる項目と、お客様の画面のどこに表示されるか
- サイトの公開／非公開の切り替え

## 操作手順
1. 画面右上の歯車アイコン（各種設定）をクリックし、「サイト設定」を開きます。最初に「外観」タブが表示されます。
   ※「サイト設定」は、サイト設定の閲覧の権限があるアカウントに表示されます。設定を変えて保存するには、サイト設定の編集の権限が必要です（閲覧の権限だけのときは、内容の確認だけができ、「保存」は表示されません）。
   （画像: 「各種設定」の画面。右上の歯車アイコンと「サイト設定」）
2. 次の項目を設定します（画面の上から順に並んでいます）。
   - **サイト公開**: オンにすると、お客様が公開サイトを開けるようになります。施設を追加した直後はオフです。
   - **チャットボタンを表示**: お客様が施設に問い合わせできるチャットボタンの表示／非表示です。施設を追加した直後はオンです。AI接客を利用している間はオフになり、切り替えられません（スイッチにカーソルを合わせると理由が表示されます。[AI接客を連携する](https://spekan.jp/manual/articles/11-13)）。
   - **メインカラー**: サイトの基調色をカラーピッカーで選びます。選んだ色は「選択中のカラー」に表示されます（未設定のときは「未選択」）。
   - **タグライン**: 施設のキャッチコピーです。100文字まで入力できます。
   - **ロゴ画像（通常）**: 高さ 160px 以上の横長の透過 PNG がおすすめです（例: 640×160px）。どの画面でも、ロゴを切らずに高さを揃えて表示します。
   - **ロゴ画像（白抜き）**: 背景画像の上に表示するロゴです。おすすめのサイズは通常のロゴと同じです。
   - **横長背景画像**: 推奨サイズ 1920×1080px（16:9）。
   - **縦長背景画像**: 推奨サイズ 1080×1920px（9:16）。
   - **ファビコン**: ブラウザのタブと、スマートフォンのホーム画面に追加したときのアイコンです。推奨サイズ 180×180px（正方形）。
   - **SNS共有画像（OGP）**: SNS やチャットでサイトのリンクを共有したときに表示される画像です。推奨サイズ 1200×630px（1.91:1 の横長）。
   （画像: 「サイト設定」の「外観」タブの上部。サイト公開・チャットボタンを表示・メインカラー・タグライン）
3. 「保存」をクリックします。「サイト設定の更新に成功しました」と表示されれば完了です。「サイト公開」などのスイッチも、「保存」を押すまでは反映されません。
   （画像: 「外観」タブの下部。背景画像・ファビコン・SNS共有画像の欄と、右下の「保存」）

保存に失敗したときは、画面に理由が表示されます。内容を確認して、もう一度「保存」してください。

## 画像について
- 使える画像は jpg・jpeg・png の形式で、1枚 5MB までです。条件に合わない画像を選ぶと、「画像サイズが大きすぎます。5MB以下の画像を選択してください。」または「画像形式が正しくありません。jpg、jpeg、pngのいずれかの形式を選択してください。」と表示されます。
- 背景画像・ファビコン・SNS共有画像は、保存時に推奨サイズの比率へ中央で切り抜かれます。推奨サイズより小さい画像も登録できますが、拡大して表示するためぼやけます。推奨サイズ以上の画像を用意してください。
- 背景画像は画面の形に合わせて全面に敷くため、画面によって上下や左右が切れます。大事な被写体は中央に置いてください。
- 登録した画像は、画像の欄の右にあるゴミ箱のボタンで削除できます。削除したあと「保存」を押すと未設定に戻り、お客様の画面には Spekan の標準の画像が表示されます。

## お客様の画面での表示場所
| 項目 | 表示される場所 | 未設定のとき |
|---|---|---|
| メインカラー | ボタン・リンクなど、サイト全体の基調色 | Spekan の標準の色 |
| タグライン | トップページの見出し、検索結果などに出る説明文 | 見出しは空欄になります |
| ロゴ画像（通常） | ログイン・会員登録の画面、ログイン後のページのヘッダーなど白い背景の部分 | Spekan のロゴ |
| ロゴ画像（白抜き） | トップページ、予約画面・ウォークインの受付画面の背景画像の上 | Spekan のロゴ |
| 横長背景画像 | 横長の画面（PC・横向きのタブレットなど）で見たトップページ・ログイン・会員登録・パスワード再設定の画面と、予約完了の画面 | Spekan の標準の背景画像 |
| 縦長背景画像 | 縦長の画面（スマートフォン・縦向きのタブレットなど）で見た上記の画面。PC で見た予約画面・ウォークインの受付画面の左側の画像にも使われます | Spekan の標準の背景画像 |
| ファビコン | ブラウザのタブ、スマートフォンのホーム画面に追加したときのアイコン | Spekan のマーク |
| SNS共有画像（OGP） | SNS やチャットでリンクを共有したときの画像（サイトを公開しているときだけ） | Spekan の標準の共有画像 |

## よくある質問
**Q. サイトを公開するにはどうすればいいですか？**\
A. 「サイト公開」をオンにして「保存」します。保存するとすぐに公開されるため、公開前にスペース・メニュー・規約類が整っているかを確認してください（[公開サイトのイメージを考える](https://spekan.jp/manual/articles/02-01)）。

**Q. 非公開のあいだ、お客様にはどう見えますか？**\
A. 公開サイトの URL を開くと、「施設が見つかりませんでした」と表示されます。また、施設詳細の「予約フロントページへ」も押せません。

**Q. ロゴが2種類あるのはなぜですか？どちらを使うか選べますか？**\
A. 背景画像の上では白抜きのロゴ、白い背景の部分では通常のロゴが、表示する場所に応じて自動で使われます。どちらかを選ぶことはできないため、両方を登録しておきましょう。

**Q. 背景画像はPCとスマホで分けられますか？**\
A. はい。画面が縦長か横長かに応じて、縦長背景画像と横長背景画像が自動で切り替わります。スマートフォンや縦向きのタブレットでは縦長背景画像、PC や横向きのタブレットでは横長背景画像が表示されます。PC で見た予約画面の左側の画像は縦長なので、縦長背景画像が使われます。

**Q. 登録した画像を消したいです。**\
A. 画像の欄の右にあるゴミ箱のボタンを押してから「保存」を押してください。未設定に戻り、Spekan の標準の画像が表示されます。

**Q. チャットボタンを消すと、お客様はどう連絡しますか？**\
A. チャットボタンを非表示にすると、お客様は公開サイトからチャットで問い合わせできなくなります。オフの間は、管理画面のチャットからもメッセージを送れません（お客様が返信を読めないため）。なお、チャットボタンは表示にしていても、ログインしているお客様にしか表示されません。よくある質問は Q&A で公開できます（[公開サイトの Q&A を編集する](https://spekan.jp/manual/articles/02-05)）。電話番号やメールアドレスなど、別の連絡手段も案内できるようにしておきましょう。

**Q. スタッフのアカウントで「サイト設定」を変更できません。**\
A. 「サイト設定」を開くにはサイト設定の閲覧の権限、変更して保存するにはサイト設定の編集の権限が必要です。初期設定では、メンバー・閲覧者は閲覧の権限を持っているので、画面を開いて内容を確認できます。編集の権限を持っているのはマスターとマネージャーです。閲覧の権限だけのときは、画面の上に「閲覧の権限のみのため、内容の確認だけができます。変更するには編集の権限が必要です。」と表示され、入力欄は変更できず、「保存」は表示されません。

**Q. 決済方法もこの画面で設定しますか？**\
A. 決済方法は同じ画面の「決済方法」タブで設定します（[利用可能な決済方法を設定する](https://spekan.jp/manual/articles/02-03)）。

**Q. 複数施設を運営している場合、公開／非公開はお客様の施設切り替えに影響しますか？**\
A. はい。複数の施設に所属しているお客様には、ログイン中の公開サイトの画面右上に施設切り替えメニューが表示されます。切り替え先の候補に出るのは「サイト公開」がオンの施設だけで、候補が2件以上あるときにだけメニューが表示されます。