Help Center設定では、Help Centerのブランディングや顧客向けの表示方法を制御するための幅広いカスタマイズオプションが見つかります。Help Centerの変更をリアルタイムで設定およびプレビューする方法は以下の通りです。
注意:この記事の変更を行うにはHelp Center設定へのアクセスが必要です。Settings > Help Centerが表示されない場合は、ワークスペース管理者にアクセスを依頼してください。
一般設定の構成方法
Help Centerの対応言語、domains、分析、プライバシー、ソーシャルメディア画像を設定するには、Settings > Help Centerに移動します。設定したいHelp Centerをクリックし、右上のConfigure and styleをクリックします。
Configure and Styleページで、Generalタブを開きます。
Multi Help Centerを使用している場合は、各Help Centerの設定を個別に構成できます。
Help Center名
Help Centerの内部名を変更するには、Settings > Help Centerに移動し、名前を変更したいHelp Centerの横にあるConfigure and Styleをクリックします。次に、ページ左上のHelp Center名をクリックしてインラインで編集します。
デフォルト言語の設定方法
デフォルト言語を選択するには、Settings > Help Center > Configure & Styleに移動し、GeneralタブをクリックしてSupported languagesを開きます。
デフォルト言語を選択し、保存して公開をクリックします。
デフォルト言語を選択すると、Help Centerのユーザーインターフェースが設定した言語で表示されます。これにより、以下の言語が変更されます:
ホームページの検索プロンプト。
記事数、著者、最終更新日。
記事のリアクションプロンプト。
‘We run on Intercom’ロゴなど。
注意:
Help Centerで複数言語をサポートすることもできます。
Messengerの言語を変更したい場合は、Messenger Settingsで別途設定する必要があります。
Help Centreが単一言語のみをサポートしている場合でも、単一言語を表示するドロップダウンオプションがあり、これを削除することはできません。
Help Centerのdomain設定方法
デフォルトdomainを使用する
Help Centerが公開されると、IntercomはデフォルトでIntercom domainでコンテンツを提供します。続行する前にHelp Centerが公開設定されていることを確認してください。
デフォルトURLを確認するには、Settings > Help Center > Configure & Styleに移動し、GeneralタブをクリックしてDomainsを開きます。
アプリ名はURLの一部になります。例えば、アプリ名が‘ExampleApp’の場合、URLは次のようになります:
URLのアプリ名部分(例:exampleapp)は好きなように編集できます。
カスタムdomainを設定する
独自のdomainを使ってコンテンツを提供したい場合は、カスタムdomainを設定できます。
DNSプロバイダー(domain設定を管理するサービス、例:GoDaddy、Cloudflare、DNSimple、Route53)にアクセスし、CNAMEレコード(domainを別のアドレスに指すDNSエントリ)を作成して、ターゲットホストをcustom.intercom.helpに設定します。このガイドは設定を支援します。
注意:
サブドメイン(例:help.exampleapp.io)とサブパス(例:exampleapp.io/help)の両方がサポートされています。
DNSの変更は最大72時間かかることがありますが、通常はもっと早く反映されます。
設定を完了するには、Settings > Help Center > Configure & Styleに移動し、Domainsを開きます。カスタムdomainのURLを入力し、保存して公開をクリックします。保存後、カスタムdomainが有効になります。DNSの伝播には最大72時間かかることがありますが、通常はもっと早く解決します。それまではデフォルトのIntercom domainが利用可能です。
検索エンジンのインデックス登録を無効にすることも選択でき、記事を非公開にできます。
Google Analyticsの接続方法
Help CenterとGoogle Analyticsを統合して訪問者の行動を把握するには、Google Analyticsアカウントの管理者 > データストリームで見つかるGA4 Measurement IDが必要です。
Google AnalyticsアカウントからGA4 Measurement IDをコピーしたら、Settings > Help Center > Configure & Styleに移動し、Analyticsを開いて「Google Analytics Tracking ID」に貼り付けます。
記事アクセス制限の方法
記事をログイン済みのUsersのみに制限するには、記事の詳細パネルで対象をUsersに設定します。記事がUsersに設定されると、製品にログインしている人だけが閲覧でき、訪問者やleadsはHelp Centerや検索結果で表示されません。Settings > Help Center > Configure & Styleに移動し、Privacyを開いてログインページのリンクを入力します。
訪問者やleadが制限された記事(Usersのみ設定)にアクセスしようとすると、ここに入力したログインページURLにリダイレクトされ、ログインを促すメッセージが表示されます。ログインページURLがない場合はリダイレクトされません。
検索エンジンのインデックス登録について学びましょう。
Help Centre自体を非公開にすることはできません。すべての記事を非公開にしてもお客様はHelp Centerにアクセスできますが、ログインするまで記事を見ることはできません。
ソーシャルメディア画像
ファビコン
Settings > Help Center > Configure & Style > General > Social media images からfaviconをアップロードできます。このfaviconはお客様がHelp Centerのウェブサイトを訪れた際、ブラウザのタブタイトルの前に表示されます。
注意:Help Centerのホームページでは、ブラウザのタブタイトルにサイト名の前にシステム生成のプレフィックス(例:「Home |」英語の場合)が自動的に含まれます。このプレフィックスは現在、ワークスペースのメンバーによって削除やカスタマイズはできません。
推奨比率:1:1。最大ファイルサイズ:150KB。最大寸法:588 x 588px。
ソーシャルメディア画像
高解像度のソーシャルメディア画像もアップロードできます。Help Centerや記事がFacebook、Twitter、その他のソーシャルメディアで共有されたときに表示されます。
推奨寸法:1200 x 630px(比率1.91:1)。最大ファイルサイズ:2MB。
Help Centerの削除方法
このオプションは複数のHelp Centersをお持ちの場合にのみ利用可能で、元の(デフォルト)Help Centerはワークスペースから削除できません。
これが唯一のHelp Centerで削除したい場合は、代わりにNot liveに設定できます。
Help Centerを削除すると、復元する方法はありません。
スタイリング設定の方法
Help Centerのスタイリングやホームページ、コレクション、記事、ヘッダー、フッターの表示方法を管理するには、Settings > Help Center > Configure & Styleに移動し、Stylingタブを開いてください。
Multi Help Centerを使用している場合、各Help Centerごとにスタイリング設定を個別に構成できます。
ブランドのインポート方法
Settings > Help Center > Configure & Styleに移動し、StylingをクリックしてImport your brandを開き、ブランドのURLを入力します。Intercomは自動的にHelp Centerをブランドに合わせてスタイリングします。
ブランドをインポートすると、Intercomは自動的にロゴと色を適用します。右側のHelp Centerプレビューはインポートされたブランドを反映して更新されます。変更を適用するにはSave and set liveをクリックしてください。
ブランドをインポートする際は正しいURLを入力する必要があります。通常はウェブサイトのトップレベルドメインです。例:「example.com」で、「subdomain.example.com」ではありません。アクセスできないドメインや機能しない場合はエラーメッセージが表示されます。
インポートされた色はHero blockセクションのすべてのカラ―オプションの隣に表示されます。これにより、ブランドカラーを失うことなくHelp Centerのさまざまな部分の色を簡単に編集できます。
変更は自動的に保存されないため、必ずSave and set liveをクリックしてください。
ヒーロー画像の追加
Hero imageを含める場合、画像はレスポンシブであることに注意してください。つまり、ヘッダー全体の領域を自動的に拡大縮小します。画像が切り取られたり伸びたりしないように、選択したヘッダーの高さに画像のアスペクト比を合わせる必要があります。
推奨寸法と比率
この表を使って、設定で選択したHeader heightに画像が合っているか確認してください。
ヘッダーサイズ | 高さ | 推奨アスペクト比 | 例の寸法 |
小 | 245px | 6:1 | 1470 x 245px |
中 | 360px | 4:1 | 1440 x 360px |
大 | 480px | 3:1 | 1440 x 480px |
共有要素の設定方法
本文の背景色
設定 > Help Center > Configure & Style に移動し、スタイリングタブをクリックして Shared elements を開き、本文の背景色を変更すると、すべての Help Center ページ(ホーム、コレクション、記事、検索、エラーページなど)がそれに応じて適応します。
アクションカラー
本文の背景色とよく対比するアクションカラーを設定してください。これはボタン、リンク、その他のインタラクティブな要素に Help Center 全体で適用されます。
注意:
JPEG/PNG/GIF 形式でアップロードされたアイコンにはアクションカラーは更新されません。
Help Center を公開すると色が更新されます。
デザインスタイル
すべてのページのコレクションと記事に適用されるカードまたはフローティングのデザインスタイルから選択してください。
カードデザインスタイルを選択すると、カードの背景色は Help Center の背景色と十分なコントラストを提供するよう自動生成されます。カードの背景色はカスタマイズできません。
コーナー半径
コレクション、記事、およびホバー状態(コレクション内の記事にカーソルを合わせたとき)の要素のコーナー半径を設定します。
注意:コレクションカードにアップロードされたカスタムアイコンは独立した画像として扱われ、ここで設定したコーナー半径を自動的に継承しません。カスタムアイコンに角丸を適用するには、アップロード前に画像を角丸にしてください。
フォント
Help Center で使用するために事前に読み込まれた Google フォントのリストから選択してください:
プライマリフォント - ウェルカムメッセージ、タイトル、見出しに使用されます。
セカンダリフォント - 説明文、記事本文およびその他すべてのテキストに使用されます。
Help Center スタイリング設定で選択可能なフォントは以下の通りです:
Bitter
Inter
Lato
Lora
Montserrat
Open Sans
Oswald
Playfair Display
Poppins
Noto Sans
Noto Serif
Raleway
Roboto
Roboto Mono
Roboto Slab
注意:
選択したフォントは Messenger には適用されず、Messenger は常にシステムフォントを使用します。
以前使用していたproxima novaは2023年6月に削除されました。似た見た目を実現するにはMontserratまたはOpen Sansを使用できます。
または、カスタムフォントの管理をクリックして、ブランドスタイルに合ったカスタムフォントをアップロードしてください。
記事の著者を表示
設定 > Help Center > Configure & Style に移動して、ホームページ、コレクション、記事で記事の著者を表示または非表示にします。
スタイリングタブをクリックして Shared elements を開き、下にスクロールして「記事の著者を表示」を切り替えます。
ヘッダーのカスタマイズ方法
設定 > Help Center > Configure & Style からスタイリングタブをクリックし、ヘッダーを開いて、ロゴ、ページタイトル/会社名、およびヘッダーリンクでトップヘッダーセクションをデザインします。
ヘッダーはすべての対応言語ごとに個別に設定することもできます。
ロゴ
高解像度のロゴをアップロードしてください。
推奨比率:5:1。最大1MB、最大幅/高さ720px。
Help Center Headerにロゴを追加すると、Page Titleが置き換えられます。Help Center Footerにロゴを追加すると、Page Titleが置き換えられます。
Page title
Page Titleフィールドは、お客様がHelp Centerを訪れたときにブラウザのタブに表示されるテキストを制御します。カスタマイズするには、Settings > Help Center > Configure & Styleに移動し、StylingタブをクリックしてHeaderを開き、Page Titleに希望のタイトルを入力してください。これにより、ブラウザタブのタイトルをブランドに合わせて更新できます。
Headerリンク
ブログやコミュニティなど、他のウェブページへのリンクを最大3つまで追加できます。
Headerは他のコンテンツの上に重なるのではなく、他のコンテンツを押し下げます。
ヒーローブロックのカスタマイズ方法
ヒーローブロックはHelp Centerホームページの上部にある大きなバナーエリアで、歓迎メッセージと検索バーが含まれています。これはHeader(ロゴとナビゲーションリンクを表示)より下、ページの他のコンテンツより上に位置します。
歓迎メッセージ
Settings > Help Center > Configure & StyleからStylingタブをクリックし、Hero blockを開いてHelp Centerホームページの歓迎メッセージにユーザー属性を追加します。
顧客がログインしている場合、ユーザー属性が含まれます。顧客が訪問者またはlead(未ログイン)の場合は、設定したフォールバック値が表示されます。例えば、フォールバックに「there」を設定すると、訪問者は空白や壊れたメッセージの代わりに「Hi there!」と表示されます。
注意:
ユーザー属性は、顧客が何らかの方法でユーザーデータを設定している場合にのみ存在します。例:javascript API経由、ログインユーザーの設定など。
歓迎メッセージはすべての対応言語で設定可能です。
ヒーローブロックの歓迎メッセージは空白にできません。ヒーローブロックはHelp Centerホームページの主要コンポーネントであり、必ず何らかのテキストが表示されます。歓迎メッセージが空の場合は、デフォルトまたはプレースホルダーテキストが表示されます。必ず歓迎メッセージを設定して、お客様に表示される内容を制御してください。
重要:これは新しいHelp Center体験に切り替えた場合にのみ適用されます。ヒーローブロックの説明文(以前はHelp Centerホームページのヒーローヘッドラインの下に表示されていた文)は新デザインで削除されました。切り替え前にこの文があった場合でも、クラシックデザインに戻しても復元できません。この変更は元に戻せません。
背景
選択した背景色 は以下の項目に適用されます:
アバターのアイコン色(画像がない場合)。
記事内のリンク。
ヒーローブロックの色とグラデーション、または画像のアップロード。
フェード背景(色のグラデーションを使用している場合)。
現在、デフォルトではすべてのアバターは透明です。ただし、以下の場合は透明になりません:
アバターがアバターグループ内にレンダリングされている場合(そのグループにFinアバターが含まれていない場合)
そのアバターグループに複数のアバターが含まれている場合
テキスト色
選択したテキスト色は以下に適用されます:
ヒーローブロック内のリンク。
検索バー内のテキスト。
ヒーロー画像 推奨比率:5:2。ファイルサイズ最大2MB、最大幅/高さ3000px。ホームページの上部およびHelp Centerの各ページに表示されるため、ブランドを表す強い画像を追加してください。
「フェード背景」はHelp Centerホームページにのみ表示されます。
高さ
ホームページのHelp Centerヘッダーの全体の高さを選択します。最小高さ245ピクセル、最大高さ600ピクセル。
検索バー
3つの異なる検索バーサイズから選択し、配置を選択します:
垂直 - 左または中央。
水平 - 上、中央、または下。
以下の表は、ヒーローブロック設定で利用可能な各検索バーサイズオプションの見た目を示しています。
角の半径
検索バーの角の半径も選択できます。最小0ピクセル、最大30ピクセル。
注意:検索バーの長さ設定はHelp Centerホームページのみに適用されます。顧客がコレクションに移動すると、検索バーはデフォルトサイズに戻り、ホームページで設定した長さは引き継がれません。
レイアウトとセクションの設定方法
Settings > Help Center > Configure & StyleからStylingタブをクリックし、Layout and sectionsを開いて、ホームページでのCollectionsの表示方法を設計し、Articles、Content、Customer Portalのセクションを有効にするか選択します。各セクション(Collections、Articles、Content、Customer Portal)の横にあるEditをクリックして設定します。
CollectionsセクションはHelp Centerホームページでのコンテンツコレクションの表示方法を制御します。レイアウト、カードスタイル、アイコンまたは画像のデザインを各コレクションごとに選択してください。
コレクションセクションの設定方法
注意: Collectionsには、Help Centerのすべての対応言語で公開された記事が必要です。コレクションに英語版のみが公開されている場合、Help Centerのすべての言語で共通のスタイリング設定に表示されません。これを解決するには、コレクションに移動し、Help Centerが対応する各言語で少なくとも1つの記事のバージョンを作成して公開していることを確認してください。
レイアウト
1列、2列、または3列のレイアウトから選択してください。
Collectionsカードスタイルを選択してください:
クラシック - 現在のコレクションカードスタイル。
ビジュアル - アイコンや画像のスペースが大きいスタイル。
コンパクト - 最小スペースで最も重要な情報を表示。
カードスタイルをクリックすると、右側にプレビューが自動表示されます。
注意: compactコレクションレイアウトはExpert planが必要です。
すべてのカードスタイルはレスポンシブで、モバイル、デスクトップ、タブレットなどあらゆる解像度で美しく表示されます。右側のドロップダウンから表示したいオプションを選択してプレビューできます。
デザイン
Collectionカードにはアイコン、画像、またはテキストのみを使用できます。
アイコンを使用する場合、以下の色を変更できます:
アイコンの色: カラーピッカーで色を選択するか、16進コードを入力してください。
アイコンの背景:
色 - カラーピッカーで色を選択するか、16進コードを入力してください。
画像 - 画像をアップロードしてください。
グラデーション - カラーピッカーで最大3色を使ってグラデーションを作成するか、16進コードを入力してください。
注意:
推奨比率: 1:1
推奨寸法: 最大48pxの高さ/幅
デザインの選択はCollectionの更新時に利用可能なオプションを決定します。例:画像を選択すると、個別のCollection更新時にアイコンではなくアップロードした画像を選択できます。
画像を使用する場合、コレクションカードの背景が埋まるため、visualテンプレートと非常に相性が良いです。
個別のCollectionカードはドロップダウンからコレクションを選択して画像でスタイル設定できます。また、ドロップダウンのAll collectionsオプションを選択すると、すべてのコレクションにスタイルを適用でき、個別のスタイルは上書きされます。
注意:
アイコンの色は、デフォルトアイコンまたはSVG形式でアップロードしたカスタムアイコン(品質劣化なしで色変更可能なScalable Vector Graphicsファイル形式)のみ変更可能です。
SVGアップロードは単色で表示されます。
背景色は任意で、オフにすることもできます。
記事セクション
Help CenterホームページにArticles sectionを追加します。
有効にしたら、Edit をクリックして記事のロケールを選択し、表示する列数を決め、このセクションにタイトルを付け、Help Centerから記事を選択します。Help Centerで最大12件の公開記事を選択可能です。
注意:
各ロケールごとに、その言語で翻訳された公開記事のみ選択可能です。
audience targetingルールが適用された記事もここで選択・表示できますが、顧客にはルールに合致した場合のみ表示されます。
プレビューはデフォルトロケールの記事リンクのみ表示します。
コンテンツセクション
Help Centerホームページにカスタマイズ可能なContent sectionを追加します。新機能、ウェビナー、または顧客向けの行動喚起を強調するのに最適です。有効にしたら、Edit をクリックしてコンテンツセクションをカスタマイズしてください。
対応言語のいずれかを選択してローカライズされたコンテンツを作成します。
コンテンツカードに任意のタイトル、説明、行動喚起ボタンを追加します。
スクロールしてコンテンツセクションのスタイルを設定してください:
デザイン - カードまたは全画面から選択。
背景 - 色、画像、またはグラデーションを選択。
テキストの色 - タイトルと説明のテキスト色を選択します。
右側のプレビューでホームページ上のコンテンツセクションの表示を確認できます。プレビューはデフォルト言語でのみ表示されます。
コンテンツセクションをHelp Centerに追加する準備ができたら、保存して公開を選択することを忘れないでください。
カスタマーポータル
Intercom ticketsを使用している場合、Customer Portalを有効にできます。これにより、顧客組織はすべての未解決および解決済みのticketsをリアルタイムで一元的に確認できます。有効にすると、Intercomの会社に所属する顧客はHelp Centerにポータルタブが表示されます。有効化するには、Settings > Help Center > Configure & Styleに移動し、Layout and sectionsを開いてCustomer Portalをオンにしてください。
順序
ホームページでArticlesをCollectionsの上または下に表示するには、各セクションの横にあるドラッグ&ドロップツールを使って順序を変更してください。
コレクションページの設定方法
コンテンツの説明
Settings > Help Center > Configure & Styleから、Stylingタブをクリックし、Collection pageを開いて各コレクションの「コンテンツの説明」を表示または非表示にできます。説明を非表示にすると記事のスキャンが容易になり、表示すると顧客がそのコレクション内の内容を理解しやすくなります。
注意:コレクションセクションは他のセクションのようにオフにできません。
記事ページの設定方法
目次
Settings > Help Center > Configure & Styleから、Stylingタブをクリックし、Article pageを開いて、記事内の任意のH1またはH2見出しを使った目次を有効または無効にできます。
関連記事
Help Centerの各記事の下に最大5件の関連記事を表示することもできます。
フッターのカスタマイズ方法
Help Centerのフッターの見た目を、シンプル、クラシック、マルチレベルの3つのテンプレートからカスタマイズできます。ロゴをアップロードし、最大16件のソーシャルメディアリンクを追加し、選択したテンプレートでフッターリンクをグループ化して整理できます。
このフッターはHelp Centerのすべてのページ(ホームページ、コレクション、記事)で一貫して表示されます。
フッターテンプレートの選択
Settings > Help Center > Configure & Styleから、Stylingタブをクリックし、Footerを開いてHelp Centerのフッターを完全にカスタマイズできます。
Help Center記事のフッターにある控えめな「Powered by Intercom」リンクは、Settings > Generalで制御できます。
「Intercom Attribution Message」セクションを探し、このトグルでオンまたはオフに切り替えます。
注意:このトグルは送信メールとHelp Center記事の両方を同時に制御します。片方でリンクを有効にしてもう片方で無効にすることはできません。
Help Centerのプレビュー方法
ブランド化されたHelp Centerをリアルタイムで簡単に視覚化し、変更を公開前に確認できるプレビュー機能をホームページ、コレクション、記事で利用できます。
モバイル、タブレット、デスクトップの各デバイスで異なる解像度を選択してプレビューできます。
制限事項:Help Centerは記事やページにフォーム、iFrame(インラインフレーム)、カスタムHTMLの埋め込みをサポートしていません。
Help CenterおよびNews Centerの画像サイズ参照
Help CenterまたはNews Centerに画像をアップロードする際は、これらの推奨サイズを使用してください。これは推奨であり厳密な制限ではありませんが、従うことで最適な表示品質が保証されます。
画像 | 表示場所 | 推奨比率 | ファイルサイズと寸法 |
ロゴ | Help CenterおよびNews Centerのヘッダーとフッター | 5:1 | 最大1MB。最大幅/高さ:720px。 |
ヘッダー画像 | News Centerの各ページ上部のバナーエリア | 5:2 | 大画面で鮮明に表示するには、約3000×1200pxを目指してください。 |
ファビコン | お客様がHelp CenterまたはNews Centerを訪れたときのブラウザタブ | 1:1 | 最大ファイルサイズ:150KB。最大寸法:588 × 588ピクセル。 |







































