XDのスクロールグループ機能で各方向のスクロールを確認する方法!

XDのスクロールグループ機能で各方向のスクロールを確認する方法!

takato(@n8takato)です!

XDで各方向のスクロールを確認する方法を知りたい

この記事は上記の課題に向けて作成しています。

XDにはスクロールグループという機能があります。

スクロールグループの機能を使うことで作成したデザインをスクロールした際どのように見えるか確認することが出来ます。

各デバイスでスクロールの動きを確認したい場合にこの機能を使います。

スクロールグループ機能を使ってスクロールを確認する方法を説明します。

この記事を読むメリット

  • XDで各方向のスクロールを確認する方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー歴2年目のひよっこ
  • web制作現場で学んだことを発信している人

XDに関する他の記事はこちら

あわせて読みたい
【2022年版】AdobeXDでマスクをかける方法を説明します! XDでマスクをかける方法を知りたい。 この記事は上記の課題に向けて作成しています。 XDはIllustrator同様にマスクをかけることが出来ます。 マスクをかける方法につい...
あわせて読みたい
【2022年版】AdobeXDで共有する方法を紹介します! XDで共有する方法を知りたい この記事は上記の課題に向けて作成しております。 XDには共有機能があります。 共有機能を使うことで他の人にデザインを共有することが出来...
目次

XDでスクロールを確認する方法

早速スクロールを確認する方法を説明します。

XDで確認出来るスクロールは3つあります。

XDで確認出来るスクロール3つ

  • 縦方向のスクロール
  • 横方向のスクロール
  • 全方向のスクロール

縦方向のスクロール

1つ目は縦方向のスクロールです。

下記の動画のように縦方向のスクロールを確認出来ます。

縦方向のスクロール

縦方向のスクロールは下記の手順で行います。

縦方向のスクロールの手順

  1. 確認したいデザインの用意
  2. 「垂直方向のスクロール」を選択
  3. サイズの修正
  4. 「デスクトッププレビュー」の選択

①確認したいデザインの用意

始めに確認したいデザインを用意します。

デザインはグループ化しておいてください。

使用するデザインを用意します。
デザインの用意

②「垂直方向のスクロール」を選択

続いてスクロールグループを作成します。

確認したいデザインを選択した状態で「垂直方向のスクロール」をクリックします。

「垂直方向のスクロール」はXDの右側中央にあります。

「垂直方向のスクロール」を選択します。
「垂直方向のスクロール」を選択

③サイズの修正

垂直方向のスクロールを選択するとサイズ調整する青色の枠が表示されます。

縦方向のサイズを調整してください。

青枠でサイズを修正します。
サイズの修正

準備は以上で完了です。

④「デスクトッププレビュー」の選択

最後にスクロールを確認します。

XDの画面右上にある「デスクトッププレビュー」を選択するとプレビューが表示されます。

こちらでスクロールの確認を行うことが出来ます。

「デスクトッププレビュー」を選択します。
デスクトッププレビューを選択

横方向のスクロール

横方向のスクロールを確認することも出来ます。

横方向の場合は垂直方向のスクロールの左側にある「スクロールグループ」を選択します。

「スクロールグループ」を選択します。
「スクロールグループ」を選択

先ほどと同様に幅を調節します。

デスクトッププレビューを選択しすると横方面のスクロールを確認することが出来ます。

全方向のスクロール

XDは全方向のスクロールを確認することも出来ます。

全方向のスクロールは地図などに用いられます。

「水平方向と垂直方向のスクロール」を選択することで設定出来ます。

「水平方向と垂直方向のスクロール」を選択します。
「水平方向と垂直方向のスクロール」を選択

スクロール機能を使うメリット

XDのスクロール機能を使うメリットは下記の通りです。

  • 簡単にスクロールチェックが出来る

簡単にスクロールチェックが出来る

XDのスクロール機能を使うことで簡単に確認出来るようになります。

本来スクロールの動きを確認するには、実際にコーディングをして作成する必要があります。しかしXDのスクロール機能を使うことでコーディングしなくてもスクロールの確認が出来るのです。

デザイン制作の段階で動きの確認が出来るのは良いですよね。

XDは簡単にスクロールチェック出来る

最後にまとめです。

  • XDでは水平方向・垂直方向のスクロールを確認することが出来る
  • XDのスクロール機能を使うことでデザイン制作の段階で確認することが出来る

XDでは簡単にスクロールチェックをすることが出来ます。

まだ使ったことの無い方は是非活用してください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次