Tableauでは様々なデータを同時に比較することができるダッシュボードを簡単に作成することができます。
定期的に確認するビューが複数ある場合には、ひとつのダッシュボードにまとめておくと非常に便利です。ダッシュボードは様々なオブジェクトをレイアウトすることによって作成されます。限られたスペースに伝えたいことを分かりやすく掲載する必要があります。
本ページでは、ダッシュボードにオブジェクトを見やすく配置するためのサイズとレイアウトの設定・調整方法、網掛けや背景画像を利用した装飾方法を紹介します。
ダッシュボードのサイズ
ダッシュボードのサイズは「固定サイズ」「範囲」「自動」のいずれかを指定することができます。
「固定サイズ」は幅と高さを決めたサイズに指定することがきます。
「範囲」は最小サイズと最大サイズを指定することができ、表示側のウィンドウサイズに応じて拡大・縮小表示されます。
「自動」はサイズが自動的に変更され、表示側のウィンドウ全体に表示ます。
もしダッシュボードを共有する場合には固定サイズにした方が無難です。
固定サイズの方が速く表示される可能性が高く、見る側のデバイスによって表示が崩れる危険性が低くなります。
固定サイズを選択した場合には、「カスタム」リストから様々なサイズを選択することもできれば、任意のサイズに1px刻みで設定することもできます。
利用者がアクセスするデバイスやウィンドウサイズに応じてサイズを設定するとよいでしょう。
ひとつのサイズに決めかねるようであれば、高さ対幅が1:1.618の黄金比を選択する手もあります。黄金比に則れば、高さ600x幅971、高さ800x幅1294、高さ1000x幅1618等の設定が考えられます。
ダッシュボードのレイアウト
水平方向、垂直方向
オブジェクトを横あるいは縦に並べたい場合には、それぞれ水平方向、垂直方向のレイアウトコンテナを利用します。
オブジェクトを横に並べたい場合は以下のようにします。
ます最初に水平方向のレイアウトコンテナをダッシュボードにドラッグ＆ドロップします。
そしてそのコンテナの中に並べたいシートをドラッグ＆ドロップしていきます。
すると以下のようにシートが横に並びます。
オブジェクトを縦に並べたい場合には以下のようにします。
最初に垂直方向のレイアウトコンテナをダッシュボードにドラッグ＆ドロップします。
そしてそのコンテナの中に並べたいシートをドラッグ＆ドロップしていきます。
すると以下のようにシートが縦に並びます。
さらにオブジェクトを多段のレイアウトにしたい場合にもレイアウトコンテナを利用するときれいに配置できます。
例えば2段のレイアウトを作成してみましょう。
まずは縦方向からみていきます。2段なので垂直方向のレイアウトコンテナをダッシュボードにドラッグ＆ドロップします。
1段目から作成します。
シートを横並びで複数入れたいので、水平方向のレイアウトコンテナをダッシュボードにドラッグ＆ドロップして、その中に並べたいシートをドラッグ＆ドロップします。
今度は2段目を作成します。
1段目と同様、シートを横並びで入れたいので水平方向のレイアウトコンテナをドラッグ＆ドロップして、さらにそのコンテナの中に並べたいシートをドラッグ＆ドロップします。
2段のレイアウトになりました。
浮動
ダッシュボードでは基本的にタイル上にオブジェクトを敷き詰めてレイアウトしますが、場合によってはオブジェクトを重ねて表示したい場合があるかと思います。
そのような場合には「浮動」を利用します。浮動に設定すると、オブジェクトを任意の位置に移動させることができます。
設定方法を例で説明します。
まず動かしたいオブジェクトを選択、右上にある「▼」をクリックしてリストから「浮動」を選択します。
するとオブジェクトがどこでも移動できる状態になります。
マウスでドラッグして任意の位置に移動させることができます。
グラフの近くに表示させたい凡例は浮動で位置を調整すると見やすくなります。
レイアウトの微調整
位置調整
チャートが入れたコンテナより大きいと、チャートの一部が削られて表示されることがあります。
そのような場合には、自動調整機能を利用してチャートが画面内に収まるように設定します。
設定はツールバーの「自動調整」のリストで行います。
横にスクロールバーが表示されていれば「幅を合わせる」、縦にスクロールバーが表示されていれば「高さを合わせる」を選択するとよいでしょう。
どちらにも対応したければ「ビュー全体」を選択します。
例えば以下のように削られたチャートがある場合を考えましょう。
チャート全体が収まるように表示したいので、対象のビューを選択して、ツールバーの自動設定機能から「ビュー全体」を選択します。
するとスクロールバーが消えてチャート全体が表示されるようになりました。
余白(パディング)
オブジェクトやビューの間に余白を入れた方が見やすいダッシュボードになると言われています。
オブジェクトを選択して、外側に余白を入れたい場合は「外部パディング」、内側に余白を入れたい場合は「内部パディング」を設定すると余白を入れることができます。
パディングを設定した場合を比較してみます。
▼外部パディング5
黄色のオブジェクトの外側にサイズ5の余白が設定されます。
▼外部パディング5、内部パディング10
黄色のオブジェクトの外側にサイズ5、内側にサイズ10の余白が設定されます。
ダッシュボードの装飾
枠線と網掛け
ダッシュボード上のビューに枠を入れたい場合はレイアウトタブの「枠線」で設定します。
線の色や太さ、種類を設定できます。
ダッシュボード上のビューを網掛けしたい場合はレイアウトタブの「バックグラウンド」で設定します。
例えばチャートのシートを青色の中太の実線で囲み、凡例のビューをグレーに設定すると以下のようになります。
背景と透過
ダッシュボードの背景を独自画像に設定したい場合があるかと思います。
そのような場合には以下のように設定します。
まずダッシュボードに画像を配置します。
オブジェクトの「イメージ」をダッシュボードにドラッグ＆ドロップして編集ウィンドウで画像を選択します。
画像が挿入されました。
画像上にチャートを重ねたいので、ペインで「浮動」を選択して表示したいシートをダッシュボードにドラッグ＆ドロップします。
背景画像を設定できました。
ここからさらに、シートを透過してチャートの背景も画像になるように設定してみます。
チャートを右クリックしてリストから「書式設定」を選択します。
書式設定で「網掛け」をクリックして、「ワークシート」を「なし」に設定します。
シートが透過されて背景画像と一体化された表示になりました。
本ページでは、ダッシュボードのサイズとレイアウトの設定・調整方法、網掛けや背景画像の利用等の装飾方法を紹介しました。
次ページでは、オブジェクトの均等配置によってグリッド形式のレイアウトに整形する方法を紹介します。
