目次／制作・開発ディレクション／要件定義・仕様書作成

コーディング仕様書作成

項目番号 054

10秒でわかる！要点まとめ

「誰が書いても同じコード」になるよう、ファイル名やクラス名のルールを統一する
この設計図がないと、担当者が辞めた瞬間、誰も修正できない「スパゲッティコード」が残る
見た目だけでなく、SEOや表示速度（Core Web Vitals）の品質基準を担保する技術文書

1. 概要：コードの「品質」と「書き方」の標準化

コーディング仕様書（ガイドライン）作成とは、HTML、CSS、JavaScriptを用いてWebサイトを構築する際の、技術的なルールや規約を定義する業務です。

具体的には、ディレクトリ構造（フォルダの階層）、ファイル命名規則、HTMLのタグ付けルール（セマンティックマークアップ）、CSSの設計思想（BEMやFLOCSSなどの命名ルール）、使用するライブラリやフレームワークのバージョンなどを明記します。複数のコーダーが分担して作業しても、あたかも一人の人間が書いたかのようにコードの品質と書きぶりを統一するための「建築基準法」のようなものです。

2. なぜ重要なのか：属人化の排除と「負の遺産」防止

プログラミングは、同じ見た目を再現するにも、書く人によって全く異なるコードになります。仕様書による統制がないと、Aさんは「menu-red」と書き、Bさんは「redButton」と書くといったバラバラな命名が乱立します。この状態（属人化）が進むと、他の人がコードを読んでも理解できず、ちょっとした修正でレイアウトが崩れたり、担当者が退職した後に誰もメンテナンスできない「技術的負債（スパゲッティコード）」として企業に重くのしかかります。

将来にわたってサイトを健全に運用・拡張し続けるために、コードの秩序を守ることは重要な責務です。

3. 実務のポイント：CSS設計とバリデーション

実務では、単なるルール決めだけでなく、それを守らせる仕組み作りが重要です。

CSS設計思想の採用：「BEM（ベム）」や「FLOCSS（フロックス）」といった、業界標準のCSS設計ルールを採用します。これにより、「クラス名が被ってデザインが崩れる」という事故を防ぎます。
ディレクトリマップとの整合性：画像の保存場所（/images/）、CSSの保存場所（/css/）など、サーバー上の住所を明確にします。
Linter（リンター）の導入：人間が目視でチェックするのではなく、「ESLint」や「Prettier」といった自動チェックツール（Linter/Formatter）を導入し、ルール違反のコードがあればエラーが出る仕組みをエンジニアに提案します。

4. スキルアップのヒント：GoogleやAirbnbのルールを読む

世界的なIT企業は、自社のコーディングガイドラインを公開しています（Google HTML/CSS Style Guideなど）。これらを読むことで、「なぜインデント（字下げ）はスペース2つなのか」「なぜIDではなくクラスを使うのか」といった、合理的な理由を知ることができます。

また、HTML5の基本（headerタグやarticleタグの意味など）を学ぶことで、SEOに強いマークアップができているかをチェックできるようになります。「divタグだらけのコード」を見て違和感を持てるようになれば合格点です。