【Tableau】レイアウトと階層でグリッドデザインVizを作る(ダッシュボードTips)

【Tableau】レイアウトと階層でグリッドデザインVizを作る(ダッシュボードTips)Tableau
スポンサーリンク

Tableauでダッシュボードを作るときにグリッドを意識して格子状にシートを入れていくと整理された印象のVizになると個人的には感じています。シートは直感的に入れていけるのはTableauの良いところではあるけれど…

ジャル
ジャル

テキトーにいれていくと均等配置はうまく機能しない

縦にも横にも均等配置させて統一感のあるVizを作りたい。そんなときはダッシュボードオブジェクトの「水平方向」「垂直方向」を使っていくのですが、格子状にするためにはもう一工夫必要でした。

アレコレメモ
アレコレメモ

偶然?「空白」オブジェクト使ったら期待通りに行きました

この記事では、細かいVizの作り方というよりはレイアウトコンテナの中に要素を上手く並べるコツ(備忘録)を投稿します。

スポンサーリンク
スポンサーリンク

グリッドデザインとは

グリッドのイメージ写真

ブログをやっているくらいなので、一般の人に比べればWebには明るい方だと思います。イチからWebデザインをする…ということはしないけれど多少のHTML/CSSの心得はあります。CSSでBootstrapなんて勉強するとグリッドデザインを学ぶ機会があります。

Webページなどのデザイン手法の一つで、画面やページを縦横に分断する直線で格子状に分割し、これを組み合わせて内部の要素の大きさや配置を決定していく方式をグリッドレイアウト(grid rayout)あるいはグリッドデザイン、グリッドシステムなどという。特に、ページを方眼紙のように同じ大きさの微細な正方形に分割し、これを複数組み合わせて要素や余白を構成する方式。

IT用語時点-eWords「レスポンシブデザイン」

Webだとページをカラム分けするときにグリッドデザインを知っていると記事スペースを活用できます。

スポンサーリンク

グリッドの例

ブログ記事内の再現になりますが、グリッドの例。PCやタブレットだと以下3カラムになります(スマホだと1カラム)。

スマホで見ている人は写真が1カラム表示になります。こちらの画像をご覧ください。

▲ 上記では同じ画像を1段目では3列、2段目では2列の表示をしています。使っているブログの機能で好きなところでこういうカラム表示ができます。これらはグリッドデザインを意識した機能です。一定の幅までであれば、横幅がほぼ均等に伸縮します。スマホくらいの幅になると一列表示になります。

Webでのグリッドデザインはレスポンシブと相性がよく異なるデバイスでも表示が最適化されます。

Tableauにおけるグリッドデザインのメリット

統一感、バランスのとれたVizが作れる

テキトーにグラフを入れてサイズを手動で操作すると、不均等な配置になります。これでもセンスのある方なら不均等を活かしたVizを作れるでしょうが、私はもっと楽したい…

Vizをレスポンシブ対応にできる

Tableau ServerやOnline(Public含む)にアップロードするなら見ている人のブラウザ幅で表示を最適化したいですよね。グリッドデザインでVizを作っておけばレスポンシブ表示させやすいです。

Vizをテンプレート化しやすい

Tableauで作ったダッシュボードやシートは定期レポートとして使うケースが多いのではないでしょうか。普段業務で使えば、そこまでデザイン性を考える必要がないのでグリッド形式で作れば良い意味で無難なレポートに仕上がります。

アレコレメモ
アレコレメモ

先に格子の数を決めてしまって予め作るグラフを決め打ちして手抜きしています…

ジャル
ジャル

このネオ窓際族め。

スポンサーリンク

Tableauダッシュボードで均等配置できない理由

直感的にいれても均等配置できることもあればできないこともあります。

Tableauはダッシュボードにグラフを入れたときにレイアウトコンテナを自動構成します。

Tableauのダッシュボードでは要素を均等に整えるための機能、「均等配置」が備わっています。ただ、「均等配置」を使えるオブジェクトに限りがあります。

Tableauダッシュボード・レイアウトのタイルオブジェクトでは均等配置は使えない

ドラッグ&ドロップによる自動構成では「均等配置」が使えないタイルオブジェクト直下にグラフが入ることが多く、その場合均等配置の機能を使えません。

ダッシュボードのレイアウト機能である均等配置を使えるオブジェクトは「水平方向」と「垂直方向」の二つです。グラフをこの中に入れれば均等配置が使えます。

Tableauレイアウトで使う水平方向と垂直方向
Tableauダッシュボード・レイアウトで均等配置が使えるのは水平方向と垂直方向の二つ
水平方向の均等配置横に複数並べたグラフやオブジェクト幅を揃えます。
垂直方向の均等配置縦に複数並べたグラフやオブジェクト幅を揃えます。
Tableauレイアウトで水平方向、垂直方向を使うとグリッドにできる

▲ 格子状にする場合は、水平方向・垂直方向のいずれかを外側、もう片方を内側にします。私は大体、垂直を最初に入れてその中に水平を入れることが多いです。

中のグラフの中は行単位で変えられます。自分なりのグリッドを試行錯誤してください。

スポンサーリンク

Tableauダッシュボードで作るグリッドデザインViz

これ以降、10秒〜30秒程度のGIFアニメーションを使う場面があります。アニメーションは繰り返し再生されます。

使用するオブジェクト

  • 「空白」
  • 「水平方向」
  • 「垂直方向」
Tableauレイアウト機能の水平方向、垂直方向、空白

項目の階層を活用する

グリッド化するには「項目の階層」を意識する必要があります。「項目の階層」は、ダッシュボードの左サイドバー・レイアウト内にあります。

今回のデザイン完成形

今回作るVizは次の通り。データはサンプル・スーパーストアです。単純にグリッドでそれっぽくしたいだけなので表示しているデータそのものの選択内容については意味はないです。

Tableauダッシュボードでレイアウトを駆使してグリッドデザインにした例
レイアウトを駆使してグリッドデザインにした例

▲ 今回のVizでは、「垂直方向」を外側の枠、「水平方向」を内側の枠に使っています。タイル直下で赤枠部分以外は、ダッシュボードのタイトルを表示した際に自動構成されました。

上手くできない例

まずはうまくできない例から。ドラッグ&ドロップで垂直や水平を組み合わせて入れていくのですが普通にやるとうまく階層化してくれませんでした。

  1. ダッシュボード・シート上に「垂直方向」を入れる。
  2. 「水平方向」を1.の中に入れる。
  3. 「水平方向」を2.の上、または下に入れ込む。
Tableauレイアウトでは入れ方が悪いと縦横整わない

▲ やってもらうと多分わかりますがドラッグ&ドロップのセンスがないのかうまく階層になりません。「水平方向」を二つ入れただけですが、すでに一つが「垂直方向」の枠外に入ってしまいました。GUI操作で試行錯誤しますがどうにも思うように入りません。

Tableauレイアウトでは入れ方が悪いと縦横整わない

▲ 垂直方向と水平方向を一つ入れて、そのあとにもう一つ水平方向を入れようとしています。

  • 画面半分
  • 画面最下部

の二つが灰色に変わっていると思いますが、どちらに入れても結果は同じで二つ目の水平方向が階層の外に出てしまいます。

空白を使うとうまくできた

悩みつつ… 何気に「空白」オブジェクトを先に入れてみたところ、思うような階層になりました。

  1. ダッシュボード・シート上に「垂直方向」を入れる。
  2. 「空白」を1.の中に入れる。
  3. 「水平方向」を2.の上または下に入れる。
  4. 必要分の「水平方向」を先にいれた「空白」と「水平方向」の間に入れ込む。
  5. 残りの「水平方向」は先に入れた「水平方向」と「水平方向」の間に入れ込む。
  6. 最後に「空白」を消す。
Tableauレイアウトで垂直方向を最初に、そのあと水平方向を4つ入れています。

▲ 垂直方向を最初入れた後は空白オブジェクトを入れています。レイアウトで階層を確認しながら最後に空白を除去して階層構造が完成。

Tableauレイアウトで垂直方向の直下に水平方向4つが入りました。

グラフを入れていく

出来た枠組みの中に予め作っておいたグラフを入れていきます。

  1. 左端にするグラフを最初に水平方向の中に入れる。
  2. 右隣にするグラフを1.の右端に入れる。
  3. 必要分のグラフを入れ込む。
Tableauレイアウトでグリッドの骨子ができたら次々グラフを入れ込みます。

自動調整と均等配置

一通りのグラフを入れたら、「自動調整」と「均等配置」を使って均等に並べていきます。

Tableauレイアウトでグリッド作るならグラフは自動調整がおすすめ

▲ グラフを選んで右クリック「▼」→「自動調整」→「ビュー全体」を選ぶ。グラフの種類によって「幅を合わせる」「高さを合わせる」でもOK。これを全てのグラフで行います。

Tableauレイアウトの均等配置

▲ 最後の仕上げです。各グラフのタイトルは便宜上消しておきました。

ダッシュボード左サイドバーの「レイアウト」→「項目の階層」でグラフが入っている「垂直方向」「水平方向」を右クリック→「均等配置」にチェックを入れます。

Tableauレイアウトのグリッドで実現するレスポンシブデザイン

これで上下左右で幅を広げてもオブジェクトの大きさは均等で拡大縮小します。また、最近のTableauはスマホビューが強化されています。グリッドにしておくとレスポンシブになりやすいのでオススメです。

最近のTableauはスマホビューがある
最近のTableauはスマホビューがある
Tableauで作ったグリッドデザインをスマホで見た場合→綺麗に1カラム表示
Tableauで作ったグリッドデザインをスマホで見た場合→綺麗に1カラム表示
スポンサーリンク

まとめ

ダッシュボードをグラフ、フィルター、タイトルすべてバランスよく並べるのってなかなか難しいですよね。デザイン性のあるVizより統一的な感じのほうが好みなのでダッシュボードが複数あるときに微妙に幅が違うと気になる性分です。

おしまい。

Tableauデータ可視化
スポンサーリンク
スポンサーリンク
UdemyのTableau動画が便利すぎる!(買い切り、繰り返し視聴可能)
データサイエンティストを目指す人のための『ゼロからのTableau入門』

Tableauに触れるのなら最初に受けておきたいUdemy講座。9章、11時間超の充実の内容で初心者から資格を検討している方幅広く勧められる内容です。講師はセミナーでもおなじみ、Google Analyticsの権威である「木田和廣氏」。丁寧な説明でどこのセミナーよりも詳しくTableauが学習できます。

<説明抜粋>
ニーズが高まるBIツールTableauを前提知識ゼロから学びます(レベル:初級~中級)。データサイエンティストに求められる「データビジュアライズ」をTableauで実現するための講座。

Tableauを使いこなしたい分析者のための『ゼロからのTableau Prep入門』

2018年の初春に颯爽と現れたTableau Prep。プロジェクト・マエストロでの開発期間を経てリリースされました... いきなりなに?って感じられた方もいそうですね、私もそのうちの一人。学習が必要になったのでUdemyを活用して1週間ほどの細切れ学習で習得しました。こちらも「木田和廣氏」の動画です。

<説明抜粋>
分析者がより「筋のよい」データ分析フロー構築のための支援ツールTableau Prepの入門コースです。

Tableau(タブロー)で実践!ビジネスユーザのためのデータ集計・視覚化・分析 応用編

Tableau応用編で初学者ではない、すでに一定のレベルでTableauを触っている人向けです。私も中級以上だったのでやや苦手なLODやデータブレンドを効果的に使うコツを身に着けるため学習しました。SIerとしては業界で誰もが知っているNTTデータから出されているTableau動画です。

<説明抜粋>
日々のビジネスで、データを活用していますか?マウス操作で簡単にデータを視覚化できる、今最も注目されている分析ツール「Tableau(タブロー)」を最大限に活用するための、より高度で実践的な使い方をお伝えします。

記事が役に立ったらシェア
アレコレメモをフォローする
スポンサーリンク
アレコレメモ
タイトルとURLをコピーしました