手戻りがゼロに！？ 情報整理を変えた独自UIフロー
こんにちは！UIデザイナーの大竹（@satocalog）です。最近では、UXリサーチ周りやワークショップ設計をゴニョゴニョしています。
今年Chatworkでは、新しいUIデザインフローが作成されました。そのきっかけについては、以下の記事で紹介しています。
今回は、独自UIフロー【MONDRIAN】の前半（要件〜構造）について紹介していきます。
この前半フローのおかげで私は作業の手戻りが無くなったので、かなりの推し部分です。
デザイン設計に入る前の徹底的なウォームアップ
ステップ１【要件立て前情報整理】では、PRD（どのような製品を作るかを定義した文書）の内容を読み解き、既存機能と既存要件をドキュメントにまとめます。
まとめ方を考える必要は無く、MONDRIANのテンプレートに沿って情報を埋めるだけです。
より具体的な記載内容は、以下の通りです。
影響のあるユーザー／影響・依存関係のありそうな機能
開発対象（クライアントの開発環境など）
既存機能の概要
新たに機能を追加・改修をおこなう際に、こうした既存の設計意図や改定すべき仕様を把握していきます。
ドキュメントの記載項目は、マクロな部分とミクロな部分があります。そのため、膨大な情報量が自然と頭の中で整理されます。
これは私の話ですが、情報の粒度を分けて整理することで
頭の中でマクロ←→ミクロ視点の切り替えがスムーズになりました。
これにより「△△の条件下ではどうなるの？」「〇〇が起こりそうだからエンジニアに事前確認取ろう」と考えられるようにもなりました。
このように、情報を多面的に引き出せるようになった結果、先回りしたアクションを取れるようになり、手戻りの発生がゼロになりました…！🎉
羅針盤を作る
ステップ２【コンセプト／UXUI要件策定】では、案件全体のテーマやコンセプト、方針を決めます。さらに、UX要件とそれに紐づくUI要件を立てていきます。
例
【UX要件】ユーザーが自分の情報を正しく入力することができる
そのためには、
【UI要件】ユーザーが回答方法を簡単に理解できる
ここで策定したものは、施策の羅針盤となるためプロダクトマネージャーと合意を取ります。
やること／やらないことを白黒ハッキリさせる
ステップ３【情報・要件整理】では、画面遷移図や画面機能要素を一覧化します。
「作るもの」の情報だけではなく「要件から外すもの」の情報も洗い出しし、チームで確認します。
要件が上手く決まらない場合は、判断に必要な情報を集めます。
私は、他社調査（直接的・間接的）や、社内メンバーに簡易インタビューをかけたこともあります。
画面遷移図では、miroを使って雑なワイヤーを作成します（人によって異なります）。
私はこのタイミングでエンジニアを巻き込んでアイデア発散をし、動線やエラーパターン、開発実現性もヒアリングしてUI案を詰めていきます。
おまけ：なぜ "モンドリアン"？
弊社オリジナルのUIフロー MONDRIAN。名付け親は私です🙋♀️
『コンポジション』で有名な、ピエト・モンドリアンから取っています。
あくまでも私のイメージですが、
UIデザインのフローとは、正解も分からないフラットな状態からルールや情報設計で骨格を立て、見た目を整えるものだと捉えています。
自身が『コンポジション』を見たとき、とてもシンプルだと思ったと同時に、作者の意図によって画面が構成されていると強く感じました。
キャンパス内部をどのように分割し、形作り、必要な部分を着彩する…それがUI設計に似ていると感じました。
そうしたUI設計とのつながりを感じつつ、昔から好きな作品という事もあり、部内メンバーに推した結果【MONDRIAN】が採用となりました😊 ﾁｬﾝﾁｬﾝ
=== 他の実例記事もあります！ ===
Chatworkでは、一緒に働いてくださるデザイナーを募集中です！🎉
ご興味がありましたら、ぜひ採用情報をチェックしてみてください。
この記事が気に入ったらサポートをしてみませんか？