百人一首暗記アプリ — 情景を味わいながら、100首を覚えるWeb体験

百人一首暗記アプリ とは

百人一首暗記 は、藤原定家撰の小倉百人一首 100 首を「読み物として味わいながら覚える」ためのWebアプリです。単語帳的な機械暗記ではなく、句から句へ自然に巡る回遊体験のなかで、歌の情景・作者の境遇・歴史背景まで含めて記憶の根を張ることを狙いました。

無料・登録不要、Cloudflare Pages の CDN で配信されているため日本国内からの読み込みは数百ミリ秒で完了します。

トップページ。Gemini で生成した「四季を彩る絵巻」のヒーロー画像、五つの並び替えタブ (番号順 / 決まり字 / 作者 / テーマ / 時代)、各句のサムネイル付き一覧。

解決したかった「暗記の苦しさ」

百人一首は中学・高校の古典の入り口として親しまれていますが、丸暗記は退屈で、記憶もすぐ抜けます。市販の暗記アプリは「上の句↔下の句」の機械的な反復ばかりで、歌に込められた情景や歌人の人生背景に触れる動線が乏しいのが現状です。

そこで本アプリでは、暗記の主導線を 「読み物として味わう」 に振り直しました。

  • 句を選んで詳細ページへ
  • Gemini で生成した情景イラストを眺める
  • 「いつ・誰が」「情景」「意味」を読む
  • ページ末尾の 関連する句 (4 軸) から次の句へ自然に巡る

クイズは「学習チェック」として独立した /quiz ページに分離しました。詳細ページ内に置くと「すでに全文が見えている」ので無意味なギミックになるためです。

100 首分の情景イラストを Gemini で生成

百人一首には公的に決まった図版が無く、また既存の情景画を流用すると著作権・SEO 重複コンテンツの両面で問題が生じます。本アプリでは Gemini 3.1 Flash Image Preview で 100 首それぞれに固有の情景イラストを生成しました。

プロンプトは「和の意匠・墨絵風・淡い和紙の質感・雅な色合い」で統一し、各句の scene フィールドからその歌特有の風景描写を差し込んでいます。テキストは出さない設計です。

詳細ページ。第 87 番「村雨の 露もまだひぬ 真木の葉に 霧立ちのぼる 秋の夕暮れ」(寂蓮法師)。縦書きの上下句、Gemini 生成の情景画像、いつ・誰が / 情景 / 意味の解説、4 軸の関連リンク。

100 枚 × 約 6 円で合計 600 円ほど。これに加えて SNS 共有用の OG 画像 100 枚と、Hero 画像・ファビコンを加えても 2,000 円以下でビジュアル基盤が完成しました。生成 → WebP 変換 (sharp) で 97.6MB の PNG が 28.5MB に圧縮され、Cloudflare CDN で軽快に配信されます。

4 つの軸で「関連する句」を辿る

詳細ページの末尾には、現在の句と関連する句を 4 つの軸で並べています。

  1. 同じ作者 — 紫式部、清少納言などはここから複数歌を一気に把握できる
  2. 同じテーマ — 恋・四季・旅と別れ・無常・宮廷・嘆き 等の 10 種から
  3. 同じ決まり字グループ — 一字決まり〜七字決まり (競技かるたの暗記の核)
  4. 同じ時代 — 奈良 / 平安初期 / 中期 / 後期 / 鎌倉

これにより「定家から崇徳院、後鳥羽院、順徳院」と歴史の流れで辿ることもできれば、「むらさめの → むらさめの作者 → 寂蓮法師の他の関連歌」のように好きな切り口で深掘りできます。

クイズは別コンテンツとして独立

/quiz はランダム 10 問チャレンジ。出題タイプは 2 種類あり、出題上部のバッジで一目で識別できます。

  • 上の句 → 下の句 (朱色バッジ) — 上の句が出題され、続く下の句を 4 択から選ぶ
  • 下の句 → 上の句 (古色バッジ) — 下の句が出題され、その前にくる上の句を 4 択から選ぶ

ダミー選択肢は 同テーマ 60% / ランダム 30% / 同決まり字グループ 10% の比率で混ぜています。同決まり字グループの混入は引っかけ難易度が高すぎるため、敢えて少なめにして「適度な紛らわしさ」に調整しました。

最後にスコア (10 問中 N 正解) と称号 (達人 / 優れた歌人 / 学びの途中 / これから) が出ます。1 問解くごとに「該当の句の解説を見る」リンクが表示され、間違えた句の詳細にすぐ飛べる導線にしています。

クイズページ。上部に「上の句 → 下の句」のバッジ、現在のスコアと進捗バー、漢字交じり文と小さくひらがな読み、4 択ボタンの中も漢字＋ひらがな併記。

縦書き・ルビ・アクセシビリティ

句本文は伝統に倣い writing-mode: vertical-rl で縦書き表示。Tailwind の flex-col が縦書きでは「右から左に列を並べる」になるという CSS 仕様の盲点に一度ハマり、Gemini Pro レビューで救われました (上の句が右、下の句が左に正しく並ぶ)。

ルビは <ruby> タグだけだとスクリーンリーダーが「秋あき」と二重読みする事故が起きるため、aria-hidden="true" の漢字交じり表記と sr-only のひらがな読みを分離する Ruby コンポーネントで対応。漢字が読めない初学者向けには、出題プロンプトと選択肢の各文章にも <small> でひらがなを併記しています。

モバイルでも崩れない

100 首一覧は 5 つの並び替えタブを持ちますが、モバイルでは横スクロール、PC では折り返し表示と切り替えています。詳細ページの縦書きは h-72/h-96 で固定すると文末欠落が起きるバグを Gemini レビューで発見し、h-auto にして可変高さに変更しました。

モバイルでの詳細ページ。第 9 番「花の色は うつりにけりな いたづらに わが身世にふる ながめせし間に」(小野小町)。縦書き本文、情景画像、解説が縦に積まれて読みやすいレイアウト。

技術スタック

| 層 | 採用 | |---|---| | フレームワーク | Next.js 16 App Router (Turbopack) | | UI | TypeScript / Tailwind CSS 3 / Noto Serif JP + Noto Sans JP + Klee One | | 画像生成 | Gemini 3.1 Flash Image Preview | | 画像最適化 | sharp (PNG → WebP 88% 品質) | | 配信 | Cloudflare Pages (静的書き出し output: 'export'、全 107 ページ SSG) | | ドメイン | hyakunin.howlrs.net (Cloudflare Universal SSL) | | 検索エンジン | Google Search Console 登録済み (sitemap.xml 103 URL) | | CI | GitHub Actions (lint + typecheck + test + build) |

100 首は完全にハードコード (src/data/poems.ts、80KB)。データベース不要、認証不要、サーバーサイドコード不要。「読み物 + クイズ」だけに振り切った最小構成だからこそ、CDN 配信で世界どこからでも数百ミリ秒で開きます。

出典・著作権

上の句・下の句の本文、作者、番号は パブリックドメイン の古典原典に依拠しています。各句に添えた「いつ・誰が」「情景」「意味」の解説は本アプリ運営者の独自表現で執筆し、SEO の重複コンテンツとならないよう公知情報を再構成しました。

詳しくは このサイトについて をご覧ください。

まとめ

  • 百人一首 100 首を 読み物 × ビジュアル × クイズ で楽しむWebアプリ
  • Gemini で各句固有の情景イラストを 100 枚生成 (合計約 1,500 円)
  • 4 軸 (作者 / テーマ / 決まり字 / 時代) の関連リンクで回遊体験を実現
  • クイズは独立コンテンツ、ランダム 10 問チャレンジ
  • Next.js 16 + Cloudflare Pages の静的配信で爆速
  • 無料・登録不要 → https://hyakunin.howlrs.net/

学校で百人一首を覚える必要がある人、競技かるたを始めようとしている人、古文の世界をもう一度味わいたい人、どなたでも。