FLOW ANATOMY #28 — 1サイトを縦に解剖する
小倉山かるた入門は、
なぜ読んだそばからとらせるのか。
技法は『点』、サイトは『線』。架空のかるた入門『小倉山かるた／OGURAYAMA KARUTA』は、競技かるたのルールを一気に説明しません。かわりに札の二種類→あそび方3手順→ここで一度、実際に札をとるという順番を踏みます。読み手が上の句を読み、場に並んだ6枚の取り札から正しい一枚を選ぶ——正解すれば緑の縁でふわりとはずみ、お手つきなら赤く縁取られて即座に「お手つき！」の判定文がライブリージョンに更新される。そのあとで「決まり字」という上級ルールを教え、さらに大会の流れ、最後に用語集で締める。フォーム入力を求めるのではなく、言葉で説明したことを、その場で手を動かして確かめさせる——説明の途中に体験を一度だけ置き、後段の章からそこへ読者を送り返す read-then-play の設計を、章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
入口→札→あそび方→やってみる→決まり字→大会→用語集。他のFLOWシリーズが「見せる／魅せる」ことに緩急をつけるのに対し、このサイトは説明と体験の往復で緩急をつけます。山場は中央の「やってみる」章一つだけ。そこへ向けて手順をぎりぎりまで削り、そこを過ぎたら上級ルール・大会・用語集と、静かに情報量を積み増していきます。色は朱と藍の二色に絞り、和紙の質感で終始"教材らしい"落ち着きを保ちます。
- 00INTRO起 — 小さな入口と、常に進み具合を示す進捗バー動
- 01FUDA知 — 札は、読み札と取り札の二種類だけ動
- 02RULE備 — やることは三つだけ、線画アイコンで数える動
- 03PLAY核 — このページの核。実際に一枚とってみる動
- 04KIMARI伸 — 次の段階。最後まで聞かない上級ルール動
- 05TAIKAI拡 — 大会の一試合を、壱弐参肆の4ステップで動
- 06YOUGO結 — 用語集で締め、行動は画面の外へ渡す動
小さな入口の奥で、進捗バーが静かに動く
狙い画面いっぱいのビジュアルヒーローは置きません。左に「はじめての かるた」という小さな一言と、ふりがな付きの二行見出し「読みながら、／とってみる。」。本文は"このページは読むだけの説明ではありません"と、これから起きることを先に予告します。CTAはボタンではなく「札を見る ↓」という控えめなテキストリンク一つだけ。右には読み札・取り札が重なるSVGのカードが飾りとして置かれ、本編で本物の札が縦書きで並ぶことの小さな予告になっています。ヘッダーは先頭から最後までposition: stickyで居座り、下端の細い進捗バーが scroll のたびに幅を更新する——長い説明ページで「あとどれくらい？」を、言葉を使わず視覚だけで答え続けます。
つなぎここで交わす約束は二つ。「読むだけでなく、あとで手を動かす」という体験の予告と、「迷わないための進捗表示」という安心設計。この二つが、以降の全章の土台になります。
札は、二種類だけ。絵入りと、かなだけ。
狙い百人一首を知らない人がまず迷うのが「どっちの札を見ればいいのか」。この章はそれを二枚のカードで一気に解決します。左に「読み札」——歌人の似姿と、上の句＋下の句の全文。右に「取り札」——下の句だけをかなで、絵なしで。二枚とも同じ寸法のSVGで描かれ、歌の一節はwriting-mode: vertical-rlの縦書きで札の中を流れます。カードはdata-ck-staggerで時間差にふわりと現れ、見比べる前に「まず読む」「まずとる」という役割の違いが刷り込まれる。文章で定義を並べるより先に、絵と縦書きの質感そのもので二つの違いを見せてしまう設計です。
つなぎ二種類の札という前提が腹に落ちて初めて、次の「あそび方」が意味を持ちます。ここを飛ばして手順だけ読んでも、"何をとっているのか"が分からないままになる。
やることは、三つだけ。線画アイコンで数える。
狙い「取り札をならべる」「読み手がよむ」「早くさわった人がとる」——競技かるたの手順を、思い切って三つまで削ります。各ステップには番号バッジと、重なる札・吹き出し・札に伸びる手を描いた一色の線画SVGアイコンを添え、一つずつ現れる。文章量よりも"1→2→3"という順序の見た目そのものが理解を運びます。三つ目のステップではお手つきという新語だけをそっと太字にし、「まちがえると相手から札を1枚もらう」という結果もセットで、同じ一文の中に書き添えます。
つなぎ三手順を頭で分かった状態で、すぐ次の章に生の体験が待っています。ここで説明を終わらせず、間を置かずに手を動かさせるのが、このページ一番の仕掛けです。
このページの核。実際に、一枚とってみる。
狙い読んで理解した三手順を、その場で試させます。読み手パネルには上の句が縦書きで表示され（決まり字モードでは決まり字の部分だけ）、下に6枚の取り札がSVGボタンとして並ぶ。正しい札を選ぶ（クリック、Tab+Enter、数字キー1〜6のいずれでも）と縁が緑に染まってふわりとはずみ、違う札を選ぶと赤く縁取られて小さく揺れ、role="status" aria-live="polite"の判定文が「お手つき！ それは別の歌の札です。」と即座に更新される——正誤のフィードバックを、色・動き・ライブリージョンのテキスト通知の三重で返す設計で、スクリーンリーダー利用時にも同じ判定が読み上げられます。上部の「やさしい／決まり字」はセグメント型トグルで、aria-pressedの状態がそのまま見た目のインジケータになります。6首をとりきると、決まり字でとれた数とお手つき数の2スコアだけを見せる結果画面に切り替わります。
つなぎここで手を動かした感覚があるからこそ、次章の「決まり字」という上級ルールが"聞いたことのある話"として頭に入ります。説明ページの途中に実物のミニゲームを挟むこと自体が、この型の名前（manual-play）そのものです。
次の段階。最後まで、聞かない。
狙い「なれてくると、上の句を最後まで聞かない」という上級者の技を、6首の実例で見せます。朱い文字だけが決まり字——「あきのたの」「はるすぎて」など、歌ごとに長さの違う数文字を赤で強調した一覧を、2列のグリッドに並べる。このリストは静的なコピーではなく、前章のミニゲームと同じ歌データの配列から生成されています。つまり実演で使った歌と、この一覧の歌は完全に同じ6首——データを二重に持たないから、内容がずれる心配がありません。末尾の一文は「上の『やってみる』を決まり字モードに切りかえると…」と、読み終えた読者を再びゲームへ送り返す導線になっています。
つなぎ説明→体験→さらに上の説明→もう一度体験、という往復を促す一文をここに置くことで、ページは一本道ではなく行き来できる学習ループとして機能し始めます。
大会の流れは、壱弐参肆で。
狙い一人で遊べるようになった先の話——実際の大会の一試合を、壱・弐・参・肆と大字（漢数字）を振った4ステップで見せます。100枚から50枚を選び25枚ずつ並べる「札をわける」、暗記の15分、読まれてとる本編、陣が空になったら勝ち。この章では、直前のミニ体験（6首・お手つき即時判定）が、大会の「札を取り、自分の陣を空にする」という勝敗構造を小さく再現していたことを種明かしします——25枚の陣や送り札まではミニ体験に持ち込みませんが、"とって、減らす"という骨格は共通です。数字は具体的に——15分、25枚、50枚——を惜しまず書き、ふわっとした説明で終わらせません。
つなぎ入門はここで終わってもいい内容ですが、あえて「その先」を見せることで、このミニ体験がおもちゃで終わらず本物の競技につながっているという実感を残します。
最後は、用語で締める。フォームではなく。
狙い多くの入門ページはメール登録フォームで終わりますが、このページは用語集で終わります。読み札・取り札・上の句/下の句・決まり字・お手つき・空札・陣・送り札の8語を、2列の定義リストに時間差で並べる。どれもここまでの章で一度は使った言葉ばかりで、新しい情報はゼロ——それでも並べ直すことで「もう知っている言葉のリストになった」という達成感を静かに演出します。最後の一文は次の行動を「フォーム送信」ではなく「となりに札をならべて、だれかに読んでもらうだけ」という、画面の外の行動に置く。フッターには架空の教材であること、和歌は百人一首（パブリックドメイン）からの引用であることを明記し、静かに幕を引きます。
つなぎCTAがないことこそが、このページのCTAです。行動を画面の中に閉じ込めず、"実際に紙の札で遊んでほしい"というゴールに向けて手を離す設計は、このshowcaseが「体験させる」ことを目的にしていた証拠でもあります。
TAKEAWAY“説明の途中に体験を挟む”ための5原則
小倉山かるた入門から取り出せる、操作手順・教材・オンボーディング系のサイト全般に持ち帰れる設計則。#27 元町銀座商店街 の list-first が"探せる状態"を主役にするのに対し、このサイトは同じ list-first でも"試せる状態"を主役にします。#21 はこぶね見積 の form-first(入力させて計算を返す)と比べると、フォーム入力を求めるのではなく、札のボタンを選ぶだけで応答を返す点が対照的です。
説明を「体験の予告」から始める
導入コピーの一文に、これから手を動かすことになると先に書いておく。読者は"読むだけのページ"だと油断しないまま進めるので、後半で急に操作を求められても戸惑わない。
手順は体験の直前で、限界まで削る
三手順・四手順が精一杯。説明を長くするほど、体験に入る前に読者の集中が切れる。要点だけを番号とアイコンで見せ、細部は体験のあとに補う。
正誤フィードバックは色・形・音声の三重で返す
正解は縁の色とわずかな弾み、誤りは色と小さな揺れ、そしてaria-liveの判定文。視覚だけに頼ると見落とされ、テキストだけだと味気ない。三チャンネルを揃えて初めて"手応え"になる。
データは一箇所に置き、説明と体験で共有する
静的な解説リストとインタラクティブなデモが同じ配列を参照すれば、内容がずれる心配がなくなる。二重管理をやめることは、保守性だけでなく読者への信頼にも直結する。
終着点は、画面の外に置いてもいい
すべてのページがフォーム送信やボタンクリックで終わる必要はない。ここでの学びを"次はリアルな紙の札で"と画面の外へ手渡すことで、デジタル教材が現実の行動への橋渡しになる。