今回はWEBサイトを構築する時のフォルダ構成（ディレクトリ構造）の話。
ファイルの置き場所を決めずに作り始めると、気づけば全部が同じ階層に並んでいたり、CSSと画像が同じフォルダに混ざっていたり…と、あとから手がつけられなくなりがちです。とくに一人で作っていると「まあ後で整理すればいい」と先送りして、結局そのまま肥大化していく、なんてことも。
そこで当記事では、私が「これくらい分けておくと管理がラク」と感じているWEBサイトのフォルダ構成を紹介します。基本は静的サイトを想定していますが、考え方自体はどんな規模でも共通です。以下をベースに、プロジェクトの規模や要件に合わせてカスタマイズしてもらえればと思います。
基本的なフォルダ構成
まずは全体像から。よくある構成をツリーで書くと、だいたいこんな形になります。
project/
├─ index.html
├─ css/
├─ js/
├─ images/
├─ fonts/
├─ assets/
├─ lib/
└─ pages/
├─ company/
└─ product/
ポイントは「種類ごとにフォルダを分ける」こと。これだけで、どこに何があるかが一目で分かるようになります。
index.html
サイトの入口になるメインのHTMLファイル。基本はルート直下（project/ の一番上）に置きます。index.php など、環境に応じた拡張子でも役割は同じです。
css/
スタイルシートをまとめる場所。ファイルが1つしかなくても、この段階でフォルダに入れておくと後々ラクです。
js/
JavaScriptの置き場。動きのある機能やインタラクションを実装するファイルはここへ入れます。
images/（img/）
ロゴ、写真、アイコンといった画像ファイルをまとめるフォルダ。images/ でも img/ でも構いませんが、どちらか一方に統一しておきましょう。
fonts/
Webフォントを自前で読み込む場合に、フォントファイル（WOFF2やTrueTypeなど）を置く場所です。
assets/
動画・音声・PDFなど、上のどれにも当てはまらない静的ファイルをまとめる場所です。ちなみに最近は、css・js・images・fonts をすべて assets/ の下にぶら下げて、assets/css/、assets/js/… とまとめる流儀もよく見かけます。ルート直下をすっきりさせたいときは、この形も検討してみてください。
lib/（libraries/、vendor/）
jQueryのような外部ライブラリや、サードパーティ製のファイルを置く場所。自分で書いたコードと外から持ってきたコードを分けておくと、更新のときに迷いません。
pages/
個別ページをまとめるフォルダ。便宜上 pages/ としていますが、実際はページ単位ではなく内容ごとにフォルダを切るのが一般的です。会社概要なら company/、製品紹介なら product/ といった具合に、URLの構造をそのままフォルダに落とし込むイメージですね。
配布データで見かけるフォルダ
ここからは、テンプレートや配布データをダウンロードしたときに入っていることのあるフォルダです。ふつうにサイトを作る分には自分で用意する機会は少ないと思いますが、「これ何のフォルダ？」と迷わないよう、目安として知っておくと役に立ちます。
config/
データベースの接続情報や環境設定など、設定ファイルをまとめる場所です。
includes/
ヘッダーやフッターのように、複数ページで使い回す共通パーツを分けておくフォルダ。PHPやテンプレートエンジンを使うなら、この部分を別ファイルにして include するのが定番です。
dist/
「distribution（配布）」の略。ビルドを通したあとの、実際に公開・配布する完成版ファイルが入ります。手書きのソースではなく、圧縮や変換を済ませたものが置かれる場所だと思ってください。
build/
dist/ と混同しやすいですが、こちらはビルドの過程で生まれる中間ファイルや出力物の置き場です。ツールによって使い方は少しずつ違います。
plugin/
プラグイン方式に対応したソフトで、追加機能のファイルを置く場所として使われます。
迷ったら「種類で分ける」から
細かいルールはいろいろありますが、最初のうちは「HTML・CSS・JS・画像を別フォルダにする」だけでも十分整います。そこに慣れてきたら assets/ でまとめたり、ファイル名の付け方を統一したりと、少しずつ自分の型を作っていけばいい。フォルダ構成に唯一の正解はないので、後から見返した自分が迷わない形を目指すのが、結局いちばんの近道だと思います。
