UI/UXデザインツール『Adobe XD』入門

3-17. 任意の場所をスクロールさせる機能「スクロールグループ」の使い方

Adobe XDでは、スクロールグループという任意のエリアをスクロールさせることができる機能があります。このレッスンではスクロールグループの使い方について説明します。

  • UIデザイン
  • UXデザイン
  • プロトタイピング
  • Webデザイン

公開日:2020/08/21最終更新日:2020/08/21

1.スクロールグループとは

スクロールグループとは、通常の画面全体に対してのスクロールとは別に縦方向・横方向・縦横両方向にスクロールするエリアを作ることができる機能です。

2.横方向のスクロールグループ

横方向のスクロールは、横スクロールさせたいオブジェクトを選択した状態でプロパティインスペクター内にある「水平方向のスクロール」ボタン(画像の赤い矢印)を押すことで横スクロールができるようになります。

プレビューで動かすとこのような感じです。
※XDの画面右上にある「▶」のプレビューボタンを押すと表示されます

スクロールの見える範囲を調整する際はスクロールグループを選択した際に表示される青いハンドルで調整します。

3.縦方向のスクロールグループ

縦方向のスクロールをさせたい場合は、縦スクロールさせたいオブジェクトを選択した状態でプロパティインスペクター内にある「垂直方向のスクロール」ボタン(画像の赤い矢印)を押すことで縦スクロールができるようになります。

プレビューで動かすとこのような感じです。
※XDの画面右上にある「▶」のプレビューボタンを押すと表示されます

スクロールで見える範囲の調整は、「2.横方向のスクロールグループ」と同様、選択時に表示される青いハンドルを操作することで調整することができます。

4.縦横両方向のスクロールグループ

縦と横の両方でスクロールを生じさせたい場合は、スクロールさせたいオブジェクトを選択した状態でプロパティインスペクター内にある「水平方向と垂直方向のスクロール」ボタン(画像の赤い矢印)を押すことで縦横両軸のスクロールができるようになります。

プレビューで動かすとこのような感じです。
※XDの画面右上にある「▶」のプレビューボタンを押すと表示されます

使用写真:写真AC様

5.まとめ

今回は特定の領域内で縦・横・縦横両軸方向のスクロールを行うための方法を学びました。写真のカルーセル・スライダーなど使い所は様々ですので、試しにデザインに取り入れてみてはいかがでしょうか。

理解度チェック

UI/UXデザインツール『Adobe XD』入門

1. Adobe XDの概要とインストール

2. Adobe XDの基本操作

3. Adobe XDで画面をデザインする

4. より効率よくデザインするための機能

5. Adobe XDでプロトタイプを作成する

6. Adobe XDでデザイン・プロトタイプを共有する

このレッスンの著者