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