姉妹サイト「大阪探検隊」は、AIとこうして作られた

00はじめに — 「軽くて・速くて・壊れにくい」を個人で

大企業のチームではなく、個人運営。だからこそ選んだ「シンプルで長持ちする」作り方の話です。

💡 このページの黄色いマーカーが付いた専門用語は、クリック（タップ）すると意味の解説がポップアップで開きます。Web制作やAIが初めての方も、わからない言葉はその場で確認しながら読み進められます。

01🧱 技術スタック全体図

「フロント → 配信 → データ → 自動化」の4階層。各層でいちばん身軽な選択肢を採っています。

02⚡ なぜ「素のHTML」なのか

流行りのフレームワークを"あえて使わない"理由。

03🔒 セキュリティ — CSP厳格化の物語

個人サイトでも、守りは本気で。いちばん力を入れているのが Content-Security-Policy（CSP） です。

CSPは「このページが読み込んでいい素材（スクリプト・スタイル・画像など）」をブラウザに宣言する仕組み。万一、悪意あるコードが紛れ込んでも、宣言にない素材はブラウザ側で実行をブロックします。当サイトは、もっとも緩みやすい 'unsafe-inline' をスクリプト・スタイルの両方から完全に撤去しました。

04📰 ニュース自動集約エンジン

「横浜花博 最新情報まとめ」を支える、毎日の自動収集の仕組み。

Node.jsの小さなスクリプトが、横浜花博の公式サイトとGoogleニュースのフィード（RSS）を巡回し、新しい見出しを拾い集めます。集めた情報は data/yokohama_news.json に蓄積され、ページを開いたときにJavaScriptが日付順に並べて表示・集計します。

05🖼️ 画像最適化パイプライン

写真が多いサイトだからこそ、画像は「軽さ」が命。

新しい画像を追加するときは、必ず同じ工程を通します。これにより、見た目の品質を保ちながらファイルサイズを大きく削減し、スマホでの表示を速くしています。

この工程は sharp（Node.js）や Python スクリプトで自動化。ファイル保存時に自動で走る仕掛けも用意しています。例えば、このページに使う国旗画像も、すべてこの工程でWebP化しています（21枚で合計わずか約18KB）。🚩

06🔎 検索に強くするSEO設計

「探している人に、ちゃんと届く」ための地味で大事な工夫。

07🚀 ビルドとデプロイ

git push 一発で、安全に本番へ。

GitHub の main ブランチに変更を push すると、Vercel が次の工程を順番に実行してから世界へ配信します。

08🤖 3つのAIエージェントによる協働開発

このサイトは、役割の違う3つのAIが分担して作っています。

それぞれ専用の設定ファイル（ルールブック）を持ち、共通ルール（AGENTS.md）のもとで協調。main への直接作業や force push を禁止し、ai/<エージェント>-<作業>-<日付> という命名のブランチで安全に作業します。

Claude Code

コード実装・リファクタリング・セキュリティ担当。このページもClaudeが実装。

CLAUDE.md

Antigravity（Gemini系）

コンテンツ生成・画像処理・ドキュメント担当。

GEMINI.md

OpenAI Codex

ブラウザ確認・テスト・データ管理担当。

CODEX.md

09🧬 実際のコードをのぞく

言葉だけでなく、実際に動いている設定の“現物”を抜粋で公開します。コピーして自分のサイトの土台にしても構いません。

{
  "key": "Content-Security-Policy",
  "value": "default-src 'self'; script-src 'self';
            style-src 'self' https://fonts.googleapis.com;
            font-src https://fonts.gstatic.com;
            img-src 'self' data:; connect-src 'self' https://*.supabase.co;
            frame-ancestors 'none'; base-uri 'self'; object-src 'none'"
}

① CSPヘッダー。 'unsafe-inline' がどこにも無いのがポイント。スクリプトもスタイルも 'self'（＝自分のドメイン）からしか読み込めず、注入されたXSSはブラウザが実行を拒否します。frame-ancestors 'none' でクリックジャッキングも封鎖。

// EXIF除去 → WebP(q82) → モバイル用 640w を別生成
const sharp = require("sharp");

await sharp(src)                      // 元画像
  .rotate()                           // 向きを正規化（EXIFは引き継がない＝メタ除去）
  .webp({ quality: 82 })              // 高効率フォーマットへ
  .toFile(dest);                      // 例: hero.webp

await sharp(src)
  .resize(640)                        // スマホ用サムネ
  .webp({ quality: 80 })
  .toFile(mobileDest);                // 例: mobile/hero.webp → srcset で出し分け

② 画像最適化。 同じ工程を必ず通すから、写真が増えても表示は軽いまま。EXIF（撮影位置など）も同時に落としてプライバシーも守ります。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "TechArticle",
  "headline": "AIで作った実例 — 大阪探検隊はこうして作られた",
  "datePublished": "2026-06-06T09:00:00+09:00",
  "dateModified": "2026-06-12T09:00:00+09:00",
  "author":    { "@type": "Organization", "name": "AI探検隊 ｜ Discover AI" },
  "publisher": { "@type": "Organization", "name": "AI探検隊 ｜ Discover AI" }
}
</script>

③ 構造化データ。 検索エンジンに「これは技術記事で、いつ書かれ・誰が書いたか」を機械可読で宣言。検索結果でリッチに扱われやすくなります。実はこのページ自身も、まさにこの宣言を持っています。

# mainへの直接作業・force pushは禁止。命名規則で安全に分業する
$ git switch -c ai/claude-security-fix-20260613

#  ↓ AIエージェントが実装 → 人間が画面で確認 → レビュー後にmainへ
$ git add -A && git commit -m "fix(security): CSPから unsafe-inline を撤去"
$ git push origin ai/claude-security-fix-20260613

#  main に入った瞬間、Vercel が自動でビルド＆世界配信（約3分）

④ AI協働の運用ルール。 ai/<エージェント>-<作業>-<日付> のブランチで作業し、失敗してもいつでも戻せる状態を保ちます。3つのAIが同じ main を壊さずに分担できるのは、この規律のおかげ。

10✍️ そのまま使えるプロンプト集

この実例を、あなたのサイトで再現するための“最初の一言”。AIチャットやAIエージェントにそのまま貼り付けて使えます。