モバイルファーストのダッシュボード設計 — Phone・Tabletレイアウト最適化

導入

PCで完璧に見えるダッシュボードも、スマートフォンで開くと文字が小さすぎて読めない、という経験をしたことはないでしょうか。Tableauではデバイスごとのレイアウトを個別に設計する仕組みが用意されており、モバイルユーザーへの対応が実務でも重視されるようになっています。

くわしく知ろう

Tableauのダッシュボードにはデバイスプレビューという機能があり、Desktop・Tablet・Phoneの3種類のレイアウトを個別に定義できます。デバイスプレビューは、ダッシュボード編集画面の上部メニューから切り替えられるようになっています。

Phoneレイアウトを有効にすると、スマートフォンでアクセスしたときに専用のレイアウトが自動的に表示されます。Phoneレイアウトでは縦長の画面に合わせて、シートを縦方向に一列に並べる構成が基本になります。PCレイアウトで横並びにしていたグラフを縦に積み直したり、サイズの大きいビズを上部に持ってきて一覧性を確保したりといった調整が必要になります。

TabletレイアウトはPhoneとDesktopの中間に位置し、iPad等の横長の画面を想定しています。Desktopレイアウトをベースにシートのサイズや余白を調整する程度で対応できる場合が多いですが、タッチ操作に配慮してフィルターやボタンのサイズを大きめに取ることが推奨されています。

重要な点として、各デバイスレイアウトで非表示にしたシートは、そのデバイスでアクセスした際に表示されなくなります。たとえば情報密度の高い詳細表をDesktopのみ表示し、PhoneではKPIのみ見せるといった使い分けが可能です。レイアウトを設定しない場合、TableauはデフォルトのDesktopレイアウトをすべてのデバイスに配信します。

具体例

たとえば営業チームが外出先からスマートフォンでダッシュボードを確認するシーンでは、Phoneレイアウトで当日の訪問件数と売上額のKPIカードだけを縦に並べ、詳細グラフはDesktopレイアウト専用に設定しておくと、モバイルでの視認性が大幅に向上します。

まとめ・試験ポイント

• Tableauは Desktop / Tablet / Phone の3種類のデバイスレイアウトを個別定義できる
• デバイスプレビュー＝ダッシュボード編集画面上部のメニューから切り替え
• Phoneレイアウト＝縦長画面に合わせてシートを縦一列に並べる設計が基本
• 各デバイスレイアウトでシートの表示/非表示を個別に制御できる
• レイアウト未設定のデバイスにはDesktopレイアウトが配信される
• 試験ではPhone/Tabletレイアウトの有効化手順と非表示制御の仕組みが問われやすい