Amazon Web Services ブログ
Amazon QuickSight の新しいフリーフォーム・レイアウトモードにて、見事でピクセル・パーフェクトなダッシュボードを作成
本記事は Amazon Web Services, principal product manager for Amazon QuickSightであるJose KunnackalとSenior Solution Architect for Amazon QuickSightであるArun Santhosh によって投稿されてものです。
Amazon QuickSightの最新の更新では、新しい自由形式のダッシュボードレイアウトオプションに加えて、ビジュアルごとのきめ細かなインタラクションコントロールと条件付きレンダリングオプションが導入され、ダッシュボード作成者にさまざまなクリエイティブな可能性を広げます。この記事では、利用可能な新機能と、それらを使用して見事なダッシュボードを作成して共有する方法について説明します。組織内の QuickSightリーダー（Reader)向け、またはエンドユーザー向けのアプリケーションへの埋め込みにも使用できます。
QuickSight ダッシュボードレイアウトの新機能
QuickSight のレイアウトモードは、ダッシュボードのビジュアルをどのようなサイズでエンドユーザーに提供するかと、作成者がビジュアルスタイルのニーズに合わせてダッシュボードを変更する際、どの程度の柔軟性を持ち合わせているか、により決定されます。QuickSight では、ダッシュボードの 3 つのレイアウトオプションがサポートされるようになりました。
- レスポンシブ（Tiled) -ビジュアルはグリッドレイアウトにスナップし、ビジュアルのサイズ変更や配置に必要な労力を最小限に抑えます。作成者は、構築する基本画面サイズ (ラップトップや HD モニターなど) を選択できます。ダッシュボードは、必要に応じてズームインまたはズームアウトして、作成者が設計したとおりにユーザーの画面上のコンテンツをスケール表示します。モバイルビューでは、ビジュアルはランドスケープモードではデザインどおりに表示され、ポートレートモードでは自動的に単一の列に配置されます。名前が示すように、ビジュアルはこのモードでは並べて表示され、互いに重なり合うことはありません。
- フリーフォーム(New!) -このモードでは、ダッシュボード上の要素に対するピクセルレベルのコントロールとともに、他のビジュアルのオーバーラップを含め、ビジュアルを任意の場所に配置できます。これにより、非常に正確な制御と詳細指向の設計アプローチが提供されます。このモードでは、作成者は設計中の画面サイズを選択し、ダッシュボードはすべての画面でデザインどおりに表示され、必要に応じてズームインまたはズームアウトします。ダッシュボードはオーバーラップや画像を使用して複雑に設計されているため、QuickSight ではこのビューをモバイルアクセス用に自動的に調整しません。そのため、モバイルユーザーは、作成者が作成したレイアウトをそのまま表示し、小さい画面のランドスケープまたはポートレートの向きに合わせて拡大縮小されます。このモードでは、QuickSight パラメーターベースのルールに基づいて条件付きでビジュアルをレンダリングする新機能も提供され、インタラクティブなダッシュボードのクリエイティブな可能性が開かれます。
- クラシック -これは従来のレイアウトモードで、ビジュアルはグリッドレイアウトにスナップします。このモードでは、QuickSight は画面サイズに基づいてコンテンツ（ビジュアル内の要素）を表示または非表示にすることがあります。これにより、ダッシュボードがデバイスごとに異なるコンテンツを表示することがあります。
既存のダッシュボードは、作成者が明示的に変更し、必要に応じてレスポンシブモードまたはフリーフォームモードで再公開するまで、クラシックモードのままになります。
フリーフォーム・モードを始める
フリーフォームモードは、次の 5 つの簡単なステップで開始できます。
- 新しい QuickSight 分析を開き、レイアウト設定を [フリーフォーム] に変更します。
- 必要に応じて、キャンバス全体（拡大または縮小）を表示する場合は、[表示] を [ウィンドウに合わせる] に設定します。最初のビジュアルのサイズを変更し移動してみてください。ドロップした場所にビジュアルがどのように留まるかをご覧ください。
マウスを使用してビジュアルを移動させた場合、位置合わせを容易にするために最も近いグリッドにスナップします。矢印キーを使用して微調整してみてください。 - 別のビジュアルを追加して、最初のビジュアルの上に移動します。ビジュアルが最初のビジュアルとどのように重なっているかを確認します。
- 2 番目のビジュアルを最初のビジュアルと完全にオーバーラップさせます。
- 2 番目のビジュアルを移動せずに最初のビジュアルにアクセスするには、2 番目の大きいビジュアルのビジュアルメニューの背面へ移動を選択します。
既存の分析をフリーフォームモードにどのようにしたら切り替えられるか疑問に思っていますか？ 分析の左パネルで [設定] を選択し、[レイアウト] オプションから [フリーフォーム] を選択します！
フリーフォーム・レイアウトに習熟する
基本をご理解いただけたので、もっと深く掘り下げていきましょう。フリーフォーム・レイアウトを構築するには、配置、スタイル、インタラクション、ルールの 4 つの設定グループが重要です。
これらの設定には、各ビジュアルの [フォーマット] ビジュアルパネルからアクセスできます。
- 配置 — ダッシュボード上の各ビジュアルの正確な位置とサイズを制御できます。これを行うには、X、Y 座標（ビジュアルの左上隅）と目的の高さと幅を指定します。X、Y 座標はダッシュボードの左上から始まることに注意してください (ダッシュボードの左上の点は 0,0 (X, Y))。マウスを使用してビジュアルのサイズと位置を変更できますが、配置コントロールを使用すると、簡単に完璧な位置合わせを行うことができます。
- スタイル—スタイルコントロールを使用すると、背景、境界線、選択範囲の色、それらの透明度を設定したり、これらをオフにしたりできます。背景を無効にすると、ビジュアルが完全に透明になります。これは非常に便利で、ビジュアルを他のビジュアルの上に重ねた場合素晴らしい効果を発揮します。
- ダッシュボード — これらのコントロールを使用すると、必要に応じてビジュアルレベルのインタラクション（ドリルダウン、並べ替え、ビジュアルの最大化、データのエクスポートなど）をすべて削除できます。これらの設定はダッシュボードビューにのみ適用され、他のチャートや画像にチャートをオーバーレイして、エンドユーザーに単一の複合ビジュアルの印象を与えることができます。
- ルール — パラメーター値に基づいてビジュアルを表示または非表示にするルールを設定できます。デフォルトでは、すべてのビジュアルが表示されます。非表示にするルールを追加することで非表示にできます。または、ビジュアルのデフォルト状態を非表示に切り替え、ビジュアルを表示するルールを設定することもできます。これをビジュアルのオーバーレイ配置と組み合わせて、ユーザーの選択または親アプリケーションからの入力 (埋め込みコンテキストで使用される場合) に応答する動的ダッシュボードを構築します。
インスピレーションを得るためにサンプルダッシュボードを探索し、分析ビューを調べて、それがどのように構築されているかを確認できます。
また、 QuickSight ダッシュボードギャラリーで、パートナーからのサンプルもご覧ください。（補足：こちらに日本語で作成された、サンプルの小売り業界の売上分析ダッシュボードについての解説があります）
まとめ
新しいフリーフォームレイアウトにより、QuickSight では、正確なダッシュボード仕様に合わせて調整できるダッシュボードを構築できます。このダッシュボードは、QuickSight ポータル、モバイルアプリ、電子メールを介して、数十万人のユーザーに配布したり、独自のアプリケーション内に埋め込んだりできます。
翻訳：Wakana Vilquin-Sakashita, Amazon Web Services Japan