スムーズな デザインハンドオフ のためにデザイナーができること

度重なるデザインのイテレーションが終わりに近づくと、次のステップで考えるのは デザインハンドオフ についてです。開発チームへの デザインハンドオフ が失敗するのってたくさんあるんですよね。

そこでこのプロセスをより簡単にすべく、 デザインハンドオフ をしっかり準備できるようになるリストをまとめました。これでデベロッパーとの間に誤解が生じないようにします。

デザインとエンジニアリング間の「信頼できる唯一の情報源（Single source of truth）」でプロトタイプをデザインしませんか。インタラクティブなコンポーネントをUXPinに導入し、デザインの引き継ぎの際の摩擦を減らしましょう。

詳しくは UXPin Mergeのページをぜひご覧ください。

スムーズな デザインハンドオフ のためのデザイナーのタスク６つ

１．命名規則の標準化

適切でまとまった用語を使うことで、あなたとデベロッパーの間に混乱が生じないようにします。例えば、製品の段階を「最新」や「新着」と名付けるのではなく、「v1」「v2」「v3」といったように、シンプルに表現するといいでしょう。

これで、オリジナルから最新のものまで、さまざまなバージョンのデザインを簡単に見ることができ、デベロッパーはあなたのデザインプロセスをナビゲートできるようになります。また、デベロッパーのハンドオフに関する用語にも慣れておくといいでしょう。ちなみに、BEM記法ガイド（英語）はこれに関するおすすめのリソースです。

用語の詳細は、「Content Design System Guide.」をご覧ください。

２．インタラクティブなプロトタイプの構築

どんなに美しいプロトタイプでも、それが静的なものであれば、デベロッパーが何を作る必要があるのかが伝わらないので、デザインにインタラクティブ性を持たせることが非常に重要です。それには、ステート、変数、式などの高度なプロトタイピング機能を使うといいでしょう。

別の方法だと、コード化されたコンポーネントをデザインに持ち込んで、デフォルトで完全にインタラクティブなプロトタイプを構築するのもいいでしょう。それについては、こちらの記事で詳しくご紹介しています。

３．デザインの決定事項をアノテーションで説明

複数のデジタルアセットやデザインをデベロッパーに渡すことになるので、アノテーション（注記・注釈）をつけるのを習慣付けることが重要であり、そうすることで、デベロッパーに各アセットが何であるかというコンテクストを伝えることができます。また、それぞれのデザインについて、なぜそのような方法で作成したのかの説明も必要です。

UXPinのような デザインハンドオフ ツールを使うことで、このアノテーションのプロセスがとても簡単になります。デザインについてリアルタイムで共同作業を行い、コンテクストに沿ったドキュメントを作成することができるようになるのです。

デザインに含まれる各要素の詳しい説明を追加することで、各要素が提供する機能をより明確にすることができます。また、より分かりやすくするために、アクセシビリティのガイダンスを含めるオプションも用意されています。

４．今後のためのテンプレートやチェックリストの作成

ほとんどの場合、どの デザインハンドオフ のプロセスも似たような構造を持つことになります。そこで、今後の デザインハンドオフ をしやすくするために、プロセスを効率化するためのテンプレートやチェックリストを作成しておくといいでしょう。そうすることで、デザイナーからデベロッパーへの移行が統一性のあるシームレスなものになります。

また、 デザインハンドオフ のたびにまた最初から始める必要がなく、適切なプロセスが既にあるため、時間が大幅に節約されます。

５．仕様書の作成

仕様書によって、高さ、幅、行間、フォントサイズなど、デベロッパーがCSS（HTMLの各要素をどのように見せるのかを指定する仕組み）のプロパティを理解できるようになり、通常、デザインツールがこのプロセスを自動化します。例えば、UXPinにはSpec Mode（スペックモード）が組み込まれており、デベロッパーが UI 要素を選択して仕様を確認できるようになっています。

UXPinは、デベロッパーがコピーできるスターターCSSも自動生成します。また、インタラクティブなコンポーネントを含むプロトタイプがデザインされている場合、デベロッパーはそのコンポーネントの背後にあるコードをワークフローにコピーすることができます。UXPin Merge テクノロジーによるデザインのハンドオフのシンプル化について、詳しくはこちらの記事をご覧ください。

６．チーム横断的なコミュニケーションの向上

どんなプロジェクトでも円滑なコミュニケーションは重要であり、デザインハンドオフのプロセスも例外ではありません。それには、早い段階からデベロッパーをデザインプロセスに引き込むことが重要であり、そうすることで、デザインやアイデアを紹介して説明する時間がもっと取れるようになります。

これは、開発チームだけでなく、デザイナーであるあなたにとっても有益なことです。つまり、デザインプロセスでフィードバックを求めることで、彼らの技術的な専門知識を活用することができるようになるのです。

オープンな対話を続けることで、どのデザイン要素がうまく機能しているか、何が改善されるべきかについて、彼らと話し合うことができ、デザインにポジティブな変化をもたらす方法を理解できるようになります。

まとめると、良いコミュニケーションは以下を実現します：

• デベロッパーにデザインの背景や背景知識を与える
• より速く効率的なデザインハンドオフプロセスを構築する
• デベロッパーを同じ目線に立たせることで、結果的により早く、より正確なデザインの開発が実現する
• デザインハンドオフに関する誤解を避ける

このように、デザインハンドオフの早い段階でデベロッパーを参加させることは、製品開発プロセスでできる最善のことの一つです。次のセクションでさらに詳しくみていきましょう。

デザインの初期段階からデベロッパーを巻き込む

デザインチームは、「自分たちの仕事とデベロッパーの仕事を分けて考える」という間違いを犯すことがよくあり、その結果、デザインハンドオフの最中やその後に多くの混乱が生じることがあります。そしてそれが、開発の不具合が生じたり、間違った解釈を解くのに多くの時間を費やすことに繋がります。

なので、断片的なプロセスではなく、効率的なプロセスを構築するために、早い段階から開発チームを参加させることをお勧めしますが、それには、主に以下の３つのステップを踏む必要があります：

• デベロッパーに見解を求める：デザインプロセスでは、少なくとも自分のデザインが実際のウェブサイトやアプリにどのように反映されるかをある程度把握しておくことが常に重要であることから、デザインハンドオフをスムーズにするために、早い段階からデベロッパーに見解やアドバイスを求めることが重要です。
  
  
• ステークホルダーとの協議にデベロッパーを参加させる：最終的にステークホルダーが求めているのは、「デザイン性の高いプロトタイプ」ではなく、「良い製品」なのです。そこで、デザインプロセスの早い段階でデベロッパーを電話会議や打ち合わせに参加させることで、デザインチームと開発チームの双方が明確な感覚を持つことができるようにするといいでしょう。それによって、彼らは最終的な結果がどのようなものであるべきかがきちんとわかるようになるのです。
  
  
• デベロッパーとデザインのアイデアを共有する：デザインに潜む問題の修正は、「プロトタイプの段階」よりも、「アイデアの段階」での方がずっと簡単です。なので、大きなデザインのアイデアを実行する前に、デベロッパーに、作りたいものが実現可能かどうかを確認するのが一番です。

UXPinで デザインハンドオフ を改善しよう

コミュニケーションは、全てにおいて重要です。デザインチームと開発チームを別々のものとして捉えるのではなく、一つのものとして捉えるのがベストです。開発チームをデザインプロセスに参加させ、全員が同じ考えを持っていることを確認することで、シームレスなデザインハンドオフの実現に繋がるのです。

実際には、UXPinのようなツールを使うことで、デザインシステムからのコンポーネントでプロトタイプを作成することができます。各コンポーネントの機能がデベロッパーにとって非常に明確になり、シームレスな移行プロセスを実現することができます。

Git repo、Storybook、npmからUXPinにコンポーネントを持ち込んで、デザインハンドオフのプロセスを効率化しましょう。詳細はコチラ。