AtlasQuest ができるまで — 国旗クイズと世界地図で学ぶ

AtlasQuest は、 国旗 + 世界地図 クイズ。 主要 60 ヶ国 (大陸網羅) を 4 モード (国旗→国名 / 国名→国旗 / 国旗→大陸 / 国旗→首都) × 3 レベルで出題、 正解時は d3-geo の世界地図で該当国を amber に highlight。 ラボ 26本目、 インタラクティブ学習 ジャンル 2本目 (ToneQuest = 音感 に続く)。

#なぜこの形にしたか

直近 5本に学習ゼロ。 作ろうと決めていた 8 ジャンルは 7/8 で、 シリーズ深掘り基調。 候補:

• 国旗クイズ (採用、 SEO 巨大 + 教育)
• タイピング練習 (ありふれ)
• 暗算 (弱)
• WebGL シェーダー学習 (ShaderToy 圧倒)
• 漢字クイズ (中庸)

選んだ理由:

• 「国旗 クイズ」「世界地図 クイズ」 は子供向け教育 + 受験生 + 一般教養層で SEO ボリューム巨大
• 既存大手 (Sporcle / GeoGuessr) は英語 UI / アカウント要 / 重いビルド
• 「 + 日本語 + 即動く + 世界地図ハイライト」 で差別化
• d3-geo + topojson + world-atlas + flagcdn という地理スタック (まだラボ未使用) を投入できる

#見た目をどう決めたか

直近 5本の 見た目 を書き出す:

hue-deck — warm gray + ink + lipstick (Pantone カラーカード)
astro-cast — midnight space + sun emission + 惑星レインボー (天文台)
arcana-flip — midnight black + plum + antique gold (中世大聖堂)
gift-cap — 墨 + 朱 + 生成り + 茜 + 金箔 (和風 巻物)
pile-park — cream + coral + mint + lemon + indigo (玩具箱)

題材 「世界 / 国旗 / 地図 / クイズ」 → モチーフ 候補:

• 古地図 (wiki-orbit と被るので避ける)
• 学校の地理教室 (黒板 モチーフ、 弱め)
• 空港 departure board (LED + amber、 旅行感) ← 採用
• 新聞 / 報道 (グレー黒赤、 既存と被るリスク)

採用 3 要素:

• 配色: dark navy #0c1828 + amber departure #ffb84a + safety yellow #ffe14a + alert red #ff5050 + steel gray #3d4554 + paper white
• astro-cast (midnight space + sun emission) と surface 黒は近いが、 配色 = amber + safety yellow + alert red の departure board 系で完全別軸
• モチーフ: 空港 departure board (LED 文字 + パタパタ感、 hero に runway stripes + departure chip 帯 + pulsing alert dot、 国旗の枠は amber + 投影シャドウ)
• typography: Space Grotesk 800 (engineering / sign board feel) + JetBrains Mono (board mono)

#技術スタック

#d3-geo + topojson-client + world-atlas

import { geoMercator, geoPath } from "d3-geo"
import { feature } from "topojson-client"
import type { Topology } from "topojson-specification"

const res = await fetch("/world-110m.json") // world-atlas の 108KB JSON

const topology = await res.json as Topology
const fc = feature(topology, topology.objects.countries) // FeatureCollection

const projection = geoMercator.scale(95).center([10, 30]).translate([320, 200])
const pathGen = geoPath(projection)

world-atlas/countries-110m.json は public/world-110m.json にコピーして配信。 約 108KB。 各 feature の id が ISO 3166-1 numeric (3 桁の数値 string) なので、 国データ側に同 ID を持たせて O(N) でマッチング。

#60 ヶ国データ + flagcdn

export const COUNTRIES: Country[] = [
 { iso2: "jp", num: "392", name_ja: "日本", continent: "アジア", capital_ja: "東京", ... },
 // ... 60 ヶ国

]

export function flagUrl(iso2: string) {
 return `https://flagcdn.com/${iso2}.svg`
}

flagcdn は無料 CDN (Public Domain 相当)、 200+ ヶ国の SVG を提供。 lazy load (loading="lazy") でブラウザに丸投げ、 AI Dev Lab は介在しない。

#4 モードのロジック

function makeQuestion(mode, level, continent) {
 const pool = filterPool(continent) // 大陸フィルタ

 const target = pool[random] // 出題対象

 const n = levelCount(mode, level) // Easy 3 / Normal 4 / Hard 6

 // mode に応じて choices を生成 (国名 / 大陸 / 首都)

 return { mode, country: target, choices: shuffled, answer }
}

flag-to-continent モードは候補が 6 大陸しかないので、 Hard でも 6 までしか出ない。 他モードは 60 ヶ国の名前 / 首都プールから distractor を pickRandom。

#マップでの正解 highlight

{features.map((f) => {
 const isHit = String(f.id).padStart(3, "0") === question.country.num.padStart(3, "0")
 return <path d={pathGen(f)} fill={isHit ? "#ffb84a" : "#1a2a3e"} />
})}

{/* 正解国の centroid に国名ラベル */}
const centroid = pathGen.centroid(target)
<text x={centroid[0]} y={centroid[1] - 10}>...</text>

ISO numeric ID で完全マッチング、 正解時のみ amber に塗って国名ラベル表示。

#まだやっていないこと

• 全 195 ヶ国 (大陸単位拡張、 アフリカ全国 / ヨーロッパ全国 等)
• localStorage 永続化 + 学習進捗グラフ
• ハードモード (国旗の一部だけ表示 / モノクロ化 / ぼかし)
• 都市当て / 通貨当て / 時差クイズ / 国際情勢クイズ のモード追加
• 共有 URL でスコア自慢
• 連続正解バッジ (10 連続 / 50 連続 / 100 連続)
• Daily Challenge (毎日 1 ヶ国)
• マップクリックで国を選ぶ pin モード (GeoGuessr 風)