前の記事はこちら

AdobeXDのプロトタイプとは

後での改良を見込んで、その仕事をする大筋として作る最初の模型、というのがプロトタイプの意味です。
AdobeXDでは「デザイン」「プロトタイプ」ので2つのモードがあります。デザインではこれまでやってきたように、シンボルやリピートグリッドを利用して、サイトそのもののデザインを行うモードですが、プロトタイプではその意味の通り、サイトの「最初の模型」を作ることができます。

簡単に言えば「視覚的にリンクをはり、該当のページに飛ばす」ことができます。

タブを切り替えて、任意のオブジェクトを選択すると、右側に水色のタブが出ます。

この右側のタブをドラッグすると、ラインで伸びます。アートボードがページに見立てられているので、アートボードそのものにくっつけると、そこがリンクでつながります。視覚的に非常にわかりやすく使えます。

リンクしたときに、「ターゲット」「トランジション」「イージング」「デュレーション」を設定できます。

ターゲット

アートボードの名前がドロップダウン一覧で表示されます。遷移先のページになります。

トランジション

画面が遷移するときのエフェクトです。
ディゾルブ：フェードインとフェードアウトが同時に起こる
（左、右、上、下に）スライド：スライドアクション。遷移先のページがスライドしてインしてきます。
（左、右、上、下に）プッシュ：プッシュアクション。遷移先のページが前のページをプッシュしてインしてきます。

イージング

トランジションの動き方をしてします。
イーズイン：スタートが早く、ゆっくり止まる。
イーズアウト：ゆっくりスタートし、早く止まる
イーズイン/アウト：スタートが早く、途中ゆっくりで、早く止まる。

 

プロトタイプでリンクが指定された箇所をコピーした場合のみ、ペーストする際に「インタラクションをペースト」というメニューが指定できます。これは、オブジェクトではなくリンクの指定をコピーペーストする機能です。

右上の再生ボタンを押すと、アートボードに合わせたプレビューを見ることが出来ます。クリックすれば、指定した先のページに遷移できます。

AdobeXDで作ったワイヤーを公開する

公開は右上のアウトプットアイコンで行います。

プロトタイプを公開

コメントを許可

公開したプロトタイプにコメントを受け付けることが出来ます。

コメントはAdobeIDを持っている方はIDから、その他の方はゲストとしてコメントすることが出来ます。
右上部の吹き出しをクリックすると、右側にサイドバーが展開します。下部の「ゲストとしてコメント」をクリックすると、コメント記入欄に切り替わります。

ゲストの名前を記載し、リキャプチャにチェックを入れると、コメント記入フォームが表れます。

コメント挿入時、コメントフォーム上部に「アートボードにピン留め」という文字が出てきます。コメントを挿入後にここをクリックすると、カーソルに番号がつきます。番号は展開しているプロトタイプの画面上をクリックすることで、しるしとして付けることができます。

カーソル部分、家のアイコンはHOME指定したアートボードに、左右の矢印はそれぞれ制作したアートボード順に遷移します。

フルスクリーンで表示

フルスクリーンで表示します。コメントなどの作業ができなくなります。結果としてできたプロトタイプを共有したいときに便利です。デフォルトでは解除されています。

ホットスポットのヒントを表示

ユーザーがリンクのないところでクリックした場合、クリック位置を輪郭線で表示します。

デザインスペックを公開

デザインされたプロトタイプの詳細を知ることが出来ます。2018年1月12日現在ベータ版なので
アートボードをクリックすることで、そのアートボード内の情報を取得できます。

リンクの遷移先

青いラインで表示されます

使用しているカラーのコード、フォントファミリー、フォントサイズ、フォントウェイト

カラー、フォントはそれぞれ利用する単位の切り替えが可能です。

オブジェクトのサイズ、整列方法

一つ一つのテキストオブジェクト、画像オブジェクトなどを選択すると、サイズ、整列方法のほか、文字のスタイルやカラーなどのスペックがわかります。

●公開済みリンクを管理

それまで公開しているリンクを管理することが出来ます。AdobeXDで作成した、プロトタイプ、デザインスペック両方のデータがそろっています。ファイルの削除、リンクのコピー、共有リンクの排除などが可能です。フォルダを作って整理することも可能です。

AdobeXDにはチュートリアルがついている

一通りAdobeXDの使い方を覚書してきましたが、AdobeXDにはチュートリアルがデフォルトでついています。
ファイルメニューから「ヘルプ」を選択すると、XDチュートリアルのファイルをいつでも開くことができます。