ブランディングをカスタマイズする

Jonotのお客様向け画面 — キューディスプレイ、キオスク、お客様自身の電話上のチケットページ — は、Jonotの既定の見た目の代わりに、組織のブランドに合わせてテーマを変更できます。ブランディングは組織単位で適用され、再デプロイなしにペアリング済みのすべてのデバイスへリアルタイムに反映されます。

以下のクリップは、同じ3つの画面がいくつかの異なるブランドアイデンティティを順に表示している様子です — ロゴ、カラー、フォント、角丸がすべて同時に切り替わりますが、その裏側のプロダクト自体はまったく変わりません。

カスタマイズできる項目

Adminで設定 → ブランディングを開きます。

ロゴ — ホストされた画像のURLです。カスタマーのチケットページとキオスクではフッターに、ディスプレイでは「ただいまお呼び出し中」の見出しの上に表示されます。
ロゴサイズ — カスタマー、キオスク、ディスプレイの各画面でロゴを拡大・縮小する倍率（0.8〜1.6倍、既定値1.0）です。
プライマリカラーとセカンダリカラー — ボタン、見出し、アクセントに使われる2つの基本ブランドカラーです。
アクセントカラー — 補助的なハイライトに使う色です。
呼び出しフラッシュカラー — チケットが呼び出されたときにディスプレイ全体に表示されるフラッシュの色です（フラッシュの挙動自体については通知音を参照してください）。
テキスト、背景、サーフェス、ボーダーの各カラー — 選択したブランドカラーに対して、あらゆる画面の視認性を保つための残りのパレットです。
角丸 — シャープ（0）から完全に丸みを帯びた形まで、カード、ボタン、パネルに一貫して適用されます。
ブランドフォント — Google Fontsで提供される最大3つのフォントのスタックで、フォールバック順に適用されます。最初のフォントが優先され、それ以降のフォントは前のフォントに足りない文字をカバーします。上下の操作でスタックの順序を並べ替えられ、各フォントには任意でスクリプトフィルター（ラテン文字、ギリシャ文字、日本語、韓国語、中国語など）を設定して、有効にした言語に必要なスクリプトをカバーするフォントに絞り込めます。カバレッジのヒントが、選択したフォントでカバーされていないスクリプトを知らせてくれます。スタックを空のままにすると、Jonotの既定フォント（Inter）にフォールバックします。各フォントは必要な画面ごとにオンデマンドで読み込まれます。
フォントスケール — 全体的に文字を大きく、あるいはコンパクトにしたい組織向けのサイズ倍率（0.85〜1.5倍）です。

Adminではディスプレイ、キオスク、カスタマーのチケット画面のライブプレビューが編集中に表示されるため、保存する前に各変更の効果を確認できます。

ロゴをアップロードする

Jonotはアップロードした画像をそのまま表示します — 自動的なトリミングや余白の追加は行われません。マークの周りに余白を持たせたい場合は、その余白を画像ファイル自体に組み込んでください。

透明な背景。 単色の背景を持つロゴは、すべての画面でその背景が四角い箱として表示されてしまいます。
横長または正方形のロゴが最適です。 横に広いロゴ、または正方形のマークは、フッターやディスプレイのメインエリアにきれいに収まります。極端に縦長のロゴは避けてください — 幅に合わせて縮小すると細い帯状になってしまいます。
形式: PNG、JPEG、WebP。SVGのアップロードは受け付けられません。
サイズ: 最大1MB。
解像度: 少なくとも400×160px（正方形のマークの場合は同等のアスペクト比）— ロゴサイズの設定で大きく表示した場合でも鮮明さを保つためです。

アップロード後にロゴの表示サイズを微調整するには、ロゴサイズの設定（0.8〜1.6倍、既定値1.0）を使用します — ライブプレビューに変更が即座に反映されます。

変更の反映方法

保存されたブランディングの変更は、キューの更新に使われるのと同じライブチャネルを通じて、組織のペアリング済みのすべてのディスプレイ、キオスク、開いているカスタマーのチケットページにプッシュされます — キャッシュのクリアもアプリの更新を待つ必要もありません。すでにチケットページを開いているお客様にも、再読み込みなしで新しい見た目が適用されます。

組織全体への適用

ブランディングは組織レベルで設定され、すべての拠点に適用されます。現在のところ拠点ごとの上書きはできません — 1つの組織内のすべての拠点は同じブランドアイデンティティを共有します。