はじめに：Webサイトって、どうできてるの？
専門用語はあとで大丈夫。まずは“ぜんぶの土台”を、たとえ話でやさしく。よっ！
ひとことで言うとWebサイトは、ネット上の“お店”みたいなもの。「作って → ネットに置いて → スマホやPCに届く」。この先は、その作り方のヒミツを笑いながら見ていくだけです。
「HTML？ サーバー？ もう無理…」——大丈夫。1個も知らなくても読めるように作りました。まずは、ページがあなたに届くまでの3ステップから。
そして、お店づくりにはこんな登場人物がいます（名前をタップすると、ひとくち解説が開きます）。
骨組みの大工さん。文章や画像など“中身”を組み立てる係。
内装デザイナー。色や配置など“見た目”を整える係。
からくり職人。クリックで開くなど“動き”をつける係。
お店を開く“土地”。作ったページをネットに置いて世界に届ける。
超有能な店員さん。調べる・作る・直すを任せられる相棒。
この先は、こんな道のりで進みます。気になるところへ、いつでも寄り道OK。
正体は、ただの「HTML」です
身構えて来た方、すみません。裏で魔法は何も起きていません。ズコー！
ひとことで言うとふつうのWebページ（HTMLファイル）を、そのまま見せているだけ。だから速くて、壊れにくい。
黄色い用語（末尾に ⓘ）は、クリック（タップ）で意味の解説がポップアップで開きます。むずかしい言葉も、その場で確かめながら読めます。
このサイト、記事は素の・見た目は・必要な動きだけ。外部データベース？ ありません。全ページが、あらかじめ完成したHTMLとして配られているだけ。 姉妹サイト「大阪探検隊」がデータベース付きの“動く家”なら、こっちは柱と屋根だけの、めちゃ身軽なプレハブ。だから速いし、壊れにくいし、AIにも触らせやすい。三方よし。
速い
余計なJSを読まないので一瞬で表示。読者を待たせない＝離脱されない。
壊れにくい
部品が少ないほど、数年後も平気で動く。流行り廃りに巻き込まれない。
AIと相性◎
構造が素直だから、AIが安全にいじれる。つまり、作業をどんどん任せられる。
やあ、解説担当のロケッ隊長だ。このページは、難しい話を全部ギャグに変換してお届けする。身構えず、笑って読んでくれ。……たまに泣ける話もあるけどな。
🧱 構成、たったの3階層
「フロント → 配信 → 制作」。シンプルすぎて逆に不安になるやつ。
ひとことで言うと「①表示する場所 ②配る場所 ③作る人(AI)」の3つしかない、すごくシンプルな作りです。
data/articles.json から自動生成しています。
「データベースは？」と聞かれるたびに胸を張って言う。——「ない！」。無いものは壊れない。これが最強の防御だ。
🗂️ CSSは「人用」と「ブラウザ用」の二刀流
人が書くやつと、配るやつ。同じ顔して、中身はぜんぜん違う。
ひとことで言うと人が書く“見やすい原稿”と、ネットに出す“軽い清書”を分けています。清書を直したら番号(?v=)を変えて、見た目を確実に更新。
CSSは css/*.css が編集元。これをで圧縮した css/dist/*.min.css をブラウザが読みます。JSも同じ二刀流。本番に出るのは、いつもペチャンコに軽くした dist 側だけ。
そして最大の罠がキャッシュ更新。min を作り直したら、HTML側の ?v=日付 を上げ忘れると……ブラウザが古い見た目を握りしめて離さない。「直したのに反映されない！」事件の真犯人は、だいたいコイツです。
実録・また古いの出てる事件。「色変えたのに本番が変わらない…バグ？障害！？」→ 原因は の付け忘れ。犯人はいつも自分。3分の調査と、1秒の反省。
🎬 寸劇 その①
「直したのに、反映されない！」事件
① 意気揚々と、色を変えた。
② 本番、変わってない…！？
③ 犯人は ?v= の付け忘れ。
④ 学びはマニュアルへ。
🔗 URLの、ちょっと怖い「二重生活」
/how-discover-ai-is-built みたいな拡張子なしの。表の顔の裏で、登録は2か所必要です。
ひとことで言うときれいな住所(URL)にする設定は、本番用とテスト用の2か所に書く。片方忘れると、手元で開けなくなります。
sitemap.xml にも追記。この“3点セット”を毎回そろえると、本番でもローカルでも同じURLでちゃんと開きます。🔒 用心棒「CSP先生」、塩対応で守る
怪しいやつは、問答無用でお帰りいただく。優しさより、厳しさ。
ひとことで言うと“あやしいコードは入れない”見張りを置いています。だから飾りは別ファイル、ヒミツの情報はコードに書かない。
は、「このページが読み込んでいい素材」をブラウザに宣言する仕組み。万一あやしいコードが紛れても、宣言にない素材はその場でお帰りいただきます。
当サイトは、いちばん緩みやすい 'unsafe-inline' を撤去ずみ。だからタグに直書きの style= も、ページ内 <script> も、CSP先生が塩対応。装飾は外部CSS、動きは外部JS、ヒミツのカギはだけ——という徹底ぶり。窮屈？ いいえ、安全。
さらに HSTS（常時HTTPS）・X-Frame-Options: DENY・nosniff など多層ヘッダーを重ねがけ。鍵やトークンはコードに書かない・コミットしない。「うっかり公開」が、いちばん怖いからね。
🎬 寸劇 その②
用心棒「CSP先生」、塩対応の巻
① つい style= を直書き。
② CSP先生「お帰りを」
③ 装飾は外部CSSへ。
④ 先生、無言で頷く。
🖼️ 重い画像は、強制ダイエット
AI画像が主役のサイト。だから画像が重いと、即・致命傷。ドーン！
ひとことで言うと写真を“軽い形式(WebP)”に変え、画面の大きさに合うサイズを出し分け。だからスマホでもサッと表示できます。
scripts/optimize_image.py に集約。主役の1枚だけ先読み、あとはのんびり読み込みます。🔎 検索で見つかる、地味スゴ努力
派手さゼロ。でもコレを怠ると、誰にも見てもらえない。
ひとことで言うと検索やSNSに正しく伝わるよう、ページの“ふだん見えない名札”を整えています。住所(ドメイン)の書き間違いは厳禁。
各ページはで「何の記事か・いつ更新か・パンくず・FAQ」を機械にも宣言。でSNS映えも仕込みます。地味だけど、ここで手を抜くと検索から見放される。
そして絶対やらかせない一点——正規ドメインは ai-tankentai.vercel.app。よく似た別ドメインは他人の家なので、そこに表札（）を出したら大事故。長い記事は前後編に割って rel="next"／"prev" でつなぎます。
🚀 3コマンドで、世界へ発射
確認 → → 。シンプル。ただし“門番”がいる。
ひとことで言うと「①手元で確認 → ②送る → ③公開」の3ステップで世界に出します。正しいメールで送らないと門前払い。
無料プランには門番がいてな。コミットのメアドが違うと「Blocked！」と門前払い。正しい表札（メール）を出すまで、世界には出られないのだ。世知辛い…！
🎬 寸劇 その③
世界に出してくれない「門番」
① いざ、本番デプロイ！
② 門番「メアド違う」
③ 表札（メール）を直す。
④ めでたく、世界へ。
🤖 衝撃の真実：人間の貢献度は…？
記事も、画像も、コードも、図解も。気づけば、ほとんどAIが描いていた。
ひとことで言うと作業の大半はAIが担当し、人は“企画と最終チェック”。失敗してもすぐ戻せる形で、安全に進めています。
このサイトの中身は、運営者が（Claude Code）と二人三脚で制作。AIが下調べ・実装・最適化・このページのSVG図解までガンガン進め、人間は「企画」と「最終OK」を出す係。……あれ、ほぼ見てるだけでは？
もちろん最後の責任は人間持ち。本体を直接いじらず作業用ブランチで安全に作業し、規範（CLAUDE.md）と恒久メモリでAIに毎回“同じ品質”を出させています。暴走させない手綱だけは、しっかり握る。
📊 人間の貢献度（自己申告）
およそ 8%（内訳：企画・最終OK・コーヒー・椅子を温める）
念のため言っておくと——このページ自身も、AIが図解ごと描いた。人間がやったのは「コミカルにして」と言ったことだけ。……うん、今のところ世界は平和だ。
やらかし殿堂入り・失敗談コレクション
きれいな完成形の裏には、数々の“やらかし”が。全部ホントにあった話です。ぎゃー！
ひとことで言うとここはぜんぶ実際にやらかした話。だから今は「次は間違えない手順」に変えてあります。
どれも一度はやらかして、泣きながら直したやつ。だから今は「手順」として固めてあります。失敗は、ちゃんとマニュアルになる。
🦶 フッターがスッピンで本番デビュー
新ページを公開したら、フッターだけ無スタイルの真っ白なやつがそのまま世界へ。原因は共通CSSのコピー漏れ。一番下までスクロールした瞬間、血の気が引いた。
教訓：共通既定は breadcrumb.css に集約。公開前にヘッダー／フッターを必ず目視。
🚪 本番はOK、なのに手元で404
クリーンURLを vercel.json だけ直して、serve-local.js を直し忘れ。本番では開くのにローカルだけ404の嵐。「えっバグ？障害！？」と30分溶かした。
教訓：URLは vercel.json ＋ serve-local.js ＋ sitemap の3点セットで登録。
🔤 文字化けの呪い、襲来
PowerShellでHTMLを一括置換したら、UTF-8がcp932で読まれて日本語が全部 「譁�蟄怜喧」 に変身。ページが古代文字になった。
教訓：一括置換は専用エディタ機能で。PowerShellの Get/Set-Content でHTMLを触らない。
📧 門番に「Blocked！」と一蹴
コミットのメールアドレスを間違えただけで、デプロイが門前払い。「なぜ世界に出られない…？」と真顔でログを見つめる夜。
教訓：作業前に git config user.email を所定のアドレスへ固定する。
🏠 他人の家に、表札を出すところだった
正規URL（canonical）を、そっくりな別ドメイン（他者が使用中）に出しかけた。気づかなければSEO評価をまるごと他人にプレゼントする大惨事だった。
教訓：ドメインは ai-tankentai.vercel.app 固定。canonical／OGPは指差し確認。
🕳️ ヘッダー直下が、素の青リンク
新ページを作るたび、目次バー（page-sec-nav）のCSS個別定義を忘れて毎回ここが崩れる。学習しない常連トラブル代表。
教訓：新ページは“白紙から書かない”。テンプレ元を丸ごとコピーして直す。
ぶっちゃけ秘話——このページ、今日だけで3回作り直してる。真面目版 → 図解版 → そして今のコミカル版。AIだから何度でも描き直せるが…人間なら、たぶん3回目で泣いてたな。
🏠 トップが散らからないのは、自動化のおかげ
記事が増えても散らからない。人が並べ替えてる？ いいえ、寝てます。
ひとことで言うと記事一覧の表から、トップの紹介カードを自動で組み立て。人が手で並べ直したりはしません。
「最新／おすすめ」は記事一覧 data/articles.json を元に 生成スクリプトがHTMLを自動で組み立てます（記事を足したら npm run gen:home を回すだけ）。並べ間違いも、トーンのばらつきも起きません。
おまけに、毎日きまった時刻にヘッドレスのAIがバナーを点検・微修正する“日次キュレーション”まで。ただし暴走防止でローカルのコミットに留める＝公開ボタンは、最後まで人間が押します。そこだけは、ね。
🧬 笑った後は、現物をどうぞ
ギャグの裏で本当に動いてる設定です。コピーして自分のサイトの土台にしてもOK。
ひとことで言うと上でやさしく説明した設定の“本物”を、そのまま少しだけお見せします。
"redirects": [
{ "source": "/how-discover-ai-is-built.html",
"destination": "/how-discover-ai-is-built", "permanent": true }
],
"rewrites": [
{ "source": "/how-discover-ai-is-built",
"destination": "/how-discover-ai-is-built.html" }
]$ npm run serve:local # http://127.0.0.1:4175 で確認
$ npm run build:css # min を再生成 → ?v= を上げる（忘れるな！）
$ git push origin main
$ npx vercel deploy --prod # → ai-tankentai.vercel.app に発射 🚀——というわけで、ヒミツは以上。タネを明かすと、ぜんぶ「シンプルに、軽く、AIと一緒に」。あなたにも、できます。
はじめての人の、よくある質問
「自分にもできる？」——いちばん多い疑問に、さきにお答えします。
プログラミングを知らなくても、Webサイトは作れますか？
はい。AIエージェントと無料ツールを組み合わせれば、ひとりでもWebサイトを作って公開できます。実際、このサイト自身がその実例で、運営者はAI（Claude Code）と協働して制作しています。まずは 「AIでWebサイトを作る方法」 から始めるのがおすすめです。
「静的サイト」だと、何がいいのですか？
あらかじめ完成したページをそのまま配るので、表示が速く・壊れにくく・保守が楽です。仕組みが単純なぶん、AIにも安全に編集を任せやすいという利点もあります。写真や掲示板のような“動くデータ”が主役のサイトでは、データベース付きの作りが向いています。
AIは、どこまで作ってくれるのですか？
調べもの・コードの実装・画像の最適化・記事の下書きまで、かなりの範囲を任せられます。ただし最終的な企画と確認は人間の役目。事実関係や仕上がりは人がチェックし、責任を持って公開します。
公開（デプロイ）はむずかしいですか？
いいえ。「①手元で確認 → ②送る → ③公開」の3ステップです。注意点は、コミットのメールアドレスなど“決められた設定”を正しくしておくことくらい。詳しくは本文の「🚀 ビルドとデプロイ」をどうぞ。
まず何から始めればいいですか？
「読む」から「作る」へ一歩踏み出すのが近道です。入門として AIでWebサイトを作る方法、姉妹サイトの実例として 制作の実例（大阪探検隊） を用意しています。気軽にどうぞ。