【UI研修 #3】UX/UIデザインの制作フロー

こんにちは、f4samuraiのUIチームリーダーOです。
第3回目のUI研修レポートです！

今回の研修では、現在運営中のタイトルの事例をベースに、新規実装や機能改修におけるUIデザイナーの役割と、大まかな制作フローについてお話ししました。

開発チーム内でのUIデザイナーの役割は、会社・チーム・個人によって微妙に違いが出るものだと考えているので、今回お話しする内容についてはあくまでも一例として紹介させていただきます。

研修で伝えたこと

UIデザイナーとして「設計書通りに作ってはいけない」という言葉を先輩から聞いたり、自ら仕事をするなかで強く実感するタイミングがあります。

言い換えると「設計書の初稿に書かれていることが全て正解ではないという認識を持つことが必要」だということです。

実際にデザインを作って実装してみては「なんか違う」「なんか使いにくい」などの社内レビューを受けて延々に作り直さざるを得ない状況が起こるのは、設計書の初稿を鵜呑みにしすぎた状態でデザインや開発を進行してしまっていることが代表的な原因の一つだと思います。

「設計書通りに作ってはいけない」という言葉には、以下のような複数の意味があると思っています。

ケース1：設計書に書いてある内容が信用できない、という意味
記載された内容にクリティカルな考慮漏れや辻褄が合わない部分が多く、設計として成り立っていない場合です。

こういう設計書の場合は一字一句読み込んでしまうと時間の無駄なので、最低限「何がしたいのか（目的）」だけでも読み取るようにします。

ケース2：設計書初稿はあくまでも“仮説”の段階である、という意味
プランナーとデザイナーは、 実装へと進行する前に検証のサイクルを何度も回し、開発工程の手戻りを最小限に抑えることを心がけなければならないと思っています。

デザイナーは主に見た目を作り、ユーザーが画面から受ける印象や学習フロー、感情の変化の検証をすることで検証のサイクルに貢献できると考えています。

プランナー・エンジニアよりも、デザイナーのほうが見た目を作る瞬発力を持っているので、全体フロー図もデザイナーが構成した方が進行が早くなる場合が多いです。

開発工程ではたくさんの仮説と検証、決め事が必要になりますが、デザイナーはグレーゾーンになっている決め事をUIデザインの側面から積極的に拾う行動が必要だと思っています。

もちろんエンジニアにも、検証内容を限定したうえで検証のサイクルに参加してもらわないといけない場面はあると思います（毎度お世話になっております……神……）。

細かい部分まで共通認識を持てているチームが理想

他社のUIデザイナーの方とお話しする際、「設計書に書いてある情報が少なくて……（苦笑）」や、「それでも開発チームで相談しながら詳細を詰めるようにしてます」という話をよく聞きます。

とはいえ、設計書がどれくらいの精度であれば十分なのかはデザイナーによって微妙に違う気もするので、精度の高い設計書を書いてもらうことを求めすぎるのも不毛なのでは……とよく思います。

スタートは「ふわっとしている設計」でも、そこから可視化・提案できるUIデザイナーに需要があると感じますが、その前提として“各職種が共に伴走できる関係値”が必要だと考えています。

設計書の初稿の情報がどれだけ少なくても、それで投げっぱなしにせず、その後一緒に検証と意思決定をしてくれる信頼感があれば十分だということです。

ふわっとした設計書を投げっぱなしのプランナーをはじめ、 設計書の通りに作るだけのデザイナーとエンジニアで作られたアプトプットは、たいてい悲劇的な仕上がりになるものだと思います。

デザイナーとして“伴走している感”を醸し出すには、 プランナーは「画面UI的な視点で可視化、提案し続けること」、エンジニアには「デザイン素材を連携したら終わりではなく懸念事項があれば一緒に考えること・進捗をこまめに伺い、 データ不備があれば即対応し、実装確認をしっかりすること」のような行動を心がけることが大事だと考えています。

制作フローについて

いま私が所属しているプロジェクトでは以下のような流れで制作しています。

弊社では企画/設計の上流工程から、なるべくUIデザイナーも関わることを理想としています。

例えば設計の打ち合わせに参加しつつ、サッとイメージ図を作成するなど、設計者の想像をビジュアル面で刺激し、より具体的にイメージできるようサポートする気持ちでいます。

ワイヤーフレームやデザインを制作する際は、設計の意図を最大限に汲み取り、必要に応じてデザイナー視点での提案をすることが必要です。

上流工程から関わり、コミュニケーション量を増やすことで、結果的にデザインの精度も上げることができると考えています。

今回の研修では上流工程である①〜②の部分について厚めにお話ししましたが、今後はその後の工程についてもより具体的に共有できればと思っています。

開発においてUIデザイナーに求められている役割はなんだろう？

研修の合間に、参加メンバーとUIデザイナーに求められていると感じる役割について意見交換をした際、以下のような意見が挙がりました。

・能動的に他職種とコミュニケーションを取りに行くこと
・とりあえず形にすること
・全体感を共有すること
・デザイナーだけでなくプランナーとエンジニアの視野も意識すること
・提案した画面が実装的に懸念があるとなったとき、目的から逸れないように別案を提示すること

そのほか、自分でまとめた他社ゲームの調査資料を参考にしながらプランナーへ共有する、というメンバーもいました。徳が高いですね。ぜひとも幸せになってほしいです。

おわりに

今回の研修では大まかなUX/UI制作フローについてお話ししましたが、細かく決められたフローで開発が進められる状況はなかなか無いからこそ、各々がまず自分の役割を理解し、まわりの状況をよく見て、臨機応変に行動することが重要だと考えています。

次回はもう少し具体的に、ワイヤーフレームの制作フローを分解してお話しする予定です。
お楽しみに！

▼f4samurai Recruitサイト
さまざまなポジションにてメンバーを積極採用中です。「まずはちょっと話を聞いてみたい」というご相談も歓迎いたします。

f4samurai