先日「まめことネコゼのどたばた会議」の収録模様がUSTREAMで配信されていました。収録も終わってまめこさんとネコゼさんがまったりとお話している中で、ネコゼさんが作っているモジュール一覧（とかコンポーネントコレクションとか言われているやつ）のお話になったときに、それっぽいのを公開しましょうか？とつぶやいてしまったのでこのエントリーを書いてます。

で、結論から書きますと、とても申し訳ないのですが、実際にクライアントさんに納品したものしかないため、なかなか公開は厳しい感じです。ただ、それではあまりにも申しわけなさ過ぎるので、弊社内でざーーーっくりと決めているコーディングのルールと、今まで他社さんが作ったものなんかも見てきた経験で、モジュール一覧ってこんな感じのことが書かれていますよねということを公開しますね。

株式会社まぼろしのちょっとした決まり

弊社ファイルサーバ内に入っている、コーディングのちょっとした決まりです。あまりにもざっくりというか、ほんのちょっとのことしか決めていません。おそらく、これを見てもほとんど何も参考にならないでしょう。

株式会社まぼろし：コーディングのちょっとした決まり（155キロバイト）

モジュール一覧に書かれている内容

モジュール一覧的なものを作るにあったってまず問題となるのは、それぞれのモジュールをどんなふうにグループ化するのか？って所だと思います。概ね以下のような感じに分ければどのモジュールもどこかに属することになるでしょう。

• レイアウトモジュール

  メインカラム内でさらに段組をするモジュールなんかがここに入ります。

• 見出しモジュール

  見出しが入ります。一口に見出しと言っても、例えば同じh2なんだけど、あるページではテキストで、あるページでは画像化文字で、あるページではキービジュアルとテキストの組み合わせで、など複数ある場合もありますね。

• 段落モジュール

  段落が入ります。単なる段落じゃないものですと、リード文の登場回数が多いですね。

• リストモジュール

  ul、ol、dlといったリストが入ります。よくある感じですと、注釈リストなんかありますね。他にもギャラリー系ページで登場するサムネイル写真一覧なんかもここに入れてます。

• 表モジュール

  表が入ります。HTMLで言えばtableでマークアップするモジュールたちですね。細かな部分ですと、tdに数値がはいるので右寄せにしたい場合には「num」ってclass付けてねとか、各列の幅を均等にする場合には「fixed」ってclass付けてねとか。

• ブロックモジュール

  メッセージエリアや、注意文言のエリア、「Adobe Readerをダウンロードしてね」などのプラグインエリア、お問い合わせ先が掲載されてるエリアなんかが入ってきます。難しいのが関連リンクをずらーっと並べるためのエリアですが、弊社の場合はだいたい「リンクモジュール」へ含めてしまいます。

• インラインモジュール

  emや、strongが入ります。もしかしたらcodeとか、supとかが入ってくるかもしれません。

• リンクモジュール

  ページ内リンクや、外部リンク、各種ファイルへのリンクなどが入ってきます。また、関連リンクや、ページの目次などのような、ナビゲーションが集まったエリアなんかも入ってきます。

• 画像モジュール

  装飾目的で文章の右や左に配置されている画像や、キャプション付き画像なんかが入ってきます。

だいたいこんな感じでしょう。例えばギャラリー系ページで登場するサムネイル写真一覧なんかは画像ではないのか？などのツッコミ所も満載なのですが、その辺は各社で暗黙のもとにルールが決まっていたりするでしょう。

さらに、それぞれのモジュールについてどのようなことが書かれているんだということですが、「実際のスクリーンショット」「サンプルソース」「適宜変更を必要とする箇所」「注意点」くらいですね。

その他にはどんなことが？

他に書かれていることとすれば、モジュール一覧を更新するときの注意点、更新情報、最終更新日、最終更新者、必要なファイルの場所など、いわゆる資料としてお決まりのものですね。

別に必要なければ作る必要ないと思います

と、いろいろ書いてきましたが、「コーディングは最初から最後、また運用になっても自分一人しかしない。」「複数で行う場合でもコミュニケーションが完璧にとれていて迷うことがない。」「クライアントにとっても資料の作成がなんのメリットにもならない。」などであれば、そもそも用意する必要はありません。

作るのであればディレクションから

資料を用意しようかとなったときなんですが、企画・設計やビジュアルデザインがすべて終わってあとはHTMLを実装するのみ、って所からいきなり作りましょうとなりますと、納期的にも、労力的にも結構キツイ思いをすることが多いですし、なんかただ作らされているだけであまり意味がないものになってしまうこともあります。

例えば、ビジュアルデザインもモジュールのカタマリごとに行うようにしておけば、デザイナーさんもマークアッパーさんもだいぶ楽になったりします。ですのでこういったこと（サイトをモジュールの集合体として考える事で制作効率あげることができるよねってこととか）は、実は現場のマークアッパーさんというよりは、ディレクション方面に携わる人にこそ、心に留めて置いて欲しいですね。