Version 2021

自由形式レイアウトで特定のコンテナーを非表示にすることによるレスポンシブなデフォルト ビューのキュレーション

ビジュアリゼーション コンテナーを非表示にして、携帯電話やタブレットなどの小型デバイスでよりレスポンシブなエクスペリエンスを提供したり、横向きモードのデスクトップや大型タブレットで、特定のオブジェクトだけを大きな非レスポンシブなデフォルト ビューに表示することができます。

たとえば、携帯電話のレスポンシブ ビューには詳細グリッドと背景イメージがあります。ただし、これらのコンテナーを表示する必要はありません。エレメントを簡単に非表示にできるので、小型画面で表示するユーザーは、不要な背景イメージや過剰なスクロールを生むビジュアリゼーションがない、クリーンで直感的なビューを利用できます。

いくつか留意事項があります。

  • Apple デバイスの場合:

    • iPad の横モードでは、ドシエが非レスポンシブ ビューで実行されます。

    • iPad の縦モードでは、デバイスの幅が 768 ポイント以上の場合、ドシエが非レスポンシブ ビューで実行されます。それ以外、iPad mini や 9.7 インチ iPad などの場合、ドシエはレスポンシブ モードで動作します。デバイスの寸法に関する詳細は、Apple の「ヒューマンインターフェイスガイドライン」の「基本要素」>「レイアウト」>「仕様」セクション (こちら) に記載されています。

    • すべての iPhone は、縦画面か横画面かに関係なくレスポンシブ ビューでドシエを実行します。

  • Android デバイスの場合:

    • Android タブレットは 768 のブレークポイントに従っています。デバイスの寸法が 768 ポイント未満の場合、ドシエはレスポンシブ ビューで実行されます。

    • すべての Android スマートフォンは、縦画面か横画面かに関係なくレスポンシブ ビューでドシエを実行します。

レスポンシブ ビューの詳細は、「レスポンシブ フリーフォーム ドシエを作成する際のベスト プラクティス」を参照してください。

レスポンシブ ビューでのコンテナーの非表示

  1. 自由形式レイアウトでドシエを開きます。
  2. 小型の画面の場合、レスポンシブ ビューで非表示にするコンテナーを指定します。

    3. 元の非レスポンシブ ビュー:

    レスポンシブ プレビュー:

    小型画面の場合、レスポンシブ ビューでイメージとグリッドを非表示にして、必要なスクロールを非表示にしたいとします。

  3. [レイヤー] パネルでコンテナーを右クリックし、[レスポンシブ ビューで非表示] を選択します。

    レスポンシブ ビューで非表示になっているコンテナーを示すアイコンに注目してください。

  4. [レスポンシブ プレビュー] を使用すると、小型画面のビューの外観を確認できます。

  5. 非表示のコンテナーをレスポンシブ ビューで再表示するには、[レイヤー] パネルでコンテナーを右クリックし、[レスポンシブ ビューで表示] を選択します。

デフォルト ビューでのコンテナーの非表示

大型画面の場合、デフォルトの非レスポンシブ ビューで特定のオブジェクトのみを表示したい場合、[デフォルト ビューで非表示] が便利です。[デフォルト ビューで非表示] には 2 つの用途があります。

  1. 小さな画面用のレスポンシブ ビューをキュレートして、特定のオブジェクトだけを表示し、大きな画面用のデフォルトの非レスポンシブ ビューでは非表示にします。これには、小さなモバイル デバイス用とデスクトップや横向きモードの大きなタブレット用とで異なるナビゲーション バーを作成することも含まれます。2 つの例を次に示します。

  1. 作成中に使用することで、重なり合うコンテナーを調整し、書式設定できます。オブジェクトをデフォルトの非レスポンシブの大型画面で非表示のままにしたくない場合は、必ずキャンバスに再表示してから保存してください。