色やフォントは、会社のスタイルに合わせて簡単にカスタマイズできます。 このガイドでは、Notiondesk ダッシュボードからフォントの更新、ブランドカラーの設定、グラデーション背景の作成などを行う方法を説明します。
フォントのカスタマイズ
メインフォント（タイトルと見出し）を選択してください
ヘルプセンターのタイトル、見出し、その他の主要要素に使用されるフォントを変更できます。
プライマリフォントを更新するには：
- Notiondesk ダッシュボードを開きます。
- カスタマイズセクションに移動してください。
- ブランディング設定で、プライマリフォントを探します。
- 利用可能なフォント一覧からフォントを選択してください。選択肢には、Inter、Lora、Montserrat、Noto、Robotoなどがあります。
一度選択すると、新しいフォントはヘルプセンターのタイトルと見出しに自動的に適用されます。
セカンダリフォント（本文用）を選択してください。
ヘルプセンター記事の本文に、別のフォントを設定することもできます。
セカンダリフォントを更新するには：
- Notiondesk ダッシュボードで、 [カスタマイズ]セクションに移動します。
- 「ブランディング」の下にある「セカンダリフォント」を探してください。
- Inter、Lora、Montserrat、Noto、Robotoなど、利用可能なフォントリストからフォントを選択してください。
選択したフォントは、ヘルプセンター全体の記事本文すべてに適用されます。
適切な補助フォントを使うことで記事が読みやすくなります。異なるフォントを組み合わせて独特のスタイルを演出したり、メインフォントと補助フォントの両方に同じフォントを使って一貫性を保ったりすることもできます。
色のカスタマイズ
ブランドカラーを更新する
ヘルプセンターのメインカラーは、ブランドに合わせて簡単に変更できます。
ブランドカラーを変更するには：
- Notiondesk ダッシュボードを開きます。
- カスタマイズセクションに移動してください。
- 「ブランディング」タブでは、以下の色を更新できます。
| 色 | 説明 |
|---|---|
| 原色 | ボタンやアクティブリンクなどのナビゲーション要素に使用されます。 |
| テキストの色 | ヘルプセンター全体の本文テキストに使用されます。 |
| リンクカラー | 標準的なハイパーリンクに使用されます。 |
| リンクホバー時の色 | ユーザーがリンクにマウスカーソルを合わせたときに、リンクの色を変更します。 |
| 背景色 | ヘルプセンター全体の背景色を設定します。 |
新しい色を選択するたびに、その変更はライブサイトに即座に反映されます。
ヘッダーの色をカスタマイズする
ヘルプセンターのヘッダー部分には、訪問者が最初に目にするナビゲーションリンクが含まれています。リンクの色をブランドに合わせて変更したり、視認性を向上させたりすることができます。
ヘッダーリンクの色を変更するには：
- Notiondesk ダッシュボードのカスタマイズセクションに移動してください。
- ヘッダータブを開きます。
- 以下のオプションを更新してください。
| 色 | 説明 |
|---|---|
| リンクカラー | ヘッダー内のリンクのデフォルトの色を設定します。 |
| リンクホバー時の色 | ユーザーがリンクにマウスカーソルを合わせたときの色を設定します。 |
ヒーローブロックの背景をカスタマイズする
ヒーローブロックはヘルプセンターの最上部に位置し、多くの場合、訪問者が最初に目にする部分です。背景色やグラデーションを使ってカスタマイズすることで、ブランドイメージをより効果的に表現できます。
シンプルな背景色を使用する
画像ではなく、すっきりとした単色の背景をご希望の場合は、以下の手順に従ってください。
- ダッシュボードの「カスタマイズ」セクションに移動してください。
- ヒーローブロックのタブを開きます。
- 背景色を選択してください。
- 背景色を選択するには、カラーピッカーを使用するか、ブランドの16進数コードを貼り付けてください。
選択した色がヒーローブロックの背景全体を塗りつぶします。
グラデーション背景を使用する
グラデーションを使うと、複数の色を滑らかにブレンドして変化させることができ、画像を使わずにヘッダーに奥行きを加えるのに最適な方法です。
グラデーションを設定するには：
- ヒーローブロックタブで、背景をグラデーションに設定します。
- グラデーションの種類を選択してください：
- 直線的：色が直線方向に流れる。
- 放射状：色が中心から外側に向かって放射状に広がります。
- 線形グラデーションの場合は、回転（角度）を調整してブレンドの方向を制御します。
- グラデーションカラーを追加してください。最大5色まで設定でき、それぞれにパーセンテージとカラーコードを指定できます。
グラデーションは非常にカスタマイズ性に優れています。2色で繊細な変化を表現したり、複数の色を組み合わせて大胆なグラデーションにすることも可能です。ただし、上部に表示されるテキストが読みやすい状態を保つように注意してください。
カードとフッターの色をカスタマイズする
コレクションカード、記事カード、ヘルプセンターのフッターで使用される色をカスタマイズすることで、ブランドイメージを維持し、視覚的な統一感を保つことができます。
コレクションとアイテムカード
各コレクションまたは記事は、ヘルプセンターのカード内に表示されます。これらのカードの背景色は、スタイルに合わせて変更したり、セクションを区別したりすることができます。
カードの色を更新するには：
- Notiondesk ダッシュボードのカスタマイズセクションに移動してください。
- 「コレクション」または「記事」タブを開きます。
- 背景色を選択してください
カード内の文字が読みやすいように、単色を選びましょう。
フッターの色
フッターとは、ヘルプセンターの各ページの最下部に表示されるセクションのことです。通常、リンクや連絡先情報などが含まれるため、分かりやすさが重要です。
フッターの色を更新するには：
- カスタマイズセクションに移動してください。
- フッタータブを開きます。
- フッターの背景色とフッターのテキスト色を設定します。
これにより、選択した背景色に対してフッターの見栄えが良く、アクセスしやすい状態が維持されます。
ヘルプセンターのスタイリングに関するベストプラクティス
フォントや色をカスタマイズすることで、ヘルプセンターをブランドイメージに近づけることができますが、読みやすさと一貫性を保つことも同様に重要です。最適な結果を得るためのヒントをいくつかご紹介します。
- ブランドカラーを守りましょう
ウェブサイトや製品で使用している色と同じ色を使用しましょう。そうすることで、ユーザーにとって馴染みやすいものになります。
- 読みやすいフォントを使用してください
過度に装飾的なフォントは避けましょう。特に本文には使用しないでください。読みやすく、一目で内容が把握しやすいフォントを選びましょう。
- コントラストを良好に保つ
テキストと背景の間に十分なコントラストがあることを確認してください。例えば、白い背景に薄いグレーのテキストは避けてください。
- グラデーションには注意してください
グラデーションは視覚的な面白さを加えることができますが、色が多すぎたり、急激な変化があったりすると、コンテンツが読みにくくなることがあります。最適な結果を得るには、2～3色に絞るのが良いでしょう。
- デスクトップとモバイルでプレビュー
さまざまな画面サイズでデザインを確認し、すべてがきれいでプロフェッショナルに見えることを確認してください。