AWS、Quick Dashboards にモバイル対応を追加

日常の意思決定にダッシュボードを活用しているチームにとって、元々大画面向けに設計されたコントロールを操作するためにピンチインやズームを行うのはよくある光景です。朝のスタンドアップで収益を確認したり、会議の合間にパイプライン指標を見直したり、移動中に運用状況を監視したりする際にも、デスクトップ画面用に作られたダッシュボードでは余計な手間がかかってしまいます。

これを解決するのが「Mobile Layout for Amazon Quick Free Form ダッシュボード」です。これは、ダッシュボードをデバイス画面いっぱいに収まる単一カラムのタッチ最適化ビューとして自動的にレンダリングする機能です。ユーザーは、リサイズや横スクロールを行うことなく、すぐにデータにアクセスできます。この Mobile Layout は、現在サポートされているすべての AWS リージョンで利用可能です。

Mobile Layout は、デスクトップ用のキャンバスをデバイスに合わせてサイズ調整された単一カラムの連続スクロール体験へと変換します。視覚要素は画面幅いっぱいに広がり、アスペクト比を保ちながらインタラクティブな状態も維持されます。

この機能を利用するために、作成者が何らかの変更を加える必要はありません。ダッシュボードの利用者は、スマートフォンやタブレットから即座に、摩擦のない形でデータにアクセスできるようになります。ここでは、Mobile Layout の仕組みと、ダッシュボードを最適化するための具体的な方法をご紹介します。

以下のアニメーションは、Mobile レイアウトで開かれたフリーフォームダッシュボードの例です。利用者がスマートフォン上で主要な業績指標（KPI）やチャートを、連続する縦方向のフィードとしてスクロールして確認している様子が描かれています。

モバイルレイアウトの仕組み

モバイルレイアウトは、フリーフォームダッシュボード向けの表示モードです。ユーザーが画面幅の小さいデバイスでフリーフォームダッシュボードを開くと、Amazon Quick が自動的に画面サイズを検知し、モバイル用のビューに切り替えてレンダリングします。これにより、ユーザーは縦方向にスクロールできるシングルカラム形式のフィードを閲覧できます。各ビジュアルは画面幅いっぱいに表示されるように調整されます。

検出基準となるのはデバイスのビューポートです。ビューポートがスマートフォンやタブレットのサイズ範囲内にある場合、モバイルレイアウトが有効になります。一方、より大きな画面では従来のデスクトップ用レンダリングが採用されます。

機能概要

モバイルレイアウトには、フリーフォームダッシュボード向けに以下の機能が用意されています。

連続スクロール。ビジュアルは1 つの列に積み重なるように配置され、それぞれがビューポートの全幅を埋めます。アスペクト比は維持されるため、縦長のビジュアルはそのまま縦長に、横長のビジュアルはそのまま横長のまま表示されます。

グループ認識レンダリング。フリーフォームダッシュボードでは、KPI 値を色付きの背景の上に重ねるなど、複数のビジュアルを重ねて配置するケースがよくあります。モバイルレイアウトはこのグループ境界を尊重し、グループ化されたビジュアルを単一のユニットとしてまとめてレンダリングするため、元のデザインにある階層構造が保たれます。

ユーザー操作。Quick のモバイルアプリでは、組み込みの表示切り替え機能を使って、連続スクロール形式の「モバイルビュー」と、従来の表示である「デスクトップビュー」を自由に切り替えることができます。Web ブラウザ（モバイル版）の場合は、縦向きで表示するとモバイル体験が、横向きで表示するとデスクトップ体験が提供されます。

パフォーマンス向上

Mobile Layout はモバイル端末でのリソース消費を削減する最適化された描画パスを採用しています。これまでスマホでの表示に課題があったダッシュボードも、スムーズに読み込まれ、スクロールできるようになりました。

以下の画像は、同じダッシュボードをデスクトップビュー（左）とモバイルの連続スクロールビュー（右）で比較したものです。

必要な対応

ダッシュボード閲覧者の方へ

特に何も行う必要はありません。Mobile Layout は既存の「フリーフォーム」ダッシュボードですぐに動作します。オンにする設定も、移行作業も不要で、更新する必要もありません。スマホやタブレットでダッシュボードを開けば、すぐにモバイルビューが利用可能です。

作成者および管理者の方へ

こちらも対応は不要です。「フリーフォーム」ダッシュボードの作成者は、公開済みのダッシュボードが小さい画面でも自動的に Mobile Layout で描画されるため、そのまま恩恵を受けられます。一方、「タイル型」や「クラシック」レイアウトを使用している作成者には影響はありません。これらのレイアウトタイプは、従来のレスポンシブ動作を維持します。管理者も設定変更の必要はなく、アカウント内のすべての「フリーフォーム」ダッシュボードで Mobile Layout はデフォルトで有効になっています。

グループを活用してモバイル体験を最適化するには

視覚要素が重なり合うデザインを利用している作成者は、1 つのオプション手順を実行することで、デザインがモバイル環境でも適切に反映されるか確認できます。それは、それらの視覚要素を「グループ」に整理することです。

フリーフォームレイアウトでは、著者は視覚要素を重ねて配置することが一般的です。例えば、KPI 値を色付きの背景の上に置いたり、比較カードをコンテナの上に重ねたりします。

デスクトップ上ではこれらの重なり合う要素は意図通りに描画されますが、モバイル端末ではレイアウトエンジンがどのように処理するかを判断する必要があります。

グループ化を行わない場合、各視覚要素はモバイルスクロール上で独立したカードとして表示されます。背景画像の上に配置された KPI は別々の要素として扱われ、背景が 1 つのカード、KPI がそれぞれ別のカードとして描画されてしまいます。視覚的な情報は正しく表示されますが、重ね合わせの関係性が失われてしまいます。

一方、グループ化を行えば、グループ内のすべての視覚要素は 1 つのユニットとしてまとめて描画されます。背景と KPI はまとまったままになり、著者が設計したバナーとしての姿を維持できます。

フリーフォームレイアウトで視覚要素のグループを扱う方法については、Customizing visuals in a free-form layout のドキュメントをご参照ください。

以下のアニメーションでは、モバイル端末における「グループ化された視覚要素（KPI バナーが 1 つのユニットとして維持される）」と「非グループ化の視覚要素（KPI が別々のカードとして表示される）」の違いを比較しています。

重なり合う視覚要素のグループ化方法

視覚要素をグループ化するには、以下の手順を実行してください。

• Amazon Quick の編集モードで分析を開きます。
• Shift キーを押しながら、一緒に配置したいビジュアル（例えば背景の長方形と、その上にある KPI ビジュアルなど）をすべて選択します。
• コンテキストメニューを開き、「グループ化」を選択します。

シートあたりのグループ数に制限はありません。モバイルでは、各グループが 1 つのビジュアル単位として扱われます。

以下のアニメーションは、右クリックで表示されるコンテキストメニューと「グループ化」オプションを含む Amazon Quick の編集画面を示しています。

モバイルでのビジュアルのサイズ表示について

モバイルレイアウトで連続スクロール時にビジュアルをレンダリングする際、Amazon Quick は以下のルールを適用します。

• 各ビジュアルはビューポートの全幅に広がります。
• アスペクト比が維持されます。縦長の棒グラフは縦長のまま、横長の折れ線グラフも比例して短く表示されます。
• 最小高さ 272 ピクセルが設定されているため、凡例や軸ラベル、ソートボタンなどの要素が見切れることはありません。
• 最大高さの制限により、ビジュアルがビューポートからはみ出ることを防ぎます。
• カラムが多いテーブルは全幅で表示され、横スクロールが可能になります。

もしビジュアルが小さすぎて内部要素を正しく表示できない場合、情報アイコンが表示されます。その場合はデスクトップモードに切り替えるか、端末を横向き（ランドスケープ）にして全体を表示してください。

はじめに

デスクトップ画面向けに設計されたダッシュボードを、スマホやタブレットでピンチイン・ズーム操作することなく閲覧できるようになりました。この「モバイルレイアウト」機能は本日より Amazon Quick で利用可能です。使い方は以下の通りです。

• Quick モバイルアプリを使って、スマートフォンまたはタブレット上でフリーフォームダッシュボードを開きます。
• 連続スクロールビュー内でビジュアルをスクロールして確認します。
• ビュー切り替えツールを使用して、「モバイル」「デスクトップ」「横向き」の各モードを切り替えます。
• ビジュアルが重なっている場合は、分析画面を開いて該当する要素を選択し、コンテキストメニューから「グループ化」を選んでください。

以下の画像は、モバイルアプリに表示されるビュー切り替えコントロールの様子です。

詳細については、以下のリソースをご覧ください。

• Amazon Quick
• Amazon Quick ユーザーガイド
• Amazon Quick コンソール

Quick コンソールのフィードバック機能を通じて、皆様からの意見をお待ちしています。

Rushabh Vora

Rushabh は AWS の Amazon QuickSight でシニアプロダクトマネージャーを務めています。データ分析と可視化における生成 AI 機能の責任者として、組織が自然言語を通じて生データを即座に実行可能なインサイトへと変換できるよう支援しています。これにより、意思決定までの時間を数時間から数分に短縮することを目指しています。技術的な専門知識の有無にかかわらず、すべてのビジネスユーザーがデータ探索やダッシュボード作成を容易に行えるようにすることが、彼の情熱です。

Christopher Lott

Christopher は Amazon QuickSight のシニアソリューションアーキテクトです。企業向けソフトウェアの開発に 25 年の経験を持ちます。カリフォルニア州サクラメント在住で、ガーデニングや料理、航空機（一般用・宇宙用）の愛好、そして世界各国への旅を愛しています。

Nachiketha Sagri Hayavadana Upadhya

Nachiketha は Amazon QuickSight のシニアフロントエンドエンジニアです。QuickSight チームで 6 年以上の経験を持ち、ブランドの一貫性を保ちつつ視覚的に豊かな分析体験を顧客が作成できるよう支援するテーマ機能や、コンテンツ作成のための仕組み構築を専門としています。

Sai Dinesh Garapati

Sai Dinesh Garapati 氏は Amazon QuickSight のフロントエンドエンジニアです。ダッシュボードや分析の作成体験を担当しており、ユーザーがより効果的にダッシュボードを作成・カスタマイズできるよう、インタラクティブな機能の開発に取り組んでいます。