リソースセンターのスタイル設定

最終更新日:

 
注:この記事では、2019年2月18日にリリースされた新しいビジュアルデザインスタジオ(Visual Design Studio)ガイドの操作性を取り上げます。この日付以前からのお客様で、前のガイドセンターを使用したいとお考えの場合は、前のバージョンを参照してください。

 

リソースセンター(旧ガイドセンター)には、ナレッジベースの記事やオンボーディング用のアプリ内ガイドなど、コンテキスト内ヘルプが追加され、エンドユーザーがすぐに利用できるようになっています。これを行うには、ガイドリストやオンボーディングなどのモジュールや、ナレッジベースやライブチャットなどのインテグレーションモジュールを使って、リソースセンターを構築します。

リソースセンターモジュールを構成したら、デザイナーでそれを開き、アプリケーションのブランディングに合わせてルックアンドフィールをカスタマイズできます。

要件

リソースセンターにアクセスしてカスタマイズするには、Pendoサブスクリプションの管理者(Admin)権限が必要です。管理者権限がある場合、ナビゲーションバーのガイドの下に「リソースセンター」オプションが表示されます。

アプリで管理

ガイドの作成と同様に、アプリでリソースセンターを管理するには、ビジュアルデザイナーで開きます。これを行うには、以下のいずれかの方法を選択します。

  1. [ステージングへプッシュ(Push to Staging)]の横にある[自分のアプリで管理(Manage in My App)]をクリックする
  2. バッジアイコンの隣にある[自分のアプリで管理(Manage in My App)]をクリックする

また、ガイド作成時と同様に、アプリのURLやプレビューを表示する場所を入力する画面が表示されます。準備ができたら[デザイナーを起動(Launch Designer)]ボタンをクリックします。

デザイナーインターフェース

デザイナーを開くと、すべての類似したユーザーインターフェースが表示されます。

  1. 上部のアクションバーには、ナビゲーションモード(Navigation Mode)、[終了して保存(Exit & Save)]ボタン、エラー通知、アクションバーの上下移動が含まれます。
  2. アクションバー(中央)の下にあるドロップダウン矢印をクリックすると、アクティベーション、ホームビュー、追加したモジュールのオプションが表示されます。
  3. ホームビューまたはモジュールを選択すると、編集オプションが表示されます。
  4. 右下には、編集中のリソースセンターのプレビューが表示されます。
designer-interface.png

ホームビューのカスタマイズ

ホームビューはリソースセンターを起動するとすぐに表示されるもので、ユーザーに提供を希望するすべてのモジュールが含まれています。ホームビューは以下のようになっています。

home-view.png

フローティングの「ホームビューを編集(Edit Home View)」オプションでは、カスタマイズオプションにコンテンツ(Content)とスタイリング(Styling)があります。

edit-home-view.png

コンテンツ

このセクションでは、すべてのモジュールのホームビューの表示名とタイトル/サブタイトルを変更できます。

edit-home-view.png

リソースセンターのタイトル

リソースセンターは、Pendoが使用するデフォルトの名前です。このタイトルは、すべてのユーザーのホームビューのトップに表示されます。これを変更するには、[リソースセンターのタイトル(Resource Center title)]フィールドで更新します。

rc-title.png

モジュール

リソースセンターに追加・設定したモジュールに応じて、タイトルを更新するための追加オプションが表示されます。

スタイル設定

このタブでは、リソースセンターのスタイルを決めるすべてのオプションが表示されます。

  1. コンテナ
  2. ヘッダー
  3. モジュールセクション
edit-styling.png

1 - コンテナ

背景色(Background Color) - ヘッダーを含むすべてのモジュールの背景色に適用されます

edit-bg-color.png

寸法(Dimensions) - リソースセンター全体のサイズに適用されます

edit-dimensions.png

キャレット(Carets) - リソースセンターのすべてのキャレットに適用されます

edit-carets.png

間隔(Spacing) - 各モジュールの左右のパディングに適用されます

edit-spacing.png

2 - ヘッダー

上下の境界線(Top and Bottom Border) - すべての上部ヘッダーの境界線の色と太さを変更します

edit-top-border.png

フォント(Font) - リソースセンターのタイトルのフォントのプロパティをカスタマイズします

edit-header-font.png

「閉じる」ボタン(Close Button) - すべてのモジュールのすべての「閉じる」ボタンに適用されます

edit-close-button.png

3 - モジュールセクション

タイトルのフォント(Title Font) - ホームビューでのみ、すべてのモジュールタイトルのフォントのプロパティをカスタマイズします

edit-module-font.png

サブタイトルのフォント(Subtitle Font) - ホームビュー上のすべてのモジュールサブタイトルのフォントのプロパティをカスタマイズします

edit-module-subtitle.png

仕切り(Dividers) - ホームビューのすべてのモジュールのセクションの仕切りに適用されます

edit-module-dividers.png

間隔(Spacing) - モジュールのタイトル/サブタイトルの上または下にパディングを追加し、高さを変更します

edit-module-spacing.png

リソースセンターのスタイルが希望どおりのものになったら、必ず変更を保存します。

よくある質問

ガイドリストまたはオンボーディングモジュールのスタイルを設定できますか?

リソースセンターのヘッダー、寸法、背景色、キャレットを更新すると、他のモジュールにも影響します。特定のパディングとフォントのプロパティをスタイル設定する機能は近日公開予定です

CSSでスタイルを設定することはできますか?

現在、グローバルCSSオプションは新しいリソースセンターで利用できません。

「最新情報(What’s New)」ガイドはリソースセンターに含まれていますか?

はい。「最新情報(What’s New)」ガイドはリソースセンターに含まれており、現在は「お知らせ(Announcements)」と呼ばれています。

コンテンツのないモジュールがある場合はどうなりますか?

コンテンツのないモジュールがあり、更新を本番環境にプッシュした場合、そのモジュールはエンドユーザーには表示されません。

関連記事

リソースセンターの詳細については、概要のメイン記事をご覧ください

この記事は役に立ちましたか?
10人中3人がこの記事が役に立ったと言っています