記事の詳細

前の記事はこちら

Adobe XDを使ってワイヤーフレームを作る その1【ファイルの作成とアートボードの設置、パネルの見方】
Adobe Experience Designの正式版リリースソフトであるAdobe XDは、Adobeから提供されるWEBサイトやモバイルアプリのデザイン、プロトタイプの作成が、これ一つでできる...
Adobe XDを使ってワイヤーフレームを作る その2【ツールとアセットパネル、レイヤーパネル】
前回の記事はこちらAdobeXDのツールパレットと各パネルCtrl+Yでレイヤーパネルを展開することができます。 レイヤーパネルの左にあるのがツールですが、上から選択ツー...
Adobe XDを使ってワイヤーフレームを作る その3【それぞれのツールの簡易的な説明とパネルの変化】
前回の記事はこちらこの間自宅のMacでAdobeXDを操作したら普通にメニューが出てきてびっくりしました。Windowsだとハンバーガーメニューに収納されているんですけど……。...
Adobe XDを使ってワイヤーフレームを作る その4【リピートグリッドとシンボル】
前の記事はこちらAdobeXDのリピートグリッドホームページのワイヤーフレームを作っていると、たびたび「同じものの繰り返し」を利用することになります。新着記事を3枚...

AdobeXDのプロトタイプとは

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

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

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

AdobeXD04【プロトタイプ】

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

AdobeXD04【プロトタイプ】

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

ターゲット

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

トランジション

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

イージング

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

 

AdobeXD04【インタラクションにペースト】

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

AdobeXD04【プレビュー】

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

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

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

AdobeXD04【公開メニュー】

プロトタイプを公開

AdobeXD04【プロトタイプを公開】

コメントを許可

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

AdobeXD04【コメントを追加】

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

AdobeXD04【コメントのしかた】

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

AdobeXD04【コメントのしかた】

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

AdobeXD04【コメントのしかた】

AdobeXD04【コメントのしかた】

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

AdobeXD04【ページ送り】

フルスクリーンで表示

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

AdobeXD04【フルスクリーンで表示】

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

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

AdobeXD04【ホットスポット】

デザインスペックを公開

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

リンクの遷移先

AdobeXD04【デザインスペック】
青いラインで表示されます

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

AdobeXD04【デザインスペック】

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

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

AdobeXD04【デザインスペック】

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

●公開済みリンクを管理

AdobeXD04【公開済みリンクを管理】

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

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

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

AdobeXD04【チュートリアル】

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
久保田 里美

久保田 里美

価値あるコンテンツ制作部インクループ株式会社
デザイナー。コンセプト設立からデザインを理論立てて起こすことをポリシーに、WEB媒体から紙媒体まで幅広く手掛けていきたいデザイナー。日々勉強日々精進。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

仕事ではパソコンが使いこなせるのが当たり前

相模原市産業会館パソコン教室

AD

ページ上部へ戻る