手書き風ワイヤーフレームで進める画面定義の話

1. 手書き風ワイヤーフレーム
で進める画面定義の話
2013.4.27 M.Sugii

2. 前提の話
SIer です。
業務系システムが主な守備範囲です。
Java ならスイスイと書けます。
デザインとか苦手です。
HTML は書けますが、 CSS は苦手です。
というエンジニアが画面定義をする時の話です。

3. iPLOTZ
http://iplotz.com/
無償の画面お絵かきツール
手書き風
PDF,HTML,png/jpg で出力できる
WEB 版とインストーラー版がある
有償だと WEB 上で画面を共有できる

4. iPLOTZ

5. iPLOTZ
そこそこ揃ってる部品
ドラッグ＆ドロップで置く
だけ
直観的に操作できる

6. iPLOTZ
補助線が出るので配置が乱れない。
手書き風といえど、配置の乱れは全体の印
象を悪くする。
補助線で配置もきれいにできる
。

7. 使った理由
顧客は画面を見ないと実際の作業やサービ
スをイメージできない
かと言って HTML を作るのは大変
エクセルや Visio でもいいけどイマイチだ
よね
… ということで Try ！

8. HTML で要件定義しちゃいけない
「画面定義の段階で実際に HTML で画面を作っちゃって、
お客さんにみてもらおう」
よくある話です。
実際の HTML 作って見せると顧客は喜ぶし
イメージしやすい
だけど・・・
http://www.flickr.com/photos/36928267@N06/7465489042/

9. HTML で要件定義しちゃいけない理由①
パッと見てダサいとちゃんと見てくれない
僕らがカッコイイ画面をササッと作れるわけがない
http://www.zariganiworks.co.jp/korejanairobo/

10. HTML で要件定義しちゃいけない理由②
http://www.flickr.com/photos/14293046@N00/2854296676/
「この色をもうちょっと見やすく」
「この文字をもう少し大きく」「ボタンも・・・」
「このリンクは動かないけど実装されるんだよね？」
細部のチェック
… が始まる ！
どうでもいいことしか
… 指摘してくれない

11. HTML で要件定義しちゃいけない理由③
http://www.flickr.com/photos/57855544@N00/340654159/
・時間がかかるので要件定義の期間が長くなってしまう。
・こだわりだすとキリがない。
・やっつけ HTML
修正が大変

12. HTML で要件定義しちゃいけない理由④
http://www.flickr.com/photos/71419691@N00/3120731043/
「製造で流用できる」は嘘
先輩！流用できません ><
結局作り直したりすることが多い。

13. HTML で要件定義しちゃいけない理由⑤
・使うライブラリによってはデザインや動きが違ってくる
・「要件定義の画面と違うので同じにしてください」
ということになってしまう
・「ちょっと違う」程度につぎ込む工数・・・。
画面定義で作った HTML と実装が
変わってしまう。

14. 手書き風マジック
画面のイメージはわかってもらえる
色とか部品の大きさの議論にならない

15. 手書き風マジック
動作しないのでアラ探しにならない
「この画面で何をするのか」「何を表示す
るのか」などの我々が決めたいこと
に議論をフォーカスできる

16. 使った結果
作るの簡単
顧客の評判もそこそこ
狙い通りの打ち合わせ
出力された HTML はイマイチ
設定ちょっと面倒な部品もある
（グリッドとか）

17. 注意すること
実装できなさそうな部品を使っちゃうと後
悔する。
実際の見た目については開発側の責任でイ
ケてる画面を作ること。
無償版だと作れる画面が少ない（５画面）
無償版だとチームで共有できない
（ export …ファイルで管理していた。ちょっと面倒 ）

18. 似たようなツールはいっぱいあるよ
MS 「 SketchFlow 」
http://www.microsoft.com/expression/products/SketchFlow_Overview.aspx
他にもあるので
調べてみてください