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

Jonotのディスプレイ、キオスク、お客様の整理券ページを、組織のブランドに合わせて変更できます。ブランディングは組織全体に適用されます。保存した変更はアプリを更新しなくても、ペアリング済みデバイスにすぐ反映されます。

次の動画では、ディスプレイ、キオスク、整理券ページに複数のブランドスタイルを適用しています。ロゴ、色、フォント、角丸が変わっても、機能は変わりません。

カスタマイズできる項目

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つの組織内のすべての拠点は同じブランドアイデンティティを共有します。