00はじめに — 「軽くて・速くて・壊れにくい」を個人で
大企業のチームではなく、個人運営。だからこそ選んだ「シンプルで長持ちする」作り方の話です。
このサイトは、派手な裏側の仕組みを持たない、徹底して身軽な静的サイトです。ページは素のHTML、見た目はCSS、動きは必要最小限のJavaScript。 そこに、「ニュースの自動集約」「画像の自動最適化」「AIによる調査・記事化」を足し算して運営しています。
個人運営でも、表示は速く・セキュリティは堅く・更新は楽に。そのために選んだ技術と運用を、専門用語をかみくだいて順番に紹介します。 このページ自体も、その方針で作られた1ページです。🛠️
01🧱 技術スタック全体図
「フロント → 配信 → データ → 自動化」の4階層。各層でいちばん身軽な選択肢を採っています。
FRONTEND
dist/*.min.* を配信。
HTML5PostCSSesbuildGoogle Fonts
HOSTING
main ブランチへ push すると自動でビルド＆デプロイ。世界中のCDNから配信され、HTTPS・キャッシュ最適化も標準で効きます。
VercelCDNAuto Deploy
DATA
data/*.json をJSが読み込むJSON駆動レンダリング。
SupabasePostgreSQLRLSJSON
AUTOMATION
02⚡ なぜ「素のHTML」なのか
流行りのフレームワークを"あえて使わない"理由。
- 速い。 余分なJavaScriptを読み込まないので、スマホでも一瞬で表示。万博関連の情報をサッと見たい人に最適です。
- 壊れにくい。 依存ライブラリが少ないほど、数年後も動き続けます。流行が変わっても「ただのHTML」は生き残る。
- 軽い運用。 個人運営でも、ビルドが単純なら保守が楽。トラブルの原因も追いやすい。
- SEOに素直。 中身が最初からHTMLにあるので、検索エンジンに正しく読まれやすい（このページの本文も全部HTMLに書かれています）。
03🔒 セキュリティ — CSP厳格化の物語
個人サイトでも、守りは本気で。いちばん力を入れているのが Content-Security-Policy（CSP） です。
CSPは「このページが読み込んでいい素材（スクリプト・スタイル・画像など）」をブラウザに宣言する仕組み。万一、悪意あるコードが紛れ込んでも、宣言にない素材はブラウザ側で実行をブロックします。当サイトは、もっとも緩みやすい 'unsafe-inline' をスクリプト・スタイルの両方から完全に撤去しました。
😰 ありがちな作り（撤去前の世界）
<script>…</script>をHTMLに直書きstyle属性をタグに直書きonclickなどでイベント処理- → XSS（スクリプト注入）の入口になりやすい
✅ このサイトの作り（厳格化後）
- JSは外部ファイル
/js/dist/*.min.jsに分離 - 装飾は専用クラス＋外部CSSのみ
- イベントは
addEventListenerで付与 - → インライン要素ゼロを毎回チェックして担保
多層的なセキュリティヘッダー
- HSTS（常時HTTPS強制）／X-Frame-Options: DENY（クリックジャッキング防止）
- X-Content-Type-Options: nosniff／Referrer-Policy／Permissions-Policy（カメラ・位置情報等を一括拒否）
- Cross-Origin-Opener/Resource-Policy でクロスオリジンの分離
- 外部CDN（Supabase JS）は SRI（Subresource Integrity）でファイル改ざんを検知
- データベースは全テーブルRLS有効。公開して良い行だけが読める設計
04📰 ニュース自動集約エンジン
「横浜花博 最新情報まとめ」を支える、毎日の自動収集の仕組み。
Node.jsの小さなスクリプトが、横浜花博の公式サイトとGoogleニュースのフィード（RSS）を巡回し、新しい見出しを拾い集めます。集めた情報は data/yokohama_news.json に蓄積され、ページを開いたときにJavaScriptが日付順に並べて表示・集計します。
著作権への配慮
保存するのは「見出し・日付・出典リンク」だけ。記事本文は転載せず、続きは必ず各出典先で読んでもらう設計にしています。依存ライブラリもゼロ（Node.js標準機能のみ）で、軽く・壊れにくく動きます。
05🖼️ 画像最適化パイプライン
写真が多いサイトだからこそ、画像は「軽さ」が命。
新しい画像を追加するときは、必ず同じ工程を通します。これにより、見た目の品質を保ちながらファイルサイズを大きく削減し、スマホでの表示を速くしています。
srcset で出し分けこの工程は sharp（Node.js）や Python スクリプトで自動化。ファイル保存時に自動で走る仕掛けも用意しています。例えば、このページに使う国旗画像も、すべてこの工程でWebP化しています（21枚で合計わずか約18KB）。🚩
06🔎 検索に強くするSEO設計
「探している人に、ちゃんと届く」ための地味で大事な工夫。
- 構造化データ（JSON-LD）。 各ページが「何の記事か・いつ更新か・パンくず・FAQ」などを機械可読な形でも宣言。検索結果でリッチに表示されやすくなります。
- サイトマップの自動生成。 各ページの
<lastmod>（最終更新日）を、Gitの最終コミット日から自動算出。手作業の更新漏れを防ぎます。 - OGP／Twitterカード。 SNSでシェアされたときの見た目（タイトル・説明・画像）を全ページで設定。
- クリーンURL。
/yokohama-newsのように拡張子なしの綺麗なURL。.htmlからは自動でリダイレクト。 - 多言語の地理シグナル。 ページの対象地域・言語をメタ情報で明示。
07🚀 ビルドとデプロイ
git push 一発で、安全に本番へ。
main ブランチに変更を push すると、Vercel が次の工程を順番に実行してから世界へ配信します。
dist を生成最後の「ソース除去」は、本番に必要のない元ソース（未参照のCSS/JSやビルド用スクリプト）を配信物から取り除く工程。万一HTMLから参照が残っていれば消さないフェイルセーフ付きで、本番404を防ぎます。
08🤖 3つのAIエージェントによる協働開発
このサイトは、役割の違う3つのAIが分担して作っています。
それぞれ専用の設定ファイル（ルールブック）を持ち、共通ルール（AGENTS.md）のもとで協調。main への直接作業や force push を禁止し、ai/<エージェント>-<作業>-<日付> という命名のブランチで安全に作業します。
たとえば「海外報道まとめ」はこう作られた
姉妹記事「世界はGREEN×EXPO 2027をどう見ているか」は、Anthropic社のAI「Claude」を Claude Code 上で用いて作成しました。 英語・中国語（簡体字／繁体字）・韓国語などで横断的にWeb検索し、AIPH・BIE・米国植物園などの一次ソースを直接確認。AIが下調べと文章化を担い、事実は一次ソースで人が照合する——という分業です。 AIは万能ではないので、重要な情報は必ず各出典元・公式サイトでもご確認ください。
※ 本ページは当サイトの制作・技術方針を一般向けにかみくだいて紹介したものです。具体的な設定値・構成は改善のため随時変更される場合があります。掲載情報は2026年6月時点。サイトの利用にあたっては各ページの注記・公式情報もあわせてご確認ください。