異なるデバイス タイプのダッシュボード レイアウトの作成

ダッシュボードには、幅広い画面サイズにわたるさまざまなタイプのデバイスのレイアウトを含めることができます。これらのレイアウトを Tableau Server または Tableau Online にパブリッシュすると、ダッシュボードを表示する人々は、スマートフォン、タブレット、またはデスクトップに向けてデザインが最適化されていることに気付きます。作成者としては、単一のダッシュボードを作成し、単一の URL を配布する必要しかありません。

ヒント: モバイル向けのレイアウトの最適化に加えて、ワークブックのパフォーマンスの最適化を行うことで、帯域幅が限られ、急いでいることが多いモバイル ユーザーのニーズをさらに満たせます。

既存ダッシュボードとデバイス レイアウトの関係性

デバイス レイアウトは、[ダッシュボード] タブの [既定] に表示されます。最初は、各デバイス レイアウトには、既定ダッシュボードのすべてのアイテムが含まれ、サイズやレイアウトも同様に既定から取得されます。

既定ダッシュボードが親、デバイス レイアウト (デスクトップ、タブレット、電話) は子であると考えてください。デバイス レイアウトに追加するビュー、フィルター、操作、凡例、またはパラメーターは、最初に既定のダッシュボード内に配置されている必要があります。

スマートフォン レイアウトと既定のダッシュボード

既定では、新しいダッシュボードを作成するたびに、スマートフォン レイアウトが自動的に生成されます。特定のダッシュボードでのみ作成するには、[ダッシュボード] メニューで [スマートフォン レイアウトの自動生成] を選択解除します。

スマートフォン レイアウトに独自の [自動レイアウトを使用] オプションがあり、すべての変更内容が既定のダッシュボードに自動的に同期されるため、時間の節約となります。または、[自分でレイアウトを編集] を選択すると、スマートフォン レイアウトが完全に独立するので、アイテムの追加と配置を手動で行い、変更内容を既定のダッシュボードに反映させる必要があります。

デスクトップ レイアウトおよびタブレット レイアウトと既定のダッシュボード

スマートフォン レイアウトとは異なり、デスクトップ レイアウトおよびタブレット レイアウトはダッシュボードに手動で追加する必要があります。デスクトップ レイアウトおよびタブレット レイアウトは常に既定のダッシュボードから独立しているため、各デバイス レイアウトにはオブジェクトの独自の配置を含めることができます。

デバイス レイアウトのプレビューと追加

  1. ダッシュボード シートを開きます。

  2. 左側の [ダッシュボード] タブで、[デバイスのプレビュー] をクリックします。

    デバイスのプレビューモードで、これらのオプションはダッシュボードの上に表示されます。

  3. [デバイス タイプ][モデル] をクリックし、さまざまな画面サイズを探索します。次に、これらのオプションを設定します。

    • ダッシュボードが横モードまたは縦モードでどのように表示されるかを確認するには、 をクリックします。通常、横はタブレット、縦は携帯電話に最適です。

    • Tableau Mobile アプリを選択して、ブラウザーではなくアプリでダッシュボードが表示された場合にどう見えるかを確認します。このオプションは iOS または Android デバイスで利用可能で、ダッシュボードをわずかに縮小し、アプリ制御用のスペースを残ります。

  4. [デバイスのタイプ] (タブレットなど) を選択します。

  5. 右上隅で、選択したデバイス種別の [レイアウトの追加] ボタンをクリックします (例えば、[タブレット レイアウトの追加]

  6. 新しい [デバイスのタイプ] を選択し、[レイアウトの追加] をクリックしてレイアウトを追加します。

    各デバイス タイプにレイアウトを作成すると、ユーザーが別のデバイスからダッシュボードを閲覧した際のユーザー体験を最大限にコントロールできます。3 つのレイアウトすべてを備えたダッシュボードをパブリッシュした後は、ユーザーは既定のダッシュボード レイアウトを目にしません。その代わりに、適切なデバイス固有のレイアウトが常に表示されます。

: ビューに変更を加える場合は、関連するデバイス レイアウトをダブルクリックし、期待通りの外観になっていることを確認してください。

デバイス レイアウトのカスタマイズ

デバイス レイアウトをダッシュボードに追加した後、オブジェクトの再配置を開始して好みの外観を作成することができます。

  1. デスクトップ レイアウトおよびタブレット レイアウトでは [カスタム] をクリックします。スマートフォン レイアウトでは [自分でレイアウトを編集] をクリックします。


    画像をクリックして再生する。

    デバイス レイアウトからアイテムを削除しても、そのレイアウトから削除されるだけです。既定のダッシュボード上にはまだ存在しているため、デバイス レイアウトに再び追加できます。

    レイアウトに追加した内容は、左側の [レイアウト] の下に表示されます。アイテムに付いた青いチェック マークは、現在作業中のデバイス レイアウトの一部であることを意味します。

  2. [デバイス モデル] オプションを順にクリックし、さまざまなレイアウトでレイアウトがどのように表示されるかを確認します。

    最終的には、ダッシュボードを読み込む Web ブラウザーのサイズによってデバイス上に表示するレイアウトが決まります。詳細については、デバイスが表示するレイアウトの確認を参照してください。

  3. [サイズ] の下にある左側のオプションを使ってみてください。

    既定:デバイス レイアウトの高さと幅は、既定ダッシュボードが使用しているものを模倣します。たとえば、タブレットのレイアウトを作成して既定ダッシュボードをデスクトップ ブラウザー (1000 x 800) の固定サイズに設定し、[サイズ] を [既定] に設定すると、タブレット レイアウトのサイズは 1000 x 800 になります。

    すべてを適応:すべてのアイテムは、デバイスのフレーム サイズに合わせて自動的にサイズ変更されます。デバイスのフレーム サイズはデバイスのタイプ、モデル、向き (縦または横)設定によって決まります。

    幅に合わせる (携帯電話の推奨設定): アイテムはデバイス フレームの幅に合わせて自動的にサイズ変更されますが、高さは固定されます。これは、携帯電話のレイアウトや縦スクロール レイアウトに適したオプションです。

携帯電話用に最適化

携帯電話で画面が小さくても、さらに最適化するとメリットが得られます。これらの技術を試してみてください。

手動でのスマートフォン レイアウトの最適化

自分でスマートフォン レイアウトを編集することにした場合、フィルターの配置をすぐに最適化するほか、空白の削除などを行うことができます。[ダッシュボード] タブで、[スマートフォン] の右側にあるポップアップ メニューをクリックし、[再配置レイアウト] を選択します。

このコマンドでは、現在スマートフォン レイアウトにあるアイテムの再配置のみが行われます。スマートフォン レイアウトを継続的に更新し、すべての変更内容を既定のダッシュボードに反映させる場合は、[自動レイアウトを使用] を選択します。

インスタント メッセージと電話呼び出しを起動するリンクの追加

携帯電話ユーザーがカギを握る人々にダッシュボードのコンテンツについて迅速に連絡できるように、自動的に SMS メッセージと通話を起動する URL アクションをオブジェクトに追加します。リンク形式 sms:phone-number または tel:phone-number を使用します。必要に応じて国コードと市外局番を含めてください。

携帯電話固有のバージョンのビューの作成

既定のダッシュボードの特定のビューの複製を作成し、1 つをデスクトップ表示に最適化して 2 つを携帯電話用に最適化します。

  1. ビューのワークシートに移動し、タブをクリックしてから、[シートの複製] を選択します。

  2. モバイル閲覧用にビューをカスタマイズします。

    たとえばマップに関しては、既定で特定の地域にズーム インしたり、パン、ズーム、およびその他の機能を無効化する場合もあります。ユーザーによるマップの操作方法のカスタマイズを参照してください。

  3. 新しいビューを既定のダッシュボードに追加し、作成中のデバイス レイアウトで利用できるようにします。

タイトルの短縮化

モバイルの閲覧には、短いタイトルが適しています。タイトルを編集するには、ダブルクリックします。

空白の最適化

空白は考慮すべき別の視覚要素です。携帯電話では画面のスペースが小さく、そのスペースを最大限に活用する必要がある一方、ユーザーがフィルターやその他のアイテムを不用意に選択しないよう、ユーザーがタップやスクロールを開始できる安全な場所を提供しなければならない場合もあります。

空白を追加するには、パディングまたは[ブランク]オブジェクトを使用します。詳細については、ダッシュボードのサイズとレイアウトを参照してください。

ダッシュボードのパブリッシュ

  1. [サーバー] > [ワークブックのパブリッシュ] をクリックします。まだサインインしていない場合は、認証資格情報を求められます。

  2. [Tableau Server にワークブックをパブリッシュ] ダイアログ ボックスで、[シートをタブとして表示] チェック ボックスがオフになっていることを確認します。

    デバイス固有のダッシュボードでこのチェック ボックスをオンにすると、Web ブラウザーのサイズを正しく検出し、正しいレイアウトを読み込むサーバーの機能とタブのサイズ調整要件が干渉します。

  3. [パブリッシュ] をクリックします。

ダッシュボードのテスト

ダッシュボードを Tableau Server や Tableau Online にパブリッシュした後、別のブラウザー サイズで表示してダッシュボードをテストします。

  1. Tableau Server または Tableau Online でダッシュボードを開きます。

  2. ページの右上隅で [共有] をクリックし、[リンク] テキスト ボックスの内容をコピーします。

  3. 文字列を Web ブラウザー URL に貼り付けます。文字列には、embed=y を含める必要があります

  4. ブラウザー URL として埋め込みコード文字列を使用し、Web ブラウザー ウィンドウのサイズを変更して異なるレイアウトを試してから更新してください。

デバイスが表示するレイアウトの確認

デバイスの表示するダッシュボード レイアウトは Tableau ビューが表示される iframe の極小寸法 (高さまたは幅) に基づきます。時折デスクトップ、タブレット、または携帯電話レイアウトが他の種別のデバイスに現れることがあります。例えば、デスクトップ コンピューターのディスプレイまたはブラウザーウィンドウが小さければ、タブレット レイアウトが現れる可能性があります。

iframe の最小サイズの場合... このデバイス レイアウトは次の場合に現れます...
500 ピクセル以下 携帯電話
501 ~ 800 ピクセル タブレット
800 ピクセル超 デスクトップ

Tableau Online および Tableau Server のユーザーが、スマートフォン レイアウトやタブレット レイアウトでは制約が大きすぎると感じている場合は、ツールバーの [デスクトップ レイアウトを表示] をクリックします。この切り替えボタンを使用すれば、ユーザーはいつでもモバイル デバイス用レイアウトに戻ることができます。

ご意見をお寄せくださりありがとうございます。 ご意見の送信中にエラーが発生しました。もう一度実行するか、当社にメッセージを送信してください