「プログラミングを始めてWebページを作ってみたけれど、
気づけばデスクトップがファイルだらけ……」
「画像が表示されなくなったり、
どのファイルが最新か分からなくなってしまった！」
Web制作をスタートしたばかりの時に、
誰もが一度は経験する「ファイル迷子」の悩み。
実は、コードを書き始める前に、
家づくりでいう設計図や資材置き場にあたる
「ファイル構成の準備」をしておくことが、
プロっぽく美しいサイトを挫折せずに作るための
最大の秘訣なんです！
今日は、どんなWeb制作でもそのまま一生使える
「最もスタンダードな基本のフォルダ構成テンプレート」と、
初心者が絶対に避けるべき落とし穴をお話しします。
1. Webページを支える「3つの主役ファイル」
Webページは、
役割の異なる3つのファイル（言語）が
パズルのように連携して成り立っています。
-
① HTMLファイル（拡張子
.html）： Webページの「骨組み（柱や壁）」を作る担当。ここに文字や画像を配置します。最初のトップページは必ずindex.htmlという名前にします。
-
② CSSファイル（拡張子
.css）： 色やサイズ、余白などの「デザイン（内装・外装）」を整える担当。HTMLとファイルを分けることで、何十ページものデザインを一括で変更できるようになります。
-
③ JavaScriptファイル（拡張子
.js）： 画像のスライダーやポップアップなど「動きや機能（電気設備）」を追加する担当です。
2. プロもやってる！基本のフォルダ構成テンプレート
ファイルが増えても絶対に迷子にならない、
おすすめの基本構成がこちらです。
まずはパソコンの中に1つ新しいフォルダを作り、
その中に以下の通りの「名前」でフォルダとファイルを
準備してみてください。
[my_website]（大元のフォルダ：プロジェクト名など）
┣━ index.html（トップページ）
┣━ about.html（会社概要やプロフィールページ）
┃
┣━ [css]（フォルダ）
┃ ┗━ style.css（全体の設定を書くファイル）
┃
┣━ [images]（またはimgフォルダ）
┃ ┣━ logo.png（ロゴ画像など）
┃ ┗━ main-visual.jpg（メイン写真など）
┃
┗━ [js]（フォルダ）
┗━ script.js（動きをつけるプログラム）
新しいサイトを作るたびに、
この空のフォルダ構成を丸ごとコピーして使い回すのが、
効率よく開発を進めるためのプロの技です！
3. 初心者が一瞬でエラーになる「3つの落とし穴」
「正しくフォルダ分けしたのに、なぜか画像が表示されない！」という時は、以下の3つのトラップに引っかかっていないか
確認してみましょう。
-
❌ ファイル名に日本語や全角スペースを使っている： Webの世界では、日本語のファイル名は正しく認識されず、バグの原因になります。必ず「半角英数字」と「ハイフン（-）」「アンダースコア（_）」だけで名前をつけましょう。
-
❌ すべてのファイルを同じ場所に突っ込んでいる： 最初は楽ですが、ページ数が増えると目的のファイルを探すのに膨大な時間がかかります。最初から専用のフォルダ（css、images、js）に分ける癖をつけましょう。
-
❌ リンクの「パス（ファイルの場所指定）」が間違っている： フォルダ分けをするとファイルの階層（住所）が変わるため、「images/logo.png」のように、HTMLから見た正確な道筋を記述する必要があります。
💡 フォルダを整えることは、自分の「思考を整える」こと
先日の記事でも
「整理整頓は自分自身を大切にすること」
とお話ししましたが、Web制作におけるファイル構成も
全く同じです。
どこに何があるのかが100%分かっていて、
必要なファイルに1秒でアクセスできる環境を
最初に作っておく。
それだけで、
コードを書く時の集中力は劇的に上がりますし、
後からの修正作業も驚くほどラクになります。
技術の基本を学ぶと同時に、
こういった「仕事の環境を整える習慣」を
ぜひ大切にしてみてくださいね。
まずは今日、
パソコンの中に「my_website」というフォルダを
1つ作るところから、あなたのクリエイティブな開発の土台を
築いていきましょう！
🏠 公式HPで「CSSをHTMLの中に直接書いてはいけない理由＆相対パスの書き方FAQ」を公開中！
画像フォルダの名前は「images」と「img」の
どちらが良いのかなど、現場目線でのQ&Aの全貌は、
ぜひ公式HPのブログ記事をご覧ください。
「初心者向けWebページのファイル構成と役割まとめ！準備から実践まで」
https://info-study.com/beginner-web-page-file-structure-guide/