Excelの参照元のトレースをWebで再現するUIの記録

Excel の画面を Web の上でどう見せるか。 その知見を、スキルとして溜めていきたい。 朝、講座のキャッシュフロー精算表のページを貼って、Claude Code にそう切り出した。

作るのは、数字がどのセルから来ているかを、矢印とのぞき窓（参照元のセルを小さく開く窓）で見せる部品だ。 手本は Excel の「参照元のトレース」になる。

計画書からデモページまで

Claude Code には、実ページの今の挙動を確かめさせてから計画書を書かせた。 計画書は Codex の再レビューまで通してから受け取り、判断事項4件には計画書の HTML に埋め込んだボタンで答えた。

実装は、マス目の部品、のぞき窓の部品、ブック全体の画面の順に進めてもらい、デモページ（/dev/excel-trace）にまとめた。 のぞき窓は、報告 → 月次集計 → 売上明細 → 商品マスタと、5枚まで連なる。 同じ行で矢印が重なって読めなかった箇所は、矢印を少し曲げて重ならないように直してあった。 既存のキャッシュフロー精算表のページが壊れていないかどうかも、PC 幅とスマホ幅の表示とあわせて確かめてもらった。

左上の矢印と枠線は何のためか

デモを開くと、セルの左上に小さな表の印と点線の矢印が付いていた。 「この左上の矢印みたいなやつ、枠線を含めて、これ何の意味があるんですか？」と聞いた。

答えは、「この数字は別のシートから来ている」という印だった。 計画書の判断で自分が選んだ「セルの横にシートの印＋点線の矢印」を、Excel の参照元のトレースと同じ形で描いたものだという。

ただ、別のシートからの参照は、投資銀行の書式ルール（IB ルール）で緑色になる。 IB ルールで分かることに、別の装飾を重ねる必要はない。 印と矢印を外させ、この方針をスキルと計画書にメモさせた。 自分で選んだ装飾を、画面で見てから外したことになる。

縦の合計はセルの中に線を引く

次は、合計の矢印の型だ。 縦の合計は「左端の点 → 左の幹1本 → 合計に矢じり1つ」、横の合計は「下の線1本・矢じり1つ」と指定して描いてもらった。 型ごとの見本ページ（縦の合計、横の合計、文字の3シート）も作らせた。

見本を見て、引っかかった。 縦の合計の幹がセルの外を通ると、数字が右寄せか左寄せかによっては線が数字にかぶる。 数字の縦の合計なら、線をセルの中に入れたほうがいいのではないか。 横の合計は、これ以上見やすくするのは多分難しい気がしている。

Claude Code には、幹をセルの中に入れさせた。 数字の列では、左から「幹 → 点 → 数字」の順にセルへ収め、合計のセルにも矢じりを1つだけ入れる。 これで隣の列にははみ出さなくなった。

構成比の矢印は実物の Excel でトレースしてみた

構成比の矢印にも、もっといい表現がありそうだった。 Excel には参照元をたどる機能がある。 あれだとどう見えるのかを聞き、Claude Code にデモの xlsx を実物の Excel で開いてもらった。 構成比 E8（=D8/D$9）と合計 D9（=SUM(D4:D8)）に、参照元のトレースを出した画面が返ってきた。

それを見て、3パターン作ってもらうことにした。 頼む時点で、A でいいかなと思っていた。 3パターンは見本ページで切り替えて見比べられるようにして、既定を A にしてもらった。 足し算、引き算、掛け算、割り算を並べた「四則演算」シートも足してもらい、これには「非常にいいっすね。分かりやすいっすね」と返した。 根元に演算子の記号を置き、絶対参照は白抜きにする形を確定として、スキル excel-trace-viewer と計画書に記録してもらった。

文字の右端の矢印は近接の法則を崩す

SUMIFS の画面を見ていて、別のことに気づいた。 左寄せの文字の右端に矢印の点を付けると、右の列の「ボールペン」のほうが近くなる。 近接の法則からずれてしまう。

Excel で SUMIFS の式を F2 キーで開くと、検索文字列のセルはグレーの線でハイライトされ、回るアニメーションが付いていなかったか。 ノードでつなぐのではなく、そこは Excel に合わせてほしいと頼んだ。

検索値（条件のセル）は、矢印をやめて点線の回る四角で囲む形になった。 月次集計の D5 に乗せると、本体の B5「P02」と、のぞき窓の売上明細の「P02」が同じ黄土色の点線で囲まれる。 MATCH や VLOOKUP の検索値も、同じように囲む。

マウスを乗せていないのに窓が開く

E4 にマウスを乗せているのに、隣の D4（5,800）の SUMIFS ののぞき窓が開いた。 5,800 に乗せたときだけ出てほしい。

原因は、構成比の列に重なって見えていた「↩ 報告 D6」のボタンだった。 このボタンは、見た目は E4 の上にあるのに、プログラムの上では D4 の中の部品として描かれていた。 だから、ボタンに乗ると「D4 に乗った」と数えられていた。 直してもらい、のぞき窓は D4 に乗せたときだけ開くようになった。

続けて、B4 が黄色く光っている理由も聞いた。 これも D4 の分が残っていた。 マウスを乗せていないときは、選んでいるセルの矢印と囲みを出す作りにしていたためだ。

「月次集計 D4 へ」は要らない

月次集計の 5,800 から報告へ戻ってくると、「月次集計 D4 へ →」が出る。 これは要るのだろうか。

Excel なら、Ctrl+[ で参照元に飛び、F5 キーで戻る。 もう一度行きたければ、5,800 をもう一度クリックすれば済む。 要らないと思いつつ、どういうルールで付いているのかを尋ね、「月次集計 D4 へ →」はデモから外してもらった。 今回の判断もドキュメントに残すよう頼み、コミットとプッシュを任せた。 この回は3コミットで、どれも Codex のゲートを指摘なしで通った。

マゼンタの塗りと、引数ごとの色

VLOOKUP の検索範囲には、黄土色の薄い実線で外枠だけを囲む形を足してもらった。 点線のアニメーションは付けない。 そのうえで、引数の意味のまとまりごとに色を分けてもらった。 数式バーの参照の文字と、セルの囲みや範囲の外枠が同じ色になる。

飛んだ先のセルにマゼンタの背景が付いているのも気になった。 これは、飛んだ先で「どのセルから来たか」を示す印で、足あとの一部だという。 B の形にしてもらい、「なんとなく意味が分からなかったって言葉はいらなかった」とも添えた。 B では、報告 D6 から月次集計へ飛ぶとピンクの塗りは消え、マウスを乗せたときと同じ点線の四角だけが出る。

このコミットとプッシュでは、Codex のゲートが2回止まった。

2,400 の内訳を選択状態で見せる

SUMIFS の集計 2,400 は、商品コード P-05 の2行（800 と 1,600）の合計だ。 2,400 を押して売上明細へ飛んだとき、画面を見る人が知りたいのは 2,400 の根拠になる。 Ctrl+[ で飛んだときのように集計範囲全体をグレーにするのではなく、その2行の F 列だけを、Excel でセルを選んだ状態にしてほしい。 どこかをクリックしたら消える、あの選択だ。

F8（800）と F13（1,600）の2つだけが選択状態になる形にしてもらった。

続けて、構成比の分母は A に寄せきることにした。 B と C は、画面の切り替えからもコードからも消してもらい、関係するテスト43件が通った。 それでも、検討した事実はコードベースに残したい。 置き場所はスキルのリファレンスがいいのではないかと聞くと、Claude Code も同じ意見だった。 次に矢印を触るのは、このスキルを読んで作業する人か AI なので、作業の途中で必ず目に入る、という理由だ。

そのあと、選択した F8 の色で迷った。 Excel では、今いるセルは白のままになる。 2つとも灰色のほうが分かりやすいとは思いつつ、いったんは F8 を白のままでいいと言った。 コードはそのままにして、その判断をスキルの記録（references/implementation.md）に書いてもらった。

すぐに言い直した。 分かりやすいほうを優先したほうがいい。 F8 と F13 の両方を灰色にしてもらい、F8 には今いるセルの枠も残した。 「Excel では白だが、分かりやすさを優先して2つとも塗る」と、記録も書き直させた。

同じころ、デモページが「開発」ボタンから開く制作ダッシュボード（/dev）に載っていない気がして聞くと、やはり入っていなかった。 「そのほかの開発用ページ」に「Excel の参照をたどる（研究）」のカードを足してもらい、ここまでをコミットしてプッシュした。

INDEX-MATCH から関数ごとの見本シートへ

午前のうちに、講座の教材の棚卸しをサブエージェントに任せ、デモの「一番売れた商品」を講座でいつも使う INDEX-MATCH の型に作り直してもらっていた。 夕方、関数ごとの見本シートを INDEX-MATCH から作ってもらった。

見本シートを開くと、検索範囲が以前の指示どおりになっていなかった。 範囲は同じ色で、点線ではなく実線にして、薄い色で囲う、と前に言ったはずだ。 Claude Code によると、その指示を同じシートの範囲にだけ当てていて、のぞき窓には広げていなかったという。 のぞき窓の中でも検索範囲を薄い実線で囲み、範囲の中で当たったセルだけを点線で動かす形に直してもらって、コミットとプッシュを済ませた。 続けて、SUMIFS の見本シートと、参照元にする「明細」シートも足してもらった。

のぞき窓と数式バーに引数の名前を付ける

SUMIFS の見本を見ていて、関数の説明を入れたくなった。 のぞき窓に出ている明細の C 列や F 列は、検索範囲や合計範囲にあたる。 列の上には少し空きがある。 そこに名前を付ければ、色と合わせてすごく分かりやすくなるのではないか。

範囲の名前を、その範囲の外枠と同じ色で、のぞき窓の表の上の帯に付けてもらった。 INDEX-MATCH では「返す範囲」の名前が見当たらなかったので、範囲の右横に縦書きで出してもらった。

これがよかったので、数式バーにも広げた。 =INDEX( で始まる計算式の表示に、返す範囲、行の検索範囲、列の検索範囲、検索値と、引数ごとに名前を書けないか。 点線で回っている検索値のセルにも、上辺の真ん中の少し上に、その色を背景にした四角を置き、白抜きの文字で「検索値」と入れたい。

数式バーの引数の上に名前が出て、検索値のセルには札が付いた。 SUMIFS の C12 では、条件のセルに「条件1」「条件2」の札が出る。 最後のコミットでは Codex のゲートが3回止まり、どれも直してもらってから通した。 今回はプッシュせず、コミットだけにしてある。

学び

• 参照元のトレースと同じ形の印でも、IB ルールの緑で分かることを重ねて描く必要はない。デモを開いて、自分で選んだ装飾を外した
• Excel では白い「今いるセル」も、分かりやすさを優先して灰色に塗った。いったん白でいいと言ってから言い直している
• 構成比の B と C はコードから消し、検討の記録はスキルのリファレンスに残してもらうことにした。次に触る人や AI が同じところで迷わないようにするためだ