[{"data":1,"prerenderedAt":255},["ShallowReactive",2],{"content-/qa-slide-ui-improvements":3,"related-/qa-slide-ui-improvements":209,"all-pages-for-dir":253,"og-image-/qa-slide-ui-improvements":254},{"id":4,"title":5,"body":6,"category":190,"description":191,"extension":192,"meta":193,"navigation":194,"path":195,"project_name":196,"published":197,"publishedAt":198,"seo":199,"stem":200,"tags":201,"todo":207,"unpublished":197,"updatedAt":207,"__hash__":208},"pages/2026-06/2026-06-12/qa-slide-ui-improvements.md","一問一答をスライド形式UIに——矢印キーで77問を送る学習コンテンツ改善の記録",{"type":7,"value":8,"toc":180},"minimark",[9,13,17,22,29,32,50,57,60,63,73,79,85,88,92,98,101,105,112,123,134,145,148,155,158],[10,11,5],"h1",{"id":12},"一問一答をスライド形式uiに矢印キーで77問を送る学習コンテンツ改善の記録",[14,15,16],"p",{},"今日は学習コンテンツのUIを4本まとめて手入れした。不動産投資の一問一答へのスライド形式UI追加、ガイドページへのSVG図解の一括追加、クイズ練習ページの表示バグ修正、音楽ゲームのメロディ調整。どれも「画面を見て自分が違和感を拾い、直しはClaude Codeに回す」一日だった。",[18,19,21],"h2",{"id":20},"一問一答にスライド形式uiを追加する","一問一答にスライド形式UIを追加する",[14,23,24,28],{},[25,26,27],"code",{},"/fudosan-toshi/qa"," の一問一答は、一問ごとにコンパクトにまとまっていて図も付いている。これをスクロールで読むのはもったいない。「画面いっぱいに広げて矢印キーで移動するスライド形式にしてほしい」と頼んだ。図が大きく見えるはずだ、という読みがあった。",[14,30,31],{},"要件はこう伝えた。",[33,34,35,44,47],"ul",{},[36,37,38,39,43],"li",{},"既存の一覧表示はそのまま残し、スライド形式を",[40,41,42],"strong",{},"1個追加","する",[36,45,46],{},"1画面1問。←→キーで全77問を章をまたいで順送り",[36,48,49],{},"右サイドバーに目次を置き、今どこにいるかが分かる。クリックでジャンプもできる",[14,51,52,53,56],{},"Claude Codeが既存のデータ構造を調べてスライドコンポーネントとページシェルを作り、ハブページにカードを追加。ディープリンクと章またぎの送り（第1章末Q13→第2章Q14）までブラウザで確認して、",[25,54,55],{},"/fudosan-toshi/qa/slides"," が動き出した。",[18,58,59],{"id":59},"レイアウト調整のループ",[14,61,62],{},"ここからが本番だった。最初の出来は悪くなかったが、画面を見るたびに直したい箇所が湧いてくる。",[14,64,65,68,69,72],{},[40,66,67],{},"1周目: セクションをパキッと分ける。"," タイトル・一問一答・ワンメッセージ・チャート・現在地・出典が、ひとつながりに見えて目が迷う。「もう少しスペースを取って、セクションとしてパキッと分かりやすく」と指示したら、各ブロックにラベル付きカードを与える構造に作り替えてくれた。さらにカード型から罫線区切りのフラットなパワポ型へ書き換え、文字色もグレーからほぼ黒（",[25,70,71],{},"#1a1a1a","）に変えた。縦長の図解があるQ09や、Q40のような別の問いでも画面全体を使えていることを確認した。",[14,74,75,78],{},[40,76,77],{},"2周目: 目次から冗長な章表示を削る。"," スライドに毎回「序章」「第1章 ○○ VS …」の章表示（キッカー行）が出るのが目障りだった。毎回同じものが出るのは情報として無駄だ。右の目次を見ればどこにいるかは分かる。スライド側のキッカーを削除し、目次は「序章/第1章」の接頭辞を外して章タイトルだけ残してもらった。グルーピングとQ番号は維持。",[14,80,81,84],{},[40,82,83],{},"3周目: Q番号と質問文を2行に分ける。"," Q番号バッジと質問文が同じ行に並ぶと、長い質問がギリギリの位置で折り返されてもったいない。Q番号を1行目に単独で置き、質問文は常に2行目から全幅で始める形に変えた。バッジ分の字下げが消えて、折り返し位置の気持ち悪さがなくなった。",[14,86,87],{},"完成形を見て、解説ページも同じスライド形式にしたくなった。「変更して」と言いかけて、すぐ「変更じゃなくて追加ですね。既存のやつはそのままでいいです」と言い直した。一覧でざっと読む用途とスライドで1問ずつ確認する用途は別物で、両方残すのが正しい。",[18,89,91],{"id":90},"ガイドページにsvg図解を44点追加","ガイドページにSVG図解を44点追加",[14,93,94,97],{},[25,95,96],{},"/fudosan-toshi/guide"," 側は第1章から第8章まで解説が続くが、文章が主体で図が足りない。「大きめのh2の塊それぞれに最低1個は図が欲しい。無理に入れる必要はない」と頼み、svg-diagramスキルとdoc-communicationスキルを読み込ませて図解を設計させた。",[14,99,100],{},"結果、図が無かったh2ブロック全てにSVG図解が合計44点入った。全8ページがdevサーバーでHTTP 200を返し、図の数も想定どおり。文章を読む前に図で構造をつかめるページに変わった。",[18,102,104],{"id":103},"クイズの画面表示が嘘をつくバグ","クイズの「画面表示が嘘をつく」バグ",[14,106,107,108,111],{},"別プロジェクト（eurekapu-nuxt4）のクイズ練習ページ ",[25,109,110],{},"/quiz/practice"," で「改善の方向性の前に、まずバグを調査して」と頼んだら、バグが4件出てきた。確実に直すべきは2件。",[113,114,115,120],"ol",{},[36,116,117],{},[40,118,119],{},"不正解の後に解答＆解説ボタンを押すと、×が○に化ける",[36,121,122],{},"正解直後にNextすると、次の問題にcue線が漏れる",[14,124,125,126,129,130,133],{},"1件目が悩ましかった。不正解時には自分が選んだ選択肢が赤で表示されるのに、解答ボタンを押すと正解の選択肢だけが緑になり、自分の間違いの痕跡が消える。",[40,127,128],{},"画面表示が嘘をつく","。「あー、どうかな、これ」と声に出しながら整理した結論はこうだ——選択肢を押せば必ず回答が返るのだから、正しい答えを緑に、自分が選んで間違えたセルを赤に、",[40,131,132],{},"両方","塗ればいい。消すのが悪い。",[14,135,136,137,140,141,144],{},"この議論を実装にコメントとして残させた上で、修正に入った。",[25,138,139],{},"getOptionClass"," の書き換え、純粋関数の ",[25,142,143],{},"app/utils/quiz.ts"," への切り出し、再挑戦フロー・完走サマリー・復習モード連携・シャッフルまで一気に積んで、ユニットテスト19件を追加。テスト720件pass、ブラウザ実機確認も全項目OK。機能単位で3つに分割コミットして締めた。",[18,146,147],{"id":147},"音楽ゲームのメロディがいまいち問題",[14,149,150,151,154],{},"朝イチは ",[25,152,153],{},"/chord-rush","（コード進行の音楽ゲーム）から始めていた。「メロディーがいまいちなんすよ。音楽っぽく、かっこよく弾きたいんすよ」という雑な注文を投げたら、メロディ生成ロジックを書き換えてくれた。ユニットテスト17件pass、SSRも200、agent-browserで実際にページを開いてクライアント側のメロディ生成が動くところまで確認。4曲目として新しい曲も表示された。",[18,156,157],{"id":157},"学び",[33,159,160,167,170,177],{},[36,161,162,163,166],{},"スライドUIのレイアウトは1発では決まらない。「パキッと分ける」「毎回出る章表示を消す」「Q番号と質問を2行に分ける」と、",[40,164,165],{},"画面を見ては1点ずつ直す","ループを3周して着地した",[36,168,169],{},"「変更」と「追加」は別物。既存の一覧表示を消さずにスライドを足したことで、読み方の選択肢が増えた",[36,171,172,173,176],{},"表示バグは「正しい値を出す」だけでは足りない。不正解の赤を消して正解の緑だけ見せるのは、値としては正しくても",[40,174,175],{},"画面表示として嘘","になる。間違えた事実は画面に残す",[36,178,179],{},"図解の追加は「大きめの塊に最低1個」というルールで頼むと、スキル準拠で44点まとめて入る。1点ずつ依頼するより速い",{"title":181,"searchDepth":182,"depth":182,"links":183},"",2,[184,185,186,187,188,189],{"id":20,"depth":182,"text":21},{"id":59,"depth":182,"text":59},{"id":90,"depth":182,"text":91},{"id":103,"depth":182,"text":104},{"id":147,"depth":182,"text":147},{"id":157,"depth":182,"text":157},"dev","不動産投資の一問一答に画面いっぱいのスライドUIを追加し、レイアウト調整を重ねた記録。クイズの「×が○に化ける」表示バグ修正、ガイドへのSVG図解44点追加、音楽ゲームのメロディ改善も。","md",{},true,"/qa-slide-ui-improvements","mdx-playground",false,"2026-06-12T00:00:00.000Z",{"title":5,"description":191},"2026-06/2026-06-12/qa-slide-ui-improvements",[202,203,204,205,206],"学習コンテンツ","UI改善","Vue","SVG図解","クイズ",null,"51IiVGv-46TCH3ACgEo-xlj8VovJov9GLGGrQBg2sdQ",[210,219,228,236,245],{"title":211,"description":212,"path":213,"tags":214,"publishedAt":218,"updatedAt":207},"蔵書DBの技術書を自分用に全編リライト——Miller Column学習コンテンツとQ&A図解化をClaude Codeで作った日","蔵書DBに取り込んだ設計系技術書を自分向けにリライトする計画を立て、別セッションで13章62トピックを並列生成。Q&A形式の投資実務書77問もカード分割・矢印キー移動・SVG図解付きで作り直した記録。","/coding-principles-and-book-qa",[215,216,202,205,217],"Claude Code","蔵書DB","スキル改善","2026-06-11T00:00:00.000Z",{"title":220,"description":221,"path":222,"tags":223,"publishedAt":227,"updatedAt":207},"蔵書DBから財務DD学習コンテンツを自作する——解説とクイズをローカル限定で組み上げた記録","Turso DBに格納した財務DDの専門書2冊をソースに、解説5章＋クイズ38問の学習コンテンツをローカル限定で構築。表示確認漏れや解説不足の指摘を経て増強した試行錯誤の記録。","/zaimu-dd-learning-content",[224,202,225,226,206],"財務DD","Turso","Nuxt","2026-06-10T00:00:00.000Z",{"title":229,"description":230,"path":231,"tags":232,"publishedAt":235,"updatedAt":207},"教科書とクイズを Part 1/2 の2カラムに整え、ローカルのマークダウンビューアまで作った","決算書を読む教科書とクイズの index を Part 1/2 の2カラムに直し、ローカル専用のマークダウンビューアを生やし、目次のスクロール追従ハイライトまで仕込んだ早朝の積み残し潰し。","/textbook-quiz-twocolumn-memo-viewer",[226,204,233,203,234],"Layout","dev環境","2026-05-18T00:00:00.000Z",{"title":237,"description":238,"path":239,"tags":240,"publishedAt":244,"updatedAt":207},"統計データブックから都道府県農作物クイズを作った日","統計年鑑の主産地データをTurso DBから取り出し、左にSVGチャート・右に4択クイズの2ペインクイズページを実装。IntersectionObserverのバンド調整とsuppressObserverUntilで詰まった。","/prefecture-agriculture-quiz",[206,204,241,242,243],"IntersectionObserver","SVG","都道府県","2026-05-13T00:00:00.000Z",{"title":246,"description":247,"path":248,"tags":249,"publishedAt":252,"updatedAt":207},"クイズ画面のBS/PL全科目事前表示と動的初期残高をCodex 5回レビューで実装","簿記クイズの仕訳練習画面で、出題範囲の全勘定科目を最初から枠表示し、各BS科目の初期残高を純粋関数で動的算出する。当座預金マイナス問題を撲滅し、貸借一致を全11章で検証した記録。","/quiz-bs-pl-preset-balance",[204,206,250,251],"Codexレビュー","簿記","2026-05-09T00:00:00.000Z",[],"https://log.eurekapu.com/og/blog/qa-slide-ui-improvements.png?v=2026-06-12T00%3A00%3A00.000Z&title=%E4%B8%80%E5%95%8F%E4%B8%80%E7%AD%94%E3%82%92%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E5%BD%A2%E5%BC%8FUI%E3%81%AB%E2%80%94%E2%80%94%E7%9F%A2%E5%8D%B0%E3%82%AD%E3%83%BC%E3%81%A777%E5%95%8F%E3%82%92%E9%80%81%E3%82%8B%E5%AD%A6%E7%BF%92%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E6%94%B9%E5%96%84%E3%81%AE%E8%A8%98%E9%8C%B2&author=Kei%20Komatsu&sig=3b4da2f1cd479695",1781333884853]