カスタムブランディング

OneCal では、予約リンクと予約ページの見た目を変更できます。カバー画像を追加し、ブランドカラーを選び、テーマ全体を作成できます。テーマには、ページ、カード、テキスト、ボタン、時間枠の色、角の形、フォントが含まれます。外観エディターは作業中にライブプレビューを表示します。ブランディングはすべての予約リンクに一度に適用することも、1つの予約リンクだけに独自の見た目を設定することも、リンクごとにオフにすることもできます。

カスタムテーマを適用した予約リンク。ダークなページ、角丸のカード、セリフ体の見出し、ボタンと選択した日に使われたブランドカラー — カスタムテーマを適用した予約リンク。

グローバルブランディング

グローバルブランディングは、予約ページと、それを使うすべての予約リンクのデフォルトの見た目です。設定 → 予約ページのグローバルブランディングセクションで設定します。

カバー画像：デフォルトで予約ページとすべての予約リンクの上部に表示されます。推奨されるアスペクト比は3:1で、例えば1500 x 500ピクセル、最大5MBです。
外観：グローバルテーマの外観エディターです。ブランドカラーと、その他すべての色、角、フォントを設定します。下の「外観エディター」セクションをご覧ください。
OneCalブランディングを削除：予約カードの下にある「powered by OneCal」バッジと、カレンダーイベントの OneCal ブランディングを非表示にします。Premium プランで利用できます。
デフォルトのレイアウト：新しい予約リンクで最初に使われるレイアウトです。予約リンクのレイアウトをご覧ください。

外観エディターの下にある保存をクリックすると、新しいグローバルテーマが公開されます。予約ページと、グローバルブランディングを使うすべての予約リンクに適用されます。独自のカスタムブランディングを持つ予約リンクは、それぞれのテーマをそのまま使います。

予約ページ設定のグローバルブランディングセクション。カバー画像と外観エディターが表示されている — 予約ページ設定のグローバルブランディング。

1つの予約リンクのブランディング

各予約リンクは、グローバルブランディングに従うか、独自の見た目を持つか、ブランディングをまったく表示しないかを選べます。予約リンクを開き、外観タブに移動して、ブランディングの設定を選びます。

グローバル：予約リンクはグローバルブランディングに従います。後からグローバルブランディングを変更すると、その変更も反映されます。
カスタム：予約リンクに独自のカバー画像、テーマ、デフォルトのレイアウトを設定します。リンクをカスタムに切り替えると、現在のグローバルブランディングを出発点にするので、変えたい部分だけを変更できます。
ブランディングなし：予約リンクは OneCal のデフォルトの色を使い、カバー画像は表示しません。

カスタムを選ぶと、タブにこのリンクのカバー画像、外観エディター、デフォルトのレイアウトが表示されます。保存をクリックすると変更が公開されます。エディターの最後にあるOneCalブランディングを削除トグルは、予約ページ設定と同じ設定なので、すべての予約リンクに適用されます。

外観エディター

外観エディターは、予約リンクのライブプレビューを表示し、スタイルを設定できる各部分に番号付きのマーカーを付けます。マーカーまたはプレビューの任意の部分をクリックすると、その設定がプレビューの下に開きます。設定はマーカーと同じ番号のタブにまとめられています。プレビューにマウスを重ねると、スタイルを設定できる部分が分かります。Esc キーを押すと選択が解除されます。

プレビュー上のツールバーで、テーマをさまざまな状況で確認できます。

予約ページと予約フォームは、カレンダーと、予約者が時間を選んだ後に入力するフォームを切り替えます。
スマートフォン、タブレット、ノートパソコンは、それぞれの画面幅でページを表示します。エディターに合わせるはエディターの全幅を使います。プレビューの端をドラッグして任意の幅にすることもできます。
プレビュー内のレイアウト切り替えは、予約リンクのデフォルトのレイアウトを変更するので、見ながらレイアウトを設定できます。

外観エディター。プレビューに番号付きマーカーがあり、その下にブランドカラーとボタンのタブが開いている — 選択した要素の設定を表示している外観エディター。

スタイルを設定できる要素

ページの背景：予約カードの周りの領域です。色、角度付きのグラデーション、または透明を選べます。透明にすると、埋め込んだときにページがウェブサイトになじみます。
カード：予約カードの背景、枠線、区切り線と、角の半径です。フレーム設定でカードとフラットを切り替えます。フラットはカードの枠線、影、余白を取り除くので、サイト上の枠の中にすでに埋め込まれている場合に適しています。
テキスト：見出し、ホスト名、説明、アイコンの色と、見出しフォント、本文フォントです。フォントはデフォルト、システム、ジオメトリック、丸ゴシック、セリフ、スラブ、等幅から選べます。
ブランドカラーとボタン：ブランドカラーです。メインボタン、所要時間の選択肢、選択した日、今日の日付、リンクに使われます。ここでは、ブランドカラー上のテキストの色、カード上でテキストとして表示されるブランドカラー、そしてボタンの形（四角、角丸、ピル）も選びます。
空き状況：カレンダー内の予約可能な日の背景、日付の形（円、角丸、四角）、週表示で予約できない時間帯の網掛けです。
時間枠：予約者が選ぶ時間ボタンの背景、枠線、テキストの色、形です。
フォームの入力欄：タイムゾーン選択と予約フォームの入力欄の背景、枠線、テキストの色、形です。

一部の色は自動に設定できます。その場合、OneCal が他の色から導き出します。例えば、ブランドカラー上のテキストは、読みやすい方の黒または白になります。各タブにはリセットボタンがあり、その要素をデフォルト値に戻します。

プリセットから始める

プリセットをクリックして、ライト、ダーク、ミニマル、ソフト、ボールドのいずれかを選びます。プリセットにマウスを重ねるとプレビューで確認でき、クリックすると適用されます。プリセットはブランドカラーを保ったまま、それ以外をすべて設定するので、目指す見た目に近い状態から始めて、個々の要素を調整できます。ライトは、テーマのない予約リンクのデフォルトの見た目です。

ライト、ダーク、ミニマル、ソフト、ボールドのプリセットを表示したプリセットギャラリー — プリセットギャラリー。

サイトに合わせる

サイトに合わせるは、ウェブサイトのスクリーンショットからテーマを作成します。クリックして、PNG、JPEG、WebP のいずれかの形式でスクリーンショットを追加し、テーマを作成をクリックします。OneCal はスクリーンショットから色、角、フォントを読み取り、すべてのテキストの色が背景の上で読めることを確認して、結果をプレビューに適用します。確認して、必要な部分を調整し、保存してください。最適な結果を得るには、スクリーンショットを撮る前にポップアップと Cookie バナーを閉じてください。OneCal はスクリーンショットをテーマの作成にのみ使い、保存しません。

サイトに合わせるは OneCal の AI アシスタントを使います。そのため、アシスタントを含むプランが必要で、作成した各テーマは毎月のアシスタント利用量に加算されます。AI アシスタントをご覧ください。

Claude や ChatGPT などの AI チャットを使いたい場合は、同じダイアログでAI用プロンプトをコピーをクリックします。このプロンプトは、チャットにウェブサイトのアドレスを尋ねさせ、サイトを調べさせて、テーマ設定で回答させます。その設定を設定を貼り付けでエディターに貼り付けてください。

スクリーンショットを追加した「サイトに合わせる」ダイアログと「テーマを作成」ボタン — サイトに合わせるは、ウェブサイトのスクリーンショットからテーマを作成します。

コピー、貼り付け、元に戻す、リセット

ツールバーの3点アイコンのその他のオプションメニューには、次の項目があります。

設定をコピー：テーマを JSON 設定としてクリップボードにコピーします。別の予約リンク、別の OneCal アカウント、またはテキストファイルにテーマを移すときに使います。
設定を貼り付け：別の予約リンクからコピーした、または手で書いたテーマ設定を適用します。省略した項目はデフォルト値のままになり、不明な項目を含む設定は拒否されます。
テーマをリセット：ブランドカラーを保ったまま、テーマ全体をライトのプリセットに戻します。

ツールバーの元に戻すボタンは、最後の変更を取り消します。保存をクリックするまで、何も公開されません。

テーマ設定は次のような形です。

{
  "accent": "#1a51e6",
  "pageBackground": "#f3f4f6",
  "surface": "#ffffff",
  "radius": 8,
  "buttonShape": "pill",
  "headingFont": "serif"
}

読みやすさの警告

テキストの色が背景の上で読みにくい場合、エディターはその要素のタブとマーカーに警告を表示し、設定の下に2つの色を示します。OneCal は、テキストと背景のすべての色の組み合わせを、通常のテキストに対する一般的なアクセシビリティの基準であるコントラスト比4.5:1で確認します。どちらかの色を変えるか、可能な場合はテキストの色を自動に設定して修正してください。

補足

テーマは予約ページのすべての色を設定するため、テーマのある予約リンクはライトモードとダークモードで同じ表示になります。予約者のライト・ダーク設定には従わなくなり、埋め込みコードの ui_theme パラメータも効果がありません。予約リンクをウェブサイトに埋め込むをご覧ください。
グローバルテーマは予約ページにも適用されます。予約リンクのテーマは、その予約の確認ページにも適用されます。
予約メールはブランドカラーのみを使います。