スクロールグループを作成してアートボードの他の部分から独立してスクロールする方法について説明します。

Adobe XD のスクロールグループでは、アートボード内で、アートボードの他の部分から独立してスクロールする領域を定義し、水平方向または垂直方向スクロール効果を作成できます。スクロールグループは、イメージカルーセル、製品スライダー、インタラクティブマップなどの UI 要素をデザインする際に便利です。

XD で水平方向垂直方向垂直方向と水平方向の組み合わせのスクロールグループを使用する方法について説明します。

スクロールグループを使用して作成されたカルーセルエフェクト
スクロールグループを使用して作成されたカルーセルエフェクト

Adobe XD を初めてお使いですか?

無償体験版を入手

Adobe XD を既にお持ちですか?

アプリケーションを更新

新機能をチェック

この機能を試す

XD サンプルファイルを入手

.xd; 81 MB

準備

ここでの説明は、XD のデザイン、プロトタイプ、共有モードの使用方法を理解しているものと想定します。

制限事項

スクロールグループの作成を開始する前に、次の制限事項を確認してください。

  • macOS のプレビューでは、トラックパッド、マウス、クリック&ドラッグを使用して水平と垂直の両方のスクロール効果を確認します。
  • macOS の Web では、トラックパッドとマウスを使用して水平と垂直の両方のスクロール効果を確認します。
  • Windows のプレビューと Web では、トラックパッドを使用して水平スクロール効果を確認します。垂直スクロールの確認には、トラックパッドとマウスを使用します。クリック&ドラッグ機能は、今後のアップデートで導入される予定です。
  • スクロールグループは、デザインスペックでは機能しません。回避策として、別のアートボードにスクロールグループを追加し、デザインスペックの一部として公開することができます。

水平スクロール効果を作成する

水平方向スクロールを使用してカルーセルをプロトタイプする方法について説明します。このアニメーションを見て、次の手順に従い、水平スクロール効果の作成方法を確認してください。

水平にスクロール
  1. デザイン モードで、スクロール可能なグループにするオブジェクトを選択します。
  2. プロパティインスペクター アイコンをクリックします。ビューポートの寸法が自動的に調整され、すばやく簡単にプレビューできます。
  3. 水平スクロール効果全体をプレビューするには、 をクリックします。

垂直方向スクロール効果を作成する

垂直方向スクロールを使用してカルーセルをプロトタイプする方法について説明します。このアニメーションを見て、次の手順に従い、垂直方向スクロール効果の作成方法を確認してください。

垂直方向スクロール
  1. デザイン モードで、スクロール可能なグループにするオブジェクトを選択します。
  2. プロパティインスペクター アイコンをクリックし、上下にスクロールします。ビューポートの寸法が自動的に調整され、すばやく簡単にプレビューできます。
  3. 垂直スクロール効果全体をプレビューするには、 をクリックします。

水平方向および垂直方向スクロール効果を作成する

水平方向スクロールと垂直方向効果を組み合わせて使用すると、インタラクティブマップなど、すべての方向にスクロールできるオブジェクトを作成する場合に便利です。このアニメーションを見て、次の手順に従ってください。

水平方向と垂直方向
  1. デザイン モードで、スクロール可能なグループにするオブジェクトを選択します。
  2. プロパティインスペクター アイコンをクリックします。ビューポートの寸法が自動的に調整され、すばやく簡単にプレビューできます。
  3. 水平および垂直スクロール効果全体をプレビューするには、 をクリックします。

詳細情報

「スクロールグループで、本物に近い見た目で動作するプロトタイプを作成することで、自分の意図を関係者に伝えることができます」- Dani Beaumont、プリンシパルプロダクトマネージャ、XD

XD の水平方向および垂直方向スクロールグループについて詳しくは、このビデオをご覧ください。

視聴時間:5 分


ヒントとテクニック

XD で水平スクロール効果と垂直スクロール効果を作成する方法について説明したので、次の役に立つヒントを参照してください。

次のステップ

水平および垂直スクロール効果の作成方法について説明しました。さらに一歩踏み込んで、インタラクティブプロトタイプを作成する方法や、フィードバックを得るためにデザイナーや関係者と共有する方法についてご確認ください。

ご質問または共有するアイデアがある場合

question or idea

ご質問または共有するアイデアがある場合は、Adobe XD コミュニティフォーラムにぜひご参加ください。皆様からのご意見や作品をお待ちしております。