UI Flowsで考える管理画面の話

本記事は管理画面Advent Calendarのために書かれました。

管理画面チラ見せ♡ナイトスタッフのコジマです。
最近はiOSやAndroidアプリの受託開発のディレクターをやっていますが
現在携わっている案件はサービス全体を作っているため
PCで見るWebの管理画面まで作っています。

この管理画面、最初はワイヤーベースで議論をしてエンジニアが実装…という形で進めていたのですが、ワイヤーだけでコミュニケーションを取ろうとすると要件漏れがたくさん発生していました。だからといって仕様書をガッツリ書いている時間もない…。
ということで手戻りをなるべく無くすために取り入れたのが、37signals発案で有名な「UI Flows」です。
A shorthand for designing UI flows by Ryan of Basecamp

やり方はとても簡単で「ユーザーが見るもの」と「ユーザーがすること」を書き出すだけ。それを以下のような感じで図に起こしていきます。

「ユーザーがすること」が複数になってきたり、条件分岐などが発生するようなものはこんな感じで枝にしていきます。

管理画面の実装って運用中のサービスは特にスピード感を求められたり、現場にデザイナーがいなくて、キレイに作りこんだりできなかったりってのが現実だと思います。
UI Flowsみたいなもので、ディレクター（プランナー）とエンジニアのコミュニケーションを円滑化するだけで、管理画面って改善されていくんじゃないかなと思いました。