Webページの仕様をドキュメントに表す方法

Question

Webページで管理画面を作成しています。
情報を閲覧するためのページではなく、入力項目をたくさん持っている（私としては）かなり複雑なページになります。

プログラムは本職ではないので自分で作成したテーブルのレイアウトを見ながら作業を進めていたのですが、当初想定していたよりも項目数が多くなりだんだんとよく分からない状態になってしまいました。（ちゃんとした設計はできないので作りながらあれこれ変更しています）

一般的にWebサイトを作成する場合、設計図のようなものを作成するものだと思います。

質問させていただきたいのは設計の方法ではなく、画面の仕様を表すのにどんなドキュメントが必要になるのか？です。

実際の開発現場ではどのような資料が使用されているのかご教示いただければ幸いです。

よろしくお願いします。

Answer 1

ご質問の「設計図のようなもの」が
A「納品の対象に含まれるもの」か、
B「作成者が理解するためのもの」かで全然違います。

Aの場合は上司や先方の方に書式を確認しないで
勝手に作成しても仕様がないので、
Bだという前提で回答します。

その場合、自分が（複数人の作成なら同僚の方も）
理解しやすければ何でも構いません。データでも紙でも。
「実際の開発現場」でもそれぞれ微妙に違ってると思います。

いろいろあるでしょうが個人的にお勧めするのは、
画面イメージと入出力表の二本立てのタイプです。

画面上のフォームやボタンなどの絵と、
何を入力して何が表示されるのかの表
（たとえば「商品を絞り込むチェックボックス」とか解説を入れる）
を別にして、番号を振るなどして両者を対応させます。

とくにご自身でも「よく分からない状態」なのですから、
こうするとデザインの問題とプログラムの問題を
切り分けて整理して考えられると思います。

Comments

[msx2]

ご回答ありがとうございます。
お聞きしたかったのはBの「作成者が理解するためのもの」です。

画面イメージの絵は書いておくと理解しやすくなりそうですね。パソコン(エクセルですが…)で書くスキルがないのでやりませんでしたが、番号で対応させれば手書きでも何でも構いませんね。

プログラムがまだ初級者なので、自分の思っているものをそのままコーディングする事が難しく、表か何かにまとめておいて、それを見ながらコーディングできたらいいなと思っています。

問題は表に何を書けばいいのか？

今は試行錯誤中ですがもし押さえておくべきポイントなどありましたらご教示頂けると幸いです。

[LLman]

＞問題は表に何を書けばいいのか
操作の目的を書きます。たとえばブログの管理画面でしたら、
記事の投稿とか削除とか、やりたいことを一覧で書きます。

その操作を「記事を選ぶのにチェックボックスが必要だな」
といった感じで、画面の絵に描いて対応させていきます。

＞押さえておくべきポイント
「画面にボタンが置けず、記事が削除できないブログになっちゃいました」
では困るので、表の仕様を先に確定し、そこに画面を合わせていきます。

[msx2]

ありがとうございました！
教えてもらったやり方でやってみます。