ブランドビジュアルとスタイル設定

約 16 分

概要

ブランドビジュアルとは、ウェブサイト全体の印象のことです。フォント、色、文字サイズ、密度、角丸、ライト/ダークモードは、些細なディテールのように思えるかもしれませんが、これらが一体となって、訪問者があなたのサイトを明確で、信頼でき、ブランドに沿ったものだと感じるかどうかを左右します。

これらの設定はサイト全体に適用されます。ページごとにフォントやブランドカラーをリセットする必要はありません。一度設定すれば、サイト全体のモジュールが同じ方向性を使用します。

設定場所

エディタの"設定" → "デザイン"を開きます。調整しながら、デスクトップ、タブレット、モバイルでの効果を同時にプレビューできます。

一度に1つか2つの項目だけを変更してみて、全体的な効果を観察してください。フォント、色、スペーシング、そして多くの画像を一度に変更すると、どの変更がサイトを不調に見せたのかを特定するのが難しくなります。

フォントとタイポグラフィ

タイポグラフィは、見た目の良いフォントを選ぶ以上のものです。言語ごとに異なるフォントを設定したり、H1、H2、H3、本文テキストのタイポグラフィを調整したりできます。

言語ごとのフォント設定

「デザイン」設定には、まずサイトのコンテンツ言語に最も関連性の高いフォントフィールドが表示されます。「多言語フォント」を展開すると、英語、繁体字中国語、簡体字中国語、日本語、韓国語のフォントを個別に設定できます。

各言語で利用可能なキュレーションされたフォントのおおよその数は次のとおりです。

| 言語 | |--------------|--------------| | 英語 | 170 フォント | | 繁体字中国語 | 60 フォント | | 簡体字中国語 | 30 フォント | | 日本語 | 70 フォント | | 韓国語 | 40 フォント |

各言語のメニューはフォントのサポートによってフィルタリングされているため、中国語コンテンツに英語のみをサポートするフォントを適用することを心配する必要はありません。利用可能なフォントのリストはアップデートにより変更される可能性があります。現在、独自のフォントファイルのアップロードはサポートされていません。

サイトに中国語と英語の両方のコンテンツがある場合は、見出し、ボタン、本文テキストで両方の言語がどのように表示されるかを確認してください。フォント選択の原則は「個性よりも明瞭さ」です。ブランド名や主要な見出しにはある程度の個性を持たせることができますが、長文の本文はモバイルで読みやすい必要があります。

タイポグラフィサイズの調整

H1、H2、H3、本文テキストのタイポグラフィサイズを個別に調整でき、それぞれに9つのサイズレベルがあります。H1はページ上で最も重要な見出し、H2とH3はセクションの階層に使用され、本文テキストは一般的な説明コンテンツ用です。

すべてのテキストを大きくするだけではありません。明確な見出しの階層は、訪問者がコンテンツをスキャンするのに役立ち、アクセシビリティツールがページ構造を理解するのを助けます。

ブランドカラー、テキストカラー、表示モード

Kanorioのサイト全体の色設定は、これら3つの領域に集中しています。

| 設定 | |--------------|--------------| | プライマリブランドカラー | ボタン、ハイライト、リンク、一部の背景に使用されるメインカラー。ライトモードとダークモードで別々のカラーセットがあります。 | ブランドテキストカラー | プライマリブランドカラーの背景に表示されるテキストまたはアイコンの色。システムは自動的に黒/白のコントラストを決定できますが、各モードで手動で上書きすることもできます。 | 表示モード | 公開サイトが訪問者のシステム設定に従うか、ライトまたはダーク表示に固定されるかを決定します。

サイト全体の二次色または背景色の個別のフィールドはありません。プライマリブランドカラー、モジュール画像、コンテンツの階層を使用して視覚的な強調を作成してください。

プライマリブランドカラーの選択

ブランドカラーピッカーには24のプリセット組み合わせがあり、クラシックな鮮やか、ミュート（モランディ）、アース/ニュートラルなパレットに分かれています。各セットには、ライトモードとダークモードの両方に適したペアカラーが含まれています。

ブランドにすでにカラーガイドラインがある場合は、カラーピッカーを使用するか、Hex、RGB、またはHSLカラーコードを手動で入力することもできます。ピッカーは最近使用した色を記憶しており、簡単に呼び出すことができます。ライトモードの色を調整した後、システムはダークモードの開始提案も生成するのに役立ちます。結果を確認するために、必ずモードを切り替えてください。

ブランドテキストカラーとコントラストの確認

ボタンやブロックがブランドカラーを背景として使用する場合、テキストは判読可能にするために十分なコントラストが必要です。システムはデフォルトで黒または白のテキストを自動選択し、コントラスト警告を表示します。ブランドガイドラインで特定のテキストカラーが必要な場合は、手動で調整することもできます。

重要な情報を伝えるために色だけに頼らないでください。たとえば、エラーメッセージを赤くするだけです。色覚の違いを持つ訪問者も理解できるように、明確なテキスト、アイコン、または位置情報を使用してください。

表示モードの選択

オプション
システムに従う
ライトを強制
ダークを強制

「システムに従う」を選択する前に、両方のモードを確認してください。ロゴ、写真、またはブランドカラーがダーク背景でクリアに見えない場合は、ライトモードを強制するか、ダークモードのブランドカラーを調整することを検討してください。

モジュールの密度

密度は、モジュール間のスペースを制御し、コンテンツの表示方法（コンパクトか、ゆったりか）を決定します。Kanorioはサイト全体で2つのオプションを提供しています。

密度
標準
コンパクト

これをモバイルプレビューで確認してください。過度にコンパクトな設定は、ボタンや段落の読みにくさにつながる可能性があり、過度にゆったりした設定は過剰なスクロールを必要とします。

角丸

角丸は、ボタン、カード、画像の端がどれだけ四角いか丸いかを制御します。この設定もサイト全体に適用されます。

角丸
シャープ
標準
ソフト

選択する際は、ロゴ、製品スタイル、写真の雰囲気に合わせてください。すべてのモジュールに異なるスタイルを使用する必要はありません。

ウェブサイトアイコン（ファビコン）

ウェブサイトアイコンは、ブラウザのタブやブックマークの隣にある小さなグラフィックです。「デザイン」タブでは設定できません。「サイト管理」→「一般」で調整してください。](https://app.kanorio.com/overview?view=site-management)

ロゴに基づいたシステム生成アイコンをそのまま使用するか、カスタムアイコンをアップロードできます。ファビコンは非常に小さいため、テキストや非常に細かい線を含めないようにしてください。

公開前のチェックリスト

ライトとダークのプレビューを切り替えて、ロゴ、ボタン、テキストのコントラストを確認します。
モバイルプレビューに切り替えて、見出しが長すぎず、ボタンがタップしやすいことを確認します。
同じ種類のボタン、カード、見出しが一貫したスタイルを使用していることを確認します。
完了したら、"公開"をクリックして公開サイトを更新します。

クイックヒント

ブランドガイドラインがない場合は、まず1つのプライマリブランドカラー、1つのフォントの方向性、1つの密度、1つの角丸スタイルを選択することから始めます。一度に多くのスタイルを使用しないでください。
チェックには、デスクトップ画面だけでなく、実際の電話を使用してください。モバイルでは、小さいテキストや低いコントラストがより問題になります。
洗練された外観を実現するために、より多くの色が必要なわけではありません。空白、一貫性、明確な階層が通常はより重要です。

よくある質問

はい。ブランドカラーはサイト全体の設定であり、変更は、その設定を使用しているすべてのボタン、リンク、およびビジュアル要素に影響します。変更後、すべてのページを確認し、特にテキストのコントラストと画像上のボタンに注意してください。

現時点ではできません。プラットフォームが提供するフォントから選択してください。これらはすでに言語サポートでフィルタリングされています。英語、繁体字中国語、簡体字中国語、日本語、韓国語のフォントを個別に設定できます。

ダークモードまたはライトモード自体が検索ランキングを直接決定するわけではありません。真に重要なのは、コンテンツの可読性、ページに正しいタイトルと説明があるかどうか、そして公開サイトが正常に読み込まれるかどうかです。

これらは現在サイト全体の設定です。特定のページに異なる強調を加えたい場合は、そのページの画像、コピー、モジュールの配置を使用して差別化を作成してください。

ブランドカラーの背景に表示されるテキストまたはアイコンの色です。システムはデフォルトで読みやすい黒または白を選択します。ブランドガイドラインで必要とされる場合は、これを上書きでき、コントラストプロンプトを確認してください。