デザイナーがエンジニアに働きかけるべき6つのコミュニケーション

デザイナーとエンジニア間の円滑なコミュニケーションは、良い製品を作るために欠かせません。

Web制作会社の中には、デザイナーとエンジニアが2つのチームに分かれている会社があります。エンジニアの中にも複数チームが存在することも珍しくありません。
デザイナーとエンジニアのチームが別でも同じでも、定期的なミーティングや日々の協力なしではプロジェクトの成功はないでしょう。

デザイナーとエンジニアのキャリア両方をもつ私が、ちーむの良いコラボレーションを生むためのヒントをお伝えします。

1. エンジニアをプロジェクトの初期段階から参加させる

製品がどのように機能するかを決める会議に参加し、早い段階で仕様を知るチャンスを与えます。

大規模なチームを必要としない場合、プロジェクトマネージャーが参加するだけで十分ですが、必要に応じて他のメンバーを加えましょう。初期にエンジニアが関与することで、エンジニア自身にも当事者意識をもたせることができます。

デザイナーとエンジニアの仕事内容は重なっている部分があります。デザイナーがコードを書くこともあるし、エンジニアがワイヤーフレームの作成や、ビジュアルのデザインに携わることもあります。ですから、困ったことがあれば遠慮せずにチームのエンジニアに助けを求めてみてください。他社の気になるプロジェクトについて、エンジニアに意見を求めるのもいいでしょう。

経験豊富なエンジニアは、知識と洞察力があります。彼らに製品をテストしてもらうことで、デザイナーでは気づけなかった問題点や改善策を教えてもらえるかもしれません。

Free-Photos / Pixabay

エンジニアとの意思疎通不足で、技術的な問題に直面したり、設計の変更が必要になったりといった問題が発生し、4ヵ月後にでき上がったものが最初の計画と違うなんていうのはひどい結末です。一度クライアントから同意を得たデザインを、あとから「できない」と言ってしまうのは良くない印象を与えてしまいます。

2. インタラクションには必ず注釈をつける

インタラクションには、注釈とドキュメンテーションを加えます。これは、見逃し防止になります。
ボタンがどのように変化するかなどの指定、注釈を作成します。
『Sketch Notebook』などのツールで、図をつくってください。『Sketch Notebook』なら、注釈の表示オン/オフが切り替えられますし、注釈の見え方を変更することもできます。

たとえば「検索結果のリストを表示する画面」のデザインを伝えるためのテキストを作成するとき、次のような内容を含めましょう。

• 現在表示されているリストの下に、表示件数は統一したまま検索結果をロードしていますか？
• 結果を読み込むときに、アニメーションを使用していますか？
• 最後の検索結果に達したらどうなりますか？ 「追加読み込み」ボタンは消去しますか？
• 結果がロードされているときにスピナー（ローディングアニメーション）を使用していますか？

あなたがデザイナーであればこれらは当たり前に思えるかもしれませんが、一般的にはそうではありません。客観的にみてわかりにくい箇所がないか吟味し、注釈を追記しましょう。

上記のような説明が足りない場合、エンジニアは作業を進めるために自己判断するか、仲間に確認します。エンジニア側からデザイナーに、意図を汲んだ実装ができているか確認しなければなりません。そんな手間をかけないためにも、最初にわかりやすい注釈をつけましょう。

スタイルガイドを作るのも、効率アップに効果的でしょう。製品開発の一貫性を確認するのに役立ちます。

3. ワイヤーフレームの代わりにプロトタイプを作成する

可能であれば、プロトタイプやインタラクション・アニメーションを作成します。対象をどのように働かしたいのかを伝えれば、限りなく誤解を減らせます。

デザイナーのケリー兄弟による言葉は、とても的をえています。

“If a picture is worth 1000 words, a prototype is worth 1000 meetings.”「絵に1000の言葉の価値があるならば、プロトタイプには1000年の会議と同じ価値があります。」

もしプロトタイプを作る時間がなくワイヤーフレームを使うなら、2と4を徹底してください。

4. 問題定義と解決、質問、レビューの時間を個別に用意する

人によってタスクの優先順位が異なるので、同じ画面を見ながらチーム内でコミュニケーションをとって進めます。

そのようなオープンなコミュニケーションは、良し悪しや善悪を判断したり互いの考えを変えるためのコミュニケーションではなく、現在の自分の立ち位置を知り、より明確な選択と行動をするために行うものです。

デザイナーとエンジニアが別のチームでも、オープンなコミュニケーションは可能です。
エンジニアの中には電話や会議を嫌う人がいますので、相手にとって最良なコミュニケーション方法を見つけ出してください。

5. 整理する

エンジニアは、インスタントメッセージやEメールの添付ファイルからデザインデータを受け取りますが、メールボックスには絶えずメールが届きます。最新のデザインを見つけようと思ったとき、メッセージやメールを掘り起こして探すのは面倒です。複数のデザイナーが独自のやり方でデータの管理を行なっている場合は特に大変。

クラウド上に綺麗にまとめて整理してあれば、エンジニアの作業を簡単で迅速にします。一貫した方法で、カンプとレイヤーを管理してください。

6. エンジニアにもユーザーリサーチの結果を共有する

本来の役割とは関係ないように感じるかもしれませんが、リサーチプロセスに関わることはユーザーの感覚を確かめるのに欠かせません。デザインの理由を理解するのにも役立ちます。

通話を聞く、録画を見る、記録を読むといった、関わり方で大丈夫です。

まとめ

自動車メーカーの創設者ヘンリー・フォードは、次のような言葉を残しました。

“Coming together is a beginning. Keeping together is progress. Working together is success.”
— Henry Ford
「参画は始まり。団結は進歩。共同作業は成功。」

チームのビジョンを達成するためには、共感、コミュニケーション、設計が不可欠です。いかにチームの一員になりきれるか。それを決めるのはデザイナーの振る舞い次第です。製品をともに作っているということを忘れないでください。

（翻訳：Yuri Tanaka）