まず、地図を
手に入れる。

サイトを開くと、何が起きている？

ブラウザでお店のURLを開く——このとき、見えないところで一瞬のやりとりが起きています。たとえるなら、レストランでの注文です。あなた（ブラウザ）が「このページをください」と注文し、お店（サーバー）が「はい、どうぞ」とページを出してくる。この「ください（リクエスト）」と「どうぞ（レスポンス）」の往復が、Webの基本動作です。

つまり、世界のどこかにあるサーバーという名のコンピューターに、あなたのサイトのファイルが置いてあり、誰かがURLを開くたびに、そのコピーが手元のブラウザに届いて表示される——これがホームページが見える仕組みです。

ホームページの正体は「ファイル」

ホームページと聞くと特別なものに思えますが、正体は何枚かのファイルの集まりです。文書ファイルや画像ファイルと同じ、ただのファイル。これから Claude Code で作っていくのも、結局はこのファイルたちです。中心になるのが、次の3種類です。

HTML・CSS・JavaScript の役割

この3つは、よく「家づくり」にたとえられます。役割がはっきり分かれているので、絵で覚えてしまいましょう。

1. HTML（エイチティーエムエル）＝骨組み・構造。「ここが見出し」「ここは本文」「ここに画像」と、内容と意味を組み立てる。家でいう柱と間取りです。
2. CSS（シーエスエス）＝見た目・装飾。色、文字の大きさ、余白、配置。同じ骨組みでも、CSSで印象がガラッと変わる。家でいう内装・外装です。
3. JavaScript（ジャバスクリプト）＝動き・反応。ボタンを押すと開く、入力をチェックする、といった“動く”部分。家でいう電気やドアの仕掛けです。

まずはHTMLとCSSの2つが分かれば、立派なホームページが作れます。JavaScript は「動きを足したくなったら」でOK。どれも、Claude にお願いすれば書いてくれるので、名前と役割をなんとなく知っていれば十分です。

URL・ドメインって何のこと？

URL（例：https://example.com/about）は、サイトの「住所」です。その中心になる example.com の部分がドメイン。あなたのサイトの“表札”にあたる、世界で1つの名前です。

では、その住所を入力すると、なぜ正しいサーバーにたどり着けるのでしょう。そこで働くのが DNS という仕組み。「ドメイン名 → 実際のサーバーの場所」を引いてくれる電話帳のようなものです。私たちは覚えやすい名前（ドメイン）を打つだけで、DNSが裏で本当の場所を調べてくれる、というわけです。

先頭の https の s は、通信が暗号化されている印（鍵マーク）。安全なサイトの証です。これは セキュリティの章でまた出てきます。

「見える側」と「裏方」— フロントとバック

開発の話では、サイトを2つの側に分けて考えます。お客さまの目に見える側と、その裏で働く見えない側です。

1. フロントエンド＝見える側。ブラウザに表示される、見た目や操作の部分。さきほどの HTML・CSS・JavaScript の世界です。
2. バックエンド＝裏方。サーバー側で動く処理。フォームの内容を保存する、予約を受け付ける、といった“目に見えない仕事”を担います。

お店でいえば、フロントエンドが客席とメニュー、バックエンドが厨房。お客さまは厨房を見ませんが、料理（=データの処理）はそこで作られています。

「見せるだけ」と「裏で動く」サイト

この区別は、あとで公開先を選ぶときに効いてきます。サイトには大きく2タイプあります。

1. 静的サイト＝見せるだけ。お店の紹介ページのように、誰が見ても同じ内容を表示する。HTML・CSS が中心で、シンプル・速い・安全。
2. 動的サイト＝裏で動く。問い合わせを保存する、ログインで表示が変わる、予約を受けるなど、バックエンドの処理が伴うもの。

まずは静的サイトから始めて、フォームなどが必要になったら動的な要素を足していく——これが、無理のない育て方です。公開の章で「どの公開先を選ぶか」を考えるとき、この違いが判断の軸になります。

情報をためる場所 — データベース

動的サイトで「保存」を担うのがデータベースです。問い合わせ、予約、記事——あとからたまっていく情報を、表のように整理してしまっておく保管庫。バックエンドが、このデータベースに「保存して」「取り出して」と指示を出します。

この講座では Supabase というサービスでデータベースを用意します。仕組みの全体像でいうと——ブラウザ（フロント）↔ サーバー（バック）↔ データベース。この3つの関係を頭の隅に置いておくと、フォームの章がぐっと分かりやすくなります。

この章で出てきた言葉

ブラウザ

サイトを見るためのソフト（Chrome・Safari など）。サーバーにページを「ください」と頼む側。

サーバー

サイトのファイルを置いておき、頼まれたら届けるコンピューター。お店の役。

HTML / CSS / JavaScript

順に、構造（骨組み）・見た目（装飾）・動き（仕掛け）。サイトを作る3つの基本。

URL / ドメイン

サイトの住所がURL、その中心の名前がドメイン（例：example.com）。

DNS

ドメイン名から実際のサーバーの場所を引く「電話帳」の仕組み。

フロントエンド / バックエンド

目に見える側（客席）と、裏で処理する側（厨房）。

静的 / 動的

見せるだけのサイトと、裏で処理が動くサイト。

データベース

情報をためておく保管庫。問い合わせや予約などを保存します。