Adobe XDデザインスペックの使い方と、開発者と効率的に連携するヒント

連載

エクスペリエンスデザインの基礎知識

我々が住む世界には様々なデバイスと実行環境があり、デザイナーと開発者はそこで使われる物をつくっています。優れた開発チームが持つとても重要な、しかし見逃されがちな側面は、デザイナーと開発者の良い関係です。

良い関係には良いコミュニケーションが必要です。デザイナーと開発者のコミュニケーションは、開発プロセスの決定的な要因です。開発チームは、避けることもできたはずのやり直しに半分の時間を費やすこともあります。それは時間と予算の浪費です。そして多くの場合、問題の原因はコミュニケーション不足です。

開発者への引き継ぎの場では、デザイナーは、全てのデザイン要素の見た目と動作そして手触りを、明確に伝えなければなりません。その際に伝えられるデザインの仕様は、デザインスペックと呼ばれます。

デザインスペックとは何か？

デザインスペックは、制作物の詳細な情報を記述した文書です。見た目のデザイン（色、文字スタイル、配置）や情報（フロー、振舞い、機能）等が含まれます。開発者はこの文書から仕様を取り出し、開発を行います。

何故デザインの詳細は重要か

デザインの詳細を明確に伝えることは重要です。それは、それぞれの選択に理由があるからです。デザイナーがフォントにセリフではなくサンセリフを選ぶのには意味があり、デザインスペックはその選択を開発者に伝えます。開発者は、デザイナーの選択を正しく注意深くそれぞれの環境に実装しなければなりません。場合によっては、環境の制限に対応するため、デザイナーと相談することになるでしょう。美しい見た目と階層の構築に、詳細な配置情報は重要です。デザインスペックは、開発者が視覚的に正確な情報を収集する手段になります。

何故ユーザーフローの明確な理解が重要か

デザインスペックが開発者にユーザー体験フローを伝えることはとても重要です。開発者は、ユーザーがフローを容易に行き来できるように構築するために、必要になる機能の種類を理解できます。デザイナーと開発チームが一緒にユーザーフローを確認する為にも使えます。デザインスペックの一部として、ユーザー体験を目に見える形で開発者に明確に伝えることにより、デザイナーの時間を有効に使えるようになります。

Adobe XDデザインスペック（ベータ）機能の利点は何か？

Adobe XDのデザインスペックは、プロトタイプと開発の間のギャップを埋めます。これは開発段階を単純化し、効率化します。

XDデザインスペックでデザイナーが集中できる

デザイナーがデザインスペックの修正に費やす時間は、ビジュアルや体験やインタラクションを考えるために使えたかもしれない時間です。スペックを自動生成するツールが登場する前は、デザイナーは、レイアウトを書き出し、注釈を書き込み、文書にまとめる作業を自ら行い、資料を作らなければなりませんでした。このやり方には3つの大きな問題があります。

自動化ツールは、仕様書を、チーム全員が共有できて、修正がリアルタイムで公開できるライブドキュメントに変えます。これは、デザイナーと開発者のより良いコミュニケーションと協力関係を作る手段になります。

デザイナーは、開発者に資料を渡す前に、以下の3点を心がけると良いでしょう。

XDデザインスペックは体験をより速くより分かりやすく伝える

静的な仕様書が問題になりがちなのは、デザインの詳細を十分に記述していない場合、そして、動的な要素を含んでいる場合です。開発者はデザイナーに尋ねるか、自分自身で精査することになります。その結果、ビジュアルの一貫性が失われ、正しい見た目にするために何時間ものやり直しが発生するかもしれません。

Adobe XDデザインスペックを利用すれば、開発者はデザインの詳細を誰かに尋ねることは減るでしょう。要素をクリックすれば、必要な情報が表示されます。開発者はアートボード上のレイアウトや仕様を確認して、必要なデザインの詳細や画面間のフローを知ることができます。デザイナーがつくったデザインに一致するコードを記述するために、これらの情報は役に立ちます。

開発をはじめる前に、気を付けるべき点を2つ紹介します。

Adobe XDデザインスペックの使い方

（訳者注）現在、XDのデザインスぺックはベータ版です。ベータ版と位置づけられるXDの機能について、ヘルプページには以下のように記述されています。「品質は製品並だが、機能は拡張中」と要約できます。

Adobe XDファイルを開いたら、共有ボタンと、「デザインスペックを公開」をクリックすると、公開リンクを作成できます。生成した公開リンクは、メールやSlackや他のコミュニケーション手段を使って開発者と共有します。デザイナーは、プロトタイプを変更したとき、同じURLに新しいデザインスペックを公開できます。もしくは、新しいリンクを作成することも可能です。

デザイナーはXD内で公開リンクを作成し、開発者と共有できる

開発者はブラウザーを開いてリンク先にアクセスします。リンクを開く際、Adobe IDでサインインします。アカウント作成は無料です。

サインインしてXDのデザインスペックを見る

サインインすると、UXフロービューが表示されます。ここで、開発者は次のことを把握できます。

UXフロービューはユーザー体験の概要を表示する

このビューでは次の操作を行えます。

画面を選択すると、画面の右に、その画面で使用されている固有の色や文字スタイルがすべて表示されます。色や文字スタイルにマウスカーソルを合わせると、アートボード上で使用されている場所がハイライト表示されます。開発者が正確な情報をコード内で利用できるように、色や文字スタイルをクリックして値をコピーすることができます。

色のフォーマットは変更可能です。例えば、HSLAで作業する場合は、ドロップダウンリストからHSLAを選択します。変更はセッションを通して有効で、他の画面を表示した時も、同じフォーマットが使用されます。

色のフォーマットを変更する

XDのデザインスペックでは、位置からスタイルまで、デザイン要素の正確な属性が提供されます。画面上のデザイン要素をクリックすると、位置（X、Y）、大きさ（幅、高さ）、外観（色、透明度、等）が、その右に表示されます。

色や文字スタイルをコピー、コンテンツの大きさや間隔を表示

例えば、オブジェクトの間隔を調べるには、一方の要素を選択し、もう一方の要素にマウスカーソルを合わせると、相対距離が表示されます。

テキストオブジェクトの属性（フォント、サイズ、行間、色など）も確認できます。フォント探しゲームを行う必要はもうありません。

XDのデザインスペックは、複数の単位（px、pt、dp）をサポートし、必要に応じて切り替えることができます。開発者がプラットフォームごとに計算したり、デザイナーがこの情報を提供する必要性がありません。

このようにXDのデザインスペックは、引継ぎ作業を簡素化し、デザイナーと開発者の時間を節約します。そして、デザインプロセスの生産性を向上する手段は、他にもあります。

デザイナーと開発者が効率的に働くための5つのヒント

デザイナーも開発者も全体像を見ることはできません。ソリューションの構築には、お互いがお互いを必要とします。デザインは、何はともあれ共同作業です。最初の思いつきから優れた成果に至るまでには、デザイナーと開発者の明確なコミュニケーションと緊密な協力が必須です。

それが、効率的なデザインプロセスの進め方が、高度に協調的で（開発にかかわるすべてのメンバーからの意見の提供を求める）、反復的（アイデアや過程を検証するために開発プロセスが繰り返される）である理由です。

以下は、チームとしてデジタル製品をより速くより簡単に実現するためのヒントです。

1. 始めから意図的に関係性を構築する

プロジェクトの始まりからチーム内コミュニケーションを改善することにより、反復時間を大幅に減らすことが可能です。フィンランドのオウル大学による研究では、早期のチームメンバーによる協業が最終的な品質の改善に役立つことが報告されています。無駄な作業をなくすためには、デザイナーと開発者は最初から一緒に働くべきなのです。

初期から参加すれば、すべてのメンバーがプロジェクトを通じて同じ理解を共有することが保障されます。チーム全員が最終的な目標と期待を理解すれば、よく考え抜かれた成果につながるでしょう。

2. デザインプロセスを通じて継続的にコミュニケーションする

良いデザインプロセスには、チームが行う決断についての共有理解が必要です。このような状況を構築するには、デザイナーと開発者は引継ぎ時に限らず、定期的に会話することが必須です。最初のリサーチや要件のまとめから、最後のテストや公開まで、すべての段階でコミュニケーションを行うべきです。

開かれた会話の機会を持てば、すべてのチームメンバーが、始めからデザインの議論に参加できます。全員が要件やデザインの変更を共有していることは重要です。チームは情報を共有する手段を持たなければなりません。

互いに会話することは、デザイナーと開発者、双方に利点があります。

3. 現実的な判断をする

現実的な判断ができるデザイナーは、プロジェクトの範囲内で何を作れるのか、しっかりと理解していることでしょう。技術的な視点からの知識を持つデザイナーは、次の行動ができるようになります。

4. 業界のトレンドを知る

デザインの世界で何が起きているか知っていることは重要です。新しい手法やツールは、自身のデザインプロセスに有効かもしれません。こうした知識は、プロセスから障害を取り除くために役立ちます。

5. 品質確認に協力する

品質確認担当のエンジニアは、サービスや製品の品質確認に責任を持ち、ウイークポイントの見つけ方を知っています。彼らと一緒に作業することは、要素やインタラクションの作り方を理解したいとき、役に立つでしょう。

この記事はDesign Specifications — Speeding Up the Design to Development Workflow and Improving Productivity（著者:Nick Babich）の抄訳です