AI & GITHUB · STEP 02

サイトは何からできている？ ファイル・フォルダ・コードの基本

記事の文章、画像、ボタンの色。画面に見えるものは、どこに保存され、どう組み合わさっているのでしょう。ファイルとフォルダから、サイトの中身をのぞいてみます。

サイトって一枚の画像みたいに、全部まとめて保存されているの？

文章や画像など、いろいろな材料を組み合わせて画面を作っているんだよ。

画面はさまざまな材料からできている

サイトを開くと、見出し、文章、写真、ボタンなどがひとつの画面に見えます。でも、裏側ではさまざまなデータが組み合わされています。たとえば、記事の本文と画像が別々に保存され、それを並べる方法が別の場所で決められていることがあります。

ファイルにはさまざまな種類がある

「ファイル」は、文章や画像などのデータを保存する単位です。写真なら画像ファイル、文章なら文字を含むファイルというように、役割によってさまざまな種類があります。ファイル名の末尾にある .png や .jpg は画像形式、.css は見た目に関わる形式の例です。ただし、拡張子だけで中身や役割のすべてがわかるわけではありません。

コードは表示や動きを伝える

「コード」は、コンピューターに表示や処理の方法を伝えるために書かれたものです。HTMLはページの構造、CSSは色や余白などの見た目、JavaScriptは操作に応じた動きなどに使われます。実際のサイトでは、別の形式で書かれたものから画面を作る場合もあります。

画像は見た目に直接使われますが、コードはそれだけではありません。たとえばボタンを押したときに何をするか、記事の一覧をどう並べるかなども、コードや設定で決められる場合があります。画面には見えない設定も、サイトの動きに関係しています。

変更箇所はサイトの作りで変わる

たとえば「見出しの色を変えたい」と頼んだ場合、文章そのものではなく、見た目を管理する箇所が変更されるかもしれません。どのファイルが担当しているかはサイトごとに違うため、まずAIに調べてもらうのがよいでしょう。

画像の使われ方も確認する

同じ画像を複数の記事で使う場合もあれば、記事ごとに別の画像を用意する場合もあります。画像の保存場所だけでなく、「どのページがその画像を参照しているか」も確認すると、別の記事への影響を想像しやすくなります。

なるほど！ まずは何が起きているか、ひとつずつ確かめればいいんだね。

フォルダの中にファイルを整理する

ファイルが増えると、探したいものを見つけにくくなります。そこで、関連するファイルを「フォルダ」にまとめます。パソコンの書類フォルダと同じように、フォルダの中に別のフォルダを入れることもできます。

フォルダで整理する例

たとえばサイトの作業場所に「記事」と「画像」というフォルダがあり、画像フォルダの中に coffee.png という画像が入っている、と想像してください。これは仕組みを説明するための例で、コツエイゴの実際の保存場所を示すものではありません。実際の名前や配置は、プロジェクトの作り方によって変わります。

パスはファイルの場所を示す道順

ファイルの場所を示す道順を「パス」と呼びます。画像/coffee.png なら、「画像というフォルダを開き、その中のcoffee.pngを見る」という意味です。フォルダ名とファイル名を順番につなぐことで、同じ名前のファイルが別の場所にあっても区別できます。

GitHubのリポジトリ画面には、こうしたファイルやフォルダの一覧が表示されます。ただしサイトに必要なデータが必ずすべてそこにあるわけではありません。外部のデータベースや画像置き場を利用している場合もあるので、わからなければ実際の保存場所を確認しましょう。

報告に出てくるパスを読んでみよう

作業の報告にファイルのパスが並んでいると、難しく感じるかもしれません。たとえば「images/coffee.pngを追加」と言われたら、まずは「画像フォルダにcoffee.pngという画像を追加した」と読み替えてみましょう。どんな画像か、どのページで使うのかも続けて聞くことができます。

移動するときは参照先も確認

フォルダを整理すれば探しやすくなりますが、ファイルの移動や名前の変更によって、もともと画像を参照していたページが見つけられなくなる場合があります。整理を頼むときも、どこから使われているかを先に調べ、変更後の表示を確認してもらいましょう。

ファイルのパスとページのURLは違う

ブラウザの上部に表示される「URL」は、ウェブ上のページや画像などにアクセスするための場所を表します。一方、ファイルのパスは、作業環境などの中でファイルがどこにあるかを表します。どちらも場所に関係する言葉ですが、同じ文字列になるとは限りません。

URLからファイルを特定できるとは限らない

たとえばAIページのURLが /ai であっても、開発環境でその画面を作るファイルは別の名前やフォルダに入っていることがあります。サイトを作る仕組みが、ファイルをもとにページを生成しているからです。URLの末尾から、変更すべきファイル名を必ず推測できるわけではありません。

見ているページを伝えて調べてもらう

ChatGPTに「このページを直して」と頼むときは、見ているページのURLと、変えたい箇所を伝えましょう。そのうえで「どのファイルが表示に関係するか調べて」と続けると、AIが実際の構成を確認しやすくなります。設定や公開状況によっては、別のデータやサービスを調べる必要もあります。

ファイル名がわからなくても大丈夫です。大切なのは、見えているページと、裏側の材料を区別すること。「このURLの見出しは、どこで管理されていますか？」と聞くところから始めてみましょう。

プレビューと本番のURL

URLは、公開されているページだけを指すわけではありません。作業中のプレビューにもURLが付くことがあります。同じ内容に見えても、プレビューは確認用で、本番は読者が見る公開用という場合があります。共有する前に、そのURLが何の画面か確認しましょう。

パスは環境によって異なる

「ファイルのパスを教えて」と尋ねたとき、AIが示すパスは、作業をしている環境における場所です。別のパソコンや別のクラウド環境では、同じ場所に同じファイルがあるとは限りません。後から探すためには、リポジトリに保存されているかも合わせて確認すると役立ちます。

ChatGPTと一緒に変更箇所を確かめる

たとえば「AIページの説明文を、もっとわかりやすくしたい」とします。まずは「AIページの説明文を管理している場所を調べて、変更前に教えて」と頼みます。すぐに編集してほしくないときは、「読み取りだけで確認して」と添えれば、依頼の範囲が伝わりやすくなります。

説明を聞いて、関係をつかむ

説明を受けたら、ファイル名を丸暗記する必要はありません。「文章が入っている場所」「見た目を決めている場所」「画像の保存先」がどう関係するかを、図や箇条書きで聞いてみましょう。初心者向けに説明するよう指定しても構いません。

変更後は表示も確認する

変更後は、どのファイルを変え、どの画面で確認したのかを報告してもらいます。文章が正しく更新されても、スマートフォンでは改行が不自然になることがあります。PCとスマートフォンの表示を確認できるなら、両方の結果を聞いておくと安心です。

変更後の報告に「見た目を調整しました」とだけ書かれていたら、具体的に何を変えたかを聞き返してみましょう。「文字の大きさ」「余白」「色」など、変わった点を挙げてもらうと、お願いした内容との違いを見つけやすくなります。確認できなかった項目も一緒に教えてもらえます。

実際のサイトの構成を確かめる

ここで紹介したファイルの種類やフォルダ名は、理解のための代表例です。実際のコツエイゴの構成を知りたいときは、例をそのまま正解だと思わず、AIに現在のファイルを読み取って説明してもらいましょう。実物を確認する習慣が、サイトの理解につながります。間違えたくないときは、変更を実行する前に、候補と理由だけを先に説明してもらうこともできます。

今回のポイント

今回のポイントは、ファイルは材料、フォルダは整理する入れ物、パスは材料の場所を示す道順だということ。そして、ページのURLと開発環境のファイルの場所は別々に確認できるということです。次の記事では、これらの変更を記録するGitと、GitHubの関係を学びます。

参考：GitHub Docs: About Git ／ Git: git-fetch ／ Git: git-pull（2026年11月8日確認）

← カリキュラムへ戻る