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

概要

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

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

設定場所

エディタの「[設定] → [デザイン]」を開きます。 調整しながら、デスクトップ、タブレット、モバイルのプレビューを使用して効果を確認してください。

一度に1つか2つの項目だけを変更し、全体への影響を観察してみてください。フォント、色、スペーシングを変更し、同時に多くの画像を追加すると、どの変更がサイトを不格好にしたのかを特定するのが難しくなります。

フォントと文字サイズ

タイポグラフィは、見た目の良いフォントを選ぶだけではありません。言語ごとに異なるフォントを設定したり、H1、H2、H3、本文の文字サイズを調整したりできます。

言語ごとのフォント設定

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

各言語で利用可能な厳選されたフォントのおおよその数です。

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

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

文字サイズの調整

H1、H2、H3、本文のテキストサイズはそれぞれ9段階で個別に調整できます。H1はページで最も重要な見出し、H2とH3はセクションの階層に使用され、本文は一般的な説明コンテンツ用です。

すべてのテキストを大きくするだけはやめましょう。明確な見出しの階層は、訪問者がコンテンツをスキャンするのに役立ち、支援技術がページの構造を理解するのを助けます。

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

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

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

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

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

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

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

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

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

表示モードの選択

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

モジュールの密度

密度はモジュール間の間隔を制御し、コンテンツがどれだけコンパクトまたはスペーシーに見えるかに影響します。Kanorioはサイト全体で2つのオプションを提供しています。

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

角丸

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

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

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

ウェブサイトアイコン（ファビコン）は、ブラウザのタブやブックマークの隣にある小さなグラフィックです。「デザイン」タブではなく、「[サイト管理] → [一般]」で調整します。

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

公開前のチェックリスト

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

クイックヒント

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

関連ドキュメント

• サイト全体の設定と管理
• ヘッダーとフッターのデザイン
• 画像とメディアアセット
• 下書き、保存、公開