--- schema_version: "1" id: 1eaef44b29bf72cd8f0b2d42cf46db0db5894e98349fda00b39bcc4e7c2277a1 title: 異なるデバイス タイプのダッシュボード レイアウトの作成 collection: tableau version: next locale: ja-jp portal_url: https://docs.salesforce.com/tableau/next/ja-jp/public/desktop/dashboards_dsd_create.md canonical_url: https://help.tableau.com/v0.0/public/desktop/ja-jp/dashboards_dsd_create.htm source_site: help.tableau.com content_type: documentation content_hash: 2eca1662909f581129c257ae6c595a7190364037e3c0853e3eb14019409c5836 description: Create device-specific dashboard layouts optimized for phone, tablet, and desktop screens. --- [メイン コンテンツに進む](#main-content) # 異なるデバイス タイプのダッシュボード レイアウトの作成 ダッシュボードには、幅広い画面サイズにわたるさまざまなタイプのデバイスのレイアウトを含めることができます。これらのレイアウトを Tableau Server または Tableau Cloud にパブリッシュすると、ダッシュボードを表示する人々は、スマートフォン、タブレット、またはデスクトップに向けてデザインが最適化されていることに気付きます。作成者としては、単一のダッシュボードを作成し、単一の URL を配布する必要しかありません。 ![ビジネス メトリクスのグラフを表示する 2 つのスマートフォン画面。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/mobile_dsds.png) ## 既存ダッシュボードとデバイス レイアウトの関係性 デバイス レイアウトは、\[ダッシュボード\] タブの \[既定\] に表示されます。最初は、各デバイス レイアウトには、既定ダッシュボードのすべてのアイテムが含まれ、サイズやレイアウトも同様に既定から取得されます。 既定ダッシュボードが親、デバイス レイアウト (デスクトップ、タブレット、電話) は子であると考えてください。デバイス レイアウトに追加するビュー、フィルター、操作、凡例、またはパラメーターは、最初に既定のダッシュボード内に配置されている必要があります。 ### スマートフォン レイアウトと既定のダッシュボード 変更内容を自動的に既定のダッシュボードに反映させるユニークなスマートフォン レイアウト オプションを使用して時間を節約するには、開いたロック アイコン ![ダッシュボードのロック解除アイコン。ロックが解除された灰色の南京錠のシンボルで表されます。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd_manual_phone_lock.png) をクリックするか、ポップアップ メニューから \[レイアウトの自動生成\] を選択します。 ![ダッシュボードのロック解除アイコンとコンテキスト メニューが展開され、レイアウトの自動生成オプションが選択されています。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd_automatic_phone_new.png) 閉じたロック アイコン ![ダッシュボードのロック アイコン。ロックされた灰色の南京錠のシンボルで表されます。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd_automatic_phone_lock.png) をクリックするか、メニューから \[レイアウトの編集\] を選択すると、スマートフォン レイアウトが完全に独立するので、アイテムの追加と配置を手動で行い、変更内容を既定のダッシュボードに反映させる必要があります。 ![電話のロック アイコンが選択され、ドロップダウンからレイアウトの編集オプションが選択されたダッシュボード。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd_manual_phone.png) ### デスクトップ レイアウトおよびタブレット レイアウトと既定のダッシュボード スマートフォン レイアウトとは異なり、デスクトップ レイアウトおよびタブレット レイアウトはダッシュボードに手動で追加する必要があります。デスクトップ レイアウトおよびタブレット レイアウトは常に既定のダッシュボードから独立しているため、各デバイス レイアウトにはオブジェクトの独自の配置を含めることができます。 ![タブレットのレイアウトとサイズの設定を備えたダッシュボード。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd8.png) ## 電話のレイアウトを自動で追加する 2 つのオプションで、電話レイアウトを自動的に追加できます。 - 不足している古いダッシュボードを開くたびに電話のレイアウトを作成するには、 ダッシュボード > 既存のダッシュボードに電話レイアウトを追加を選択します。 - 新しいダッシュボードを作成するたびに電話レイアウトを作成するには、\[ダッシュボード\] > \[新しいダッシュボードに電話レイアウトを追加\] を選択します(このオプションは既定で有効になっています。) ## デバイス レイアウトのプレビューと追加 1. ダッシュボード シートを開きます。 2. 左側の \[ダッシュボード\] タブで、\[デバイスのプレビュー\] をクリックします。 ![デバイス プレビュー オプションが強調表示された Tableau ダッシュボード。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd2.png) デバイスのプレビューモードで、これらのオプションはダッシュボードの上に表示されます。 ![デバイスの種類とモデルを切り替えるオプションを備えたデバイス プレビュー ツールバー。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd14.png) 3. \[デバイス タイプ\] や \[モデル\] をクリックし、さまざまな画面サイズを探索します。次に、これらのオプションを設定します。 - ダッシュボードが横モードまたは縦モードでどのように表示されるかを確認するには、![画面を回転するアイコン。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd6.png) をクリックします。通常、横はタブレット、縦は携帯電話に最適です。 - Tableau Mobile アプリを選択して、ブラウザーではなくアプリでダッシュボードが表示された場合にどう見えるかを確認します。このオプションは iOS または Android デバイスで利用可能で、ダッシュボードをわずかに縮小し、アプリ制御用のスペースを残ります。 4. \[デバイスのタイプ\] (タブレットなど) を選択します。 ![タブレットが強調表示されたデバイス プレビューの Tableau ダッシュボード オプション。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd5.png) 5. 右上隅で、選択したデバイス種別の \[レイアウトの追加\] ボタンをクリックします (例えば、\[タブレット レイアウトの追加\]。 ![Tableau レイアウトを追加するための Tableau ダッシュボード オプション。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd7.png) 6. 新しい \[デバイスのタイプ\] を選択し、\[レイアウトの追加\] をクリックしてレイアウトを追加します。 ![電話デバイス タイプが選択されたデバイス プレビュー。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd15.png) 各デバイス タイプにレイアウトを作成すると、ユーザーが別のデバイスからダッシュボードを閲覧した際のユーザー体験を最大限にコントロールできます。3 つのレイアウトすべてを備えたダッシュボードをパブリッシュした後は、ユーザーは既定のダッシュボード レイアウトを目にしません。その代わりに、適切なデバイス固有のレイアウトが常に表示されます。 ![デスクトップが強調表示されたデバイス プレビューの Tableau ダッシュボード オプション。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd20.png) **注**: ビューに変更を加える場合は、関連するデバイス レイアウトをダブルクリックし、期待通りの外観になっていることを確認してください。 ## デバイス レイアウトのカスタマイズ デバイス レイアウトをダッシュボードに追加した後、オブジェクトの再配置を開始して好みの外観を作成することができます。 1. デスクトップ レイアウトおよびタブレット レイアウトでは \[カスタム\] をクリックします。 ![タブレット用のカスタム レイアウト オプションが選択されたダッシュボード。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd_manual_desktop_or_tablet.png) スマートフォン レイアウトでは、ロック アイコン ![ダッシュボードのロック アイコン。ロックされた灰色の南京錠のシンボルで表されます。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd_automatic_phone_lock.png) をクリックするか、ポップアップ メニューから \[レイアウトの編集\] を選択します。 ![電話のロック アイコンが選択され、ドロップダウンからレイアウトの編集オプションが選択されたダッシュボード。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd_manual_phone.png) 2. レイアウトに追加した内容は、左側の \[レイアウト\] の下に表示されます。アイテムに付いた青いチェック マークは、現在作業中のデバイス レイアウトの一部であることを意味します。 ![棒グラフが強調表示されたカスタム タブレット レイアウト ペイン。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd12.png) 3. アイテムを削除しても、現在のデバイス レイアウトから削除されるだけです。既定のダッシュボード上にはまだ存在しているため、デバイス レイアウトに再び追加できます。 ![タブレットからビューを削除するオプションを備えたダッシュボード上の折れ線グラフ。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd9.png) 4. \[デバイス モデル\] オプションを順にクリックし、さまざまなレイアウトでレイアウトがどのように表示されるかを確認します。 ![iPad (1024X768) オプションが選択されたデバイス モデル メニュー。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd11.png) 最終的には、ダッシュボードを読み込む Web ブラウザーのサイズによってデバイス上に表示するレイアウトが決まります。詳細については、[デバイスが表示するレイアウトの確認](#Confirm)を参照してください。 5. \[サイズ\] の下にある左側のオプションを使ってみてください。 ![すべてに合わせることが選択されているタブレット サイズの設定オプション。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd13.png) **既定**:デバイス レイアウトの高さと幅は、既定ダッシュボードが使用しているものを模倣します。たとえば、タブレットのレイアウトを作成して既定ダッシュボードをデスクトップ ブラウザー (1000 x 800) の固定サイズに設定し、\[サイズ\] を \[既定\] に設定すると、タブレット レイアウトのサイズは 1000 x 800 になります。 **すべてを適応**:すべてのアイテムは、デバイスのフレーム サイズに合わせて自動的にサイズ変更されます。デバイスのフレーム サイズはデバイスのタイプ、モデル、向き (縦または横)設定によって決まります。 **幅に合わせる** (携帯電話の推奨設定): アイテムはデバイス フレームの幅に合わせて自動的にサイズ変更されますが、高さは固定されます。これは、携帯電話のレイアウトや縦スクロール レイアウトに適したオプションです。 ## 携帯電話用に最適化 携帯電話で画面が小さくても、さらに最適化するとメリットが得られます。これらの技術を試してみてください。 ### 手動でのスマートフォン レイアウトの最適化 自分でスマートフォン レイアウトを編集することにした場合、フィルターの配置をすぐに最適化するほか、空白の削除などを行うことができます。\[ダッシュボード\] タブで、\[スマートフォン\] の右側にあるポップアップ メニューをクリックし、\[レイアウトの最適化\] を選択します。 ![電話のロック解除アイコンが選択され、ドロップダウンからレイアウトの最適化オプションが選択されたダッシュボード。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd_optimize_phone.png) このコマンドでは、現在スマートフォン レイアウトにあるアイテムの再配置のみが行われます。スマートフォン レイアウトを継続的に更新し、すべての変更内容を既定のダッシュボードに反映させる場合は、\[レイアウトの自動生成\] を選択します。 ### インスタント メッセージと電話呼び出しを起動するリンクの追加 携帯電話ユーザーがカギを握る人々にダッシュボードのコンテンツについて迅速に連絡できるように、自動的に SMS メッセージと通話を起動する [URL アクション](https://help.tableau.com/v0.0/public/desktop/ja-jp/actions_url.htm)をオブジェクトに追加します。リンク形式 `sms:_phone-number_` または `tel:phone-number` を使用します。必要に応じて国コードと市外局番を含めてください。 ### 携帯電話固有のバージョンのビューの作成 既定のダッシュボードの特定のビューの複製を作成し、1 つをデスクトップ表示に最適化して 2 つを携帯電話用に最適化します。 1. ビューのワークシートに移動し、タブをクリックしてから、\[シートの複製\] を選択します。 ![シートの複製オプションが選択されたコンテキスト メニュー。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd16.png) 2. モバイル閲覧用にビューをカスタマイズします。 たとえばマップに関しては、既定で特定の地域にズーム インしたり、パン、ズーム、およびその他の機能を無効化する場合もあります。[ユーザーによるマップの操作方法のカスタマイズ](https://help.tableau.com/v0.0/public/desktop/ja-jp/maps_customize_interaction.htm)を参照してください。 ![マップ単位の設定、パンとズームの許可、マップ検索の表示、ビュー ツールバーの表示などのオプションを含むマップ オプション ウィンドウ。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd17.png) 3. 新しいビューを既定のダッシュボードに追加し、作成中のデバイス レイアウトで利用できるようにします。 ### タイトルの短縮化 モバイルの閲覧には、短いタイトルが適しています。タイトルを編集するには、ダブルクリックします。 ### 空白の最適化 空白は考慮すべき別の視覚要素です。携帯電話では画面のスペースが小さく、そのスペースを最大限に活用する必要がある一方、ユーザーがフィルターやその他のアイテムを不用意に選択しないよう、ユーザーがタップやスクロールを開始できる安全な場所を提供しなければならない場合もあります。 空白を追加するには、パディングまたは\[ブランク\]オブジェクトを使用します。詳細については、[ダッシュボードのサイズとレイアウト](https://help.tableau.com/v0.0/public/desktop/ja-jp/dashboards_organize_floatingandtiled.htm)を参照してください。 ## ダッシュボードのパブリッシュ 1. \[サーバー\] > \[ワークブックのパブリッシュ\] をクリックします。まだサインインしていない場合は、認証資格情報を求められます。 2. \[Tableau Server にワークブックをパブリッシュ\] ダイアログ ボックスで、\[シートをタブとして表示\] チェック ボックスがオフになっていることを確認します。 ![シートをタブとして表示したり、選択内容を表示したり、外部ファイルを含めたりするためのオプションを含むその他のオプション ダイアログ。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd21.png) デバイス固有のダッシュボードでこのチェック ボックスをオンにすると、Web ブラウザーのサイズを正しく検出し、正しいレイアウトを読み込むサーバーの機能とタブのサイズ調整要件が干渉します。 3. \[パブリッシュ\] をクリックします。 ## ダッシュボードのテスト ダッシュボードを Tableau Server や Tableau Cloud にパブリッシュした後、別のブラウザー サイズで表示してダッシュボードをテストします。 1. Tableau Server または Tableau Cloud でダッシュボードを開きます。 2. ページの右上隅で \[共有\] をクリックし、\[リンク\] テキスト ボックスの内容をコピーします。 ![ダッシュボード ビューを編集、共有、埋め込むためのオプション。](/tableau/next/ja-jp/public/desktop/ja-jp/Img/dashboard_dsd22.png) 3. 文字列を Web ブラウザー URL に貼り付けます。文字列には、`embed=y` を含める必要があります 4. ブラウザー URL として埋め込みコード文字列を使用し、Web ブラウザー ウィンドウのサイズを変更して異なるレイアウトを試してから更新してください。 ## デバイスが表示するレイアウトの確認 デバイスの表示するダッシュボード レイアウトは Tableau ビューが表示される iframe の極小寸法 (高さまたは幅) に基づきます。この高さまたは幅は、デバイスの画面解像度ではなく iframe の CSS ピクセル サイズであり、ピクセル サイズよりも大きくなる場合があります。時折デスクトップ、タブレット、または携帯電話レイアウトが他の種別のデバイスに現れることがあります。例えば、デスクトップ コンピューターのディスプレイまたはブラウザー ウィンドウが小さければ、タブレット レイアウトが現れる可能性があります。
iframe の最小サイズの場合...このデバイス レイアウトは次の場合に現れます...
500 ピクセル以下携帯電話
501 ～ 800 ピクセルタブレット
800 ピクセル超Desktop
Tableau Cloud や Tableau Server のユーザーが、スマートフォンやタブレットのレイアウトに制限が多いと感じたら、ツールバーの表示設定ボタンを使用して、デスクトップ イアウトを表示することができます。このボタンは、デスクトップ レイアウトとモバイル レイアウトを切り替えることができるトグルです。ボタンの配置は、ダッシュボードを表示しているデバイスによって異なります。 ![表示オプション](/tableau/next/ja-jp/public/desktop/ja-jp/Img/desktop_mobile_layout2.png) デスクトップ デバイスの表示設定 ![表示オプション](/tableau/next/ja-jp/public/desktop/ja-jp/Img/desktop_mobile_layout.png) タブレットの表示設定 ![表示オプション](/tableau/next/ja-jp/public/desktop/ja-jp/Img/desktop_mobile_layout3.png) スマートフォンの表示設定