システム/アプリのプロトタイプを絵で描こう

システム/アプリのプロトタイプを絵で描こう

初投稿になります、大友と申します。

システム開発のお仕事って、なかなか効率よく思うようには進みません。
立場が変わってしまった途端、これまで出来ていたことが急に出来なくなったりもします。
そんな時は初心に立ち返ってみましょう。

社会人1年目の私は何をしてたか?

…というわけで、社会人1年目の私が何をしていたか思い出しました。
1年目の私は研修と称して絵を描かされていました。

どういうことでしょう。エンジニアなのに。美術の成績は2だったのに…。

それは、絵は絵でも「自分がこれから作るシステムのUIの絵」だったからです。

実際描いてみた

さて、その私が描いたモノについてですが、言葉で表すと

「ブラウザ上から請求金額を入力し、あらかじめ登録しておいた請求先のDBから請求先の情報を選択転記し、ボタン一つでエクセル文書を社内サーバの指定場所に保管し、同じくボタン一つで社内印刷機から出力する、という機能をエンドユーザの口頭説明から絵に起こす」

というものになります。

百聞は一見に如かず。早速どんなものを書いていたか見て頂く方が早そうですね。

image03

これは今から8年前に描いたもの。今となっては非常に恥ずかしい限りですが、これを読んだ人が「コイツよりはうまく描けるわ!」と思って描き始めてくれたら報われます。

さて、絵を描く行為にどんなメリットがあるのか?

この描写をすることによって自分がどの程度、その仕様を理解しているのかが俯瞰で認識することが出来ます。

・実際に画面がどう動くのか
・ユーザ操作の導線がどう動くのか
・目指すべき姿は何なのか

そういった仕様にまつわる情報を一つ一つ整理して文章化することは非常に複雑なドキュメントになってしまいますが、絵はその半分以下の労力で描けます。

実際の画面を作り込むための情報を言葉でまとめるというのは、どんなに優秀な人でも時間をそれなりに必要とします。しかし、絵は頭の中にイマージが湧いてさえいれば、いつでもすぐに描けます(上手下手はともかく!)。

もちろん絵は絵なりのデメリットはあります。描かれていない部分がある、または認識されない描き方がある。それはつまり仕様洩れの危険がある、ということに繋がりますので、必ずしも万能な手法というわけではありません。

人間がアナログだからこそ、描画することに意味がある

絵を描く=システムをデザインするという工程は、何もお客様と直接話す人達だけの専売特許ではなく、実は技術者にとっても非常に重要なスキルなのです。

「他人に見せないまでも自分が作るシステムの絵をとりあえず描いてみる」というを時々やってみましょう。

思いがけない気付きを生むことがあります。
私も頭が混乱してきた時に情報を整理するために絵に描くとスッキリします。

皆さんもぜひ、「誰かに伝えるとき」「自分が理解を深めたいとき」などに気軽に絵を描いてみてください。その絵がはたして適切だったのかどうかは、場数を踏めば自ずと見えてきます。
まずは現状を描き出してみる。最初の一歩が一番大事。

「今時アナログ手書きを推奨するIT技術者ってどーよ?」という声も聞こえてきそうですので、UIデザイン作成ツールをいくつかご紹介します。

Cacoo
描いた絵をとにかく「共有しやすい」ツール。
ブラウザ上で手軽に使えるのもポイント高いですね。

Prott
複数画面のリンクを実機でシミュレート出来ます。
ユーザ操作の導線を考慮する場合や実際の使用感を確認する場合に有効なツールです。

ビジネスアイコン無料素材
絵を描くときの素材などにどうぞ。

コメント