はじめに
前回に引き続き、ダッシュボードをきれいにつくるコツについて発信できればと思ってます。
前回の記事はこちら：
https://qiita.com/Sota_K/items/e2d7def6aab57579f515
今回は、ダッシュボードをきれいに作るための「レイアウト構成のコツ」をお話しします。
まずはコツの解説に入る前に、使用する概念やツールについて紹介します。
オブジェクトについて
オブジェクトとは、ダッシュボード作成画面の左下に見えるこちらのことです。
基本的には、ここに配置されているオブジェクトとワークシートを組み合わせてダッシュボードを作成していきます。
その中でも、きれいに作るうえで特に意識して使っていただきたいのがコンテナという概念と、オブジェクトの浮動配置になります。
それでは、この2点について詳しく説明していきます。
コンテナについて
Tableauのオブジェクトには、主に2種類のコンテナが用意されています。それが垂直コンテナと水平コンテナです。
名称の通り、ダッシュボードに配置するワークシートを縦に並べるか、横に並べるかを決定する「箱」だと思っていただければと思います。
なぜ手動でコンテナを配置すべきなのか？
Tableauは賢いため、コンテナを意識して置かなくても、ユーザーが配置した場所に応じて自動でコンテナを使ったレイアウトにしてくれます。
しかし、個人的には自分で意図してコンテナを配置する方式をおすすめしています。理由は以下の3点です。
1. 意図しないレイアウト崩れが起きやすい
自動生成されたコンテナは複雑な階層構造になりがちです。そのため、1つの要素を動かしただけで全体のレイアウトが崩れてしまうことがあります。
-
自動で配置した場合の階層（複雑になりやすい）：
-
意図してコンテナを配置した場合（シンプルに整理される）：
2. サイズやパディングの細かな調整が難しくなる
自動階層になると、「パディング（余白）」の調整や、1つひとつのシートのサイズ指定が意図通りにいかないケースが増えてしまいます。
3. 修正・メンテナンスがやりづらくなる
ダッシュボードは作成者と修正者が異なることも多いです。メンテナンス性や可読性を高めるためにも、「どこをどう触れば修正できるか」がわかりやすい構造にしておくことが望ましいです。
ダッシュボードの仕様書・設計書を作るのは大変ですが、あらかじめ意図した構造で組んでおけば、グラフの差し替えなども容易になり、修正しやすい環境を作ることができます。
浮動配置について
浮動配置とは、シートやオブジェクトのオプションで「浮動」を選択することで、自由な位置・サイズで重ねて配置できる機能です。
非常に便利な機能ですが、浮動のまま完成版として使用することには以下のようなデメリットがあります。
浮動のまま使用をお勧めしない理由
-
画面サイズの変化に弱い
作成したディスプレイと異なる解像度でユーザーが開いた場合、意図しない重ね合わせや画面外へのはみ出しが発生し、スクロールが必要になるなど見た目が崩れてしまいます。 -
修正やメンテナンスに手間がかかる
後からグラフの項目を増やす際、重なり順を入れ替えたり位置を再調整したりする必要があり、無駄な時間がかかってしまいます。
じゃあなぜ「浮動」を紹介したのか？
浮動のまま完成させることはおすすめしませんが、「ダッシュボードをきれいに作る最初のステップ」として浮動を利用するのが最も効果的だからです。
ここからが本題のレイアウト作成テクニックとなります！(前置きが長くすみません。。。）
浮動を使ったきれいなレイアウト作成の手順
シートやオブジェクトをドラッグする際、Shift キーを押しながらドラッグすると一時的に「浮動」として配置できます。この機能を活用します。
-
まず、水平コンテナ（または垂直コンテナ）を
Shiftキーを押しながらドラッグして「浮動」で配置します。
-
その浮いているコンテナの中に、対象のシートをドラッグ＆ドロップで入れ込みます。
-
水平コンテナであれば横に、垂直コンテナであれば縦に、並べたいシートや別のオブジェクトを順に入れ込んでいきます。
-
配置が完了したら、コンテナのオプションから浮動のチェックを外します。これでダッシュボードにきれいに固定（タイル配置）されます。
なぜこの手順できれいになるのか？
1. 狙い通りのコンテナに配置することができる
タイルのままドラッグすると、Tableauが意図しない場所に新しいコンテナを作ってしまうことがあります。あらかじめ「浮動」で親コンテナを用意してドロップしていくことで、狙った箱の中に確実に格納できます。
2. レイアウトの事故（Tableauあるある）を防げる
「シートを動かしたら画面全体のレイアウトがガタガタに崩れた」という現象を回避できます。組み立て中の枠組みを破壊せずに作業できるため、制作ストレスが劇的に減ります。
3. 「均等配置」や「余白調整」機能がうまく使える
コンテナ内に正しくシートが納まることで、コンテナのオプション機能である「幅を均等に配置」や「高さを均等に配置」が綺麗に効くようになります。手動調整なしで整然としたレイアウトが完成します。
綺麗に仕上げるための最後のひと手間（パディング調整）
コンテナに格納して固定（浮動を解除）した後は、最後にパディング（余白を整えましょう。
- 外部パディング：コンテナ同士の隙間（目線の区切りを作る）
- 内部パディング：グラフと枠線の間の余白（視認性を高める）
これらを「すべて0」にしてすっきり見せるか、「統一した数値（例：4px）」に揃えるだけで、デザインのプロが作ったような美しいダッシュボードに仕上がります。
まとめ
今回はダッシュボードをきれいに作るための「コンテナ」と「浮動」の活用テクニックをご紹介しました。
- コンテナ：レイアウト崩れを防ぎ、メンテナンス性を高める「必須の骨組み」
- 浮動配置：最終成果物には残さないが、「コンテナへ綺麗に格納するための組み立てツール」として使う
「浮動で枠を作ってから入れ込み、最後に固定する」という手順を踏むだけで、Tableau特有のレイアウト調整のストレスから解放され、誰が見ても綺麗でメンテナンスしやすいダッシュボードが作れます。
ダッシュボード作成でレイアウト崩れに悩んでいる方は、ぜひ次回の制作から試してみてください！