Adobe XDでウェブデザインを加速する！[第5回] 「共有」モードからはじめるチーム間コミュニケーション
Adobe XDでウェブデザインを加速する！
ウェブサイトやアプリのデザインでは、他のメンバーの意見を聞くための「レビュー」の工程がとても大切です。ひとりのデザイナーが「完璧に」つくり込んだデザインが、後からクライアントの意図とずれていると判明する状況は誰しも避けたいことでしょう。またデザイン次第で、その後のコーディングや改修が難しくなるケースもあります。デザイナーに求められているのは、段階を追って少しずつデザインを共有して、レビューにより集めた意見をデザインへ反映していく進行です。
Photoshopでは、作業中のページデザインを丸ごと画像として書き出せます。一方、修正点の伝達、リンクエリアなどのデザインの解釈、バージョンの把握など、デザインのコミュニケーションには様々な工夫が必要です。また、コーディングの工程では、エンジニアがPhotoshopを操作しなければならないケースも度々発生します。
これに対し、Adobe XDの「共有」モードを使って共有リンクを発行すると、ブラウザーが利用できる環境さえあれば、デザインの確認とコメントによるフィードバックが可能です。さらに、エンジニア向けにはデザイン仕様をブラウザーで共有することもできます。デザイナー以外のメンバーにとって、大変便利な機能だと言えるでしょう。
「共有」モードでURLを発行する
Adobe XDの 「共有」モードからは、アドビのサーバーを介してデザインを共有するためのURLを発行できます。発行されたURLを伝えれば、クライアントやチームメンバーとデザインの確認を行いフィードバックを得たり、エンジニアにコーディング情報を引き継げます。このワークフローの最大のメリットは、Adobe XDがインストールされていない環境でも、ブラウザーさえあればデータを確認できる点です。
Adobe XDの共有モード
リンク設定の基本手順
共有するURLの発行に使うのは「共有」モードですが、どのページをどの順に見てもらうかを設定するのに使用するのは「プロトタイプ」モードです。たとえは、PCとモバイル向けのアートボードをひとつのXDドキュメントで作成しているときは、どちらかのフローを選んで共有することになるでしょう。あるいは、1枚のアートボードだけ共有したい場合もあるかもしれません。
そこでまずは、表示するアートボードとその表示順をコントロールする方法について紹介します。
どのアートボードを共有するかを決めるには
ここからの操作は「プロトタイプ」モードで行います。まず、共有時に一番最初に表示したいアートボードの左上のアイコンを選択して、ホームアートボードに設定します。ホームアートボードからワイヤーを辿れるアートボードはすべて共有の対象になります。もしアートボードを1枚だけ共有したければ、ホームアートボードから他のアートボードへのワイヤーをすべて削除します。
ドキュメント内の全アートボードを共有したい時は、ホームアートボードを無効にします。この場合、共有時の表示順はアートボードの並び方に依存します。アートボードはできるだけ見せたい順序で配置するようにしましょう。
ホームアートボードについては前回の記事も参考にしてください。
「フロー」でアートボードを分割する
「プロトタイプ」モードで、ホームアートボードを複数指定すると、複数の「フロー」を定義できます。たとえば、トップページとお問い合わせページの両方をホームアートボードに設定して、それぞれのアートボードから適切にワイヤーを接続すれば、「トップページからブログ記事に移動する」というフローと「お問い合わせのトップから確認画面・完了画面へ移動する」というフローを設定できます。フローには分かりやすい名前を付けておきましょう。
共有URLを発行する時、カンバス上のフローを選択してから「リンクを作成」ボタンを押すことで、フローごとにURLを発行することが可能です。その際、プロパティインスペクタの「リンク」には、共有リンクの表すフローが判別しやすいテキストを指定します。
Adobe XDのドキュメントには複数のフローを定義できる
リンクの更新
一度発行したリンク先に表示されるデザインは、XD側でデザイン等を更新しても、リアルタイムに差し替わったりはしません。必要に応じて「リンクを更新」ボタンを押して、発行済のURLを最新のデザインに更新します。
リンク更新ボタンを使って、共有したデザインを更新できる
バージョン管理などの理由ですでに発行したURLとは別のURLを発行したい場合には、「リンク」欄の下向きの矢印をクリックして「新規リンク」から、新しいURLを発行します。「リンク」には、既存のリンクとの違いが判別できるテキストを指定します。
リンクの削除
発行したリンクを削除するには、「リンク」欄の下向きの矢印をクリックし、「リンクを管理」を選択します。ブラウザーにCreative Cloudのウェブサイトが表示されたら、削除したいデータにマウスカーソルを移動し、サムネイルの下に表示される「･･･」アイコンをクリックして「完全に削除」を選択します。
管理画面を開くと共有リンクを削除できる
限定公開とパスワード管理
パスワードを付与したり、招待することで閲覧者を制限することができます。共有リンクに設定できるアクセス権は以下のとおりです。共有または招待された側は、Adobe IDもAdobe XDも不要です。どの設定の場合もブラウザーさえ利用できればリンクされたデータの確認が行えます。
- リンクを知っているすべてのユーザー
- メールアドレスで招待されたユーザーのみ
- パスワードを知っているユーザーのみ
共有リンクにパスワードを設定して保護することができる
パスワードは便利な機能ですが、後からパスワードを掛けられない点には注意しましょう。既に一般公開してしまったリンクをパスワードで保護したい場合は、「リンク」ドロップダウンから「新規リンク」を選択して、新しく別のリンクを作成します。（そして先に公開したリンクは削除します）
目的によって「表示設定」を切り替える
共有するリンクには用途に応じてさまざまな機能（見た目）を含めることができます。主な用途には表示設定のプリセットが用意されています。「カスタム」を選ぶと任意の項目が選べます。
- デザインレビュー： デザインやプロトタイプに関するフィードバックを収集する
- 開発：開発者とデザインスペックを共有する
- プレゼンテーション：デザインのプレゼンテーションを行う
- ユーザーテスト：ユーザーを招待してデザインをテストする
- カスタム：任意の項目を選択できる
表示設定を選択して、共有する情報を指定
「開発」のプリセットは、「コメントを許可」「ホットスポットのヒントを表示」「ナビゲーションコントロールを表示」「デザインスペックを含める」の4項目の組み合わせで、デザイナーとコーディング担当者が意見をやり取りしながら実装に必要な情報を確認するためのセットです。プリセットの詳細はこちらの記事をご覧ください。
ブラウザーでデザインを確認する
ここでは、「開発」を選択してURLにアクセスした場合を見ていきましょう。「コメントを許可」と「デザインスペックを含める」の2つが有効であるるため、共有リンクからデータにアクセスすると、画面右側のアイコンをクリックして表示設定を切り替えられます。
コメントをやり取りできる「デザインレビュー」
画面右側の💬アイコンをクリックすると「コメントパネル」が表示されます。このビューでは、ブラウザーに表示されたデザインデータに注釈やコメントをつけることができます。デザインのフィードバックなどのコミュニケーションに適しています。
共有されたリンクを使ってデザインレビューを行える
コメントを入力し「送信」をクリックするとコメントを送信できます。アートボード内の特定の領域を指し示すようにコメントをピン留めするには、「ピン留めする」をクリックし、アートボード内の特定の領域をクリックします。コメント欄に返事（レス）をしたり、解決済みのコメントには「解決」アイコンを押して非表示にすることもできます。
「デザインスペック」でコーディング情報をチェックする
画面右側の</>アイコンをクリックすると「デザインスペック」を表示できます。デザインスペックでは、カラーやフォントなどの仕様の閲覧や、共有された素材の書き出しができます。デザインの各要素をクリックすると、画面右側の「スペックビュー」に要素ごとのプロパティを表示できます。
デザインスペックではコーディングに必要な情報を確認できる
デザインスペックで行えることは以下のとおりです。
▼計測値を表示および確認する
アートボード内のオブジェクトを選択して、その計測値とスタイルを確認できます。オブジェクト間の間隔を確認するには、オブジェクトを選択し、アートボード内の他のオブジェクトの上にポインターを置きます。
▼テキストとそのプロパティを確認してコピーする
テキストを選択するとそのテキストのプロパティが表示されます。プロパティパネルからテキストとその色をコピーすることもできます。
▼CSSスニペットを確認してコピーする
要素を選択すると、「CSS」欄にコードが表示されます。ただしこのコードは絶対座標によるもので、すべてそのまま使うには難しい場合が多いため注意が必要です。CSSを表示するには、「共有」する際に、「開発（デザインスペックを含める）」の下に表示される書き出し先を「Web」にしておきましょう。
Web開発用に共有されたデザインスペックにはCSSスニペットが表示される
▼画像アセットの書き出し
プロパティパネルに表示されている画像を選択して書き出すことができます。
アートボード一覧を表示する
共有リンクに含まれているすべてのアートボードとその関係を把握するための「グリッド表示」と「フロー表示」も提供されています。使い方は次の通りです。
- 階層の先頭に表示されているアイコンまたはリンク名をクリック
- アートボードの一覧の右上に表示されているアイコンをクリックしてグリッド表示とフロー表示を切り替える
グリッド表示されたアートボード一覧
Adobe XDを持っていない開発者でも閲覧できることが最大のメリット
Photoshopを中心としたファイルをやり取りするワークフローの場合、エンジニアの作業はPhotoshopでデータを開くところからスタートします。つまりエンジニアはデザイン作業をしていないにも関わらず、Photoshopの操作が必要になるのです。その点、Adobe XDから共有した場合は、ブラウザーさえあれば素材の書き出しや情報の閲覧・抽出ができます。これはエンジニアにとって大きなメリットと言えるでしょう。
リアルタイム編集が可能な「共同編集」
デザイナー同士の連携が発生する場合、ローカルに保存されたドキュメントで作業をするよりも、クラウドドキュメントとして保存した上で「共同編集」を利用するのがおすすめです。その際、共同編集するユーザー同士のAdobe XDのバージョンは常に最新に保たれている必要がある点には注意が必要です。色やフォントなどデザインルールを統一するためのアセットについては、「ライブラリ」から共有してチームメンバーとの連携をすすめましょう。
また、クライアントとドキュメントを共有しあえば、対話しながらその場で追加や修正をする、といった使い方もできます。ビデオ会議と組み合わせれば、リモートにいる相手とのやり取りもスムーズに行えます。
ひとつのドキュメントを複数のユーザーが共有して作業できる
共同編集を利用するには、クラウドドキュメントを開き「ドキュメントに招待」します。複数人による同時編集も可能です。ドキュメントに招待するのは、どのモードからでも可能です。画面右上にある人物のシルエットのアイコンをクリックして、招待したいユーザーのメールアドレスを入力します。
昨今のウェブデザインの現場では、Photoshopユーザーの得意分野であるビジュアルデザインを作り込む技術が必要とされる一方で、チームとしての素早い連携やフィードバックも欠かせません。そのためには、迅速で効率的な作業が必要です。設計から共有までをすばやく実現できるAdobe XDを軸にしながら、素材の作り込みにはPhotoshopやIllustratorを活用する、「連携型」のワークフローがおすすめです。