AdobeXDのプロトタイプってどんなの？
プレビューの設定はどうやってやるの？
プログラムがわからなくてもできる？
という方むけの記事です。
私はweb制作を仕事にしています。（デザインとフロントエンドを10年くらいです。）
今まではwebデザインのデータをphotoshopで制作していたのですが、XDに移行しようと勉強しています。
勉強して知ったのですが、AdobeXDの特徴的な機能にプロトタイプがあります。
ボタンなどの動きを実際に確認できる機能です。
詳しく紹介したいと思います。
AdobeXDってどんなソフト?というお話については以下記事よりどうぞ。
AdobeXDのプロトタイプとは
AdobeXDのプロトタイプ機能は、Webやアプリで実際にボタンを押した際など操作したときの動きを設定、確認できる機能です。
直感的に設定し、プログラムを記述することはないので、ノンプログラマーにも簡単に設定できると思います。
AdobeXDのプロトタイプ設定 [ボタンリンク/簡単な流れ]
1.XDで新規ファイルを作成。
各ページにボタンやテキストなど表示したいデータを配置、作成する。（ボタンの部分をグループまたはシンボル登録する。）
2.デザインからプロトタイプに切り替える。
3.ホームボタンをクリックし、1番最初に表示するページを選ぶ。
4.ボタンがクリック時に移動するページを設定する。（線を引っ張るように！）
5.トリガーやアクション、アニメーション、イージングの設定、継続時間の設定を行う。
（トリガーはタップやスライドなど操作時の設定）
7.各ページ設定後、プレビューを押すと確認できます。
8.完成！
プロトタイプの共有について
プロトタイプは共有ができます。
複数メンバーで確認し、（XDをもっていなくても確認できる）ピンをうってコメントを書くことも可能です。
プロトタイプ共有方法
1.XD編集画面の共有ボタンをクリックする。
2.タイトルやコメント許可の可否、必要に応じてパスワードを設定、公開リンクを作成をクリック。
3.メール添付などを使用する際は、共有リンクを連絡し、
自分で確認する際は、右端の「ブラウザで表示」ボタンをクリックする。
4.ピンを打ってコメントを書いたり、返信ができる。
AdobeXDのプロトタイプの注意点
XDのプロトタイプ設定はノンプログラマーでも簡単に使うことができます。
しかし、自動設定のアニメーションなので、本実装に比べて細かいアニメーション指定や自由度に制限があるなと感じました。
また、プロトタイプを作っても、コードは書き出されないので、別にプログラミングする必要はあります。
（iframeで埋め込めるものの、実装ではない）
まとめ
仕事にどの程度役立つかは私の場合、まだ未知数なのですが（デザインもフロントエンドも1人でやっている点もふくめ）、設定するのはただただ楽しいです。
実際の動きをつける前に、画面推移でどのような印象が得られるのか確認するのもいいですね。
工夫してアニメーション展開も鍛えてみたいとおもいます。
