ロゴ、外観モード、ブランドカラー、フォント、境界線の半径は、Webサイトだけでなく、決済ページ、顧客ログインページ、顧客ポータル、自動送信メール、オンラインコースの修了証など、すべてのタッチポイントにおけるブランドアイデンティティを定義します。Kanorioでは、これらの設定を"サイト設定 › ブランド"に集約しており、一度の更新ですべての場所で一貫性を保つことができます。
これは、サイトの構築方法に関わらず適用されます。Kanorioでサイトを作成した場合は、これらの設定が自動的に適用されます。ヘッドレスWebサイトの場合でも、決済、ログイン、メールにはこれらの設定が使用されます。また、フロントエンド側では、Content Delivery APIのbrandオブジェクトやKanorio Elementsを通じて、同じ値を取得できます（後述の「ヘッドレスでの利用」を参照）。
| 項目 | 説明 | 推奨事項 |
|---|---|---|
| ブランドロゴ | 画像をアップロードするか、組み込みのアイコンを選択します。ダーク背景専用のロゴを別途アップロードすることも可能です。 | 外観モードを「自動」または「ダーク」に設定している場合は、ダーク背景でもロゴがはっきりと見えるよう、ダークモード用のバージョンを追加することをお勧めします。 |
| ファビコン | ブラウザのタブやブックマークの横に表示される小さなアイコンです。デフォルトではブランドロゴから自動生成されます。アイコンベースのロゴは、ブランドカラーで白背景にレンダリングされます。ロゴやブランドカラーを変更すると自動的に更新されます。下のプレビューで保存後の見た目を確認できます。 | ロゴが複雑すぎる場合や長いテキストが含まれている場合は、自動生成をオフにして、正方形の小さなアイコンをアップロードしてください。 |
| 外観モード | サイト、チェックアウト、ログイン、カスタマーポータルのテーマをライトまたはダークから選択します。「自動」は訪問者のデバイス設定に従い、「ライト」と「ダーク」はすべての訪問者に対して一貫した外観を強制します。ヘッドレスサイトの場合、この設定はKanorioが提供するチェックアウト、ログイン、カスタマーポータルに適用されます。 | 「自動」を選択する場合は、ライトモードとダークモードの両方を確認してください。一方のモードに固定する場合は、そのモード専用のブランドカラーを設定するだけで済みます。 |
| ブランドカラー | ボタン、リンク、アクセントアイコン、ブランドカラーセクションのメインカラーです。ライトモードとダークモードで異なる色を設定できます。厳選されたパレットから選択するか、カスタムの16進数コードを入力してください。 | ダークモードのブランドカラーは、ダーク背景でも読みやすさを維持できるよう、ライトモードよりも少し明るい色にすることをお勧めします。 |
| ブランドテキストカラー | ブランドカラーのボタンや背景の上に表示されるテキストの色です。コントラストに基づいて自動的に黒または白が設定されますが、手動で指定することも可能です。 | 手動で指定する場合は、コントラストに注意してください。ページの右側にあるプレビューで、結果をリアルタイムで確認できます。 |
| フォント | サイトの主要言語の本文フォントを表示します。「その他の言語フォント」を展開して、英語、繁体字中国語、簡体字中国語、日本語、韓国語の特定のフォントを選択できます。すべてのフォントはプラットフォームによってホストされており、カスタムフォントファイルのアップロードには対応していません。 | 中国語と英語が混在するサイトでは、言語ごとに個別のフォントを選択すると、より優れた視覚体験を提供できます。 |
| 角の丸み | ボタン、カード、入力フィールド、画像の角の曲率を均一に調整します。「四角」、「標準」、「丸み」から選択できます。 | プレビューにはボタンとカードの両方が同時に表示されます。ブランドの美学に最も適したものを選んでください。 |
ページ右側（モバイルではフォームの下）には、Webサイト、決済、ログイン、メール全体でブランドがどのように表示されるかを示すライブプレビューが表示されます（「Webサイト」のプレビューは、ヘッドレス構成では非表示になります）。ライトモードとダークモードを切り替えて確認することも可能です。なお、メールのカードやボタンのスタイルは固定されていますが、ロゴの境界線の半径は継承されます。メールのロゴサイズや配置は、"サイト設定 › メール"で管理されます。
変更は、ページ下部の「保存」をクリックした直後に反映されます。エディタに戻って「公開」をクリックする必要はありません。
brand値およびKanorio Elementsテキストサイズやモジュールの密度といったレイアウト設定は、エディタの"デザイン"パネルで管理されており、これらを反映させるには「公開」操作が必要です。「デザイン」パネルには現在のブランド設定が表示され、変更が必要な場合はこのページへのリンクが提供されます。カスタムボタン、ブランド関連のURL、加盟店情報は、エディタの"ブランド情報"パネルで管理されます。詳細はブランドアイデンティティとサイト設定を参照してください。
ヘッドレスWebサイトの場合、Kanorioがホストするページ（決済、ログイン、ポータル、メール）は、これらの設定を自動的に使用します。独自のフロントエンドとこれらのブランド値を同期させるには、以下の2つの方法があります。
GET /site内のbrandオブジェクトは、計算済みのカラーパレット（ライト/ダーク、アクセシブルなテキストカラーを含む）、選択した外観モード、両方の背景用のロゴ、フォントファミリー、スタイルシートURL、およびレイアウトで直接使用できる境界線の半径値を提供します。技術的な詳細については、Kanorio開発者向けドキュメントを参照してください。
ブランドカラー、外観モード、フォント、境界線の半径は、決済、ログイン、メールページを含む全体でグローバルに使用されます。「サイト設定 › ブランド」に集約することで、不整合を防いでいます。「デザイン」パネルは現在のブランドを表示し、ここでの更新用リンクを提供する役割を担っており、テキストサイズや密度などのレイアウト固有の設定は「デザイン」パネルに残されています。
ブランド設定は公開操作を必要とせず、即座に反映されます。変更が確認できない場合は、ページを再読み込みしてください。ブラウザが古いスタイルをキャッシュしている可能性があります。
はい、設定を推奨します。独自のWebサイトをホストしている場合でも、決済、ログイン、顧客ポータル、メールはKanorioが提供しています。ここを設定することで、Kanorioがホストするすべてのタッチポイントでロゴやブランドカラーの一貫性を保つことができます。また、フロントエンド側でAPIやElementsを使用することで、完璧に同期させることが可能です。