WordPressサイトだったら自動でルーティングしてくれるので、テーマのサイト構造を考える機会は少ないかもしれません。
しかし、世の中複数ページだけど、WordPress化せず、静的HTMLなサイトも沢山存在します。
例えば、以下のサイト構造があったとして、どういうディレクトリ構成にしますか？
まさか、以下のようにファイルを羅列していませんか？
これはまだページ数が少ないのでいいですが、今後20ページとかになった場合、ファイルの見通しがかなり悪くなります。
そこで今回は、複数ページあるHTMLサイトのおすすめディレクトリ構成を紹介します。
サイトを作り込んだ後だとパスの変更が大変になるので、是非制作初期に取り組んでいただけると幸いです。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
ディレクトリ構成でサイトの階層を再現せよ
おすすめの手法は、サイトの階層をディレクトリ構成で再現することです。
例えば、以下を見てください。
これは各ページ毎にディレクトリを切って、その中にそのページ専用のHTML,CSS,JS,imgなどを配置しています。
これによってファイルの見通しもいいし、ファイルの責任範囲も明確だし、
今後ページが増えても混雑しにくい構成です。
仮に、aboutの中に、sample.com/about/detailなど今後更に下層ページが追加されても、detailディレクトリをabout内に一個足せば済みます。
そして、detailディレクトリ内にまた、index.htmlなど置けばいいのです。
フォルダ内のindex.htmlがあればOK
例えば、sample.com/aboutというURLでページを表示したい場合、about.htmlをトップのディレクトリに置くと、sample.com/about.htmlでaboutページが表示されます。
しかし、aboutというディレクトリにindex.htmlを入れれば、これでもsample.com/aboutというURLで表示可能です。
この方がファイルの見通しが言いので、個人的にはおすすめです。
懸念点：index.htmlでも表示できてしまう。。。
ページ毎にディレクトリを切ると、一つ懸念点があります。
それは、
sample.com/でも表示できるし、sample.com/index.htmlでも表示できる
ということ。
実はSEO上ページの評価が二分されてしまいもったいないので、sample.com/index.htmlにアクセスされたら、
自動でsample.com/にリダイレクトさせる処理を.htaccessにかける必要があります。
これについては、以下の記事で記載していますので、ご確認下さいませ。
私の出しているコーディング課題の超実践編でこれの練習をすることができるので、気になった方は見てみてください（超実践編は公式LINEで限定公開中です）
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
