[{"data":1,"prerenderedAt":211},["ShallowReactive",2],{"content-/qa-slide-ui-improvements":3,"all-pages-for-dir":209,"og-image-/qa-slide-ui-improvements":210},{"id":4,"title":5,"body":6,"category":190,"description":191,"extension":192,"meta":193,"navigation":194,"ogImage":195,"path":196,"project_name":197,"published":198,"publishedAt":199,"seo":200,"stem":201,"tags":202,"todo":195,"unpublished":198,"updatedAt":195,"__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,null,"/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",[203,204,205,206,207],"学習コンテンツ","UI改善","Vue","SVG図解","クイズ","5HmT8A0c4dwh9rSauED0bXB72nrOkAW7bn5Elh4QpDs",[],"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",1782528852631]