UIデザイナーがエンジニアとコミュニケーションをとる際に注意すべきこと

こんにちは、株式会社PentagonでPMデザイナーをしているMorikawaです。
今回はエンジニアメンバーとのコミュニケーションについての記事を書かせて頂きました。
私自身PMとしてやUIデザイナーとしてエンジニアの方とコミュニケーションをとる機会が多くあります。今回は私自身のコミュニケーションの取り方の見直しも含め記事にさせていただきました。

【こんな人に読んで欲しい】
-これからUIデザイナーを目指す方
-これからPMを目指す方

【この記事を読むメリット】
-エンジニアの方とのコミュニケーションが円滑に行くために注意することを知ることができます。

【結論】
デザイナーがエンジニアとコミュニケーションをとる際に注意することは、イメージや認識に齟齬が無いようにすることです。今回は認識の齟齬を防ぐためのすり合わせ方法などを紹介していこうと思います。

目次

フェーズ全体を通して意識すべきこと

Pentagonでアプリ開発をする際は、画面設計フェーズ→デザインフェーズ→開発フェーズと大きく分けて3つのフェーズで開発を進めていきます。
※お客様のアプリ開発を通してのやりたいことが不明確の場合は、画面設計フェーズの前に要件定義フェーズを設けることもあります。
フェーズごとに注意することは異なりますが、フェーズ問わず全体を通して意識しておいた方が良いことを3点上げさせていただきます。

実装コストを意識した仕様検討を行う

デザイナーがアプリの挙動や画面に対しこだわりを持つことは良いことですが、こだわりを意識するあまりエンジニアへの負担をかけすぎてしまうことはあまりよくありません。その挙動やデザインにすることによって『ユーザーが得られる効果』は何か。それを実装するコストをお客様が払う価値があるのかを考えましょう。
また、必要な場合はエンジニアやお客様に理解いただけるよう説明する必要があるのでその点注意しましょう。

知らないことは知らないと言う

エンジニアとデザイナー感で知識の領域が違うとは言うまでもありません。しかしエンジニアと会話をする中で『相手の話をさえぎりたくない』や『そんなことも知らないのかと思われたくない』などと考え、知らない言葉など知ったふりをしてしまうケースは意外と多くあるかと思います。
前提の認識に相違がある状態で話を進めてしまうと、後々大きな手戻りが発生するケースもあるのでわからない言葉や仕組みなどは、その場で解消しておくほうが良いでしょう。

コミュニケーションをこまめにとること

コミュニケーションをとる頻度が少なくなれば、開発中アプリの認識の齟齬が生まれやすくなってしまいます。なので、仕様面や実装面で気になる箇所や相談したい箇所があれば、なるべく早い段階で話し合えるようにする必要があります。
ペンタゴンではフルリモートで勤務していますが、コアタイムにはmetalifeに集まることで、気軽に仕様や進行状況について話合える環境を作っています。

画面設計フェーズ

定例ミーティングに参加してもらう

プロジェクトの進捗状況や内容を理解するために画面設計フェーズから、エンジニアにも定例のミーティングに参加してもらいましょう。認識の齟齬をなくして後工程での仕様変更やデザイン修正を減らすことができるため有効的だと思います。また、Figmaなどの画面設計データをこの段階から共有することで不確定要素をより正確に洗い出すこともできます。

デザインフェーズ

インタラクションを言語化して伝える

PentagonではデザインツールにFigmaを使用しております。プロトタイプの作成は案件により行うこともありますが、行わない場合は画面のデザイン(平面のみ)になることが多いです。この際に画面の遷移の仕方やボタンを押した際の挙動などを言語化する必要があります。必要に応じて動画などを通してエンジニアの方とすり合わせを行ったりもしています。
デザイナーからすると当然の挙動だったとしても、エンジニアからすると当然とは限りません。認識をすり合わせるためにもメモやコメントを通して伝えましょう。

開発フェーズ

デザインチェックを行い明確に修正依頼をする

アプリが一通りできた段階でTest flightなどで試作品をエンジニアからデザイナーに共有します。
デザイナーは想定していた画面になっているか、想定した挙動なのかの確認を行いエンジニアにフィードバックします。
その際に注意することは、『どこをどのようにして欲しいか』を明確に伝えることです。エンジニアがデータと照らし合わせ確認に時間をかけることが無いようにする必要があります。

Pentagonの場合は下記のように付箋を使うことで箇所を明確にしています。

また文章については、どのようにして欲しいか要望を明確にします。(下記参照)
×フォントサイズがデータと異なっています
○フォントサイズを15ptに修正してください

まとめ

最後までご覧いただきありがとうございました。今回はデザイナーがエンジニアとコミュニケーションの取る時に注意することについて記事を書かせていただきましたが、総じて『認識の齟齬をなくすために何をするのか』が重要になってきますので、皆様も今回の記事などを参考にして自身の環境にあった方法を模索してみてはいかがでしょうか。

採用情報はこちら
目次