こんにちは！森和恵です。暑さですっかりクーラー生活です。
さて今回は、Adobe XDの6月アップデートのお話です。今月もいくつかの機能が追加されましたが、なんといっても『アートボードのオーバーレイ』ですね。
また、XDにおいてアドビさんが“User Voice”を使って、ユーザーを巻き込んだソフト開発を進めているということについてもふれます。
まずは告知から。ご紹介していたイベントですが、とうとう満員御礼となりました。
7月7日の開催日まで、まもなくとなりました。現在は、キャンセル待ち＆ビデオ参加の受付をしています。
【CSS Nite in Osaka, vol.45「All About XD」 w/YATのblog】
http://cssnite.jp/osaka/vol45/
登壇も近くなって、準備も佳境に入ってきました。わたしは、当日ふたつのデモンストレーションをするので、繰り返し練習しなければ……と思っています。
XDのBootstrapのテンプレート配布をしたり、春に販売した小冊子を抽選でプレゼントしたりもあるので、お楽しみに！ です。
●XD6月のアップデートの目玉は、オーバーレイ機能
XDは、毎月なにかしらのアップデートが行われます。6月のアップデートは、6月19日に行われました。詳細は下記で確認できます。
【最新機能 | Adobe XD CC】
https://www.adobe.com/jp/products/xd/features.html
【Adobe XD 6月アップデートリリース！ 固定オブジェクト、アートボードのオーバーレイ、四則演算など #AdobeXD ? Adobe Creative Station】
https://blogs.adobe.com/creativestation/web-june-2018-update-adobe-xd
発表があった当日は自宅で仕事をしていたので、合間を見て早速使ってみました。ライブ配信の予定を急遽変更し、アップデートの内容をお届けしました。
ライブ配信では新機能が出た翌日だったので、深く使い込んでいませんでした。機能の特徴や使う時の注意点などが、わからないままにぶっつけ本番でした。大きなバージョンアップだったので、早くお伝えせねば！ という思いだったのです。
今回の目玉は、『アートボードのオーバーレイ』と『固定オブジェクト』です。
固定オブジェクトは、前回「次にこんな機能が来るよ」とお話しした『Fixed elements in scrolling artboards』です。
オブジェクトに『固定位置』を設定すると、画面がスクロールしても、その位置で止まってくれます。スマホ画面でよくある、画面の上下で止まっているヘッダーやフッターを表現できます。
『アートボードのオーバーレイ』は単純な機能ですが、実データに組み込んでどう使うのか？ を理解するのがむずかしく、ライブ配信の放送後に実際に動くデータを作ってみて、試行錯誤しながら勉強しました。
●オーバーレイで、モーダルができた！
『アートボードのオーバーレイ』とは、『アートボードを重ねる』機能です。
プロトタイプビューで、接続ハンドルを使って画面をつなぐ時に『オーバーレイ』を選びます。トランジション（重ねる動きの効果）は、ディゾルブ（クロスフェード）とスライドが指定できます。
モーダル系の画面を表現することができ、スマホによくある、メニューが上や横から重ねて表示する画面や、ポップアップ画面の動きが作れます。
モーダルは「モードを待つ」という意味で、ユーザーの応答を待っている状態を指します。つまり、オーバーレイで画面を重ねている間は、下にある元の画面を動かすことはできません。
また、XDの『アートボードのオーバーレイ』では、一つしか上に重ねることができません。二つめを重ねようとすると、一つを外してから重ねる動きとなります。
『アートボードのオーバーレイ』を使って、勉強のためにデータ作りました。オーバーレイを使っていろんな動きを画面につけています。動画付き、プロトタイプ公開をツイートしていますので、合わせてご覧ください。
【オーバーレイを使ったXDデータの紹介（動画付）】
https://twitter.com/r360studio/status/1009987674361348096
【上記のXDデータのプロトタイプ公開（パスワード含む）】
https://twitter.com/r360studio/status/1010070552147443713
この動画では、4枚の写真をスライドショーする様子も映されていますが、スライドショーの動きは、オーバーレイでは作ることができませんでした。
スライドショーで切り替わる写真の部分だけを、オーバーレイしながら動かそうと試みたのですが、オーバーレイされる場所は固定されるので、下のアートボードをスクロールした後にオーバーレイするとずれてしまいます。
また、オーバーレイ中は下のアートボードがスクロールできずに、固まってしまうことも問題でした。このアプローチで一度作って、失敗した様子もツイートしています。
【オーバーレイでスライドショー失敗（動画付）】
https://twitter.com/r360studio/status/1009630440309706752
結局、オーバーレイは使わずにスライドショー毎に全画面を作り、単純な画面遷移するしかないことがわかりました。
横に画面をスライドできる機能がつけば、もっと楽にできるかもしれませんね。スライドショーや横にスクロールするナビゲーションの表現はよく使うので、機能追加してくれないかなと思っています。
●ユーザーの声から生まれた新機能
わたしがXDのことを好きになった理由のひとつに、“User Voice”と呼ばれる、ユーザーの声を拾ってソフト開発につなげる仕組みがあります。
今回追加された『アートボードのオーバーレイ（Artbord Overlays）』は、ここで2241人ものリクエストがあった機能でした。そのリクエストは、XDがまだβ版だった頃の、2016年5月14日に発言されています。
https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/12924909-artboard-overlays-sidebar-menu-popup-in-inte
日頃ネット上で「金額が高い」／「ソフトが落ちた」／「○○が動かない」などなど、不満の声の方が目立つAdobeソフトの中で、ユーザーに寄り添って一緒に開発を進めていくこのXDでの取り組みは、なんて素敵なんでしょう。
PhotoshopやIllustratorといった成熟してしまったソフトでは、同じことをやろうとしても、これまでのしがらみあったりしてむずかしいのだと思います。不満があっても、なかなか改善されない……という歯がゆい思いを、熱心に利用するユーザーであるほど感じていることだと思います。
しかし、このXDでの取り組みを見ていて「やっぱり、Adobe好きだなぁ。わくわくをくれるなぁ。」とあらためて再認識させてくれました。
次に来てくれたらうれしい、すでに開発の始まっているXDの新機能に『アートボードのレスポンシブ（Responsive artboards）』があります。現在の投票数は、1929件です。
https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/12942171-responsive-artboards-adaptive-layout-constraints
XD開発チームメンバーのアンドリューさんのツイートに、この機能がSneaks
（開発途中の機能）として動いている様子も登場してきました。
https://twitter.com/ashorten/status/1009478734783500288
新機能の追加がまもなくだなぁという感じが伝わってきますね。
リアルタイムで好きなソフトが開発されていく様子がわかるのは、ワクワクします。
……というわけで、今回はここまで。次回は、7月7日のAdobe XDイベントのレポートをお届けします。（今回予定していた“XDで作図”のラストは、その次に）
今週の金曜日（6月29日夜10時半）から、Youtubeライブ配信をする予定です。
「Bootstrapありきで考える、XDページレイアウト（2）」
チャンネル登録、お待ちしております。
https://www.youtube.com/r360studio
ではまた、次回お目にかかりましょう！
(^^)
【 森和恵 r360studio ウェブ系インストラクター 】
r360studio@gmail.com
http://r360studio.com/