[{"data":1,"prerenderedAt":497},["ShallowReactive",2],{"content-/bookkeeping-notes-practice-redesign":3,"related-/bookkeeping-notes-practice-redesign":448,"all-pages-for-dir":495,"og-image-/bookkeeping-notes-practice-redesign":496},{"id":4,"title":5,"body":6,"category":430,"description":431,"extension":432,"meta":433,"navigation":390,"path":434,"project_name":435,"published":436,"publishedAt":437,"seo":438,"stem":439,"tags":440,"todo":446,"unpublished":436,"updatedAt":446,"__hash__":447},"pages/2026-06/2026-06-11/bookkeeping-notes-practice-redesign.md","簿記学習ノートの演習を自作問題集ベースに再設計し、クラウド会計風の帳簿アプリを実装した日",{"type":7,"value":8,"toc":411},"minimark",[9,13,17,21,24,27,30,58,61,65,68,80,91,98,102,105,125,128,131,135,138,141,164,167,170,173,193,196,199,202,205,223,226,229,232,235,256,259,262,269,276,279,300,303,308,311,317,320,324,331,338,342,345,352,355,376,379],[10,11,5],"h1",{"id":12},"簿記学習ノートの演習を自作問題集ベースに再設計しクラウド会計風の帳簿アプリを実装した日",[14,15,16],"p",{},"簿記の学習ノートの演習ページを大きく作り直した一日。朝、前日の計画書の続きを進めてもらっていたら、試作された問題文を読んだところで手が止まった。「この問題、誰が品質を保証するんだ？」——そこから方針を転換して、AIに作文させた70問を全部捨て、自分で論点網羅をチェック済みの自作仕訳問題集をベースに組み直すことにした。午後は紙の帳簿を前提にした出題への違和感から、クラウド会計風の帳簿アプリを丸ごと新規実装してもらった。",[18,19,20],"h2",{"id":20},"自動生成の70問を捨てる決断",[14,22,23],{},"前日に立てた計画では、総復習問題として70問をAIに作文させる流れになっていた。続きを進めてもらう前に、まず試作分がどこで確認できるのかを聞いたら、データだけが存在してページに組み込まれていない状態だった。「その7問が確認できるページがどこかわからないじゃないですか」と突っ込んで仮組みしてもらい、実際にブラウザで試作問題を眺めて気づいた。",[14,25,26],{},"私には別に、自作の仕訳問題集が191問ある。そちらは全論点を網羅できているか自分でチェック済みだ。しかも数字の作り方に思想がある——300とか30とか、桁をわざと軽くして数字に意味を持たせていない。簿記の問題は結局、借方と貸方にどの勘定科目を置くかが本体で、売却損益の計算などを除けば金額はほとんど飾りだからだ。AIが作文した「商品5万円」のようなそれらしい数字は、むしろノイズになる。",[14,28,29],{},"そこで方針を切り替えた。",[31,32,33,41,48,55],"ul",{},[34,35,36,40],"li",{},[37,38,39],"strong",{},"新規の作文は廃止","。検証済みの既存191問を演習ページに流用する",[34,42,43,44,47],{},"問題データを",[37,45,46],{},"シングルソース（SSOT）化","。ノート側に問題の複製を持たない",[34,49,50,51,54],{},"サンプル問題に付いていた良い解説（「定期預金は満期まで引き出せない代わりに利率が高め」のような周辺知識）は、捨てずに",[37,52,53],{},"問題集側のデータに統合","する",[34,56,57],{},"計画書のステップも「作文する」から「既存問題を流用する」に書き換える",[14,59,60],{},"解説の統合では、3段落構成の解説が81問分あることがわかり、データ型と問題集側の表示ロジックを3段落対応に拡張してもらった。解説のリフレーズにはdoc-communicationスキルの文章技法を適用させている。親計画・進捗記録・演習設計書の3か所も新方針で更新済みだ。",[18,62,64],{"id":63},"aiと対話するためのユニークid表示","AIと対話するためのユニークID表示",[14,66,67],{},"流用を進める中で、指示の出し方に詰まる場面があった。「問13の解説を直して」と言っても、ページ上の問番号とデータ側の問題が一対一に紐づいていないと、どれを指しているのか伝わらない。実際、ページ側の連番が飛んでいて「問2〜6はどこに行った？」と聞く羽目になった（答え: 元から存在しない飛び番だった）。",[14,69,70,71,79],{},"対策として、",[37,72,73,74,78],{},"問題集側のユニークID（",[75,76,77],"code",{},"q_4_4_2"," のような形式）を各問カードの横にドラフト表示","してもらった。",[31,81,82,85,88],{},[34,83,84],{},"「問n」バッジの横に、小さくグレーのモノスペースでIDを出す",[34,86,87],{},"「q_4_3_3 の解説を直して」と一発で対象を特定できる",[34,89,90],{},"本番公開前にspanを1つ消せば非表示に戻せる",[14,92,93,94,97],{},"AIと共同で教材を編集するなら、",[37,95,96],{},"人間とAIが同じ座標系で対象を指せること","が先決だと実感した。「普通預金から定期預金への振り替えの論点、私の問題集にあったっけ？」という突き合わせも、IDがあると「q_4_4_2 がそれです（口座開設という文言は付くが仕訳は振替そのもの）」と即答が返ってくる。",[18,99,101],{"id":100},"連続回答uiの調整","連続回答UIの調整",[14,103,104],{},"演習のUIも作り直した。最初はBack/Nextで1問ずつ送る形だったが、ノート内の演習ページなのだから、全問を縦に並べて連続で答えられる方がいい。さらに、ここは試験ではなく理解確認の場なので、出し方も変えた。",[31,106,107,113,119],{},[34,108,109,110],{},"Back/Nextのページ送りをやめ、問1、問2…と",[37,111,112],{},"全問を縦に連続表示",[34,114,115,118],{},[37,116,117],{},"解説は最初から表示","しておく（隠さない）",[34,120,121,122],{},"選択肢カードを選んだら",[37,123,124],{},"即座に正誤が返る",[14,126,127],{},"ただし一度シンプルにしすぎて、すぐ要望を追加した。選択肢をいちいち選びたくない人もいる。間違いの選択肢をわざわざクリックするのは嫌だから、押せば正解がハイライトされる**「解答を見る」ボタンも残す**（こちらは集計にカウントしない）。回答方法を1つに絞らず、選んで答える人と眺めて確認する人の両方の動線を用意した。",[14,129,130],{},"細かいところでは、解説画像が左に寄っていたのを中央配置に直してもらうなど、ブラウザで見ては指摘するループを回した。解説画像も191枚揃っていることを確認済みだ。",[18,132,134],{"id":133},"カテゴリごとサンプル3問問題集リンクの構成へ","カテゴリごとサンプル3問＋問題集リンクの構成へ",[14,136,137],{},"構成も揺れた末に落ち着いた。最初は対応する演習問題を各サンプル問題の直下に全部ぶら下げる形を試したが、ふと「70問の枠自体がもう意味がない」と気づいた。全191問をノート側に並べたら問題集の複製になるだけだ。",[14,139,140],{},"最終形はこうした。",[31,142,143,150,157],{},[34,144,145,146,149],{},"カテゴリごとに",[37,147,148],{},"サンプル問題を3問だけ","出す",[34,151,152,153,156],{},"残りは",[37,154,155],{},"仕訳問題集の該当章へのリンクカード","で誘導し、そちらで解いてもらう",[34,158,159,160,163],{},"カテゴリの章立て・タイトル・問数（現金・預金まわり17問、商品売買と債権債務51問、など）は",[37,161,162],{},"問題集側と完全一致","させる",[14,165,166],{},"タイトルが食い違うと、学習者がノートと問題集を行き来したときに迷子になる。章タイトルに残っていた「70問」表記も一掃してもらった。ノートは地図、問題集が本体、という役割分担がやっと言葉になった。",[18,168,169],{"id":169},"長大ページを論点別の個別ページに分割",[14,171,172],{},"新構成にしても、1ページに11カテゴリ×3問＝33問が縦に並ぶと長すぎた。スクロールバーが豆粒になったのを見て、ページを分割することにした。提案すると「分割に賛成です。個別ページなら解説章から『この論点の演習はここ』と直リンクも張れます」と返ってきて、ナビの技術確認から進めてもらった。",[31,174,175,181,187,190],{},[34,176,177,180],{},[37,178,179],{},"総復習問題",": トップをインデックスにして、11カテゴリをそれぞれ個別ページ（動的ルート）へ。補足・学習レベルの目安・まとめの記述はインデックスに残す",[34,182,183,186],{},[37,184,185],{},"模擬試験対策",": 同じ要領で、3つの大問ごとのページ＋インデックス（イントロ・戦略・まとめ）に分割",[34,188,189],{},"ノート用レイアウトをサブページ対応に改修し、左サイドバーのナビも追従させる",[34,191,192],{},"i18n設定を再生成し、新ページを登録",[14,194,195],{},"模擬試験対策の方は中身を変えずに器だけ先に分割しておいて、自作問題集ベースへの置き換えは別タスクとして切り出した。一度に全部やらず、構成変更とコンテンツ差し替えを分けたのは正解だったと思う。",[18,197,198],{"id":198},"学習方法ページの不整合に気づく",[14,200,201],{},"ノートの学習方法ページを読み返していて、引っかかった。「理解が大事」と言っているのに、学習計画は「1周目で理解度3〜4割、2周目で5〜7割、3周目で定着」と3周前提で書いてある。理解せよと言いながら、わからないまま周回することを推奨している。これは不整合だ。",[14,203,204],{},"考えた結果、整理はこうなった。",[31,206,207,214,220],{},[34,208,209,210,213],{},"1周目は全体像のスキャン、つまり",[37,211,212],{},"地図を手に入れるフェーズ","と位置づける",[34,215,216,217],{},"理解できたかどうかは自己申告ではなく、",[37,218,219],{},"各フェーズに置いた理解度テストの正答率で測る",[34,221,222],{},"簿記なら、仕訳が切れること＝理解できていること、とほぼ等価に扱える。あとは用語を覚えているかどうか",[14,224,225],{},"この理屈でページを再構築してもらい、ついでに繰り返し説明している段落を集約させた。方針は「同じ主張は1回だけ書き、その1回をマゼンタ強調で立たせる」。本文は約20行スリムになった。説明を重ねて安心するのは書き手側の都合で、読み手には1回強く言う方が届く。",[18,227,228],{"id":228},"章全体の裏取りと並列校正",[14,230,231],{},"別セッションでは、前日に作ったストーリーシートが全27章に反映済みかの裏取りもやってもらった。結論は、本文25章は反映済み、演習2章（総復習問題・模擬試験対策）が途中——前者は今日の作業で完了し、後者をタスクとして切り出した形だ。",[14,233,234],{},"あわせて校正エージェントを並列で走らせた。",[31,236,237,243,246,249],{},[34,238,239,240],{},"修飾語の順序・文のねじれ・助詞など",[37,241,242],{},"32箇所を校正",[34,244,245],{},"章番号の誤記1件（「②商品売買」→正しくは④）を修正",[34,247,248],{},"章間の継続性リンクをアンカー付きに修正",[34,250,251,252,255],{},"リンク切れスキャンは問題なし、",[37,253,254],{},"テスト2,418件グリーン","、進捗memoも更新",[14,257,258],{},"複数エージェントに章を分担させて、完了通知を待ちながら検出事項だけ自分のセッションで直していく流れが板についてきた。",[18,260,261],{"id":261},"クラウド会計風の帳簿アプリを新規実装",[14,263,264,265,268],{},"午後、帳簿組織の章を眺めていて根本的な違和感に行き当たった。仕訳帳の記載事項をスライド画像6枚の切り替えで説明していたのだが、そもそもこれは",[37,266,267],{},"紙の帳簿を前提にした出題","に引きずられた構成だ。試験はいまだに紙の帳簿の書式（仕丁欄、赤記、繰越記入）を問うてくるが、実務はクラウド会計や会計ソフトで動いている。教材がその時代錯誤を無批判になぞるのは嫌だった。",[14,270,271,272,275],{},"そこで、画像ではなくテーブルデータで帳簿体系を丸ごと再現する",[37,273,274],{},"クラウド会計風の帳簿アプリ","を、ノート内の別アプリケーションとして作ってもらうことにした。スライドのページには「紙の帳簿を前提にした出題が続いている」という解説とアプリへのリンクを入れて、両者を橋渡しする。",[14,277,278],{},"実装はプランモードで計画を立てさせ、Codexレビューを通したうえで進めてもらった。",[31,280,281,287,290,297],{},[34,282,283,286],{},[37,284,285],{},"手計算で検証済みの取引データセット","を1つ用意し、そこから各帳簿を純粋関数で導出する設計",[34,288,289],{},"仕訳帳・総勘定元帳・試算表のテーブルコンポーネント3つ",[34,291,292,293,296],{},"補助簿ページ11枚: 出納帳、仕入帳・売上帳、",[37,294,295],{},"商品有高帳（FIFO・移動平均の両対応、ここが山場）","、売掛金元帳・買掛金元帳など、全15ページ",[34,298,299],{},"勘定科目をクリックすると元帳へ遷移し、仕訳帳アンカー（紙の仕丁欄の代替）で転記元の行がハイライトされる",[14,301,302],{},"検証も一通り回してもらった。テスト2,454件すべて合格、試算表の貸借一致（1,155,525 / 1,772,675 の合計欄一致）をブラウザで確認、全35ルートのHTTPステータス200と不正slugの404、コンソールエラーなし、モバイル表示まで見ている。「表示確認してくれてますか」と聞いたら、Chrome DevTools経由のスクショ3枚が即座に返ってきた。",[304,305,307],"h3",{"id":306},"売掛金元帳とは何かをサイドバーで間違える","売掛金元帳とは何か、をサイドバーで間違える",[14,309,310],{},"サイドバーで総勘定元帳の配下に全20勘定を折りたたみ表示してもらった（デフォルト閉・シェブロンで開閉・閲覧中の勘定は自動展開してハイライト）。その後、補助元帳グループの「売掛金元帳」をクリックしたら総勘定元帳の売掛金が開いて、おや？となった。ここで頭の中が整理された。",[14,312,313,316],{},[37,314,315],{},"売掛金元帳とは、総勘定元帳の売掛金勘定を取引先別に分けたもの","だ。総勘定元帳の売掛金には全得意先の合計しか載らないから、内訳を補助元帳で管理する。つまり補助元帳グループの「売掛金元帳」という親項目自体はリンクであるべきではなく、実体は取引先別のページの方にある。親項目（売掛金元帳・買掛金元帳・商品有高帳）は見出しに変えて、取引先別・商品別のリンクだけを並べる形に直してもらった。",[14,318,319],{},"アプリを作る過程で帳簿体系の理解そのものが一段深くなる。教材作りの副産物として、これがいちばん面白い。",[304,321,323],{"id":322},"紙の帳簿風ヘッダーと表示","紙の帳簿風ヘッダーと▲表示",[14,325,326,327,330],{},"見た目の調整も重ねた。テーブルのカラムヘッダーのすぐ上に、紙の帳簿のような",[37,328,329],{},"中央寄せの帳簿名＋下線、その下に対象名","（「売掛金元帳 宮崎商店」のような形）を置く共通コンポーネントを作って全15帳簿に適用してもらった。商品有高帳だけはFIFO/移動平均のトグルとテーブルの間に挟む位置調整が要った。クラウド会計風のデータ構造に、紙の帳簿の見出しデザインを重ねるハイブリッドになった。",[14,332,333,334,337],{},"仕入戻し・売上戻りのような控除系の金額は、赤文字に加えて**「▲」付きのマイナス表示**にしてもらった。仕入帳の戻し行が「▲275」、合計欄の仕入戻し高も「▲275」になる。Excelの書式 ",[75,335,336],{},"#,##0;\"▲\"#,##0"," と同じ流儀だ。紙の帳簿では戻しを赤記する伝統があるので赤字＋▲の組み合わせは教材として自然だが、▲が付いた今は赤をやめる選択肢もある。ここは保留にした。",[304,339,341],{"id":340},"前期繰越でpl科目のゼロクリアを見せる","前期繰越でPL科目のゼロクリアを見せる",[14,343,344],{},"最後にデータ設計の論点。仕訳帳の冒頭の繰越を「前月繰越」ではなく**「前期繰越（期首残高）」**にした。4月を期首の月という設定にすれば、B/S科目だけが残高を引き継ぎ、P/L科目はゼロスタートする——勘定の締切と繰越の論点が、帳簿のデータそのものから読み取れるようになる。",[14,346,347,348,351],{},"一方で、月次で締める補助簿（出納帳・有高帳など）は「前月繰越」のまま残した。",[37,349,350],{},"元帳は前期繰越・補助簿は前月繰越","という使い分け自体が教材になる、という整理だ。5月分のデータ追加も検討したが、考えているうちに「P/L科目で前月繰越は作らないよな」と自分で答えに行き着いたので、一旦見送った。変更後もテスト36件すべて合格を確認している。",[18,353,354],{"id":354},"振り返り",[31,356,357,364,367,370,373],{},[34,358,359,360,363],{},"AIに70問作文させるより、自分が論点網羅を保証済みの191問を流用する方が品質も保守性も上。",[37,361,362],{},"SSOTを自分の検証済みデータに置く","判断が今日いちばん効いた",[34,365,366],{},"AIと教材を共同編集するなら、ユニークIDをドラフト表示して人間とAIが同じ座標で対象を指せるようにする。指示の摩擦が目に見えて減った",[34,368,369],{},"「理解せよ」と言いながら3周前提の計画を書く、という自分の教材の不整合は、読み返すまで気づかなかった。理解度はテストの正答率で測る、に倒して解消",[34,371,372],{},"紙の帳簿前提の出題への違和感は、批判で終わらせずにクラウド会計風アプリという代替物を作って答えた。作る過程で売掛金元帳と総勘定元帳の関係を自分の言葉で言い直せたのが収穫",[34,374,375],{},"構成変更（ページ分割）とコンテンツ差し替え（問題の置き換え）をタスクとして分けたことで、揺れながらでも前に進めた",[18,377,378],{"id":378},"明日やること",[31,380,383,393,399,405],{"className":381},[382],"contains-task-list",[34,384,387,392],{"className":385},[386],"task-list-item",[388,389],"input",{"disabled":390,"type":391},true,"checkbox"," 模擬試験対策ページの中身を自作問題集ベースに置き換える（総復習問題と同じ方式）",[34,394,396,398],{"className":395},[386],[388,397],{"disabled":390,"type":391}," 帳簿アプリの控除系の表示を決める（赤字＋▲のままか、▲のみで通常色に戻すか）",[34,400,402,404],{"className":401},[386],[388,403],{"disabled":390,"type":391}," 残カテゴリの解説統合（問題集側データへの良い解説の移植）を進める",[34,406,408,410],{"className":407},[386],[388,409],{"disabled":390,"type":391}," ユニークIDのドラフト表示を本番公開前に外すタイミングを進捗memoに記載する",{"title":412,"searchDepth":413,"depth":413,"links":414},"",2,[415,416,417,418,419,420,421,422,428,429],{"id":20,"depth":413,"text":20},{"id":63,"depth":413,"text":64},{"id":100,"depth":413,"text":101},{"id":133,"depth":413,"text":134},{"id":169,"depth":413,"text":169},{"id":198,"depth":413,"text":198},{"id":228,"depth":413,"text":228},{"id":261,"depth":413,"text":261,"children":423},[424,426,427],{"id":306,"depth":425,"text":307},3,{"id":322,"depth":425,"text":323},{"id":340,"depth":425,"text":341},{"id":354,"depth":413,"text":354},{"id":378,"depth":413,"text":378},"dev","自動生成した70問を捨てて検証済みの自作仕訳問題集に演習を置き換えた記録。長大ページの分割、学習方法ページの不整合解消、紙の帳簿前提の出題への違和感から仕訳帳・総勘定元帳・補助元帳をテーブルで再現する帳簿アプリも新規実装した。","md",{},"/bookkeeping-notes-practice-redesign","eurekapu-nuxt4",false,"2026-06-11T00:00:00.000Z",{"title":5,"description":431},"2026-06/2026-06-11/bookkeeping-notes-practice-redesign",[441,442,443,444,445],"簿記","教材設計","Nuxt","Claude Code","開発日記",null,"Pg_AsHQhIOYEj7SZfyvEoVVvXfFe9-gmi-msqghSsYE",[449,457,466,475,483],{"title":450,"description":451,"path":452,"tags":453,"publishedAt":437,"updatedAt":446},"スクショ1枚からSynthesia風ピアノロールWebアプリを作ってもらった日——88鍵Canvas＋Web Audio合成＋運指表示","「ピアノアプリ作ってもらいたいんですけど」と画像1枚を見せたところから、Synthesia風ピアノロール /piano-roll が完成するまでの記録。再生時計が止まる謎、devサーバーの古いコード配信、公開化で見つかったOGメタタグ不足14件の一括修正まで。","/piano-roll-web-app",[454,455,456,444,443],"ピアノロール","Web Audio","Canvas",{"title":458,"description":459,"path":460,"tags":461,"publishedAt":465,"updatedAt":446},"Google Search Console 分析で見つけた機会キーワードに即日対応した記録 ― 解説記事の量産と SEO 修正を1日で消化する","GSC の過去28日データを Claude Web に分析させたら CTR 2.3%・平均掲載順位8.4 という「表示はされるが選ばれない」状態が判明。機会キーワードへの解説記事量産と SEO 修正を同日に実行した作業ログ。","/gsc-opportunity-keywords-execution",[462,463,444,443,464],"SEO","Google Search Console","ブログ運営","2026-06-09T00:00:00.000Z",{"title":467,"description":468,"path":469,"tags":470,"publishedAt":474,"updatedAt":446},"16本の特集記事を agent-browser に全部巡らせて1本にまとめた話","Yahoo!ファイナンスの資産形成連載（全16記事）を agent-browser で順に取得し、要約・統合して1本のまとめにした作業ログ。networkidle のタイムアウトを回避しながら16本を集めた試行錯誤を記録する。","/millionaire-articles-summary",[471,472,444,473,445],"agent-browser","スクレイピング","要約","2026-05-31T00:00:00.000Z",{"title":476,"description":477,"path":478,"tags":479,"publishedAt":482,"updatedAt":446},"簿記学習アプリのコンテンツ改善：リンク修正・SVG座標ずれ・学習法ページリライト・複式簿記入門タブ化","レッスンリンクの誤リンク修正、No6アイコンのX座標ずれ修正、study-methodページの対比構造廃止、複式簿記入門に6取引タブコンポーネントを追加した1日の記録。","/eurekapu-nuxt4-boki-content",[435,441,480,481,443],"コンテンツ改善","SVG","2026-05-07T00:00:00.000Z",{"title":484,"description":485,"path":486,"tags":487,"publishedAt":494,"updatedAt":446},"2026年4月28日の開発日記 - feature-slidesスキル新設、書籍OCR1181ページ、Amazon書棚UIまで1日で組み上げた","別リポジトリ eurekapu-nuxt4 でCFWS v2の構造解説スライドを reveal.js で組む過程から汎用スキル feature-slides まで一気に成立させ、Excel忠実再現グリッドと範囲外枠ハイライトまで詰めた。並行して book-knowledge-base 側で yomitoku を5冊・1181ページに通して Turso DB に1057チャンク登録、Amazon の星評価・メタデータを 935件中 841件取得して Nuxt の書棚UI で公開した。SVG図解の作業も svg-diagram スキル v2 として書籍画像→SVG変換ワークフローを追記。","/2026-04-28-diary",[488,444,489,490,491,492,493,443,481],"日記","スキル","reveal.js","yomitoku","Turso","Amazon","2026-04-28T00:00:00.000Z",[],"https://log.eurekapu.com/og/blog/bookkeeping-notes-practice-redesign.png?v=2026-06-11T00%3A00%3A00.000Z&title=%E7%B0%BF%E8%A8%98%E5%AD%A6%E7%BF%92%E3%83%8E%E3%83%BC%E3%83%88%E3%81%AE%E6%BC%94%E7%BF%92%E3%82%92%E8%87%AA%E4%BD%9C%E5%95%8F%E9%A1%8C%E9%9B%86%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AB%E5%86%8D%E8%A8%AD%E8%A8%88%E3%81%97%E3%80%81%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E4%BC%9A%E8%A8%88%E9%A2%A8%E3%81%AE%E5%B8%B3%E7%B0%BF%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9F%E6%97%A5&author=Kei%20Komatsu&sig=fde3c75e15fd5a35",1781333880326]