Adobe XDの便利なプロトタイピング機能「スクロールグループ」で表現力をアップ！
Adobe XDのスクロールグループを使用すれば、アートボード内に、独立したスクロール可能な領域を作成することが可能です。これにより、パネル、マップ、イメージギャラリーといったインタフェース操作の実現に最適な、より高度なインタラクションのデザインを実現できます。
スクロールグループとは？
スクロールグループが登場する以前のスクロールといえば、アートボードの垂直スクロールだけで、ビューポートの範囲を超えて配置されたコンテンツまでスクロールしたり、アートボード上の要素の位置固定を表現するために使われていました。水平方向のスクロールを実現するには、2つのアートボードを用意してドラッグ操作を行う必要がありました。
スクロールグループを使用すると、デザインに、より自由にスクロールを表現することが可能になり、ユーザーは画面上に配置された領域内のコンテンツを、上下左右にスクロールしたり、パンしたりできます。
スクロール操作を可能にするには、プロパティインスペクタ内にあるスクロール用のオプションのいずれかを選択します。この属性は、任意の要素に対して指定できます。
3つのスクロールオプション。左から順に、水平方向、垂直方向、水平方向および垂直方向
利用できるオプションは3種類で、左から順に、水平、垂直、水平&垂直のアイコンが並んでいます。 水平スクロールと垂直スクロールはそれぞれ一方向にスクロールの軸が固定されますが、水平&垂直スクロールでは、両方の軸方向に自由にスクロール（または「パン」）することができます。
スクロールグループの作成
下のノート管理アプリケーションのサンプルでは、中央および右側のパネルからコンテンツが下にあふれており、スクロールグループが役立ちそうです。具体的に対象となる領域は、ノートのリスト、ノートの詳細、水平に並ぶ画像です。これらのエリアにスクロールグループを作成する方法を見てみましょう。
垂直方向のスクロール
まずノートのリストから始めます。リスト内のすべてのノートを選択し、まだグループ化されていなければグループ化します。ノートのグループを選択した状態で、プロパティインスペクタの [垂直方向のスクロール] オプションをクリックすると、スクロールグループが作成され、2つの青いハンドル（1つは上部、もう1つは下部）を持つ新しい枠線がコンテンツの周囲に表示されます。
ハンドルがグループの上下の境界線に配置されていることに注目してください。この境界線は、スクロールグループの表示領域を表します。調整するには、上部または下部のハンドルを掴み、あるべき位置に合わせます。今回のシナリオでは、上側の境界線をリストのヘッダーとの境に、下側の境界線をページの下部に設定します。
プロトタイプをプレビューすると、コンテンツが定義されたビューポート内でリストが滑らかにスクロールすることを確認できます。ノートの詳細セクションにも同様の作業を適用すると、ユーザーがノートのコンテンツをスクロールして確認できるようになります。
水平方向のスクロール
水平方向にスクロールする画像ギャラリーも、同様の手順で容易に作成できます。ノートの詳細パネルの中には、ページから右にはみしている画像のグループがあります。ドラッグジェスチャーと自動アニメーションを使用してスクロールするプロトタイプを作成することもできますが、この場合は、マウスによる水平スクロールが望ましい操作です。
画像のグループを選択した状態で、プロパティインスペクタの [水平方向スクロール] オプションをクリックすると、グループにスクロールグループのビューポート領域が追加されます。今回はスクロールを水平方向に設定したので、ハンドルがグループの左右に配置されます。ハンドルを左右にドラッグして表示領域を設定します。
この画像ギャラリーでは、右側のハンドルをページの右端に設定し、左側のハンドルをノートの詳細セクションの左端に設定します。そうするとコンテンツの左マージンには揃わなくなりますが、代わりにパネルの端まで画像をスクロールできます。
水平方向と垂直方向のスクロール
デジタル体験のリッチでリアルなプロトタイプを作成するのに、垂直または水平スクロールだけでは不十分な場合があります。ライドシェアアプリ、フードデリバリーサービス、自動運転のような分野では、画面に地図が組み込まれる例がよく見られます。
従来、地図を使用したインタラクションのデザインは困難で、多くの場合に、静的な地図の画像がプレースホルダとして埋め込まれて終わりになります。水平方向と垂直方向のスクロールグループがあれば、これはもう過去の話です。
今回の例では、ノートの詳細パネル内に新しい長方形を描き、デスクトップから画像イメージをドラッグします。その際、スタックが有効になっているため、新しい要素の挿入すると、それに合わせて他の要素の配置が自動的に変更されます。
追加した地図の要素を選択した状態で、プロパティインスペクタの [水平方向と垂直方向のスクロール] オプションをクリックします。これで、要素の4つの辺それぞれにハンドルが表示されます。ハンドルをドラッグして、必要な表示領域の大きさを確保します。
使用している地図は画像であるため、画像を編集して拡大すれば、それだけでスクロール可能な領域を大きくすることができます。
画像をマスクの中央に配置すると、プロトタイプを操作する際のスクロール領域を均等にできます。画面右上のアイコンからプレビューウインドウを表示し、新しく作成したマップ要素をパンしてみてください。
地図は縦横スクロールが有用であることを示す一例にすぎません。パン操作が可能なカンバス（Adobe XDのような）、複雑な構造のスクロール可能なテーブル、そしてチャートの作成も可能です。これらすべてが1つのアートボード内に表現できます。
Notes.XD UIキットをダウンロードして、早速スクロールグループを試しましょう！