XD

【Adobe XD】プロトタイプやデザインスペックの共有方法を初心者向けに徹底解説!

プロトタイプ / デザインスペックの共有

 

この記事では

adobeXDのプロトタイプの共有デザインスペックの共有の方法について解説します

 

作成したページの「デザイン」や「遷移」について、クライアントやディレクター、コーダーなどと行う完成イメージの共有がプロトタイプの共有です。

 

それに対し、作成したページの「オブジェクトのサイズ」「色」「テキスト」などについて、コーダーなどとチームや社内間で行う情報の共有デザインスペックの共有です。

 

この2つの共有は、どちらも「URL」を生成して行い、今まで行っていた別データの書き出しや、紙の出力などは必要ありません。

共有される側にブラウザを利用できる環境があれば確認が可能で、簡単にコメントによるフィードバックを行うことができる非常に便利な機能です。

ぜひこの記事を参考に使いこなせるようになって下さいね。

 

adobe xdの全体像を知りたい方は、コチラのまとめ記事をご覧下さい!

目次

共有の各機能の説明プロトタイプの共有コメント機能とピン留めデザインスペックの共有アセットで画像を書き出す
デザインスペックの確認カラーコードの取得サイズ / 間隔 / アピアランスの確認スタイル / コンテンツの確認CSSスニペットの取得



 📖目次に戻る

共有の各機能の説明

まずは簡単に、共有モードの各機能の説明をするよ

共有モードに切り替えると画面右側のサイドバーの内容も変わり、デフォルトでは以下のような「デザインレビュー」の画面が開きます。

この画面は、リンクを「初めて作成する場合」「更新する場合」で内容が多少異なります。

 

一度リンクを作成した後は、招待ユーザーの追加や「リンクのコピー」「 コードのコピー」を行うことができます。

表示設定では、プロトタイプ (デザインプレビュー) と デザインスペック (開発) の共有以外にも、用途に合わせた共有の形式を選ぶことができます。

「プレゼンテーション」 … プロジェクターなどに写してその場で説明する

「ユーザーテスト」 … 実際の動きに近い状態でテストをする

「カスタム」 … 各機能を組み合わせて使用する

リンクへのアクセスでは、公開する範囲を選択することができます。

パスワード付きリンクの作成方法についてはコチラの記事をご覧ください!

 

ちなみに、Behanceはアドビが運営するプラットフォームで、他のクリエイターとデザインを共有することができるよ

 📖目次に戻る

プロトタイプの共有

プロトタイプを共有するために、公開リンクの作成を行います。

 

step
1
共有タブの切り替え

共有機能を使用するには、サイトのデザインを作成した後に画面左上のタブを「共有」に切り替えて行います。

ちなみに、「 Ctrl + Tab 」でも切り替えられるよ

 

step
2
表示形式で「デザインレビュー」を選択

右サイドバーのリンク設定パネル内にある「表示設定」の中から、「デザインレビュー」を選択します。

 

step
3
リンクを作成をクリック

リンク設定パネル最下部の「リンクを作成」ボタンをクリックします。

リンク作成後は、右サイドバー下部の画面が変わるので、❶「鎖マーク」をクリックしてリンクをコピーした後、メールなどにURLを貼り付けて共有します。

リンクをコピー … 「https:」から始まるurlをコピーする。他の人と共有する場合に使用。

埋め込みコードをコピー … iframeタグをコピーする。webページに埋め込みたい場合に使用。

Behanceで表示 … Adobeが運営するプラットフォーム「Behance」で表示する。他のクリエイターとデザインを共有する場合に使用。

公開リンクをクリックすると、直接ブラウザで確認できるよ

 

step
4
リンクを開く

発行したURLをブラウザで開き、動作の確認をします。

 

ちなみにこの画面は、adobeXDを持っていなくても開けるよ

 📖目次に戻る

コメント機能 と ピン留め

リンクを作成した後は、コメント機能を使ったやり取りが可能になります。

また、デザインの特定の箇所にコメントをする場合は「ピン留め」を行います。

今回は「ピン留め」を例に、手順を確認してみましょう。

もちろん、ピン留めをせずにコメントだけ入力することも可能だよ

 

step
1
コメントを入力

発行されたURLからデザインを表示した状態で、画面右上のコメント欄にコメントを入力します。

一文字でも入力するとコメント欄が広がります。

 

step
2
ピンマークをクリック

コメントの入力が終わったら、コメント欄の右下のピンマークをクリックします。

 

step
3
ピン留めをする

アートボードの任意の場所をクリックして「ピン留め」を行います。

送信ボタンをクリックします。

コメント入力欄すぐ下にコメントが反映されます。

反映された「コメント」と「ピン」に共通の番号が付与されます。(コメントにカーソルを合わせると、アートボード上のピンの色も変わります。)

これで「誰が」「どの部分」に対してコメントしたか一目でわかりますね。

 

設置したピンはいつでもドラッグして移動できるよ



 📖目次に戻る

デザインスペックの共有

デザインスペックを共有するために、公開リンクを作成します。

 

step
1
共有タブの切り替え

共有機能を使用するには、サイトのデザインを作成した後に画面左上のタブを「共有」に切り替えて行います。

ちなみに、「 Ctrl + Tab 」でも切り替えられるよ

 

step
2
表示形式で「開発」を選択

右サイドバーのリンク設定パネル内にある「表示設定」の中から、「開発」を選択します。

 

step
4
各種設定をしてリンクを作成

「書き出し先」や「招待する範囲の指定」などの設定後、「リンクの作成」をクリックします。

書き出し先を選択(今回はWeb)

「Web」を選択した場合のみ、CSSスニペットを使用することができます。

あらかじめ指定した素材のダウンロードを許可する / しない の選択

許可する場合は、デザインモードで書き出し対象の素材を指定()する必要があります。

招待する範囲の指定

一度リンクを作成した後は、前述のプロトタイプの共有と同様に「リンクをコピー」「埋め込みコードをコピー」「Behanceで表示」などが行えるようになります。 

 

※指定する素材を「書き出し対象」にする方法は以下の3通りです。

指定する素材を書き出し対象にする方法

その 左サイドバー書き出し対象にする マークをクリック

その 右クリック をして「書き出し対象にする」を選択

その 右サイドバー「書き出し対象にする」をチェック

 

どの方法で書き出し対象にしても、結果に影響はないよ

 

step
4
リンクを開く

発行したURLをブラウザで開き、デザインスペックの確認をします。

デザインスペックを表示するには、画面右上スペックを表示 マークをクリックします。

 

スペックを表示 マークをクリックすると、右サイドバーに各デザインスペックが表示されます。

 📖目次に戻る

アセット で画像を書き出す

何も選択していない状態で、右サイドバーに表示されている「アセットセクション」の中から素材をダウンロードすることができます。

ここに表示される素材は、リンクを作成する際に「書き出し対象」にする必要がありますので注意して下さい。

注意ポイント

「アセット」は、公開リンクを作成する際に、「ダウンロード可能デザイン素材」チェックを入れている状態で利用できる項目です。

アセットセクションで画像を選択すると、画面右下に次のような項目が表示されます。

ファイル形式を選択して、「ダウンロード」をクリックして書き出すことで、「zipファイル」がダウンロードされます。

 

画像を複数選択して一括で書き出すこともできるよ

 📖目次に戻る

デザインスペックの確認

デザインスペックの共有画面から、「コーディングに必要な情報を取得」する方法と「画像の書き出し」方法について解説します。

 📖目次に戻る

カラーコード の取得

オブジェクトを選択していない状態では、アートボードで使用されている「カラー」「文字スタイル」の情報を確認することができます。

また、右サイドバーの「カラーセクション」で、任意のカラーをクリックすると「カラーがコピーされました」と表示され、カラーコードがクリップボードにコピーされます。(画面例では「#522A19」)

さらに、カラーセクションの右上をクリックすることで、3種類の表示形式の中から選択することができます。

 📖目次に戻る

サイズ / 間隔 / アピアランス  の確認

任意のオブジェクトをクリックすると、右サイドバーに「サイズの情報」「アピアランス」が表示されます。

また、カラーコードと同様に、右上のドロップダウンメニューから単位を変更が可能です。

任意のオブジェクトを選択した状態で、別のオブジェクトにカーソルを合わせると、オブジェクト同士の間隔を表示することができます。

 📖目次に戻る

スタイル / コンテンツ の確認

任意のテキストをクリックすると、右サイドバーに「アピアランス」の他に「スタイル」「コンテンツ」が表示されます。

スタイル … 使用されている文字の「フォント」や「サイズ」等のテキストに関わる基本情報を確認することができます。

コンテンツ … 表示されているテキスト部分をクリックすると、クリップボードにテキストの内容をコピーすることができます。 

 

ちなみに、スタイルでフォント名をクリックするとことで、フォント名をコピーできるよ

 📖目次に戻る

CSSスニペット の取得

任意のオブジェクトを選択すると、右サイドバーにCSSのコードが表示されます。

必要な部分をドラッグすることで、クリップボードにコピーされます。

注意ポイント

CSSスニペットを表示するには、リンクを作成する際の書き出し先「Web」を選択する必要がありますので注意して下さい。

 

これで共有の基本的な操作方法は理解できたかな

 📖目次に戻る

最後に

いかがでしたでしょうか、今回は「プロトタイプの共有」「デザインスペックの共有」の基本的な使い方について解説しました。

共有以外の機能についても気になる方は、こちらから別の記事を見てみて下さいね。

Adobe XD

XDの基本的な使い方を、オリジナルのスマホサイトをもとに解説しているよ!!  

続きを見る

最後までお読みいただき、ありがとうございました!



-XD