よく設計段階でお客様にシステムのイメージを伝えるために、
実際にお客様が操作することになる画面のサンプルを作成します。
Webアプリケーションの場合は、HTMLを利用して作成することになるのですが、
我々は、これを紙芝居、または、モックアップと呼んでいます。

私は、よくプロジェクトメンバに「紙芝居に魂を込めろ！！」といいます。
それぐらい、この紙芝居の作成にはこだわりがあります。

今回は、私のこだわりをいくつかご紹介します。

・HTMLタグの属性の順番を統一する

　全てコントロールで、type属性や、name属性を書く順番を統一します。
　
　私は、下記のような順番で統一しています。
　type / name / class / size / maxlength / value / onBlur等のイベント / その他の属性 / tabindex

　特に重要なのが、tabindexを常に最後に記述することです。
　理由は、tabindexの設定はコントロールの位置が変更になることで変わる可能性が高いので、
　出来るだけわかりやすい位置に記述しておき、変更が容易に行えるようにしたいからです。
　
　最初から、全ての記述を統一してあれば、
　開発時にHTMLにプログラムを埋め込みやすくなります。

　また、紙芝居はお客様への納品物件になることもあります。
　お客様が中身を確認することはないでしょうが、
　実際には見ることのない中身もできるだけ綺麗なものにしておきたい。
　いい加減な仕事はしたくないという気持ちもあります。
　

・開発時にも使用できるJavaScriptを出来るだけ組み込んでおく
　画面遷移時に使用するJavaScriptや、別ウィンドを開くJavaScript等で、
　開発時にも使用できるものを用意します。
　余裕があれば、日付や金額のフォーマット関数も事前に組み込んでおきます。
　
　開発時に、プログラマが使用すべき関数を探す手間も省けるなど、
　コーディングの負担を減らすことが出来ますし、コードも統一されます。
　また、お客様に実際の画面に近い動きを確認してもらうこともできます。

・CSSも開発を意識したものを利用する
　例えば、日付項目や、金額項目毎にスタイルシートを用意します。
　日付項目も、年月日、年月、年といったように細かくスタイルシートを分けます。
　こうしておけば、年月日を入力する項目がどの画面に、
　どれだけあるかを簡単に調べることもできます。
　
　私の場合、下記のようなわけをしています。
　
　コード項目
　半角英数字入力項目
　日本語入力項目
　金額項目
　年月日項目
　年月項目
　年項目
　時間項目
　郵便番号項目
　電話番号、FAX番号項目
　メールアドレス項目

・その他
　上記以外にも常に意識しているルールをご紹介します。

　字下げは4TABで行う。
　字下げは階層に応じて行う。
　属性は、小文字で記述する。
　属性の値はダブルクォーテーションで囲む。
　ただし、値の文字列内にダブルクォーテーションを含む場合は、シングルクォーテーションで囲む。
　ソースコードの1行の最大文字数は、半角120桁を目安とする。
　※あくまでも目安
　項目のサイズを実際の値にしておく。

私は、紙芝居（モックアップ）を作成する段階から、
開発を意識し細部に工夫を施しています。
そうすることにより、開発時にプログラマの負担を減らすことができます。
また、最初からHTMLレベルで記述が統一されていることにより、
自然と画面のコードも統一されることになります。
統一された綺麗なコードからはバグが発生しにくいものです。
プログラムの品質を向上させる効果も期待できます。

また、このように細かくルールを徹底しておけば、
紙芝居（モックアップ）から設計書や、プログラムの雛形を
自動生成することが可能だと考えています。
現在は、その方法を思案しているところです。
なんとか実現させたいと考えています。

せっかく手間をかけて作る紙芝居（モックアップ）なのですから、
お客様の為にも、自分達の為にも、色々な利用方法を考えたいですね。