287
311

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

僕はこうやって画面設計書を作ってる(Webシステムにおける簡潔な画面設計書の例)

Last updated at Posted at 2015-06-23

Webシステムを作る上で、画面設計書を作成する事は多々あると思うんだけど、みんなどうやってるんだろうか。
取り敢えず、僕はこんな感じで作ってるよってのを紹介したいと思います。
小規模のプロジェクトで、ドキュメントIDとかプロジェクトIDとか使わなくてもいいような、管理が複雑でないプロジェクトを想定しています。

ルールとしては以下を守ってます。

  • 画面設計書には画面遷移図の情報を含めない。
    画面設計書は単一の画面の設計を掲載すべきと考える。
  • DBの操作、ビジネスロジック層に関する処理は画面設計書に記載しない。
    別途アクション設計等に作成するべき。
  • Excel方眼紙を使わない。(←重要)
    詳しくは後述。

参考にしたのは、以下のサイト。
[画面設計]画面の構造は物理的・論理的に示す
http://itpro.nikkeibp.co.jp/article/COLUMN/20090108/322455/
IPA 「発注者ビューガイドラインの公開」
http://www.ipa.go.jp/sec/softwareengineering/reports/20080710_3.html

Qiitaは画像ファイルしか添付出来ないので、画像のキャプチャを貼っておく。
1ページ目
WS000031.JPG
2ページ目
WS000033.JPG

  • 部品の記述はどうするべきか?

以前はヘッダとかサイドバーは、暫定の画像を貼り付けていたのですが、これだと実装者によっては全部の画面にヘッダやサイドバーのソースを実装しちゃったりするので、危険。明確に「別の設計書ですよー」と書いておかないと、実装者には伝わらなかったです。

  • ExcelよりWord

Excel方眼紙の方式は、一見作りやすそうに見えるんですが、修正箇所の履歴を見る時に大変不便です。TortoiseSVNを使ってて物凄く実感します。
お客様に納品する際に印刷してお渡しする事は多々あると思うんですが、Excel方眼紙はこの点で不利です。細かすぎて印刷したら読めない設計書が出来て、納品直前に慌ててドキュメント修正なんて事にならないように注意しましょう。
設計書は、縦ページと横ページを組み合わせる時が多いです。縦に長い画面は縦ページに記載して、アクション一覧は横ページにする、なんて事もあります。Excelだと、シートを切り替えないとページ構成を変えられません。複数シートを選択して、一気に印刷しようとしたら、印刷設定がデタラメになったなんて事もありました。

Excel方眼紙を使うなら、繰り返し編集するような事が無く、印刷物にせず、ページのレイアウトを複雑にしないようなドキュメントで使うべきだと思います。
もちろん、表計算が必要な場合にはExcelを使った方が良いと思います。適材適所ですね。

287
311
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
287
311

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?