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

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

垂直スクロールは、スクロール可能なドロップダウンリストや Web サイトをデザインするときに、スクロール効果をシミュレートするのに役立ちますが、XD では水平スクロールはサポートされていません。 

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

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

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

    点線とスクロール可能なコンテンツ
    点線とスクロール可能なコンテンツ
  2. カスタムアートボード上で:デザインモードのプロパティインスペクターで、アートボードを選択して以下のオプションを設定します。

    • スクロール:「垂直方向」または「なし」を選択します。
    • ビューポートの高さ:アートボードを表示するときのビューポートの高さを指定します。
    カスタムサイズのアートボード上の垂直スクロール
    カスタムサイズのアートボード上の垂直スクロール
  3. プロトタイプモードでアートボードを接続します。

  4. プロトタイプのプロパティインスペクターで、設計要件に基づいて次のオプションを選択します。

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

例とサンプルファイル

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

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

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

視聴時間:1 分


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

視聴時間:1 分


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

ヒントとコツ

プロトタイプの水平スクロールをシミュレートする方法について説明します。

XD は水平スクロールをサポートしていません。回避策としてドラッグトリガーで自動アニメーション化を使って水平スクロールをシミュレートできます。

  1. アートボード内で水平方向にスクロールする要素をグループ化し、同じアートボードを複製します。
  2. 新しいアートボードで、要素のグループをコピーし、スクロール内の最後の位置に移動します。
  3. プロトタイプを接続し、トリガーを タップ から ドラッグ に切り替え、アクションを 自動アニメーションにします。
  4. プレビューウィンドウをドラッグし、水平スクロール効果のシミュレーションを確認します。

ベストプラクティス

「スティッキーヘッダーやその他の固定要素は、高速道路の標識のようなものです。これは、対応するセクションに関連情報を継続的に提供したり、行動を促すボタンなどを通じてお客様の操作を支援したりするための方法です」と Oliver Lindberg 氏は述べています。これについては次のブログ、「スティッキーヘッダーやその他の固定要素を設計するためのベストプラクティス」をチェックしてください。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー