AdobeXD プロトタイプ制作<共有>

<前回の内容>



[AdobeXD] プロトタイプとは?


「プロトタイプ」とは試作品のことです。「デザインカンプ」や「モックアップ」などと呼ばれることもあります。XDで制作するプロトタイプは、デザインの他にどこをクリックしたらどのページに飛ぶというようなリンク先の表示や、リンクの状態を実際のWebサイトやアプリのように試すこともでき、デザインの段階から完成品に近いものをテストすることができます。


[AdobeXD] 共有の設定

XDでは、クライアントや一緒に制作するチームのメンバーとデザインデータを共有しながら作業を進めることができます。共有したい場合は「共有モード」に切り替えて設定します。

【XD3つのモード】
・デザインモード   → デザインを作成する
・プロトタイプモード → デザイン内の細かい設定をする
共有モード     → デザインデータを共有するための設定をする


・共有モードへの切り替え

画面上部メニューから「共有」を選択


・表示設定 

画面右パネル内から選択


共有したい目的に合わせて表示設定を選択します



【表示設定:デザインレビューの場合】

・アクセス権限の設定 

画面右パネル内から選択



誰にアクセス権限を与えるかの設定を行います

リンクを知っているすべてのユーザー → リンクを送った全ての相手がアクセス可能
招待されたユーザーのみ    → メールアドレスで招待した相手のみアクセス可能
パスワードを知っているユーザー → 設定したパスワードを入力できる相手のみアクセス可能



・リンクの作成

リンクへのアクセス権限設定後、「リンクを作成」ボタンをクリック



リンクが作成されました 



リンクをクリックするとブラウザが立ち上がり、共有された相手はデザインの確認やコメントを記入することができます




<「招待されたユーザーのみ」に共有する場合>

アクセス権限横の人型マークをクリックし、招待したい相手のメールアドレスを入力する



<「パスワードを知っているユーザー」に共有する場合>

アクセス権限下に出てくるパスワード入力欄に入力後 → リンクを作成


共有された相手がリンクをクリックするとブラウザが立ち上がり、パスワード入力画面になります



【表示設定:開発の場合】

リンク作成の手順はデザインレビューと同様です


作成されたリンクをクリック後、右端の</>マークを選択するとデザインスペックを確認することができます


確認したい部分をクリックすると、位置情報・大きさ・カラー・フォントなどの情報が表示されます


このように必要に応じて作業中のファイルを公開していけば、チームで共有しながら制作を進められます



< NEXT → プロトタイプ制作<WEBフォント> >