開発eurekapu-nuxt4

VLOOKUPの注意点を解説するページで、Excelの数式バーをそのまま画面に貼ったような「商品マスタ＋作業シート＋数式吹き出し」のHTMLモックを作った。最初は1ページだけのつもりだったのが、デザインがF2編集モード風に固まったあたりで「これ全関数で使えるじゃん」となり、最終的にプロジェクトスキルに格上げして11関数の解説ページに横展開した。

きっかけはVLOOKUPの注意点ページ

ExcelのVLOOKUPの落とし穴（絶対参照の付け忘れ・型不一致・#N/Aの放置）を解説するページを書いていた。文章だけだと「$B$2:$C$10みたいに絶対参照にしないと、下にコピーしたときに参照範囲がずれます」と書いても伝わらない。Excelを開かずに画面の中で「ずれる」を見せたかった。

最初に出てきたのは、2つのテーブル（商品マスタと作業シート）を縦に並べて、作業シートのD2セルの上に数式バー風の白い箱を吹き出しで配置するモックだった。

ここから何往復かのやり取りで、デザインがじわじわと固まっていく。

「幅を広げる」と「はみ出させない」の往復

最初のモックは、テーブル幅が狭くて数式バーがテーブルの外に飛び出していた。

  • 自分: 「数式バーが右にはみ出してる。幅を広げて」
  • Claude Code: 親コンテナのmax-widthを広げる
  • 自分: 「今度は商品マスタが間延びして見える。商品マスタは狭くていい。作業シートだけ広げて」
  • Claude Code: 各テーブルに個別のwidth指定
  • 自分: 「やっぱり数式バーが画面右端をはみ出してる。スマホで崩れる」
  • Claude Code: 数式バーをposition: absoluteからposition: relativeに変えて、親要素内に閉じ込める
  • 自分: 「F2押したときのExcelってこんな感じだよね。引数とセルが色で繋がるやつ」

このタイミングで、ただの吹き出しから「F2編集モード風の色対応」に方向が定まった。

F2編集モード風の色対応に振り切った

Excelで数式セルを選んでF2を押すと、引数ごとに色が割り振られて、参照先のセルが同じ色の枠で囲まれる。あれを再現することにした。

  • =VLOOKUP(A2,商品マスタ!$B$2:$C$10,2,FALSE)
  • 第1引数（検索値）= 青
  • 第2引数（範囲）= 緑
  • 第3引数（列番号）= ピンク
  • 第4引数（検索方法）= グレー（補助色）

数式バーの中の各引数を<span>で色分けし、参照先のセルにも同じ色の枠を巻く。これで「A2を商品マスタの2列目から探してくる」という流れが目で追える図ができた。

シート分離で参照関係を可視化

もう1つ効いたのが、商品マスタと作業シートの背景色を分けたことだった。

  • 商品マスタ: 薄緑の背景・緑の枠
  • 作業シート: 薄黄の背景・黄の枠

これで「異なるシートを参照している」が一目でわかる。商品マスタ!$B$2:$C$10の商品マスタ!の部分が、画面上のどっちの色の表に対応するかが迷わなくなった。

吹き出し位置の調整地獄

色対応とシート分離が固まったあと、最後に残ったのが吹き出しの位置調整だった。

  • 数式バーが対象セル（D2）の真上に来ない
  • 吹き出しの三角矢印がセルの中心を指していない
  • スマホ幅で見ると吹き出しがセルから離れすぎる

topとleftを1pxずつ動かすやり取りを何度かやった末、対象セルからtransform: translateX(-50%)で水平センター取り、top: -60pxで上にオフセット、三角形は::beforeのborderで描く、という形に落ち着いた。

ここで「これスキル化できる」と気づいた

VLOOKUPページが仕上がった時点で、ふと気づいた。

  • F2モード風の色対応は、IFでもSUMIFSでもINDEX-MATCHでも全く同じ構造で使える
  • シート分離も、マスタ表と作業表を扱う関数なら全部に当てはまる
  • 吹き出しの位置調整ノウハウも、毎回ゼロから探りたくない

VLOOKUPページのHTMLには、数式吹き出しを描くための同じスタイルブロックが10個並んでいた。これを毎ページコピペして書き直すのは現実的じゃない。

そこで、Claude Codeに「このパターンをexcel-html-mockプロジェクトスキルとして.claude/skills/excel-html-mock/SKILL.mdに切り出して。重複コードは1つのヘルパー関数に集約して」と頼んだ。

ここでsimplifyスキルが効いた。10個並んでいた数式吹き出しのHTMLが、1つのヘルパーを呼ぶだけになった。

formulaCalloutヘルパーに集約

切り出したヘルパー関数のシグネチャはこんな形に落ち着いた。

formulaCallout({
  formula: '=VLOOKUP(A2, 商品マスタ!$B$2:$C$10, 2, FALSE)',
  args: [
    { text: 'A2', color: 'blue' },
    { text: '商品マスタ!$B$2:$C$10', color: 'green' },
    { text: '2', color: 'pink' },
    { text: 'FALSE', color: 'gray' },
  ],
  targetCell: 'D2',
  position: { top: -60, offsetX: 0 },
})

呼び出し側はformulaとargsさえ渡せば、色分け・吹き出し位置・三角矢印まで全部勝手に組み上がる。

11関数に横展開した

スキルが固まったので、関数解説ページに横展開した。

  • VLOOKUP
  • IF
  • IFERROR
  • INDEX-MATCH
  • SUM
  • SUMIF
  • SUMIFS
  • TEXT
  • ROUND
  • INDIRECT
  • 絶対参照と相対参照

合計11セクション。それぞれに「商品マスタ＋作業シート＋数式吹き出し」のExcel風HTMLモックを差し込んだ。同じヘルパーを呼ぶだけなので、新規ページの追加コストが激減した。

SUMIFをSUMIFSで置換するメリットの気づき

横展開の途中で、SUMIFのページを書いていて気づいたことがある。

SUMIF(範囲, 条件, 集計範囲)は集計範囲が第3引数だが、SUMIFS(集計範囲, 範囲1, 条件1, ...)は集計範囲が第1引数に来る。

これだけだと「引数の順序が違うだけ」に見えるが、実務上の差がある。SUMIFSなら、数式セルでF2を押した直後にCtrl+[を押すと、第1引数（=集計対象列）にジャンプして、合計される元の数値列をその場で確認できる。SUMIFだと第1引数は条件範囲なので、Ctrl+[で飛んでも条件列に着地してしまい、数値検証がワンステップ余計にかかる。

「条件が1つでも常にSUMIFSを使う」理由が、引数順序のおかげで数値検証が速いから、という形でストンと落ちた。これも記事に追記した。

「VLOOKUP固有ではない」注記の追加

11関数のページを並べたあと、自分で見直していて違和感が出てきた。VLOOKUPの落とし穴として書いていた「絶対参照の付け忘れ」「検索値と参照値の型不一致」「#N/Aの放置」は、よく考えるとVLOOKUP固有の話ではない。

  • 絶対参照の付け忘れ → 数式を下にコピーする時の一般的な癖
  • 型不一致 → 文字列「100」と数値100の比較はIFでもSUMIFSでも起きる
  • #N/A放置 → どの関数のエラーでも当てはまる

VLOOKUPページに集約していると「VLOOKUPだけの話」と読まれかねない。各セクションの該当箇所に「これはVLOOKUP固有の落とし穴ではなく、一般的な数式の癖」という注記を加えてもらった。読者が「自分はINDEX-MATCH派だから関係ない」と読み飛ばさないようにする予防線になった。

税理士・会計士フォロワー視点での応用

この「F2編集モード風の色対応＋シート分離」のExcel風HTMLモックは、クライアント説明資料でExcel数式の動きを可視化する図解にそのまま使える。「先生、この消費税の按分計算どうなってるんですか」と聞かれたとき、Excelファイルを共有する代わりに、こういう静的なHTML図解を1枚渡すだけで参照関係が伝わる。

今日の構図

人間がやったこと: VLOOKUPページのモックを見て「数式バーがはみ出してる」「F2モード風にして」「シートの色を分けて」と違和感を1つずつ言語化したのと、SUMIFSの引数順序の意味と「VLOOKUP固有ではない」の指摘。

Claude Codeがやったこと: 数式吹き出しのHTML/CSSを何度も書き直し、10個の重複を1つのformulaCalloutヘルパーに集約し、excel-html-mockスキルとしてSKILL.mdに書き出し、11関数のページに横展開し、注記を全セクションに追加した。

「画面の違和感を拾う係」と「拾った違和感を実装と仕組み化に落とす係」の分担が、今日もそのまま回った。