AdobeXDの共有プロトタイプを使おう

AdobeXDって?

AdobeXDは、共同作業を促進するパワフルで使いやすいプラットフォーム。webサイトやモバイルアプリ、音声インターフェイス、ゲームなどのデザイン制作をチーム全体でスムーズにおこなうことができます。
Adobe XD体験版ダウンロード | UI/UXデザインと共同作業ツールより

• 昨今戦争の激化するプロトタイピングツールの1つ
• WEBサイトのコーディングを行う前のデザインの時点でページ内の動きや推移を確認することができるツール

プロトタイプ？

プロトタイプ(prototype)とは、「試作モデル」の意味です。ゲームなどのソフトウェア開発の場合、初期段階にプロトタイプを作成します。
操作性、バランス、機能などを確認し、ユーザーからの評価を正式リリース前に反映させる開発手法を「プロトタイピング」と言います。開発途中で確認、修正ができるため、結果、工程数が減り、問題点を早期に発見できるメリットがあります。
プロトタイプは、自動車や身近にある製品などさまざま分野で作られています。最近では、Webサイトやアプリなどでも作成されるケースが増えてきました。

• 参照

詳しい説明は他にもしている方がいると思うので、今回はAdobeXDの使い方の一例を紹介していきます。

プロトタイプを共有する

• 今回はサンプルとしてワイヤーフレームにWires-jpを使用。

プロトタイプを作成

• デザインを作成した後に画面左上のプロトタイプを選択します。
  

要素と別のページを繋ぐ

• 画像のように要素を選択し、他のページにドラック&ドロップで繋ぎます。
• これにより、指定した要素をクリックした時にページが推移するようになります。
  • 他にもアニメーションをつけたり色々できますが今回は省略します
    

共有を開く

• 画面左上の共有を選択します
• 先程プロトタイプで選択したものが表示され、画面右がリンクを共有というサイドバーに切り替わります。

• タイトルを設定して（未入力の場合はファイル名）、リンクを作成をクリックします。
  
• ページの作成が終われば、鎖のマークをクリックするとリンクがコピーでき、プロトタイプのページへ飛ぶことが出来るようになります。

複数のプロトタイプを作成する

起点の変更

• デザインに複数パターンがある場合は複数のプロトタイプを作成することもできます。

• 画面左上からプロトタイプを選択します。
  

  • ページのタイトル部分をクリック　
  • 左上に家のマークが出るので、これをクリックする　
  • クリックしたものがアクティブになる。

• これにより、プロトタイプの起点（初めに表示されるページ）が変わるようになります。

別のリンクを作成する

• 画面左上から共有を選択
• 右のサイドバーのリンクの隣にある▼をクリック

• 新規リンクを作成 をクリック

• 残りは同様にタイトルを決めてからリンクを作成をクリックすれば先程の作成したのとは別ペターンのプロトタイプを作成できる。

数が増えすぎた時は

• 画面左上から共有を選択します
• 右のサイドバーのリンクの隣にある▼をクリックします

• リンクを管理をクリックします
• これで新規ウインドウが立ち上がって、これまでに作成したものを一覧で見ることが出来ます。
• ここから削除したりといった管理も可能です。

さいごに

WEBデザインではたくさんの人が関わる仕事なので情報や価値の共有は大切です。
AdobeXDはそんな共有に便利なツールですので、是非是非使ってみてください。
無料版だけでも十分使える機能満載です！
ちなみに無料版では1つしか共有プロトタイプが作れませんので、是非有料版を買いましょう！！