LuckyTemplates 対話型レポート: ナビゲーションとブックマーク

LuckyTemplates レポートでは、パフォーマンスとユーザー エクスペリエンスを活用するためにページ ナビゲーションが重要です。一方、ブックマークを使用すると、現在構成されているビューと設定をレポートに保存できます。このチュートリアルでは、LuckyTemplates対話型レポートのナビゲーションのアイデアを取得する方法について説明します。ブックマークの作成・管理方法についても解説します。

目次

• LuckyTemplates インタラクティブ レポートのサンプル ナビゲーション アイデア
• LuckyTemplates レポートのナビゲーションとして見出しを使用する
• LuckyTemplates インタラクティブ レポートのページ ナビゲーション ブックマーク
  • 1. アイコンの追加
  • 2. ツールチップの追加
• LuckyTemplates インタラクティブ レポートの複雑なブックマークのサンプル
• ナビゲーションパネルの再作成
  • 1. Windows アイコンの挿入と変更
  • 2. 背景やその他の要素の挿入と変更
• 3. 要素のグループ化
• LuckyTemplates インタラクティブ レポートのブックマークの作成
  • 1. ナビゲーションパネルを表示するためのブックマークの作成
  • 2. ナビゲーションパネルを非表示にするブックマークの作成
  • 3. クリアフィルターブックマークの作成
• 結論

LuckyTemplates インタラクティブ レポートのサンプル ナビゲーション アイデア

多くの人が、 LuckyTemplates 対話型レポートの創造的なナビゲーションのアイデアを見つけるのに苦労しています。しかし、正直に言うと、さまざまな Web サイトを閲覧するだけで、ページ ナビゲーションがいたるところにあることがわかります。

私が作成したこのレポートでは、このナビゲーションのアイデアをパソコンを通じて見つけました。

たとえば、レポートにこの色を入れてみました。

しかし、私のレポートのテーマは全く異なりました。ということで、別の色と混ぜてみました。

この例では、コンピューターのWindowsアイコンをスクリーンショット ツールで使用しました。

この空白の背景のスクリーンショットもキャプチャしました。

これをナビゲーションとツールチップに使用しました。

ナビゲーション用のアイコンを入手したい場合は、flaticon のWeb サイトにアクセスしてください。

そこから、[アイコンの編集] ボタンをクリックしてアイコンを編集したり、色を変更したりすることもできます。

アイコンを変更してダウンロードするには、この Web サイトにサインアップするだけです。 

Web サイトにアクセスすると、ナビゲーションのアイデアも見つかります。一例として、このポップアップ チャットボックスがあります。レポートで特定の洞察を示したい場合は、これを間違いなく使用できます。 

その後、いくつかの重要な洞察を表示したい場合は、このフィードを使用できます。

LuckyTemplates レポートのナビゲーションとして見出しを使用する

もう 1 つの素晴らしい方法は、見出しをナビゲーションとして作成することです。たとえば、ここではアイコンを使用していません。代わりに、レポートに見出しを使用しました。

見出しをクリックすると、対応するページに移動します。

次に、右上隅の「01」をクリックすると、ホームページに戻ります。

このチュートリアルでは、最も基本的なアイデアをいくつか紹介しました。

次に説明するのは、LuckyTemplates 対話型レポートでブックマークを作成および管理する方法です。

LuckyTemplates インタラクティブ レポートのページ ナビゲーション ブックマーク

ブックマークは、フィルター、スライサー、ビジュアルの状態など、レポート ページの現在構成されているビューを保存するために使用されます。対応するブックマークを選択すると、そのキャプチャされた状態を参照できます。作成できる最も簡単なブックマークはページ ナビゲーションです。

1. アイコンの追加

LuckyTemplates に挿入するすべての画像でブックマークを処理できるようになりました。たとえば、ここに画像を挿入します。

[画像の形式]セクションで[アクション]オプションを有効にすることで、この画像を使用したページ ナビゲーションを作成できます。

[タイプ]フィールドを[ページ ナビゲーション]に設定します。 

次に、 「宛先」フィールドでこのページのナビゲーションの宛先を選択します。この例では、 「ベンダー」ページを選択します。  

2. ツールチップの追加

ツールチップは、特定の項目の上にマウスを移動したときに表示されるテキストです。デフォルトでは、「 CTRL + ここをクリックしてリンクをたどる」が表示されます。

ページナビゲーションに何らかの表示を追加すると良いでしょう。これは、この特定のナビゲーションがどこに行くのかをエンド ユーザーに知らせるためです。  

したがって、この例では「ページベンダーに移動」と入力します。

画像アイコンの上にカーソルを置くと、そのテキストが表示されます。

それをクリックすると、ベンダーのページが表示されます。

LuckyTemplates インタラクティブ レポートの複雑なブックマークのサンプル

他のブックマークは非常に複雑です。たとえば、このWindowsアイコンはナビゲーション パネル用です。

この画像をクリックすると、ナビゲーション パネルが表示されます。

[表示]タブに移動し、 [選択]オプションをクリックすると、ブックマークを効果的に管理できます。

[選択]ウィンドウでは、ブックマークまたはナビゲーションのレイヤーまたはレイヤーの順序を確認できます。

[選択]ウィンドウで[ナビゲーション パネル] をクリックすると、レポート ページのナビゲーション パネルも選択されます。

さらに、選択ペインでナビゲーションまたはブックマークの要素/オブジェクトをグループ化し、名前を変更することができます。

表示するオブジェクトや要素の可視性を調整することもできます。この例では、Windowsボタンは、ナビゲーション パネルを表示するレポート ページ上の画像です。

これをNavigation Shapeレイヤーの下にドラッグすると、非表示になることがわかります。これは、Windows アイコンがナビゲーション パネルの背後にあるためです。

ナビゲーションパネルの再作成

[選択]パネルについてさらに理解し、複雑なブックマークの作成方法を学習できるように、ナビゲーション ウィンドウを再作成します。

これら 3 つのオブジェクトのコピーをここに残したので、再度インポートする必要はありません。

1. Windows アイコンの挿入と変更

まず、Windows イメージを挿入しました。

次に、この画像の名前をWindows Buttonに変更しました。

見た目を良くするために、スケーリングをNorma lに設定しました。

サイズを小さくするためにリサイズしました。次に、ページの左下隅に配置しました。

このビジュアルヘッダーも透明にしました。

そのために、ここでこの部分を有効にしました。

透明度を100%に設定し、再度無効にしました。

ビジュアルヘッダーがすでに非表示になっているため、見た目がすっきりしました。

2. 背景やその他の要素の挿入と変更

その後、ナビゲーションパネルの背景を挿入しました。

ビジュアルヘッダーを透明にすることもお勧めします。ここで有効にし、透明度を100%に設定して、再度無効にするだけです。

スケーリングオプションには「フィット」を選択しました。

その後、リサイズしてみました。

Windows ボタンが図形の後ろにあるため、隠れています。そこで、[選択]ウィンドウで、[Windows] ボタンを画像レイヤーの上にドラッグして、表示されるようにしました。

次に、Imageレイヤーの名前をNavBackgroundに変更しました。

次に私がしたのは、このアイコンをここにドラッグすることです。これは、ナビゲーション パネルの 閉じるアイコンとして機能します。

次に、このフィルターアイコンもここに移動しました。

現在はNavBackground の背後にあるため、両方とも非表示になっています。それらを必ずNavBackgroundレイヤーの上に配置するようにしました。

次に、スライサーをここにドラッグしました。

それを複製して合計 4 つのスライサーを作成しました。

3. 要素のグループ化

その後、すべてのスライサーを選択してグループ化しました。グループ化する場合は、それらを右クリックして[グループ]を選択します。

[形式]タブに移動して、[グループ]オプションをクリックすることもできます。

次に、 [選択]ウィンドウでグループの名前を「スライサー」に変更しました。

このナビゲーション ウィンドウ内のすべての項目を選択し、グループ化しました。

グループの名前を「ナビゲーション パネル」に変更しました。

次に、 Windows ボタンレイヤーをナビゲーション パネルグループの上に再度ドラッグして、表示されるようにしました。

LuckyTemplates インタラクティブ レポートのブックマークの作成

ブックマークを作成するには、 [表示]タブに移動し、[ブックマーク]オプションをクリックします。

1. ナビゲーションパネルを表示するためのブックマークの作成

まず、クリックするとナビゲーション パネルが表示される Windows ボタンレイヤーのブックマークを作成します。

そこで、ナビゲーション パネルが表示されているときに、ブックマークペインの[追加]ボタンをクリックしてブックマークを作成しました。

名前をShowNavPanel (ナビゲーション パネルの表示) に変更しました。 

次に、それを右クリックしました。現在データがないので、Data のチェックを外します。

もう一度右クリックして、[更新]を選択しました。

次に、ナビゲーション パネルを非表示にするためのブックマークも作成したいと思います。そのためには、まずここをクリックしてナビゲーション パネルグループを非表示にします。

次に、別のブックマークを追加し、 HideNavPanel (ナビゲーション パネルの非表示)という名前を付けました。

それを右クリックして、「データ」のチェックを外しました。

もう一度右クリックして[更新]をクリックしました。

その後、Windows ボタン画像にブックマークを割り当てる必要があります。そのために、それが選択されていることを確認しました。

次に、「アクション」オプションを有効にしました。

[タイプ]の選択で、[ブックマーク]を選択しました。

[ブックマーク]セクションで、ShowNavPanelブックマークを選択しました。

Tooltipフィールドに「 Show NavPanel 」と入力しました。

そのため、Windows ボタンの画像の上にマウスを移動すると、「Show NavPanel」と表示されるツールヒントが表示されます。

2. ナビゲーションパネルを非表示にするブックマークの作成

次に、このアイコンをクリックするとナビゲーション パネルを閉じるブックマークを追加します。もう一度、このアイコンが選択されていることを確認しました。

次に、Action を有効にし、Type選択でBookmark を選択し、HideNavPanelを選択しました。

ツールチップには「HideNavPanel」と入力しました。

このアイコンの上にマウスを置くと、「HideNavPanel」が表示されます。

クリックするとナビゲーション パネルが非表示になります。

Windows ボタンをクリックすると、ナビゲーション パネルが表示されます。

3. クリアフィルターブックマークの作成

最後に行う必要があるのは、このアイコンのクリア フィルターブックマークを作成することです。

このブックマークは常に、このブックマークで作成したデフォルトの状態に表示を設定します。たとえば、「ダウンタイムコスト/時間」フィールドのデフォルトとして15 ドルを設定します。

次に、ブックマークを追加し、ClFilter (クリア フィルター) という名前を付けました。

必要ないので、それを右クリックして「表示」のチェックを外しました。

次に、「更新」を選択しました。

次に、そのブックマークをフィルターアイコンに割り当てます。まず、アイコンが選択されていることを確認します。 

次に、Actionを有効にし、選択したTypeがBookmarkであることを確認し、 Bookmarkの選択でClFilterを選択し、ツールチップに「 Clear Filter 」と入力しました。

ここで$24を入力してみましょう。

次に、 「フィルターをクリア」アイコンをクリックしましょう。

ご覧のとおり、私が設定したデフォルトの状態 ( $15 )に戻りました。   

これにより、レポート内のブックマークを簡単に作成および管理できるようになります。

LuckyTemplates アプリケーションと優れたナビゲーション アイデア
LuckyTemplates のブックマーク – レポート ページごとのグループ化
LuckyTemplates の対話型レポート | LuckyTemplates チュートリアル
 

結論

要約すると、ナビゲーションに多くの時間を費やさなくてもできる素晴らしいことがたくさんあります。さらにナビゲーションのアイデアが必要な場合は、さまざまなLuckyTemplates チャレンジに戻ることができます。LuckyTemplates フォーラムでは、これまでに 10 件以上のチャレンジがありました。 

また、LuckyTemplates レポートのブックマークを簡単に作成できることも学びました。画像、アイコン、スライサーに名前を付けることで効率的に管理できます。

その他の例や関連コンテンツについては、以下のリンクをご覧ください。

乾杯！

ムダシル