Web制作実務役立ち

複数ページの静的HTMLサイトのおすすめディレクトリ/フォルダ構成を紹介【階層構造を再現せよ】

複数ページの静的HTMLサイトのおすすめディレクトリ/フォルダ構成を紹介【階層構造を再現せよ】
本ページにはプロモーションが含まれています。

WordPressサイトだったら自動でルーティングしてくれるので、テーマのサイト構造を考える機会は少ないかもしれません。

しかし、世の中複数ページだけど、WordPress化せず、静的HTMLなサイトも沢山存在します。

WebサイトをむやみにWordePress化して動的にするとセキュリティや運用コストが上がるので、あえて静的なままにしたり。。。

例えば、以下のサイト構造があったとして、どういうディレクトリ構成にしますか?

複数ページの静的HTMLサイトのおすすめディレクトリ/フォルダ構成を紹介【階層構造を再現せよ】

まさか、以下のようにファイルを羅列していませんか?

静的HTMLサイトのおすすめディレクトリ/フォルダ構成を紹介【階層構造を再現せよ】

これはまだページ数が少ないのでいいですが、今後20ページとかになった場合、ファイルの見通しがかなり悪くなります。

そこで今回は、複数ページあるHTMLサイトのおすすめディレクトリ構成を紹介します。

サイトを作り込んだ後だとパスの変更が大変になるので、是非制作初期に取り組んでいただけると幸いです。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

ディレクトリ構成でサイトの階層を再現せよ

おすすめの手法は、サイトの階層をディレクトリ構成で再現することです。

例えば、以下を見てください。

これは各ページ毎にディレクトリを切って、その中にそのページ専用のHTML,CSS,JS,imgなどを配置しています。

静的HTMLサイトのおすすめディレクトリ/フォルダ構成を紹介【階層構造を再現せよ】

これによってファイルの見通しもいいし、ファイルの責任範囲も明確だし、

今後ページが増えても混雑しにくい構成です。

仮に、aboutの中に、sample.com/about/detailなど今後更に下層ページが追加されても、detailディレクトリをabout内に一個足せば済みます。

そして、detailディレクトリ内にまた、index.htmlなど置けばいいのです。

フォルダ内のindex.htmlがあればOK

例えば、sample.com/aboutというURLでページを表示したい場合、about.htmlをトップのディレクトリに置くと、sample.com/about.htmlでaboutページが表示されます。

複数ページの静的HTMLサイトのおすすめディレクトリ/フォルダ構成を紹介【階層構造を再現せよ】

しかし、aboutというディレクトリにindex.htmlを入れれば、これでもsample.com/aboutというURLで表示可能です。

複数ページの静的HTMLサイトのおすすめディレクトリ/フォルダ構成を紹介【階層構造を再現せよ】

この方がファイルの見通しが言いので、個人的にはおすすめです。

懸念点:index.htmlでも表示できてしまう。。。

ページ毎にディレクトリを切ると、一つ懸念点があります。

それは、

sample.com/でも表示できるし、sample.com/index.htmlでも表示できる

ということ。

実はSEO上ページの評価が二分されてしまいもったいないので、sample.com/index.htmlにアクセスされたら、

自動でsample.com/にリダイレクトさせる処理を.htaccessにかける必要があります。

これについては、以下の記事で記載していますので、ご確認下さいませ。

私の出しているコーディング課題の超実践編でこれの練習をすることができるので、気になった方は見てみてください(超実践編は公式LINEで限定公開中です)

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

あなたに是非読んでほしい記事です!