ウェブアプリ開発未経験者のための見積もりと仕様策定

新しいアイディアはあるが開発は未経験、という方が前提知識なしで数時間かけて工数の見積もりと仕様を策定するための手引きです。

1. 画面の遷移図をつくる

ウェブのアプリケーションを開発するならまず画面の遷移図を作ります。

試しに cacoo という無料サービスでざっと描いてみました。見映えは悪いですが。。普段は紙かホワイトボードに手書きが多いです。

  • ユーザは1人しかいないと仮定
  • 最初にアクセスするのはトップページと仮定
  • 始点は丸、ページは四角、ページ以外 (ここではメール) は角の丸い四角、発生しそうなエラーは台形 (この辺は適当でいいと思います)
  • ブラウザでアクセスする順で線で結んでいく

描き漏れがあってもどうということはないので、主要なページが網羅されていれば十分です。

競合サイトの遷移を真似するのが基本です。

エラーというのは例えばYahoo!JAPANのログイン画面にアクセスしてIDやパスワードに何も入力せずにログインをクリックします。赤いメッセージで注意書きが出ると思いますが、これがエラー画面です。どんなエラーが考えられるか思いつかない場合は、飛ばして問題ないです。

量が増えてくると平面上に描くのが大変になってくると思いますが、それはつまり開発も大変だ、ということです。

2. 入力と加工、出力を列挙する

ユーザからの入力 (基本はマウスで選択かキーボードでの入力) を重点的に羅列してみてください。

例) twitter

入力: ユーザ情報 (名前、ユーザ名、パスワード、メールアドレス), つぶやき, フォローする
加工: @や#単語にリンクを張る
出力: ユーザごとにつぶやきの一覧

例) 楽天

入力: 出店者情報 (名前、説明文、住所), 商品情報 (通し番号、名前、価格、説明文、在庫数), 購入者情報 (氏名、住所、クレジットカード番号), 購入商品
加工: なし
出力: 出店者の一覧, 商品の一覧, 決済画面

例) Google

入力: ウェブページ群, 検索語
加工: ウェブページを検索可能な状態にする
出力: ウェブページのタイトルとページの一部一覧

例) 顔チェキ

入力: 写真
加工: ルールに従って写真と有名人を紐付ける
出力: 有名人の名前

入力には3種類、

  1. 不特定多数が入力 (twitterや顔チェキの各ユーザ)
  2. 特定少数が入力 (楽天の出店者)
  3. 機械的に入力 (Googleのクローラー)

2番目は、手動なので量が多過ぎると高くつきますが、メディアサイトなどでは頑張りどころでもあります。
3番目の実現は開発者の力量にかかってきます。

入力項目を先の遷移図に細かく書き込んでいくのもいいと思います。細かく書くと、twitterより楽天がどう複雑か、わかるはずです。また入力は、数が多い、高頻度、ファイルサイズが重い、個人情報のように重要、な場合、扱うコストは増大します。

続いて加工は、先の”機械的に入力”と同じで高くつきます。検索も、画像や音声、動画を編集とか何か施すのも高コストです。

入力と加工(保存)があれば、出力に難易度の差は無いです。

まとめ

できあがった図は複雑でしょうか。簡単でしょうか。
ここで目指すのは、作るものの全体像をつかみ開発経験者と共有できる図を描くことです。

数時間かけて描いた最初の図でさえ複雑であれば、開発も大変でしょう。そして重要なことは、複雑さをある程度認識した上で開発者と会えば、どこを削るかどういう順番で開発するか等々議論でき結果的にコスト削減に繋がるはずです。

追記
どう削るか等の心得がたくさん書かれています。文章量はとても少ないので一読の価値アリです。
Getting Real: The Book by 37signals

This entry was posted in いじる. Bookmark the permalink. Both comments and trackbacks are currently closed.

Page optimized by WP Minify WordPress Plugin