---
title: "外観とカスタマイズ"
description: "テーマプリセット、ライト／ダーク、Pro ブランディング、カスタム CSS、公開ページの data-fmt フック。"
path: /help/appearance
---

# 外観とカスタマイズ

公開の Book a Time・出欠確認・日程調整ページはテーマのスナップショットを使います。プリセットを後から変えてもゲストには当時の見た目が届きます。主催者向け画面は標準のアプリ外観のままです。

[デモ一覧](/demo) で実例を試せます。フローティングの切り替えでライト／ダークを変えられます。Free の各ファミリーは両方を定義しています。

## Free プリセット

Harbor、Hearth、Atelier、Signal、Ink、Playground、Lantern などのファミリーから選びます。それぞれ次を定義します。

- **ライトとダーク** のプライマリ／背景／サーフェス／テキスト色
- フォント、角丸、ボタンスタイル
- 任意のカレンダー盤面色

ゲストはカラーモード設定に従います。正確な Free ファミリーは、ライト／ダークのペアへ自動で切り替わります。

## Pro カスタマイズ

Pro ではプリセットを超えるブランディングが使えます。

| 設定             | 内容                                      |
| ---------------- | ----------------------------------------- |
| カスタム色       | ライト／ダークのサーフェスを個別に編集    |
| フォントと角丸   | Free と同じ許可リスト                     |
| ボタンスタイル   | ゲストの主要操作に solid / soft / outline |
| カレンダー盤面   | カレンダー周辺の任意背景                  |
| ロゴとブランド名 | 公開ヘッダーに表示                        |
| 背景画像         | テーマ面の背後に全ページ背景              |
| カスタム CSS     | `#findmetime-page` 配下にスコープ         |

Free の公開表示では高度な項目がクランプされ、Free 向けの見た目だけがゲストに届きます。

## カスタム CSS フック

Pro の CSS は書き換えられ、すべてのルールが `#findmetime-page` 配下にスコープされます。壊れやすいクラス名や `data-testid` ではなく、安定した `data-fmt` フックを使ってください。

よく使うフック:

| フック                     | 場所                               |
| -------------------------- | ---------------------------------- |
| `data-fmt="page"`          | ページルート（`#findmetime-page`） |
| `data-fmt="branding"`      | ロゴ／ブランド名                   |
| `data-fmt="title"`         | ページタイトル                     |
| `data-fmt="host-message"`  | ホストメッセージ                   |
| `data-fmt="form"`          | ゲストフォーム                     |
| `data-fmt="submit"`        | 送信ボタン                         |
| `data-fmt="calendar"`      | 予約カレンダー                     |
| `data-fmt="calendar-slot"` | 個別の時間枠                       |
| `data-fmt="rsvp-choice"`   | 出席／未定／欠席                   |
| `data-fmt="poll-grid"`     | 日程調整の塗りグリッド             |

例:

```css
[data-fmt='title'] {
  letter-spacing: -0.02em;
}
[data-fmt='host-message'] {
  border-left: 3px solid var(--theme-primary);
  padding-left: 0.75rem;
}
[data-fmt='submit'] button {
  font-weight: 600;
}
```

ページルート上の便利な CSS 変数には `--theme-primary`、`--theme-bg`、`--theme-surface`、`--theme-text`、`--theme-radius`、`--theme-font` があります。

カスタム CSS 内の外部 `url(https://…)` は禁止です。ロゴと背景画像のフィールドを使ってください。

## 関連リンク

- [Book a Time ページ](/help/book-a-time)
- [出欠確認](/help/rsvp)
- [日程調整](/help/polls)
- [デモを試す](/demo)
- [プラン比較](/pricing)