スムーズにハンドオフするためにデザイナーが知っておくべき5つのこと

Googleのオートコンプリート機能ほど真実を語るものはありません。「デザイン開発のハンドオフが...」と検索バーに入力すれば、すぐに候補として「問題」、「上手くいかない」などの単語があがります。これは、皆がハンドオフに失敗しているということではなく、ハンドオフを常に改善しようと模索しているということです。

それもそのはずです。物事が絶えず変化し、チームが場所やタイムゾーンを超えて仕事をする場合、いつコラボレーターを参加させ、コンテキストを共有し、どのようにして仕事を常に進めるかを知ることは困難となり得るからです。では、どのようにすれば「開発準備完了」を本当の意味の開発準備完了とすることができるのでしょうか? 長い間チームのプロセスの合理化をサポートしてきたFigmaデザイナーアドボケートのLauren Andresが、上手くスピーディにハンドオフするためにすべてのデザイナーが知っておくべき5つのことをご紹介します。

1. 吹き出しの合理化と明確化

アノテーションを使用することで、デザインの意思決定の裏にある意図を共有し、見落とされたくない詳細を強調することができます。もしその詳細を何にすれば良いか分からない場合、吹き出しにしておくと一番役に立つ内容を開発者に相談するのが最善です。たとえば、もし私が既にスペースや色などをバリアブルとして定義している場合、それらを開発者にアノテーションで表示する必要はないかもしれません。しかし、新しいコンポーネントを使用している場合や、プロトタイプでは明らかではなかったかもしれない特定のインタラクションが発生する場合、または異なるプラットフォームで何かが少し違って見える場合は、アノテーションが非常に役に立つかもしれません。

アノテーションを使用すると、テキストやプロパティなどの情報を付け加え、ハンドオフのプロセスで開発者をサポートすることができます。アノテーションとその組み立て方法の詳細については、こちらをご覧ください。

以前は、コメントや付箋でファイルをマークアップしていましたが、それではすべての詳細を確認するのが困難でした。Figmaでは最近、開発モードにアノテーション機能を追加しました。デザイナーが、最終的なモックアップにスペース、寸法、メモなどの重要な詳細を追加するための時間を短縮し、開発者が正しい情報をすぐに見つけることができるようにしました。開発モードはデザイナーと開発者の会話を排除するためのものではなく、両者のコミュニケーションを向上させるためのものなのです。

2. 共有言語の導入

デザイナーと開発者は一緒に仕事をしていますが、その分野はまったく異なります。つまり、解釈に迷いが生じやすいということです(たとえば、「トグル」のようなものについて話しているとき、相手がそれを「スイッチ」と誤解しないようにしたいですよね)。最初に時間をかけて命名規則を揃えるこができれば、後々混乱でいっぱいになることなく、より深い話し合いに集中することができます。

フォント、カラー、スペースなどのより基本的なところについては、バリアブルとスタイルが同じ認識を保つために適した方法です。開発者に確認してみましょう。開発者のコードには、デザインに適用できる命名規則が既に構築されているかもしれません。さらに、ボタンが本文テキストを使用してbg-primary-activeとなるということをデザイナーが言ったときに、開発者がその意味を分かっていると信頼することの方が、正確なHexコードとフォントの詳細を覚えようとすることよりもはるかに快適です。

3. ラベルを使ったファイルの整理

デザイナーとして、Figmaの無限に広がるキャンバスが大好きです。しかし、必要なものの場所を正確に把握していなければ、ファイルで作業するときに混乱し、打ちのめされる可能性があります。開発者にとってこのようなファイルを操作することは、大変な作業でしょう。

ブレインストーミングや発散・収束の段階では、ファイルの見た目が「WIP」(作成途中)であるのはいいのですが、開発者の仲間を招いてモノづくりをしていくとなると、整理しなくてはなりません。

セクションを使用して無限に広がるキャンバスを絞り込み、お互いに分かるデザインのグループ化を行います。そして、「開発準備完了」というステータスをこれらのセクションや準備ができたその他のフレームに追加して、開発者が集中すべき事項が分かるようサポートします。

さらにテンプレートを使用することで、一部のコンテキストの切り替えを減らすことができます。チームが決まった1つのテンプレートで統一されていれば、違うデザイナーと仕事をするたびに開発者がファイルのレイアウトを学習し直す必要はありません。そしてもう1つ私が開発者と話すのは、モバイル用、タブレット用、デスクトップ用のデザインであれ、またはハードコーディングのテキストと動的なテキストの明確な区別であれ、開発者がどんな情報を必要としているかです。そこから、チェックリストを作成して精神的な負担を減らし、自身や他のデザイナーの仕事がいつ終わるかを知ることができます。

4. 以前のデザインをアーカイブする

重要なものとそうでないものにページを整理する際、過去に使用したものと現在のものに分けます。すべてを削除する必要があるとは思いません。10回ほど繰り返したあたりで結局スタートに近いところまで戻ることがあります(みなさんはどうですか?)。そうなると、過去にさかのぼって以前のバージョンと比較することが有用です。重要なのは、以前のものと新しいものを明確に区別することです。以前のデザインは、明確にラベル付けされたアーカイブページにすべて保管して、混乱を最小限にすることをお勧めします。またブランチ機能を使用して、ハンドオフで開発者に集中してもらいたい作業だけを凍結するのもお勧めです。

5. コンポーネントの活用

もちろん、ハンドオフはデザインそのものに限ったことではなく、そのソリューションに至った経緯、理由、それを実現するためのビジョンを、コラボレーターに理解してもらうためのものでもあります。開発者にとってFigmaは、たとえ作業がそのスペース外で行われるとしても、情報やコンテキストを収集する場です。やりとりを減らしつつ、開発者が必要な情報を見つけるサポートをどんなことでも実行することが有用です。戦術的には、私はコンポーネントの説明機能が気に入っています。この機能のおかげで、私のコンポーネントの使用方法の詳細を常に開発者が確認でき、使い方を調べるためにドキュメントがある別のファイルに戻る必要がなくなります。

私はまた、開発モードの開発リソースを活用することを開発者にお勧めします。これにより、今後開発者に関連することが分かっているリンクを追加することができます。私は、自身のコンポーネントの説明にリンクを追加することはできますが、実際はどのリンクが最も有用となるかが分からないこともあります(リンクにアクセスできない場合すらあります)。私は、私が推測するよりは、開発者が開発者にとって役に立つと分かっているものを付け加える方がよっぽど合理的だと思います。

デザイナーとして、私たちはFigmaを頻繁に使用しています。多くの機能が私たちにとっては当たり前となっていますが、他の人にとっては当たり前のことではないということを忘れがちです。何年か前に一緒に仕事をしていた開発者に初めてFigmaを紹介した際、私には多くのことが当たり前になっていて、アセットをエクスポートできることやファイルをお気に入りに追加できることを、開発者は知っていると私が思い込んでいたのを覚えています(同様に、今日私がVSコードを扱ったとしても、誰かが方法を教えてくれない限り、できることの半分も分からないでしょう)。Figmaは、開発者が使う多くのツールの1つにすぎません。つまり、開発者を導き、私たちと協力して仕事をできるようにするのは、私たち次第ということです。

アノテーションの詳細と開発モードの次のステップについてはこちらをお読みください。

開発モードでのハンドオフを合理化する方法とデザイナーと開発者のコラボレーションの道を切り開く方法の詳細もご覧ください。