AdobeCCシリーズが軒並みアップデート報告がありましたが、Adobe XDの記念すべき30回目のアップデートのひとつ、スクロール機能の追加の紹介です。要望が多かった機能らしいです。
XDの段階でインライン化の表現ができるのなら、デザインの幅も広がるかも知れません。
横スクロールを試してみる
まずは横スクロールを作ってみます。
![](https://fragmentinc.co.jp/wp/wp-content/uploads/2020/06/image01@2x-10.jpg)
このようにアートボードをはみ出すくらいのメニューボタン横に並べみます。これをサイトの横幅にはめこんでみようと思います。
![](https://fragmentinc.co.jp/wp/wp-content/uploads/2020/06/image02@2x-9.jpg)
↑このようにスクロールさせたい部分のみ選択します。
![](https://fragmentinc.co.jp/wp/wp-content/uploads/2020/06/image03@2x-8.jpg)
選択した状態で、右のプロパティのこの横スクロールボタンをポチっとします。
![](https://fragmentinc.co.jp/wp/wp-content/uploads/2020/06/image04@2x-6.jpg)
左右についたボタンを掴んで幅を縮められます。
![](https://fragmentinc.co.jp/wp/wp-content/uploads/2020/06/image05@2x-4.jpg)
レイアウト幅に収まりました。
![](https://fragmentinc.co.jp/wp/wp-content/uploads/2020/06/image06.gif)
プレビューで動かすとこんな感じです。成功しました。
同じように縦スクロールも作ってみます。
![](https://fragmentinc.co.jp/wp/wp-content/uploads/2020/06/image07@2x-2.jpg)
縦の巣クリオールも試してみます。
![](https://fragmentinc.co.jp/wp/wp-content/uploads/2020/06/image08@2x-3.jpg)
縦スクロールの場合はこちらをクリックです。
![](https://fragmentinc.co.jp/wp/wp-content/uploads/2020/06/image09@2x-2.jpg)
縦幅を縮めます。リピートグリッドになっている部分も気にせずスクロールになりましたので、気軽にスクロール作っていけそうです。
![](https://fragmentinc.co.jp/wp/wp-content/uploads/2020/06/image10.gif)
縦スクロールも簡単に設定できました。
セミナーのユーザーの発言ではページ内リンクとこのスクロールを組み合わせて色々表現しようとして失敗したというコメントもありましたが、確かに何かと組み合わせて面白い表現ができそうではあります。