現実の境目を曖昧にする架空コーヒー生産国のWikipedia：ヤノマミア多民族国
みなさまこんにちは、Salvador Coffee の店主です。☕️
コーヒーの販促のために、建国しました！というお話です。
実は去年も「ムルンカ共和国」というアフリカの小国を建国したのですが、それに続き、今回もAIコーディングアシスタントと共に、より深化した架空国家のWikipedia風ページ制作に挑戦しました！
今回は、南米アマゾン奥地に位置する**「ヤノマミア多民族国」**という、コーヒー産業の歴史と地政学的な緊張感を孕んだ国家を建国しました。
- 🌍 今回作成したサイト: ヤノマミア多民族国 - Wikkipeddia
- 📖 前回のプロジェクト: ムルンカ共和国
💡 プロジェクト概要と目的
前回の「ムルンカ共和国（アフリカの高地コーヒー生産国）」は、ClaudeのArtifacts上でサクッと作れる楽しさがありましたが、どうみてもAIで作ったでしょ感が拭えませんでした。
ということで今回はブラッシュアップ企画。
**「独立したWebサイトとしての圧倒的な没入感」**をテーマに開発をスタートしました。
AIに指定のプロンプト（[ヤノマミア プロンプト.md]）を読み込ませ、本家WikipediaのUIを微細なレベルまで再現しつつ、全10セクションからなる重厚な設定、AI生成画像、そしてインタラクティブなWebギミックを統合したページを構築しています。
私がコーヒー屋ということもあり、単なる「それっぽいページ」ではなく、歴史の整合性や産業構造のリアリティにもこだわっています。
🛠 使った技術・開発環境
機能としては静的サイトなので基本に忠実ですが、AIアシスタントにすべてをコーディングさせてオンラインに上げるまでのスピードに重きを置いています。
| カテゴリ | 技術・ツール | 備考 |
|---|---|---|
| Frontend | HTML5, CSS3, Vanilla JS | Wikipediaの質感を出すための生コード。表示速度重視。 |
| Styling | Custom CSS | ウィキペディア固有のレイアウト（サイドバー、インフォボックス等）を再現 |
| Media | AI Generated (Images & Anthem) | imagen4等による生成（全10枚の画像と国歌オーディオ） |
| Deploy | Vercel | GitHub CLI (gh) からリポジトリを作り、Vercel CLIで一撃デプロイ |
今回はフレームワークを使っていませんが、将来的な拡張を見据えてVercelにデプロイしています。
✨ 工夫した点・こだわったポイント
1. 「Wikipediaらしさ」のUI/UXとマルチメディア統合
右側のインフォボックス（Infobox）や、スクロールに追従してハイライトが変わる目次（TOC）などをJavaScriptで実装し、本家さながらの挙動にしました。
さらに、「国歌」のオーディオプレイヤーをページ内に埋め込み、SUNOで作曲した国家を、その場で再生できるようにしたことで、架空国家の「実在感」を底上げしています。
2. 生々しい世界観と現代の課題（地政学）
「ヤノマミア」は単なる平和な国ではありません。設定の中に以下のような現代的でスリリングなテーマを盛り込みました。
- コーヒーと麻薬の歴史: 過去のコーヒー価格暴落からコカ栽培（カルテル）へと転落した暗黒期と、そこからの「スペシャルティコーヒー」による奇跡の復興（セクション9）
- 資源ナショナリズム: レアアース国有化に伴う「エコ・リソース外交」
- 米中覇権争いの最前線: 中国の「一帯一路」による密林インフラ投資 vs アメリカが警戒する合成麻薬フェンタニル密輸ルート（セクション10）
これらのテキストと共に、AIが生成した「日陰栽培のコーヒー農園」や「密林のハイテク河川港」の画像が並ぶことで、ドキュメンタリーを読んでいるような感覚を味わえます。
3. 一番下まで読むと…？ 👀（スクロール感知型ポップアップ）
Wikipediaといえば、「定期的に表示される寄付のお願い」ですよね。
今回、ページを最下部までスクロールしてくれた熱心な読者に向けて、コーヒー1杯分（800円）の寄付を促すポップアップダイアログを下からスライドインするギミックを実装しました。コーヒーの価格もスタバ価格ではなくブルーボトル価格。UIの遊び心としてとても気に入っています！
📊 ムルンカ（前回）との比較レビュー
前回の「ムルンカ共和国」と比較すると、今回の「ヤノマミア」は全く別次元の仕上がりになりました。
- テキストの厚みと時事性: 王道だったムルンカに対し、ヤノマミアは「2011年の国名変更」や最新の地政学リスクなど、設定の強度が格段に上がっています。
- ビジュアルの暴力: ムルンカはテキスト主体でしたが、ヤノマミアは10枚の高品質画像で視覚を制圧しています。
- Web体験: Artifactsの枠を飛び出し、独自ドメイン（vercel.app）と専用のJSアニメーションを持つ「本物のWebサイト」になりました。
（※ちなみに、ムルンカにあった「コーヒーの風味特性比較表」のような構造化データは、実際の商品「ヤノマミア アマゾンゲイシャ」がリリースしてから、追加アップデートでヤノマミアにも取り入れたい強みです！）
Claudeでデプロイしたときは、技術的に完成後に手直しを項目を追加することはできませんでした。
今回はいくらでもアップデートすることができる。
小さな一歩ですが、昨年からの大きな進歩です。
🔚 おわりに
「一人のコーヒー屋が、AIを使ってどこまで精巧な『架空の世界（ワールドビルディング）』をWeb上に構築できるか？」という実験でしたが、結果として自分でも驚くほど解像度の高いページが完成しました。
プロンプトとテキストさえ用意すれば、デザイン、コーディング、画像生成、そしてVercelへのデプロイまで、AIが伴走して一瞬で形にしてくれる時代です。「頭の中の世界」をアウトプットするハードルは、確実にゼロに近づいています。
🚀 お決まりですが、、、
現在、ネット上でコーヒーショップ Salvador Coffee を経営しながら、最新のAIツールを活用したWeb開発や業務効率化（DX）に熱中しています。
こういった新しい技術を使った表現やモノ作りにご興味がある方がいましたら、ぜひコーヒーを飲みがてらお話ししましょう！
最後までお読みいただき、ありがとうございました🙏