スクロール可能なアートボードの作成方法を説明します。

XD デザインを作成するとき、アートボードの長さが足りないために、コンテンツをすべて表示できない場合があります。アートボードを長くし、デザインのニーズに応じてオプションを選択すると、アートボードを上下にスクロールして多様なデバイスサイズに対応できます。

垂直スクロールは、スクロール可能なドロップダウンリストや Web サイトをデザインする際に、スクロール効果をシミュレートするうえで役立ちます。しかし、スクロールグループを使用すると、マルチパネルインターフェイス、マップ、および水平画像ギャラリーをデザインする場合に、新しいレベルのインタラクションを追加できます。

スクロール可能なアートボード

垂直スクロールを作成する

  1. プリセットのアートボード上アートボードの一番下の点を下方向にドラッグして、デバイス画面よりも長くなるようにします。点線は、スクロール可能なコンテンツの始まりを示します。 

    点線とスクロール可能なコンテンツ
    点線とスクロール可能なコンテンツ
  2. デザインモードで、プロパティインスペクターの次のオプションを選択します。

    • スクロール:「垂直方向」または「なし」を選択します。
    • スクロール時に位置を固定:デザイン要素がコンテンツと一緒にスクロールしないように、特定の位置に固定する場合に選択します。
    • ビューポートの高さ:アートボードを表示できるビューポートの高さを指定します。

    垂直スクロール効果を適用すると、アートボードの内容を上下に移動できます。

    カスタムサイズのアートボード上の垂直スクロール
    アートボード上の垂直スクロール
  3. プロトタイプモードでアートボードを接続します。

  4. プロトタイプモードで、プロパティインスペクターの次のオプションを選択します。

    • スクロール位置を保持:前のアートボードでの位置を維持しながら、次のアートボードへ移行します。詳しくは、こちらの Twitter の投稿を参照してください。
    • スクロール時に位置を固定:デザイン要素がコンテンツと一緒にスクロールしないよう、固定位置に固定します。
    スクロール位置を保持
    スクロール位置を保持
    スクロール時に位置を固定
    スクロール時に位置を固定
  5. アートボードをプレビューするには、デスクトッププレビュー を選択します。プレビューウィンドウをドラッグして、垂直スクロールを表示します。

例とサンプルファイル

プリセットのアートボードを使用して、縦方向にスクロール可能なドロップダウンリストを作成するには、

  1. 選択ツールを使用して、アートボード名をクリックするか、アートボード間をドラッグします。またはレイヤーパネルでアートボード名をクリックして、ドキュメントウィンドウで選択することもできます。
  2. 選択したアートボードを長くするには、アートボードの下端を下にドラッグします。点線は、アートボードの元の高さを示します。
  3. アートボード上でスクロールをプレビューするには、デスクトッププレビューオプションを使用して、XD で直接プレビューすることができます。

サンプルファイルをダウンロードして実際に試すか、このビデオで詳細をご覧ください。

視聴時間:1 分


デスクトップ用またはモバイル用にデザインを作成する際、スクロールとともに Web サイトの一部を表示し、デザイン要素をフローティングせずに固定する場合は、スクロール可能なアートボードと固定要素についてこのビデオをご覧ください。 

視聴時間:1 分


また、XD コミュニティで、このようなチュートリアルやサンプルファイルをさらにチェックすることもできます。

ヒントとテクニック

デザインで水平スクロール効果を作成するには、スクロールグループを使用します。スクロールグループを使用すると、水平方向、垂直方向、または両方向にスクロールできるコンテンツのウィンドウをプロトタイプ化できます。

ベストプラクティス

「スティッキーヘッダーなどの固定要素は、いわば高速道路に掲示されている標識のようなものです。適切な情報を常に提供して目的のセクションに案内したり、操作ボタンなどによってお客様の移動を支援したりします」と Oliver Lindberg 氏は述べています。これについては次のブログ、「スティッキーヘッダーやその他の固定要素をデザインするためのベストプラクティス」をチェックしてください。