連結精算表のExcel風HTMLプロトタイプを試作する

朝、ゲシュタルトの法則ページのGIF置換から手をつけたら、連結会計のプロトタイプ作成まで一気に転がっていった。途中で何度も方針を捨てては作り直した一日だった。

ScrollArticle にExcel風スタイルを足す

「SVGの右側に置いてあるExcelの図、あれをHTMLでそのまま再現してほしい」というユーザー指示が起点だった。cfws-excel-to-html スキルの xlsx_to_html.py を読み直し、既存パターンを ScrollArticle.vue に持ち込む。

まずは近接(Proximity)の例を1つだけテーブル化してブラウザで開いた。Yu Gothic UI と細い罫線、薄い背景色で並んだ画面を見たユーザーが「むちゃくちゃいいじゃないですか」と返してきたあと、矢継ぎ早にルール追加が飛んでくる。

A列スペーサー(列幅10px、データはB列から開始)
1行目もスペーサー(印刷時のタイトル領域を再現)
列ヘッダー(A/B/C...)の縦線だけ残し、データセルの縦罫線は全消去
増減列の右に1列スペーサー(F列)を挿入

「印刷時に見えるようにシートのタイトル行を空けてある」という運用ルールが、HTMLテーブル側にも移植されていく。指示通りに反映するたび、画面が「Excelで作ったやつをスクショしました」みたいな見た目に寄っていく。

ゲシュタルト6法則を6個ぜんぶHTMLテーブル化

近接が固まったあと、残り5つも一気に書いた。

近接 → PLの空白行/インデントで階層を表現
類似 → 貸借対照表でグレー濃淡(GL1/GL2/GL3)の階層
接続 → 表示｜集計｜入力の3シート横並び
囲み → 3指標グループの背景色テーブル
閉合 → 罫線最小限のPL
連続性 → 桁が違う金額の右揃え

途中で「四半期色分けはアンチパターン(色で意味のない区切りを表現している)」と気づき、類似の例を貸借対照表のグレー階層に置き換えた。色を使う前に「何を伝えたいか」を先に決めるべきという当たり前の話を、自分で書いたサンプルから学び直した形だった。

連結精算表のプロトタイプ:シートタブ案を捨てる

午前中の仕上がりに乗って、ユーザーが「Excel風のまま連結精算表を作ってほしい」と言ってきた。最初は素直にシートタブ + 数字クリックで該当仕訳シートにジャンプ、という構造で組み上げた。Chrome DevTools でプレビューを見せた直後にユーザーから却下が飛んできた。

ブラウザバックが効かないから、シートをクリックしないと連結ワークシートに戻れない

たしかに <a href> ではなくJSでシート切り替えしているので、戻るボタンが履歴に残らない。仕様としては破綻していた。Esc キーで閉じるオーバーレイモーダル方式に作り直す。シートタブを撤廃し、メイン領域には連結ワークシートだけを常時表示。数字をクリックするとモーダルが中央に出て、Esc で閉じる。ブラウザ履歴を汚さず、Excelで言うところの「ハイパーリンクで仕訳シートを別ウィンドウで開く」感覚に寄った。

ここからモーダル側の作り込みに入る。

連結修正仕訳を1つの仕訳ブロックではなく、3列に分解(個別仕訳ごとに独立表示)
「取引の前提」「実質的な影響」を本文ではなくラベルピルとしてタイトル化
取引の前提タイトルを13.5px → 16px に拡大、行間も1.8に

「タイトルなのに本文に混ざっていると毎回読まされる」という指摘が、ラベル分離の決め手になった。レイアウトと内容の役割を分けるという話で、Excelの「行の役割」と地続きの考え方だ。

設例3つを網羅した拡張版に発展させる

書籍のスクショを9枚まとめて貼り付けて「これを1つのHTMLで網羅してほしい」とユーザーが投げてきた。設例I-2-1〜I-2-3を切替タブで持ちつつ、各設例ごとに前提条件・連結精算表・仕訳オーバーレイを揃えた拡張版に発展させる。

ここで補助科目あり版の連結精算表を新規追加した。書籍の連結精算表だけでは「どの売掛金がどう消えるのか」が見えにくい。売掛金_外部向け 売掛金_内部向け のアンダースコア記法でA社・P社の補助科目を分けて記載すると、内部向けのレコードが連結修正でゼロになる流れが視覚的に追えるようになった。実務でこの粒度で精算表を書くことはないと思うが、教材としては腑に落ちる。

合計行((売掛金合計) のイタリック行)はユーザー指示で全削除した。「最終的には外部向けしか残らないんだから、合計を見せても意味がない」という判断で、行を詰めて見通しを良くした。

セルクリックでモーダル内をオレンジハイライト

ここから先はWebならではのUI実装に踏み込んだ。

連結精算表のセルをクリックすると仕訳モーダルが開くまではすでに動いている。「モーダル側の対応する科目を、さらにオレンジでハイライトしてほしい」という追加要望が来た。<span class="xref"> に data-highlight="売掛金:200" のような属性を持たせ、JSで openOverlay 時にモーダル内の該当セルへ .highlight クラスを付与する仕組みに変えた。

<span class="xref" data-highlight="売掛金:200">200</span>

クリックして確認した。売掛金200のセルからモーダルを開くと、貸方の「売掛金」と金額「200」だけがオレンジに光る。買掛金1,000でも借方側がきちんと光った。Excelの数式トレース矢印より直感的で、しかもブラウザだから右から左にスクロールしながら見比べられる。

三分法のインデント階層

「売上原価(仕入高)」と書いてあった行を、ユーザー指示で三分法に展開した。期首商品 / 仕入 / 期末商品 / 売上原価の4行に分け、上3つは売上原価のサブ階層なのでインデントを入れる。

書き換え時、仕訳プール側の「仕入」セルまで意図せずインデントされてしまったので、そこは戻した。同じ文字列でも文脈で見た目が変わるという、テンプレート化前の手書きHTMLにありがちな落とし穴を踏んだ形になる。

ハードコード問題と「全部Computeに統一すべき」指摘

仕上げにユーザーから本質的な指摘が飛んできた。

数字、全部ハードコーディングしてますよね？これ全部Computedで返してほしい

その通りだった。連結精算表の数字も仕訳の金額もぜんぶ <td>200</td> でベタ書き。設例間で同じ売掛金200が3〜4箇所に散っていて、書き換えのたびに整合性が崩れる温床になっていた。

「改善計画は別セッションでやる」という判断にして、/lessons に「連結会計」のリンクを追加し、Vue化の計画書を書いた。Codex GPT-5.5に投げて致命的指摘がなくなるまで再帰レビューする。

1回目 → 致命点3件(ハイライトの仕様揺れ、ルーティング記述の食い違い、derivePostings の説明不足)
2回目 → 途中で停止、フォアグラウンド再実行
3回目 → 致命点2件(ハイライト記述の統一、Section 5.3の「両方ハードコード」表現削除)
4回目 → 致命点なし

軽微な指摘は無視して、4回目で抜けた。

Vue化計画書(別セッションで作成済み)に従って derivePostings を実装する
連結精算表の数字をすべて computed 経由に置き換え、設例間の整合性を1ファイルで担保する
consolidated-worksheet-howto.md のスクショを最新版で撮り直す