みなさん使ってますか、XD

つかざき

こんにちは塚崎です。

Adobe XDが2016年ぐらいに登場してからWEB界隈に浸透するまでそう時間がかかりませんでしたね。
自分もワイヤーフレームや、デザインを作るときに使っているツールの1つです。

今回はそんなXDでプロトタイプを作るときに、自分が想像していた通りの動きをしなかったので誤っていた点と修正した点などを備忘録がてらまとめてみました。

XDとはなんぞや

そもそもXDナニソレ。という説明はオフィシャルサイトにどうぞ。

Adobe XD体験版ダウンロード | UI/UXデザインと共同作業ツール

https://www.adobe.com/jp/products/xd.html

Download Adobe XD CC free with the starter plan. XD is your UI/UX design solution for designing websites & mobile apps. Design, prototype, and share for free.

以下オフィシャルサイトからの引用

XDはデザインとプロトタイプ作成の両方が可能です。驚くほど軽く、効率的にデザイン作業をするためのワクワクする機能が詰まっています。

プロトタイプとはなんぞや

この記事を見にきている人はおそらくある程度XDを使用されている人だと思っていますが、プロトタイプについて一応触れます。

ホームページのプロトタイプを例にあげますと、「スマートフォンメニューの挙動（展開動作など）」「スライドの動き」など、クリックやタップをしたら実際にどういう動きをするのか？　これらのようにイメージだけでは伝えにくい部分を、デザイン段階で再現してPCやスマホの画面に出力しイメージを伝えるもの…といった感じでしょうか。

ワイヤーフレーム段階やモックアップ段階でも同じで「ここはこんな感じで動きます！」と伝えるために、プロトタイプを作成してます。

あとはこちらを見てください（丸投げ

ワイヤーフレームとプロトタイプ。これだけは知っておきたいそれぞれの特徴 | アド...

https://blogs.adobe.com/japan/web-everything-you-need-to-know-about-wireframes-and-prototypes/

ワイヤーフレームとプロトタイプは、どちらもUXデザインのデザイン資料としてよく用いられます。デジタルデザインの...

今回つまづいた「カルーセル」表現

いきなりですが成功例と失敗例のイメージを添付します。

失敗例

なぜかフェード処理になります。
検索などでこの記事を見にきた方、この現象になっている人多いんじゃないでしょうか？

成功例

まさしくカルーセル！これがやりたかった。

カルーセル表現にならない原因とその解決方法

今回は自分が作業しててこの現象が発生しましたので自分なりに解決した方法です。

答えを言いますと、アートボード内にあるオブジェクトのオブジェクト名またはグループ名の違いが原因でした。

カルーセルを表現しようと思ったときの大まかの流れとしては

①カルーセル部分のデザインを作成する
↓
②デザインを作ったアートボードを複製する（枚数に応じて）
↓
③複製したアートボードのカルーセル部分をサイズ変更などでデザイン調整する（枚数に応じて）
↓
④プロトタイプを作成する

と行った流れが想定されます。

この②と③の段階でカルーセル部分のオブジェクト名やグループ名を変更してしまうと、オブジェクト同士の関連性（このオブジェクトは他アートボードと同じオブジェクトということ）を認識しなくなり、フェード動作になってしいます。

せっかくなので、カルーセルが成功したときのアートボードの状態をまとめてみました。

オブジェクトの位置はそれぞれバラバラですが、グループ名やオブジェクト名が同一のものというのが見てわかります。

もし、同様の現象でXDのプロトタイプでカルーセルが動かない場合は、とりあえずアートボードごとにグループ名・オブジェクト名を統一するところから始めてみましょう。

あと、グループ化もアートボードごとに同じグループ化をしていないと挙動が変になりますのでご注意を。

何かと使用することの多い、プロトタイプ。XDに追加された機能でつまづかず少しでも快適に使えたらなと思います。

今回は以上です。ありがとうございました。