モジュールコーディングとは、ヘッダー・フッター・ボタン・カードといった「何度も出てくるかたまり」を部品として切り出し、各ページはそれを組み合わせて作る方法です。ページごとに同じHTMLを書き写すのをやめる、というだけの話ですが、ページ数が増えるほど差が出ます。

何が変わるのか

修正が1か所で済む

「電話番号が変わったのでヘッダーを直したい」というとき、部品にしてあれば1ファイルの修正で全ページに反映されます。ページごとに書き写していると、50ページなら50か所を直すことになり、必ずどこかが直し漏れます。

見た目が揃う

同じ部品を使い回すので、ページによってボタンの角丸や余白が微妙に違う、ということが起きません。あとから参加した人も、既にある部品を使えば体裁が崩れません。

差分が読める

部品ごとにファイルが分かれていると、変更履歴を見たときに「何を直したのか」が分かります。1ファイルに全部入っていると、どの変更がどのページに効くのか追えません。

実際の分け方

当社では、静的なHTMLの場合は次のように分けています。CSS も同じ単位で分け、部品とスタイルを1対1にしておくと迷いません。

• レイアウト … header / footer / パンくず など、全ページ共通の枠
• パーツ … ボタン / カード / 表 / FAQ / フォーム要素
• セクション … ファーストビュー / 料金表 / 事例一覧 など、ページの節
• ページ … 上のものを並べるだけ。ページ固有の記述は最小限にする

WordPress では、この分け方がそのまま `get_template_part()` の単位になります。テーマを作るときも、まず部品に分けてから組み立てるほうが結果的に速く仕上がります。

どこまで分けるか

細かく分けすぎると、今度は「どのファイルを直せばいいのか分からない」状態になります。判断の目安は次の2つです。

1. 2ページ以上で使うなら部品にする（1ページでしか使わないものは、そのページに置いたままでよい）
2. 中身ではなく「役割」で切る（トップ用のカード・事例用のカードと分けず、カードは1つにして中身を差し替える）

「将来使うかもしれない」で先に分けるのは避けたほうが無難です。使われないまま残った部品は、あとから触る人にとって判断を迷わせる材料にしかなりません。

CSSの命名も一緒に決める

部品に分けても、class 名が場当たりだと結局どこに効いているのか分からなくなります。当社では BEM に近い形（ブロック名__要素名--状態）で統一しています。

<!-- card.html -->
<article class="card">
  <h3 class="card__ttl">見出し</h3>
  <p class="card__text">本文</p>
  <a class="card__btn card__btn--primary" href="#">詳しく見る</a>
</article>

大事なのは書き方そのものより、プロジェクトの中で1つに統一されていることです。既存サイトの改修をお請けするときは、こちらの流儀を持ち込まず、既にある命名に合わせています。