アニメーションページを使用してユーザーをエンゲージする

メモ

日本語で受講されている方へ
このバッジの Trailhead ハンズオン Challenge は英語で受講していただく必要があります。英語の意味についてはかっこ内の翻訳をご参照ください。Trailhead Playground では (1) [Locale (地域)] を [United States (米国)] に、[Language (言語)] を [English (英語)] に切り替えて、(2) 英語の値のみをコピーして貼り付けてください。こちらの指示に従ってください。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

ダッシュボードコンテンツを分割する

多くの情報が詰まったダッシュボードを見て、どこに注目すればよいかわからなくなったことが何度ありますか? または、自分とは関係ない情報が含まれたダッシュボードはどうでしょうか? Analytics では、ダッシュボードを特定の焦点やオーディエンスによって複数のページに分割できます。

ページには役に立つ機能がいくつかあります。ダッシュボードコンテンツを複数のページに分割すると、ダッシュボードを早く表示できます。これは各ページに含まれるウィジェットが少ないためです。ウィジェットは同じダッシュボード内の複数のページで再利用できるため、ウィジェットの作成は 1 回で済みます。さらに、ページ間を移動するときには、しゃれたアニメーションが表示されます。アニメーションのためだけにページを追加してもいいぐらいです。

次は、Worldwide Fundraising In Progress を分割して、情報が多くなりすぎないようにします。コンテンツを別個のページに分割するときにはいくつかのベストプラクティスを適用します。

[Donations (支援)] ページを作成する

まず、[Donations (支援)] ページを作成して、チームが支援に焦点を絞ることができるようにしましょう。既存の作業内容を失わないように、現在のページをマスターページにしましょう。[Donations (支援)] ページを作成するには、マスターページをコピーして、不要なウィジェットを削除します。ページとウィジェットを最初から作成する代わりにページをコピーすることで時間を大幅に節約できます。

Worldwide Fundraising In Progress ダッシュボードに移動します。まだ編集モードになっているはずです。
[Untitled (タイトル未定)] タブの横にあるドロップダウンをクリックし、[Rename (名前を変更)] を選択し、ページ名を「Master」に変更して [Apply (適用)] をクリックします。
[Master (マスター)] ページをコピーするには、[Master (マスター)] タブの横にあるドロップダウンをクリックし、[Clone (コピー)] を選択します。
コピーしたページの名前を「Donations」に変更します。素晴らしい! これで [Master (マスター)] と [Donations (支援)] の 2 つのページができました。現在は [Donations (支援)] ページが表示されています。
[Donations (支援)] ページから次のウィジェット以外のすべてのウィジェットを削除します。
- 上部の横いっぱいにダッシュボードタイトルと会社のロゴが表示されているコンテナウィジェット
- 左側の縦長の列に主要な評価指標とグローバル検索条件パネルウィジェットが表示されているコンテナウィジェット
- テーブルウィジェット
[Donations (支援)] ページは次のようになります。削除されたウィジェットはまだ [Master (マスター)] ページに存在するため、ダッシュボードから完全に削除されるわけではありません。後で、いくつかのウィジェットを [Donations (支援)] ページにもう一度追加します。
[Key Metrics (主要な評価指標)] コンテナの右側の [Worldwide Fundraising] タイトルウィジェットのすぐ下に 16x6 のコンテナウィジェットを追加します。それには、を選択し、適切な位置にドラッグしてからサイズを変更します。このコンテナウィジェットを各ページで再利用することで、アニメーション効果のためにページのサイズをほぼ同じにすることができます。

次の操作を実行して、[Leaderboard (ランキング表)] リンクウィジェットを追加します。

コンテナウィジェットの下に 16x1 のリンクウィジェット ( ) を追加し、リンク名を「Leaderboard」に設定します。

リンクウィジェットの [Text Style (テキストスタイル)] ウィジェットプロパティを次のように設定します。

Text Style (テキストスタイル)	設定
Color (色)
Size (サイズ)	20
Alignment (位置揃え)	Left (左揃え)

お疲れさまでした。まだここではリンクしません。リンクは後ほど設定します。

さらに 2 つのリンクウィジェットをすばやく作成するには、[Leaderboard (ランキング表)] リンクウィジェットを選択し、[Duplicate Widget (ウィジェットを複製)] ボタンを 2 回クリックします。[Leaderboard (ランキング表)] リンクウィジェットのコピーが 2 つ、ダッシュボードの下部に表示されます。
後の 2 つのリンクウィジェットに「Donations」と「Pipeline」という名前を付けます。
[Donations (支援)] リンクウィジェットを空のコンテナウィジェットの上部に配置します。
[Pipeline (パイプライン)] リンクウィジェットを [Leaderboard (ランキング表)] ウィジェットのすぐ下に移動します。
ダッシュボードを保存します。
[Master (マスター)] タブをクリックし、そのページの次のウィジェットをすべて選択します。
- [Goal Attainment (目標達成率)] テキストウィジェット
- フラットゲージグラフ
- [Cumulative Donations (累積支援)] グラフ
複数のウィジェットを選択するには、Ctrl キー (Windows) または Cmd キー (Mac) を押しながら選択します。
選択した 3 つのウィジェットを [Donations (支援)] ページに追加します。
1. 3 つのウィジェットが選択された状態で、ページ下部の [Move/Add (移動/追加)] をクリックします。
2. [Add to Page (ページに追加)] をクリックします。
3. 追加先として [Donations (支援)] ページを選択します。
4. [Apply (適用)] を選択します。
[Donations (支援)] ページが開き、3 つのウィジェットが下部に追加されています。
[Donations (支援)] ページで、新しく追加されたウィジェットをコンテナウィジェット内 ([Donations (支援)] リンクウィジェットの下) に追加し、右端いっぱいまで伸ばします。
ダッシュボードを保存します。

お疲れさまでした。これで 2 つのページができました。片方にはすべてのウィジェットが含まれ、もう一方は支援固有のウィジェットが含まれています。[Donations (支援)] リンクウィジェットはコンテナウィジェット内の領域のタイトルの役割を果たします。次は、取引先所有者のパフォーマンスを評価する [Leaderboard (ランキング表)] ページを作成しましょう。[Leaderboard (ランキング表)] リンクウィジェットをこのページのコンテナウィジェットのタイトルとして使用します。

[Leaderboard (ランキング表)] ページを作成する

取引先所有者を分析し、パフォーマンスを他の取引先所有者と比較するために、ランキング表を作成しましょう。[Leaderboard (ランキング表)] ページでは取引先所有者をランク付けできます。ディレクターが友好的な競争を奨励したい場合、取引先所有者はこの表を使用して誰がトップに立っているかを知ることができます。

このページを作成するには、[Donations (支援)] ページをコピーし、支援に関するウィジェットを削除し、[Master (マスター)] ページから [Top Account Owners (上位の取引先所有者)] グラフを追加します。

[Donations (支援)] ページをコピーして「Leaderboard」という名前を付けます。
[Leaderboard (ランキング表)] ページで、3 つの支援ウィジェットを削除しますが、[Donations (支援)] リンクウィジェットは残します。
コンテナウィジェットを 1 行下に移動します。他のウィジェットが邪魔にならないように移動させるには、コンテナの移動中に Shift を押します。
[Donations (支援)] リンクウィジェットを 1 行上、つまりコンテナウィジェットのすぐ上に移動します。
[Leaderboard (ランキング表)] リンクウィジェットをコンテナウィジェットの上部に移動して、新しいタイトルとして使用します。
隙間を埋めるために、[Pipeline (パイプライン)] リンクウィジェットとテーブルを 1 行上に移動します。
[Master (マスター)] ページから [Leaderboard (ランキング表)] ページに [Top Account Owners (上位の取引先所有者)] グラフを移動し、コンテナ内部いっぱいに広げます。
ダッシュボードを保存します。

これで [Leaderboard (ランキング表)] ページができました。次に [Pipeline (パイプライン)] ページを作成すれば完了です。このプロセスの各ステップでは、チームがダッシュボードから価値を得やすくなるようにしています。

[Pipeline (パイプライン)] ページを作成する

同じプロセスを使用して、[Leaderboard (ランキング表)] ページをコピーし、既存のグラフを削除し、[Pipeline (パイプライン)] グラフを追加することで [Pipeline (パイプライン)] ページを作成します。

[Leaderboard (ランキング表)] ページをコピーし、新しいページに「Pipeline」という名前を付けます。
[Top Account Owners (上位の取引先所有者)] グラフを削除します。
コンテナウィジェットを 1 行下に移動します。
[Leaderboard (ランキング表)] ウィジェットを 1 行上、つまりコンテナウィジェットのすぐ上に移動します。
[Pipeline (パイプライン)] リンクウィジェットをコンテナの上部に配置します。
隙間を埋めるためにテーブルを 1 行上に移動します。
[Master (マスター)] ページから [Pipeline (パイプライン)] ページに [Opportunities by Stage (フェーズ別商談)] グラフと [Opportunities by Quarter (四半期別商談)] グラフを追加します。
グラフをコンテナウィジェット内に配置して、コンテナに合わせてサイズを変更します。
ダッシュボードを保存します。

数回のクリックだけのシンプルな操作で、[Pipeline (パイプライン)] ページが完成しました。後は、ユーザーがページ間を移動する方法を作成すればよいだけです。次にその作業を行いましょう。

アニメーションによって Analytics を楽しくする

ナビゲーションウィジェットを使用して、ユーザーがページ間を切り替えられるようにします。ただし、カスタムリンクと見た目の良い動的なアコーディオン効果を作成するために、すでに作成済みのリンクウィジェットを使用しましょう。

[Donations (支援)] ページで、[Leaderboard (ランキング表)] リンクウィジェットのプロパティを変更して、このリンクウィジェットを [Leaderboard (ランキング表)] ページに接続します。

[Donations (支援)] ページで、[Leaderboard (ランキング表)] リンクウィジェットを選択します。
ウィジェットプロパティの [Link To (リンク先)] 項目で [Page in Layout (レイアウト内のページ)] を選択し、[Page (ページ)] 項目で [Leaderboard (ランキング表)] を選択します。
同じように、[Pipeline (パイプライン)] リンクウィジェットを [Pipeline (パイプライン)] ページに接続します。
さらに、[Donations (支援)] リンクウィジェットを [Donations (支援)] ページに接続します。すでに [Donations (支援)] ページが表示されているのに、なぜ [Donations (支援)] リンクを接続する必要があるのでしょうか? それは、リンクウィジェットは [Leaderboard (ランキング表)] ページと [Pipeline (パイプライン)] ページでも再利用されるためです。それらのページを [Donations (支援)] ページにリンクする必要があるのです。
ダッシュボードを保存します。
リンクをテストするには、[Preview (プレビュー)] をクリックしてから、[Donations (支援)]、[Leaderboard (ランキング表)]、または [Pipeline (パイプライン)] リンクをクリックします。各リンクをクリックすると、セクションが展開されたり折りたたまれたりします。これがアコーディオン効果です。
[Edit (編集)] ボタンをクリックしてダッシュボードの編集を続けます。複数ページのダッシュボードを最初に開くときには、デフォルトでは、ダッシュボードに最初のページが表示されます。この場合は [Master (マスター)] です。[Master (マスター)] のすべてのコンテンツは他のページに含まれているため、ユーザーには [Master (マスター)] ページを表示しないようにしたいと思います。[Master (マスター)] ページを最初の位置から移動して、デフォルトで [Donations (支援)] ページが開くようにしましょう。
[Master (マスター)] の横にあるドロップダウンをクリックし、[Move Right (右に移動)] をクリックします。このステップをあと 2 回繰り返して、[Master (マスター)] が最後のタブになるようにします。最初にダッシュボードを開くと [Donations (支援)] ページが表示され、[Master (マスター)] ページへのリンクはないため、ユーザーはダッシュボードの表示中に [Master (マスター)] ページにアクセスすることはできません。うまいやり方ですね。
ダッシュボードを保存します。

できました! 3 つの別々のダッシュボードを作成する代わりに、3 つのページを使用して、ウィジェットを再利用できるようにしました。各ページでは類似するレイアウトを使用することで、ウィジェットを表示したり非表示にしたりするアコーディオン効果を作成しました。

次のステップディレクターは各取引先所有者をチームの平均パフォーマンスとすばやく比較する方法を求めています。次のステップに進んで、それを実現する方法を学習しましょう。