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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. [ダッシュボード] ペインの [オブジェクト] から [水平] または [垂直] を選択します。

  2. コンテナーをダッシュボードまでドラッグします。

  3. レイアウト コンテナーにビューやオブジェクトを追加します。

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

  1. レイアウト コンテナーを選択します。コンテナーが選択できない場合は、コンテナー内のアイテムごとに選択し、ショートカット メニューから [コンテナーの選択] を選択します。

  2. レイアウト コンテナーが選択された状態で、ショートカット メニューの [均等配置] を選択します。

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

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

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

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

マークを選択 マークを選択しない
  1. 関連するデータを含む複数のシートをレイアウトコンテナーに追加します。

  2. 展開したいシートのドロップダウンメニューから、[フィルターとして使用]を選択します。

  3. [ダッシュボード] > [アクション] に移動し、先ほど作成したフィルターを編集します。

  4. [フィルターアクションの編集]ダイアログボックスの [対象シート] セクションで、レイアウトコンテナーにある別シートを選択します。

  5. ソースシートにマークが選択されていない場合に対象シートのサイズ調整方法を制御するには、次のいずれかを選択します。

    • [すべての値を表示] は対象シートを元のサイズに戻し、全データを表示します。

    • [すべての値を除く] は対象シートをタイトルの下に折りたたみ、全データを非表示にします。

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

  1. ダッシュボードまたは、レイアウト ペインのアイテム 階層いずれかにあるコンテナーを選択します。

  2. コンテナーの上のドロップダウン メニューから、コンテナーの削除を選択します。

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

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

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

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

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

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

  2. ビューまたはオブジェクトを右側のダッシュボードにドラッグします。

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

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

  1. ダッシュボードでアイテムを選択します。

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

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

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

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

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

    ヒント: [ダッシュボード]および[レイアウト]ペインを素早く切り替えるには、[T]キーを押します。

  2. ダッシュボードの左上隅からのオフセットとして、アイテムの位置 x および y 位置をピクセル単位で定義します。たとえば、オブジェクトをダッシュボードの左上隅に配置するには、x = 0 および y = 0 を指定します。

    値には、正または負の整数を入力できますが。

  3. アイテムのサイズを変更するには、クリックしてダッシュボードにドラッグします。また、[サイズ] の設定を使用することもできます。

  4. 選択したアイテムのタイトルを非表示にするには、[タイトルを表示] チェック ボックスをオフにします。(類似する [ダッシュボード] ペイン コントロールの [ダッシュボード タイトルを表示] チェック ボックスは、ダッシュボードのタイトル全体を制御します。)

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

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

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

  1. [ダッシュボード] > [グリッド表示]

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

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

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

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

アイテム名の変更

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

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

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

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

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

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

  1. 個別のアイテムまたはダッシュボード全体を選択します。

  2. 左側の [レイアウト] タブで、境界線のスタイルと色、背景色と透過度、またはピクセル単位のパディング サイズを指定します。

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

  • 1 つのダッシュボードアイテムを別のアイテムと正確に合わせるには、 [全辺を同じに] の選択を解除して、パディングをある 1 辺だけ調整します。

  • シームレスなデザインを作り出すには、隣り合うアイテムに外側パディング ゼロを指定します。

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

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

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

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

  1. ダッシュボードでシートを選択します。

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

    シートの表示が不透明な場合、裏側にあるダッシュボード、オブジェクト、レイアウト コンテナーの背景色を [なし] に変更します。これらのアイテムはダッシュボードの [レイアウト] タブですぐに調整できます。

  3. 透明なシートをその他のダッシュボード アイテムとスムーズに統合するには、[書式設定] > [枠線] および [書式設定] > [線] を選択して枠線や線を削除するか、それらの色を変更します。

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

  1. [書式設定] > [網掛け] を選択し、[ペイン] メニューをクリックして色に [なし] を選択します。

  2. [マップ] > [マップ レイヤー] を選択し、[ベース] の不透明なレイヤーを選択解除します。その後、透明マップがズームアウトの際により明瞭になるようにするには、[海岸線] レイヤーを選択します。

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

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

  1. ダッシュボードの [レイアウト] ペインで、シートを選択します。

  2. [バックグラウンド] の色をクリックして、色と不透明度を設定します。

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

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

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

  • オブジェクトを選択し、[レイアウト] タブで、[バックグラウンド] 色を選択し、[なし]を選択します。

  • [書式設定する] メニューをクリックし、次に [凡例][フィルター][ハイライター]、または [パラメーター]を選択します。次に、左側の書式設定ペインで、 [網掛け] > [なし]を選択します。

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

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

ありがとうございます!