一問一答をスライド形式UIに——矢印キーで77問を送る学習コンテンツ改善の記録

今日は学習コンテンツのUIを4本まとめて手入れした。不動産投資の一問一答へのスライド形式UI追加、ガイドページへのSVG図解の一括追加、クイズ練習ページの表示バグ修正、音楽ゲームのメロディ調整。どれも「画面を見て自分が違和感を拾い、直しはClaude Codeに回す」一日だった。

一問一答にスライド形式UIを追加する

/fudosan-toshi/qa の一問一答は、一問ごとにコンパクトにまとまっていて図も付いている。これをスクロールで読むのはもったいない。「画面いっぱいに広げて矢印キーで移動するスライド形式にしてほしい」と頼んだ。図が大きく見えるはずだ、という読みがあった。

要件はこう伝えた。

• 既存の一覧表示はそのまま残し、スライド形式を1個追加する
• 1画面1問。←→キーで全77問を章をまたいで順送り
• 右サイドバーに目次を置き、今どこにいるかが分かる。クリックでジャンプもできる

Claude Codeが既存のデータ構造を調べてスライドコンポーネントとページシェルを作り、ハブページにカードを追加。ディープリンクと章またぎの送り（第1章末Q13→第2章Q14）までブラウザで確認して、/fudosan-toshi/qa/slides が動き出した。

レイアウト調整のループ

ここからが本番だった。最初の出来は悪くなかったが、画面を見るたびに直したい箇所が湧いてくる。

1周目: セクションをパキッと分ける。 タイトル・一問一答・ワンメッセージ・チャート・現在地・出典が、ひとつながりに見えて目が迷う。「もう少しスペースを取って、セクションとしてパキッと分かりやすく」と指示したら、各ブロックにラベル付きカードを与える構造に作り替えてくれた。さらにカード型から罫線区切りのフラットなパワポ型へ書き換え、文字色もグレーからほぼ黒（#1a1a1a）に変えた。縦長の図解があるQ09や、Q40のような別の問いでも画面全体を使えていることを確認した。

2周目: 目次から冗長な章表示を削る。 スライドに毎回「序章」「第1章 ○○ VS …」の章表示（キッカー行）が出るのが目障りだった。毎回同じものが出るのは情報として無駄だ。右の目次を見ればどこにいるかは分かる。スライド側のキッカーを削除し、目次は「序章/第1章」の接頭辞を外して章タイトルだけ残してもらった。グルーピングとQ番号は維持。

3周目: Q番号と質問文を2行に分ける。 Q番号バッジと質問文が同じ行に並ぶと、長い質問がギリギリの位置で折り返されてもったいない。Q番号を1行目に単独で置き、質問文は常に2行目から全幅で始める形に変えた。バッジ分の字下げが消えて、折り返し位置の気持ち悪さがなくなった。

完成形を見て、解説ページも同じスライド形式にしたくなった。「変更して」と言いかけて、すぐ「変更じゃなくて追加ですね。既存のやつはそのままでいいです」と言い直した。一覧でざっと読む用途とスライドで1問ずつ確認する用途は別物で、両方残すのが正しい。

ガイドページにSVG図解を44点追加

/fudosan-toshi/guide 側は第1章から第8章まで解説が続くが、文章が主体で図が足りない。「大きめのh2の塊それぞれに最低1個は図が欲しい。無理に入れる必要はない」と頼み、svg-diagramスキルとdoc-communicationスキルを読み込ませて図解を設計させた。

結果、図が無かったh2ブロック全てにSVG図解が合計44点入った。全8ページがdevサーバーでHTTP 200を返し、図の数も想定どおり。文章を読む前に図で構造をつかめるページに変わった。

クイズの「画面表示が嘘をつく」バグ

別プロジェクト（eurekapu-nuxt4）のクイズ練習ページ /quiz/practice で「改善の方向性の前に、まずバグを調査して」と頼んだら、バグが4件出てきた。確実に直すべきは2件。

1. 不正解の後に解答＆解説ボタンを押すと、×が○に化ける
2. 正解直後にNextすると、次の問題にcue線が漏れる

1件目が悩ましかった。不正解時には自分が選んだ選択肢が赤で表示されるのに、解答ボタンを押すと正解の選択肢だけが緑になり、自分の間違いの痕跡が消える。画面表示が嘘をつく。「あー、どうかな、これ」と声に出しながら整理した結論はこうだ——選択肢を押せば必ず回答が返るのだから、正しい答えを緑に、自分が選んで間違えたセルを赤に、両方塗ればいい。消すのが悪い。

この議論を実装にコメントとして残させた上で、修正に入った。getOptionClass の書き換え、純粋関数の app/utils/quiz.ts への切り出し、再挑戦フロー・完走サマリー・復習モード連携・シャッフルまで一気に積んで、ユニットテスト19件を追加。テスト720件pass、ブラウザ実機確認も全項目OK。機能単位で3つに分割コミットして締めた。

音楽ゲームのメロディがいまいち問題

朝イチは /chord-rush（コード進行の音楽ゲーム）から始めていた。「メロディーがいまいちなんすよ。音楽っぽく、かっこよく弾きたいんすよ」という雑な注文を投げたら、メロディ生成ロジックを書き換えてくれた。ユニットテスト17件pass、SSRも200、agent-browserで実際にページを開いてクライアント側のメロディ生成が動くところまで確認。4曲目として新しい曲も表示された。

学び

• スライドUIのレイアウトは1発では決まらない。「パキッと分ける」「毎回出る章表示を消す」「Q番号と質問を2行に分ける」と、画面を見ては1点ずつ直すループを3周して着地した
• 「変更」と「追加」は別物。既存の一覧表示を消さずにスライドを足したことで、読み方の選択肢が増えた
• 表示バグは「正しい値を出す」だけでは足りない。不正解の赤を消して正解の緑だけ見せるのは、値としては正しくても画面表示として嘘になる。間違えた事実は画面に残す
• 図解の追加は「大きめの塊に最低1個」というルールで頼むと、スキル準拠で44点まとめて入る。1点ずつ依頼するより速い