UIデザイナー２年目までの失敗と、３年目の今だから分かること

こんにちは！プロダクトデザイン部の大竹（@satocalog）です。
私はChatworkの新機能開発などを主に担当しています。

現在UIデザイナー３年目となり、できる・分かることも増えましたが１〜２年は失敗と反省の毎日でした。今回は、当時の失敗もオープンにして、現在のUI制作フローを紹介していきます！

現在のUI制作フロー

課題確認／情報収集／デザイン案制作／ユーザビリティテスト／改善...このようなでステップで進めています（ざっくり）。

各ステップで担当のプロダクトマネージャー（以下PM）とコミュニケーションを取りながら、ときにエンジニアを巻き込んで制作をします。もちろん担当する案件の優先度や規模によって変わる場合もあります。

ポイントは情報収集と、適切なタイミングでの会話

失敗だらけだった１・２年目を経て、今大事だと思うポイントはこの２つです。

この２つはプロダクト開発全体スケジュールに大きく影響します。例えば、情報収集が足りないとUI制作段階で考慮漏れを発見し、最悪の場合最初からデザインのやり直しです。さらに情報収集が甘いとロジック立った情報設計ができません。
すると、PMを含めたPJメンバーにデザインの説明が困難となり、開発がスムーズに進みません。そのため情報収集が重要だと考えています。

もう少し詳しく、情報収集の中身について話していきます。

🔍 プロダクトの既存仕様を調査する

情報収集では、大まかに他社サービス調査・自社サービス調査をおこなっています。

私が特に大事だと思うのは「自社サービス調査」です。
普段から自社プロダクトは使っていますが、いつも利用しない部分も含めて見逃しが無いように、細かく仕様を確認します。例えば、サービスの利用プランによる差などです。
また、ChatworkはWeb・iOS・Android、３つのクライアントで利用できるため、それぞれの特徴や仕様を把握する必要もあります。

既存仕様の確認は、新しく作ろうとしている機能が、今あるプロダクトに対してどのような影響を与えるのかを理解することです。
つまりそれは、プロダクトの一貫性を守ることに繋がります。だから自社サービスの調査が大事だと考えています。

🗣 PMやエンジニアと適切なタイミングでの会話

…意外と単純....と思いますよね😉
でも入社１・２年目のときは「適切なタイミング」が分からず、私はよく悩んでいました。
もう少し具体的に言うと、「どのタイミングで・誰に・何を確認しておけば」スムーズにUI制作が進むのか分からなかったのです。
これらを解決するための判断基準も持っていなかったため、「もっと先に聞いておけばよかったのか…」と、デザイン検討をやり直す場面が多々ありました。（夜の東京タワーを見つめながら１人反省会をしました…いい思い出です）

そんな失敗を経て、現在はどういった場面でPMやエンジニアと会話をしているのかお話していきます。

🐨 PMの場合
UI制作フローの各ステップで、情報共有をおこなうことが大切です。
その中でも私は、デザイン案制作前にこまめな会話をするよう意識をしています。
このとき情報共有をしつつ、ユーザーの課題とは何か...といった話もしていきます。私たちがたどり着きたいゴールはあそこだよね！といった感じです。

デザイン案制作前の情報共有を意識する理由は単純です。デザイン案を提示する際に、調査内容の話をしなくて済むようにするためです。
いきなり調査内容とデザイン意図の両方を話そうとすると、大量の情報を一度に渡すことになり、話す方も聞く方も疲弊してしまいます。
各ステップごとでPMと会話を重ねると、都度ユーザー課題の認識合わせもできますし、デザイン案を提示するときには、課題解決にベストなデザインとは何かに集中して話ができるようになります。

🦊 エンジニアの場合
エンジニアとはデザイン検討時に会話をするように意識してます。
ちなみに、この段階ではデザインの発散段階なので「この案が良いぞ！最高だぜ！」とかは考えていません。いろんなUIの可能性を出してみて、エンジニアとの会話を通して現実的に見直す感じです。

具体的には、「こういった表現をしたいけど、実装可能？」「AとBはどれくらいの工数がかかる？」といった話をしています。また実装側で調査が必要と分かれば、その場でお願いしたり、一緒にコードを確認したりします。

なおChatworkのエンジニアの中では、こうした会話をしたあと「プロトタイプできちゃった」と知らせてくれる方がいます。開発スピードが早くておっかないです（褒め言葉）。

ちなみに入社当初は、開発の実現性や実装方法をエンジニアに聞いていなかったので、何回もデザイン検討をやり直しました。当時の担当エンジニアには随分と迷惑かけてしまいましたが、そのときに「ココも考慮した方がいいよ〜」と解説含めて開発の裏側を教えてもらえたことが、今のUI制作に活かせているかな〜と思います。

✅ まとめ

UI制作では、情報共有と適切なタイミングでの会話が大事であり、これによってスムーズなプロダクト開発に繋がる、というお話でした。

もう少しリアルなプロダクト開発については、以下の記事にまとまっています。実際に私が担当したプロダクト開発でもあり、ユーザビリティテストについても書かれています。

今回、自分の失敗や改善を言語化したことで、改めて自分のUI制作フローを振り返る機会になりました。
今回は２点をピックアップしてお話しましたが、実は情報設計もスムーズにUI制作をする上で大事なポイントです。これについてはもう少しスキルを磨いてから、アウトプットしていきたいと思います。

引き続き、ユーザーに喜んでもらえるプロダクト開発を頑張っていきます！それでは！

---

👉『Chatwork Dev Day 2021』開催！

Chatwork Dev Day 2021

Chatwork のプロダクト 10 周年を記念して、初となる自社テックカンファレンス『Chatwork Dev Day 2021』を開催します！
テクノロジーの話だけでなく、PM×デザイナーのトークセッションもありますので良かったらご参加ください！

---

Chatworkでは、一緒に働いてくださるデザイナーを募集中です！🎉
ご興味がありましたら、ぜひ募集要項をチェックしてみてください。