こんにちは。デザイナーのMHです。
Adobe XDで絶対に覚えておきたいの便利機能を数回に渡ってご紹介してきましたが、もうチェックしていただけましたでしょうか。
前回からXDの特権であるワイヤーフレームでありながら動きをつけることができる機能の紹介をスタートしました。
今回も同じく動きをつけることを目的とした、「スクロールグループ」の使い方についてご紹介します。
早速見ていきましょう。
＞＞絶対に覚えておきたいAdobe XDの記事を初めから読む
Adobe XDではリピードグリッドを活用しよう【絶対に覚えておきたいXD】
ワイヤーフレーム、動きます。Adobe XDでオブジェクトの位置を固定する【絶対に覚えておきたいAdobe XD】
１、Adobe XDのスクロールグループって？よく見るアレが再現できる
まずスクロールグループの概要についてざっくりと記載します。
スクロールグループは、メインとなるアートボードとは別にスクロールする領域を定義することができる機能です。
本来は縦長のアートボード（サイトページ）を垂直にスクロールする、というのが基本です。
その中で、
「このページのこの部分だけ、こういう方向にスクロールできるようにしたい」
というのを、スクロールグループ機能は叶えることができます。
２、Adobe XDでスクロールグループを設定する方法
スクロールグループには３つの設定パターンがあります。
これらを使い分けることで、様々なプロトタイプが実装できます。
- 水平方向にスクロール
- 垂直方向にスクロール
- 水平方向と垂直方向にスクロール
ひとまずは「水平方向にスクロール」を実装してみましょう。
今まで編集していたワイヤーフレームのヘッダー部分をスライドショー風にスクロールできるようにします。
①スクロールの対象になる画像を連続した横並びに配置し、全て選択します。
②編集画面右側のスクロールグループボタンを選択します。
今回は「水平方向にスクロール」です。
③全ての画像が青枠にきゅっと収まります。
右上のプレビューボタンで、スクロールが実装されたか確認しましょう。
３、Adobe XDのスクロールグループでできること
スクロールグループには３つの利用パターンがあることを先述しました。
それぞれ使い分けることで、サイトでよくみるあの機能を再現できます。
例えば
- 「水平方向にスクロール」でスライドショーなど
- 「垂直方向にスクロール」でフォームの利用規約など
- 「水平方向と垂直方向にスクロール」でマッププレビューなど
１つずつ実装例を見てみましょう。
１、「水平方向にスクロール」でスライドショーなど
先ほど説明したものですね。この他メニューバーなどにも使える、
汎用性の高い機能です。
２、「垂直方向にスクロール」でフォームの利用規約など
よく会員登録フォームにある利用規約が長々と書かれたボックスなどを作ることができます。
まずスクロールさせたい範囲を示す四角オブジェクトを配置し、その上にテキストを置きます。
この時スクロールグループ機能を掛けるのはテキストになります。
テキストを選択しながらスクロールグループボタンを押すと、テキストが青い枠で囲まれます。
この青枠の上下を、最初に配置した四角オブジェクトの天地に合わせて引っ張れば完成です。
３、「水平方向と垂直方向にスクロール」でマッププレビューなど
サイトに埋め込まれたgoogle mapなどを、限られた枠内で縦横自由な方向に動かして見てみたことはありませんか？
「水平方向と垂直方向にスクロール」はこれを再現できます。
要領は先ほどのテキストの時と一緒です。
範囲を示すオブジェクト、マップ画像の順に置き、マップ画像に
スクロールグループを掛けます。
青枠の上下をオブジェクトの天地に合わせて引っ張り完成です。
どの方向にスクロールしても画像がボックスの中で動いているように見えます。
４、Adobe XDのスクロールグループでデキるサイト感UPしよう
いかがでしたでしょうか。
スクロールグループを覚えてしまえば、昨今のwebサイトではお馴染みの
あんな機能やこんな機能が簡単に再現できてしまいます。
これでワンランク上のワイヤーフレームを作ってみませんか？
ぜひチャレンジしてみてくださいね。
Adobe XDについての詳細は、公式ページからご確認ください。
それでは今回はここまでになります。
また次回もよろしくお付き合いくださいませ。