オンラインイベント「XD Trail 部屋キャンプ」の第5回は、Adobe XDのプロトタイプ機能を使ったインタラクションの表現入門です！
Adobe XD に興味があって、実際に簡単なデザイン作業をする機会が欲しい人を対象に、プロトタイプモードの基本から様々な表現手段の説明まで全4パートにまとめたワークショップです。
ワークショップの内容
まずXDの基本的なプロトタイプ作成の手順を確認し、次によく使われるインタラクションの具体的な例の作成方法を紹介します。最後に、表現力を高めるために使える機能を紹介します。
（詳細は、動画再生エリアの右側に表示されるタイムラインを参照してください）
【 1. プロトタイプ作成の基本】
XDのプロトタイプモードの基本的な使い方を学びます。
【 2. ページ内インタラクションの作成】
オーバーレイ表示やアンカーリンクをデザインする手順を紹介します。
【 3. ちょっと高度なプロトタイプ】
ドラッグ操作ができて表示が自動的に切り替わるUIのつくり方を紹介します。
【 4. 表現力の豊かなアニメーション】
3D変形やパスのアニメーションなどの作成手順を紹介します。
当日のQ&A
★XDでページ内リンク（アンカー）は再現できますか？
プロトタイプモードで、遷移のアクション「スクロール先」を設定します。 この設定をする際は、トリガーとなるオブジェクトから接続ハンドルをドラッグし、スクロールしたい位置にあるオブジェクトの上でドロップします。
★うっかり選択していた画面がプレビューウインドウに表示されたとき、ホーム画面に表示を戻したかったら、一度プレビューウインドウを閉じないとダメですか？
XDのプレビューは、ドキュメント内の選択されたアートボードが表示されるようになっていますので、プレビューウインドウを閉じなくてもワークスペース内のホームアートボードか、その上にあるオブジェクトを選択すれば、ホーム画面をプレビューできます。ホームアートボードは何も選択されていないときにプレビューウインドウに表示されるアートボードということです。
Macの場合は、プレビューウインドウが最前面に表示されるので、操作の邪魔にならないところに移動すると良いです。Windowsの場合は後ろに隠れてしまうので、Ctrl＋Enterで最前面に表示しましょう。
★メニューなどのオブジェクトをビューポートの下に固定することはできますか？
固定できます！固定したいオブジェクトを選択して、プロパティインスペクターで「スクロール時に位置を固定」にチェックを入れてください。デザインモードでは、変形のセクションの一番下に、プロトタイプモードではスクロールのセクションにこの項目があります。重ね順（レイヤー）のチェックは忘れずに。固定したオブジェクトが最上位のレイヤーになるようにすると確実です。
★URL共有に関してセキュリティ面はどのようになっているのでしょうか。 パスワード設定については存じ上げているのですが、それ以外に対策などされているのでしょうか。
XDの共有は、パブリックURL、パスワード付きのパブリックなURLとAdobe IDでログインすることで確認できるプライベート共有があります。招待者だけが閲覧できるプライベート共有が最も安全で、コメントの返信の通知を受け取れるという特典もあります。ただし共有する相手のメールアドレスが必要です。
全員が同じSlackのチャンネルにいる場合は、Slack for Adobe XDを使うとメールアドレスを入力しなくても一斉に招待できるので便利です
★要素ごとに違うアニメーションを設定することはできないのでしょうか？ 例えば今回の教材でいうと、フッターメニューはは左へスライドせず、ページ部分だけスライドするなど
可能です。自動アニメーションという機能を使います。この機能は2つのアートボードの差分だけをアニメーションしてくれる便利な機能です。初期位置と移動後の状態を持つ2つのアートボードを用意すればいいわけです。
★アートボード内の移動を自由にする方法がわかりません。右へ左へ
地図のようにぐりぐり動かせるような感じでしょうか？それでしたら、デザインモードで利用できる機能にスクロールグループがあります。
★オーバーレイしたアートボードの背景色は無視されるのですか？
オーバーレイを設定した瞬間に、オーバーレイ表示されるアートボードの背景色が無効になります。もしアートボードの背景を活かしたければ、デザインモードでアートボードの背景色を有効に戻しましょう。
★他アートボードへのページ内リンクは設定できるのでしょうか。
残念ながらほかのアートボードのオブジェクトをページ内リンクのターゲットに設定することはできません。また、画面遷移した後に目的のオブジェクトの位置まで自動スクロールするような機能もありません
★オーバーレイ表示したアートボードから別のアートボードに遷移することはできますか？
すこし癖がありますが、OKを押したら別のアートボード、キャンセルを押したらオーバーレイ表示を解除という設定ができます。オーバーレイで表示するアートボード上のオブジェクトに他のアートボードへのリンクを設定してください。
★アンカーリンクには前の位置に戻る機能がありますか？
ありませんが代替手段があります。アンカーリンクも「前のアートボードに戻る」で戻れればよいですよね！ どうやるかというと、アンカーリンクはページ内に何個でもおけますので、移動前の位置に置いてあるオブジェクトに対してアンカーリンクを作成します。トリガーになるオブジェクトは、新しく透明なシェイプを配置しもいいですし、既存のオブジェクトを利用しても大丈夫です。
★自動アニメーションで使用した画像は、なぜ長方形から正方形に変形しても、画像が崩れずきれいに拡大縮小できたのでしょうか？
ドキュメントに画像を配置する時の操作にポイントがあります。単に画像ファイルをカンバスに置いたときには、縦横比を変えると画像が崩れますが、あらかじめ配置されたシェイプにドラッグした画像はシェイプの背景となり、シェイプの縦横比を変えても影響を受けないのです。
★カルーセルのオブジェクトに直接アニメーションを指定できないのでしょうか？できるなら再利用しやすそうです。
カルーセルをコンポーネントにしておけば可能です。コンポーネントのステート間の差分を自動アニメーションで見せることになります。
★ギャラリーの自動アニメーションについて、レイヤー名を統一するのが重要ポイントだとおっしゃっていたのですが理由をお聞きしたいです。
XDの自動アニメーションは、2つのアートボードの同じオブジェクトの差を自動的に補完する機能です。2つのアートボードのオブジェクトが同じかどうかを判別する条件になっているのが、レイヤー名、レイヤー階層、オブジェクトの種類（長方形・楕円形・線・パス）が一致していることです。自動アニメーションを使用するときは、名前＆オブジェクトの種類をチェックする癖をつけておきましょう！
★XDでオンマウスしてボタンの見た目が変わる表現はできますか？
可能です。コンポーネントとそのステートだけが使える機能ですが、ホバートリガーを設定して、ステート間を自動アニメーションで動かすことができます。
★今後XDは紹介されていたもの以外で3D対応の予定はありますか？例えば3Dゲーム開発者（Unity開発者やUnrealEngine開発者）にプロトタイプとして3Dオブジェクトを提示する目的を想定しています。見当違いの質問であれば申し訳ありません。
現在明確に予定があるともないとも言われていませんが、XDではユーザーからの積極的なフィードバックが開発の方針に影響を与えます. どんな挙動を期待するかをぜひUserVoiceに。例えば、3Dオブジェクトをインポートしたいというvoiceも上がっています
★アニメーションの書き出しはできますか？
書き出し機能は残念ながらありません。開発用に共有すると、アニメーションの設定を数値で見ることはできます。アニメーションの長さなどはこちらを確認してもよいでしょう。デザイナーである私のケースですが実際に開発をお願いする場合には、プレビュー上の操作をデスクトッププレビューの録画機能で撮影したり、プレビューをブラウザで共有して伝えています。