ダッシュボードのサイズとレイアウト

バージョン: 2021.1
適用先: Tableau Desktop, Tableau Online, Tableau Server

ダッシュボードの作成後、ユーザー向けにサイズ調整したり並び替えたりする必要がある場合があります。

全体的なダッシュボードサイズのコントロール

ダッシュボードサイズオプション

固定サイズ (既定): 表示に使用するウィンドウのサイズに関わらず、ダッシュボードは同じサイズに保たれます。ダッシュボードがウィンドウより大きい場合、ダッシュボードはスクロールできるようになります。デスクトップブラウザー (既定) 小ブログ、iPad などのプリセットサイズから選択できます。

固定サイズのダッシュボードを使用することでオブジェクトの正確な場所と位置を指定できるため、フローティングオブジェクトがある場合に便利です。ダッシュボードが表示される正確なサイズがわかっている場合はこの設定を選択します。

固定サイズを使用するパブリッシュされたダッシュボードは、サーバーにキャッシュされたバージョンを使用する傾向があるので、より早くロードできます。（可変サイズのダッシュボードはすべてのブラウザリクエストでレンダリングを更新する必要があります。）その他のパフォーマンスのヒントについては、ワークブックのパフォーマンスの最適化を参照してください。

範囲:指定した最小サイズと最大サイズの間で、ダッシュボードが拡大/縮小されます。ダッシュボードの表示に使用しているウィンドウが最小サイズよりも小さい場合、スクロールバーが表示されます。最大サイズより大きい場合は、空白スペースが表示されます。

同じコンテンツと同様の形状が必要な、2 つの異なるディスプレイサイズ (小型のブラウザーウィンドウと中型のブラウザーウィンドウなど) を設計する際にこの設定を使用します。範囲はまた、異なるモバイルデバイスを考慮して幅を変更する必要があり、縦スクロールができるよう高さを固定する、縦レイアウトのモバイルダッシュボードでも正しく機能します。

自動:ダッシュボードのサイズが自動的に変更され、ウィンドウ全体に表示されます。

Tableau でサイズ変更を処理する際は、この設定を使用します。最適な結果を得るためには、タイル状のレイアウトを使用します。

ヒント: Tableau Desktop を使用している場合は、異なるデバイスタイプのダッシュボードレイアウトの作成を参照してデスクトップコンピューター、タブレット、電話に最適化された一意のレイアウトを作成します。異なる画面サイズに合わせるだけでなく、各デバイスレイアウトは異なるアイテムを含むことができます。

全体的なダッシュボードのサイズの設定

[ダッシュボード] ペインの [サイズ] で、ダッシュボードのディメンション ([デスクトップブラウザー] など) またはサイズ調整動作 ([自動] など) を選択します。

レイアウトコンテナーを使用してアイテムをグループ化する

レイアウトコンテナーは、関連するダッシュボードアイテムを一緒にグループ化するので、すばやく配置できます。コンテナー内のアイテムのサイズと配置を変更するので、その他のコンテナーアイテムは自動的に調整されます。

レイアウトコンテナーのタイプ

横レイアウトコンテナーはそこに含まれるビューやオブジェクトの幅のサイズを変更し、縦レイアウトコンテナーは高さを調節します。

水平レイアウトコンテナー

次の 2 つのビューは、水平レイアウトコンテナーに配置されています。

垂直レイアウトコンテナー

以下の 3 つのビューは、垂直レイアウトコンテナにスタックされています。

レイアウトコンテナーの追加

[ダッシュボード] ペインの [オブジェクト] から [水平] または [垂直] を選択します。
コンテナーをダッシュボードまでドラッグします。
レイアウトコンテナーにビューやオブジェクトを追加します。

レイアウトコンテナーのアイテムの均等な分散

レイアウトコンテナーを選択します。コンテナーが選択できない場合は、コンテナー内のアイテムごとに選択し、ショートカットメニューから [コンテナーの選択] を選択します。
レイアウトコンテナーが選択された状態で、ショートカットメニューの [均等配置] を選択します。

すでにレイアウトコンテナー内に存在する項目は、均等に配置され、追加した項目と同様に動作します。

ボタンのクリックによる浮動コンテナーの表示と非表示

[表示/非表示] ボタンにより、ダッシュボードのビューアーは、浮動レイアウトコンテナーが必要なときにのみ表示されるように表示/非表示を切り替えることができます。[表示/非表示] ボタンが特に役立つのは、フィルターのグループを一時的に非表示にして Viz をより多く表示する場合です。

浮動レイアウトコンテナーを選択します (空白が表示されることになるため、タイル表示されたコンテナーは非表示にすることができません)。
コンテナーの右上隅にあるポップアップメニューから、[[表示/非表示] ボタンの追加] を選択します。
ボタンメニューから [ボタンを編集] を選択します。
以下のオプションを設定します。

[ダッシュボード項目の表示/非表示] では、対象レイアウトコンテナーを指定します (コンテナーは、一度に 1 つの [表示/非表示] ボタンの対象になることができます)。コンテナーを別の [表示/非表示] ボタンの対象とする場合は、[なし] を選択します。
[ボタンのスタイル] では、ボタンに画像とテキストのどちらを表示するかを指定します。
[ボタンの外観] では、項目が表示中および非表示のときにボタンがどのように表示されるかを指定します。[表示アイテム] と [非表示アイテム] をクリックして、各状態に対応する画像やテキストを選択します。
[Tooltip text (ツールヒントテキスト)] では、ボタンにカーソルを合わせたときに表示される説明テキストを指定します (たとえば、フィルターメニューのあるコンテナーでは「Show or hide filters (フィルターの表示または非表示)」と入力できます)。

必要に応じて、ボタンを別の場所にドラッグするか、レイアウトに合わせてサイズを変更します (対象コンテナーは浮動コンテナーである必要がありますが、ボタンはタイル表示レイアウトに組み込むことができます)。

注: パブリッシュされたダッシュボードを表示している場合は、[表示/非表示] ボタンをクリックするだけでコンテナーの表示が切り替わります。ただし、ダッシュボードを作成している場合は、Alt (Windows) または Option (macOS) を押しながらクリックする必要があります。

レイアウトコンテナーのシートを自動的にサイズ調整

関連するデータのある複数のシートをレイアウトコンテナーに追加する場合、マークが一枚のシートに選択されていれば、関連するシートを自動的にサイズ調整できます。

この例では、マップでマークが選択されると、そのマークに対する収益と売上高を表示する棒グラフが更新されます。マップでマークが選択されていない場合、マップは自動的にレイアウトコンテナー全体に表示されます。

マークを選択	マークを選択しない

関連するデータを含む複数のシートをレイアウトコンテナーに追加します。
展開したいシートのドロップダウンメニューから、[フィルターとして使用]を選択します。
[ダッシュボード] > [アクション] に移動し、先ほど作成したフィルターを編集します。
[フィルターアクションの編集]ダイアログボックスの [対象シート] セクションで、レイアウトコンテナーにある別シートを選択します。
ソースシートにマークが選択されていない場合に対象シートのサイズ調整方法を制御するには、次のいずれかを選択します。
- [すべての値を表示] は対象シートを元のサイズに戻し、全データを表示します。
- [すべての値を除く] は対象シートをタイトルの下に折りたたみ、全データを非表示にします。

レイアウトコンテナーを削除して含まれるアイテムを個別に編集

ダッシュボードまたは、レイアウトペインのアイテム階層いずれかにあるコンテナーを選択します。
コンテナーの上のドロップダウンメニューから、コンテナーの削除を選択します。

ダッシュボードアイテムのタイルまたはフロート

タイルレイアウトとフローティングレイアウト

ダッシュボード上に配置する各オブジェクト、レイアウトコンテナー、およびビューは、タイル (既定) またはフローティングです。

タイルレイアウト	フローティングレイアウト
タイルアイテムは重なりあいません。単一レイヤのグリッドの一部となり、ダッシュボード全体のサイズに基づいてサイズ調整します。	フローティングアイテムは別おオブジェクトの上に重なり合います。以下の例では、マップがタイルビューでフロートしています。

	最適な結果を実現するため、フローティングオブジェクトおよびビューに固定サイズと位置を指定します。

新規アイテムをフロートまたはタイル

ダッシュボードペインの [オブジェクト] で、使用したいレイアウトオプションをクリックします。 [フローティング] または [タイル]。
ビューまたはオブジェクトを右側のダッシュボードにドラッグします。

ヒント:また、キーボードの Shift を押したままダッシュボードにドラッグする方法でも、アイテムにフローティングレイアウトを割り当てることができます。

既存のアイテムをタイルからフローティングに切り替え

ダッシュボードでアイテムを選択します。
アイテムのショートカットメニューで、[フローティング] を選択します。

個々のダッシュボードアイテムのサイズ、位置、並べ替え、および名前の変更

アイテムのサイズと位置の設定

ダッシュボードのすべてのアイテムの配置を高度に制御する場合は、全体的なダッシュボードのサイズ調整に [固定サイズ] や [範囲] を選択し、次に各アイテムのサイズや位置を [レイアウト] ペインを使用して設定します。

位置とサイズを指定するダッシュボードアイテムを選択します。レイアウトペインで、項目の名前は [選択した項目] の下に表示されます。

ヒント: [ダッシュボード]および[レイアウト]ペインを素早く切り替えるには、[T]キーを押します。
ダッシュボードの左上隅からのオフセットとして、アイテムの位置 x および y 位置をピクセル単位で定義します。たとえば、オブジェクトをダッシュボードの左上隅に配置するには、x = 0 および y = 0 を指定します。

値には、正または負の整数を入力できますが。
アイテムのサイズを変更するには、クリックしてダッシュボードにドラッグします。また、[サイズ] の設定を使用することもできます。
選択したアイテムのタイトルを非表示にするには、[タイトルを表示] チェックボックスをオフにします。(類似する [ダッシュボード] ペインコントロールの [ダッシュボードタイトルを表示] チェックボックスは、ダッシュボードのタイトル全体を制御します。)

ヒント: フローティングアイテムを迅速に配置するには、矢印キーを押して 1 ピクセル移動させるか、または Shift+ 矢印キーで 10 ピクセル移動させます。アイテムサイズを迅速に調整するには、[Alt (Windows)] または [Option (macOS)] を上記ショートカットに追加します。

アイテムをグリッドに合わせる

視覚的に一致したデザインにするために、ダッシュボードのアイテムをグリッドで並べ替えおよびサイズ調整します。

[ダッシュボード] > [グリッド表示]。
グリッドサイズを変更するには、 [ダッシュボード] > [グリッドオプション]を選択します。

ヒント: グリッドのオンおよびオフを素早く切り替えるには、[G]キーを押します。

浮動オブジェクトの並べ替え

[レイアウト] ペインの [アイテムの階層] 領域はダッシュボード上のオブジェクト間の関係性を示します。浮動しているアイテムを階層にドラッグしてお互いにどのように重なり合うかを変更します。リストの一番上にあるアイテムが前に表示され、一番下にあるアイテムが後ろに表示されます。

アイテム名の変更

ダッシュボードアイテムの区別を明確にするため、名前を変更することができます。

[レイアウト] ペインの [アイテムの階層] 領域でアイテムを右クリックし、[ダッシュボード項目の名前変更] を選択します。ダッシュボード自体では、このコマンドは各オブジェクトのドロップダウンメニューからも利用できます。

パディング、境界線および背景色をアイテム周辺に追加する

パディングによりダッシュボード上でアイテムを正確に配置できるようになり、境界線と背景色により視覚的に強調することもできました。内側パディングはアイテムコンテンツ間のスペーシングと境界線の外周および背景色を設定します。外側パティングは境界線と背景色を越えた追加のスペーシングを提供します。

注: 境界線または背景色を特定のダッシュボードアイテムで変更できない場合、その形式をワークシートレベルで変更します。

A. 外側のパディング B. 青い境界線 C. 内側のパディング、水色の背景

個別のアイテムまたはダッシュボード全体を選択します。
左側の [レイアウト] タブで、境界線のスタイルと色、背景色と透過度、またはピクセル単位のパディングサイズを指定します。

ダッシュボードスペーシングに関するヒントをいくつか紹介します。

1 つのダッシュボードアイテムを別のアイテムと正確に合わせるには、 [全辺を同じに] の選択を解除して、パディングをある 1 辺だけ調整します。
シームレスなデザインを作り出すには、隣り合うアイテムに外側パディングゼロを指定します。

要素の透明性との視覚的統合

透明な要素は、ダッシュボードの外観をシームレスにするため、その裏側にあるオブジェクトやイメージが表示されます。

ヒント: 透明な浮動要素を通して見える背景イメージを作成するには、イメージオブジェクトを唯一のタイルアイテムとして追加します。固定サイズのダッシュボードを使用すると、画面サイズに関係なく、浮動要素においてイメージとの一貫した視覚的関連性が保たれます。

ワークシートの背景を透明にする

ダッシュボードでシートを選択します。
[書式設定] > [網掛け] を選択し、[ワークシート] メニューをクリックして背景色に [なし] を選択します。

シートの表示が不透明な場合、裏側にあるダッシュボード、オブジェクト、レイアウトコンテナーの背景色を [なし] に変更します。これらのアイテムはダッシュボードの [レイアウト] タブですぐに調整できます。
透明なシートをその他のダッシュボードアイテムとスムーズに統合するには、[書式設定] > [枠線] および [書式設定] > [線] を選択して枠線や線を削除するか、それらの色を変更します。

透明なマップにするための追加手順

[書式設定] > [網掛け] を選択し、[ペイン] メニューをクリックして色に [なし] を選択します。
[マップ] > [マップレイヤー] を選択し、[ベース] の不透明なレイヤーを選択解除します。その後、透明マップがズームアウトの際により明瞭になるようにするには、[海岸線] レイヤーを選択します。

マップのスタイルによっては、他のレイヤーを表示または非表示にしてみる必要が生じる場合もあります。

シートの一部を透明にする

ダッシュボードの [レイアウト] ペインで、シートを選択します。
[バックグラウンド] の色をクリックして、色と不透明度を設定します。

フロートは凡例、フィルター、ハイライター、およびパラメーターを透明にします

フィルター、パラメーター、およびハイライターを関連データに視覚的に接続するには、既定により透明である、これらのアイテムをフロートさせます。テキストは読みやすいように常に全体的に不透明です。

フローティングオブジェクトが引き続き色を表示する場合は、オブジェクトレベルおよびワークシートレベルの設定を確認します。

オブジェクトを選択し、[レイアウト] タブで、[バックグラウンド] 色を選択し、[なし]を選択します。
[書式設定する] メニューをクリックし、次に [凡例]、 [フィルター]、[ハイライター]、または [パラメーター]を選択します。次に、左側の書式設定ペインで、 [網掛け] > [なし]を選択します。

詳細については、ワークシートレベルで書式設定を参照してください。

このセクションの他の記事

一番上に戻る

ありがとうございます!

Tableau Desktop と Web 作成のヘルプ