webサイトを制作するにあたり、避けて通れないのがディレクトリ構成です。どのようなファイルが必要なのか、あるいはどんな風なディレクトリ構成にすればいいのか?といった疑問を紐解いていきたいと思います。
ディレクトリ構造とは?
ディレクトリ構造とはwebサイト全体の元となるフォルダ・ファイルの構成のことです。

皆さんのパソコンの中にあるフォルダやファイルの集まりが「ディレクトリ構成」ですよ!

フォルダ、ファイル、画像など、皆さんのパソコンには各フォルダに色々なファイルがありますよね。
実はwebサイトも同様に、こういったディレクトリ構成が重要なんです!
基本的なファイル・フォルダについて
もしかすると必要ないかもしれないくらいの基本的な内容ですが、念のために補足としてご説明しますね。
- ファイル:ファイル名.拡張子
- フォルダ:各ファイルが入っている箱のようなもの
フォルダ(箱)にいろいろなファイルを入れているようなイメージです。

フォルダの中にフォルダが入っていることもありますよね
更に言うと、ファイルには色々な種類があります。こちらも一例をご紹介しておきますね。
画像 | ○○.png、○○.jpg、○○.gifなど |
HTML | ○○.html |
CSS | ○○.css |
Illustrator | ○○.ai |
Photoshop | ○○.psd |
勿論、世の中にはもっとたくさんの拡張子がありますので、ここでご紹介しているものはあくまで一例です
webサイトのディレクトリ構成
それでは、webサイトのディレクトリ構成がどうなっているのか解説していきたいと思います。
webサイトに必要なものとは?
まず、ディレクトリ構成を学ぶ前に、webサイトを製作する上で必要なものから説明しますね。
- HTMLファイル:webページ本体
- CSSファイル:webページのデザインを整えるもの
- 画像ファイル:webページ内の画像(○○.jpg 、○○ .png 、○○ .gif など)
大体のwebサイトではこの3つが必要になります。
webページ1つにつき、1つのHTMLが必要となります。
例えば、コーポレートサイトでよくある例はこんな感じです。
トップページ | index.html |
事業内容 | service.html |
会社概要 | company.html |
採用情報 | recruit.html |
お問い合わせ | contact.html |
コーポレートサイトのディレクトリ構成
ここからは先ほどのコーポレートサイトを例に、よくあるパターンをご紹介したいと思います。

先ほどのHTMLファイルに加え、
- cssフォルダ
- imagesフォルダ
が増えていますね。
フォルダ:css
先ほどの図をよく見てみると、cssフォルダにはstyle.cssしか入っていませんよね。

なんでCSSファイルは1つだけなのに、わざわざフォルダを分けているんだろう?
と思った方も多いのではないのでしょうか。
実は、CSSファイルだけcssフォルダに分けているのにはいくつか理由があります。
皆さんが個人的にwebサイトを製作する際にはCSSファイルは一つでいいかと思いますが、実務となるとそれだけではありません。大規模なwebサイトであればあるほどCSSのコード数は何千行という膨大なものになります。
それらを適切に管理できるよう、webページごとや役割ごとにCSSファイルを分割することがあります。そういった場合のため、CSSは1つのフォルダにまとめて管理されることが多いです。
フォルダ:images
画像ファイルをimagesというフォルダにまとめていますよね。
これは、画像ファイルを1つのフォルダにまとめることによって管理しやすくするためです。

大規模なwebサイトだと、画像だけで何百枚という数になることもあるんですよ!
ちなみに、今回の例ではimagesという名前のフォルダにしていますが、フォルダ名は基本的に自分の好きな名前にできます。……とは言っても誰が見ても分かるような名前にすることが望ましいです。
- img
- image
- images
が実際に現場でよく使われているフォルダ名です。
ディレクトリ構造まとめ
- ディレクトリ構造:webページを構成するフォルダやファイルのこと
- 1ページ=1つのhtmlファイルが必要
- ファイル名・フォルダ名は自由に命名してもいい。(ただし分かりやすい名前をつける
- CSSはフォルダ管理することもある
- 画像ファイルは1つのフォルダにまとめる