ヘルプセンター - ビジュアルブランド設定 — Helpshift Technical Supportヘルプセンター

ビジュアルブランド設定では、以下が可能です。

アプリのブランドアイデンティティ設定
アプリのブランドカラー設定
アプリのブランドフォント設定

アプリのブランドアイデンティティ設定

アプリレベルのブランドアイデンティティ設定を変更するたびに、ページバナーの［下書きを保存］をクリックすることをお勧めします。そうしないと、作業を繰り返す必要がある場合があります。

（必須）会社、部門、または製品ラインのブランド名を設定します。

設定方法
オプションペインの［ブランドアイデンティティ］見出しの下にある［ブランド名］フィールドに、公開ブランドを入力します。

効果
入力すると、ナレッジベースの記事とFAQの上のメインナビゲーションバーに、「サポート」という単語の前にブランド名が表示されます。
ヒント：ナレッジベースの記事とFAQの上のメインナビゲーションバーに「サポート」という単語を自動的に表示させたくない場合は、簡単に表示されないようにする方法があります。

［ブランドとカスタマイズ］ページで、［ヘッダー］タブがアクティブになっている場合、［Webサポートポータルのタイトル］フィールドにsys.hc.titleテキストテンプレートが入力されていることがわかります。
（オプション）会社、部門、または製品ラインのロゴをアップロードします

設定方法
1. オプションペインの［ブランドアイデンティティ］見出しの下にある［ロゴ］フォームで、［画像をアップロード］をクリックします。
2. 適切なファイルを参照します。
3. ファイルをクリックして選択します。次に、Enterキーを押してアップロードを開始します。
  
  効果
  アップロードすると、ナレッジベースの記事とFAQの上のメインナビゲーションバーに、ブランド名の前にロゴ画像が表示されます。
（オプション）ファビコンを設定します

設定方法
1. オプションペインの［ブランドアイデンティティ］見出しの下にある［ファビコン］フォームで、［画像をアップロード］をクリックします。
2. 適切なファイルを参照します。
3. ファイルをクリックして選択します。次に、Enterキーを押してアップロードを開始します。

効果
ファビコンは、Webブラウザのウィンドウタブとブックマークに読み込まれます。

ヘルプセンター - アプリのカラー設定

ヒント：アプリレベルのブランドカラー設定または値を変更するたびに、ページバナーの［下書きを保存］をクリックすることをお勧めします。そうしないと、作業を繰り返す必要がある場合があります。

（オプション）アプリのカラーテンプレートを選択します

設定方法
カラーテンプレートを選択する方法は2つあります
1. 新規カラーテンプレートを作成する
  1. オプションペインの［カラー］見出しの下にある、任意のカラーラベルの横にある塗りつぶされた円をクリックします。カラーピッカーが開きます。
  2. カラーピッカーで、優先するアクションカラーを選択します。
  3. カラーピッカーの外側の任意の場所をクリックして閉じます。
  4. ［テンプレートを追加］アイコンをクリックします。
  5. テキストボックスにテンプレート名を入力します。
  6. オプションペインのさまざまなカラーラベルの下にある、ラベルの横にある塗りつぶされた円をクリックします。カラーピッカーが開きます。
  7. カラーピッカーで、優先するカラーを選択します。
  8. カラーピッカーの外側の任意の場所をクリックして閉じます。
  9. 上記の手順を繰り返して、さまざまなラベルのカラーを選択します。
  10. このテンプレートをデフォルトとして使用する場合は、チェックボックスをオンにします。
  11. ［保存］をクリックします。
2. 新規カラーテンプレートを編集する
  1. オプションペインの［カラー］見出しの横にある［フォルダー］アイコンをクリックして、テンプレートリストを表示します。
  2. ［編集］アイコンをクリックして、新規カラーテンプレートを作成します。
  3. テキストボックスにテンプレート名を入力します。
  4. オプションペインのさまざまなカラーラベルの下にある、ラベルの横にある塗りつぶされた円をクリックします。カラーピッカーが開きます。
  5. カラーピッカーで、優先するカラーを選択します。
  6. カラーピッカーの外側の任意の場所をクリックして閉じます。
  7. 上記の手順を繰り返して、さまざまなラベルのカラーを選択します。
  8. このテンプレートをデフォルトとして使用する場合は、チェックボックスをオンにします。
  9. ［保存］をクリックします。
    
    効果
    テンプレートを選択すると、これらの値に対して以前に行った選択が上書きされます。
    - アクセントカラー
    - アクションカラー
    - 背景色
    - セカンダリ背景色
    - 前景色
    - コンテンツカラー
      ヒント：この後の表の行では、各カラー設定の具体的な効果について説明します。
（条件付き）アプリのアクセントカラーを設定します

設定方法
1. オプションペインの［カラー］見出しの下にある［アクセントカラー］ラベルの横にある塗りつぶされた円をクリックします。カラーピッカーが開きます。
2. カラーピッカーで、優先するアクセントカラーを選択します。
3. カラーピッカーの外側の任意の場所をクリックして閉じます。
  
  効果
  ヘルプセンター 2.0では、選択した「アクセントカラー」が次のすべての要素に均一に適用されます。
  - サイトバナー
  - ヘルプセンターのお知らせバナー
  - チャットランチャー
  - チャットウィジェットヘッダー
  - チャットメッセージバブル（ユーザー）
（条件付き）アプリのアクションカラーを設定します

設定方法
1. オプションペインの［カラー］見出しの下にある［アクションカラー］ラベルの横にある塗りつぶされた円をクリックします。カラーピッカーが開きます。
2. カラーピッカーで、優先するアクションカラーを選択します。
3. カラーピッカーの外側の任意の場所をクリックして閉じます。
  
  効果
  ヘルプセンター 2.0では、選択した「アクションカラー」が次のすべての要素に均一に適用されます。
  - リンク
  - ボタン
  - ハイライト
（条件付き）アプリの背景色を設定します

設定方法
1. オプションペインの［カラー］見出しの下にある［背景色］ラベルの横にある塗りつぶされた円をクリックします。カラーピッカーが開きます。
2. カラーピッカーで、優先する背景色を選択します。
3. カラーピッカーの外側の任意の場所をクリックして閉じます。
  
  効果
  ヘルプセンター 2.0では、選択した「背景色」が次の要素に均一に適用されます。
  - ページの背景
  - チャットウィジェットの背景
（条件付き）アプリのセカンダリ背景色を設定します

設定方法
1. オプションペインの［カラー］見出しの下にある［セカンダリ背景色］ラベルの横にある塗りつぶされた円をクリックします。カラーピッカーが開きます。
2. カラーピッカーで、優先するセカンダリ背景色を選択します。
3. カラーピッカーの外側の任意の場所をクリックして閉じます。
  
  効果
  ヘルプセンター 2.0では、選択した「セカンダリ背景色」が、お問い合わせフッターの背景にのみ適用されます。
（条件付き）アプリの前景色を設定します

設定方法
1. オプションペインの［カラー］見出しの下にある［前景色］ラベルの横にある塗りつぶされた円をクリックします。カラーピッカーが開きます。
2. カラーピッカーで、優先する前景色を選択します。
3. カラーピッカーの外側の任意の場所をクリックして閉じます。
  
  効果
  ヘルプセンター 2.0では、選択した「前景色」が次のすべての要素に均一に適用されます。
  - カード
  - ポップアップメッセージ
  - モーダルダイアログ
  - チャットウィジェットの返信フッター
  - オプションピル
  - リストピッカー
  - インテントピッカー
（条件付き）アプリのコンテンツカラーを設定します

設定方法
1. オプションペインの［カラー］見出しの下にある［コンテンツカラー］ラベルの横にある塗りつぶされた円をクリックします。カラーピッカーが開きます。
2. カラーピッカーで、優先するコンテンツカラーを選択します。
3. カラーピッカーの外側の任意の場所をクリックして閉じます。
  
  効果
  ヘルプセンター 2.0では、選択した「コンテンツカラー」が次のすべての要素に均一に適用されます。
  - 本文
  - アイコン
  - 線
  - チャットメッセージバブルテキスト（エージェント）

注：カラープリセットを適用していない場合にのみ、上記のすべてのカラーを手動で設定する必要があります。それ以外の場合、プリセットはこのカラー設定を自動的に入力します。

ヘルプセンター2.0 - アプリのフォント設定

ヒント：ブランドフォントの設定または値を変更するたびに、ページバナーの［下書きを保存］をクリックすることをお勧めします。そうしないと、作業を繰り返す必要がある場合があります。

（必須）アプリのフォント設定を構成します

設定方法
1. オプションペインの［フォント］見出しの下で、好みに応じて［システムデフォルトフォント］または［カスタムフォント］をクリックします。これらのオプションは相互に排他的です。
2. （条件付き）［カスタムフォント］をクリックすると、4つの小さなフォームが表示され、それらすべてを使用してカスタムフォントファイルをアップロードする必要があります。それぞれ、通常、斜体、太字、太字斜体用です。
3. 最初のフォントアップロードフォームで、［フォントをアップロード］をクリックします。
4. 適切なWOFFまたはWOFF2フォントファイルを参照します。
5. フォントファイルをクリックして選択します。次に、Enterキーを押してアップロードを開始します。
6. 残りの各WOFFまたはWOFF2フォントファイルに対して、同じアップロード手順を完了します。
  
  効果
  1. システムデフォルトフォントを選択すると、ヘルプセンターの外観が各エンドユーザーの個人的な好みに一致するようになります。
  2. カスタムフォントを選択すると、プラットフォーム、デバイス、ソフトウェア、またはユーザーに関係なく、ヘルプセンターの外観が少なくともある程度一貫性を持つようになります。Helpshiftインスタンス（「テナント」）は、サポートされているすべてのユースケースでレンダリングするためにこれらのフォントをホストします。
（オプション）アプリのフォント設定テンプレートを構成します

設定方法
フォント設定テンプレートを選択する方法は2つあります
1. 新規フォントテンプレートを作成する
  1. オプションペインの［フォント］見出しの下で、［カスタムフォント］をクリックします。
  2. いずれかのフォントスタイルで、［フォントをアップロード］をクリックします。
  3. 適切なWOFFまたはWOFF2フォントファイルを参照します。
  4. フォントファイルをクリックして選択します。次に、Enterキーを押してアップロードを開始します。
  5. ［追加］アイコンをクリックして、フォントテンプレートを作成します。
  6. テキストボックスにテンプレート名を入力します。
  7. 上記の手順を使用して、他のフォントWOFFまたはWOFF2フォントファイルのアップロードを完了します。
  8. このテンプレートをデフォルトとして使用する場合は、チェックボックスをオンにします。
  9. ［保存］をクリックします。
2. 既存のフォントテンプレートを編集する
  1. フォント見出しの横にあるフォルダーアイコンをクリックして、テンプレートリストを開きます。
  2. フォントテンプレートリストが表示されます。［編集］アイコンをクリックして、新しいフォントテンプレートを作成します。
  3. テキストボックスでテンプレート名を編集/入力します。
  4. いずれかのフォントスタイルで、［フォントをアップロード］をクリックします。
  5. 適切なWOFFまたはWOFF2フォントファイルを参照します。
  6. フォントファイルをクリックして選択します。次に、Enterキーを押してアップロードを開始します。
  7. 残りの各WOFFまたはWOFF2フォントファイルに対して、同じアップロード手順を完了します。
  8. ［保存］をクリックします。
    
    効果
    カスタムフォントを選択すると、プラットフォーム、デバイス、ソフトウェア、またはユーザーに関係なく、ヘルプセンターの外観が少なくともある程度一貫性を持つようになります。Helpshiftインスタンス（「テナント」）は、サポートされているすべてのユースケースでレンダリングするためにこれらのフォントをホストします。

ヘルプセンター - ビジュアルブランド設定

アプリのブランドアイデンティティ設定

ヘルプセンター - アプリのカラー設定

ヘルプセンター2.0 - アプリのフォント設定

関連記事