[{"data":1,"prerenderedAt":713},["ShallowReactive",2],{"content-/excel-html-mock-skill-and-functions":3,"all-pages-for-dir":711,"og-image-/excel-html-mock-skill-and-functions":712},{"id":4,"title":5,"body":6,"category":690,"description":691,"extension":692,"meta":693,"navigation":694,"ogImage":695,"path":696,"project_name":697,"published":698,"publishedAt":699,"seo":700,"stem":701,"tags":702,"todo":695,"unpublished":698,"updatedAt":695,"__hash__":710},"pages/2026-05/2026-05-04/excel-html-mock-skill-and-functions.md","Excel風HTMLモックの数式吹き出しヘルパーをClaude Codeのプロジェクトスキル化して11関数の解説に適用した記録",{"type":7,"value":8,"toc":676},"minimark",[9,13,18,34,37,40,44,47,88,91,95,98,148,158,161,164,172,182,185,188,199,224,228,231,253,256,267,274,278,281,522,532,536,539,570,573,577,580,590,606,612,616,622,640,643,647,650,653,656,669,672],[10,11,12],"p",{},"VLOOKUPの注意点を解説するページで、Excelの数式バーをそのまま画面に貼ったような「商品マスタ＋作業シート＋数式吹き出し」のHTMLモックを作った。最初は1ページだけのつもりだったのが、デザインがF2編集モード風に固まったあたりで「これ全関数で使えるじゃん」となり、最終的にプロジェクトスキルに格上げして11関数の解説ページに横展開した。",[14,15,17],"h2",{"id":16},"きっかけはvlookupの注意点ページ","きっかけはVLOOKUPの注意点ページ",[10,19,20,21,25,26,29,30,33],{},"Excelの",[22,23,24],"code",{},"VLOOKUP","の落とし穴（絶対参照の付け忘れ・型不一致・",[22,27,28],{},"#N/A","の放置）を解説するページを書いていた。文章だけだと「",[22,31,32],{},"$B$2:$C$10","みたいに絶対参照にしないと、下にコピーしたときに参照範囲がずれます」と書いても伝わらない。Excelを開かずに画面の中で「ずれる」を見せたかった。",[10,35,36],{},"最初に出てきたのは、2つのテーブル（商品マスタと作業シート）を縦に並べて、作業シートのD2セルの上に数式バー風の白い箱を吹き出しで配置するモックだった。",[10,38,39],{},"ここから何往復かのやり取りで、デザインがじわじわと固まっていく。",[14,41,43],{"id":42},"幅を広げるとはみ出させないの往復","「幅を広げる」と「はみ出させない」の往復",[10,45,46],{},"最初のモックは、テーブル幅が狭くて数式バーがテーブルの外に飛び出していた。",[48,49,50,54,61,64,71,74,85],"ul",{},[51,52,53],"li",{},"自分: 「数式バーが右にはみ出してる。幅を広げて」",[51,55,56,57,60],{},"Claude Code: 親コンテナの",[22,58,59],{},"max-width","を広げる",[51,62,63],{},"自分: 「今度は商品マスタが間延びして見える。商品マスタは狭くていい。作業シートだけ広げて」",[51,65,66,67,70],{},"Claude Code: 各テーブルに個別の",[22,68,69],{},"width","指定",[51,72,73],{},"自分: 「やっぱり数式バーが画面右端をはみ出してる。スマホで崩れる」",[51,75,76,77,80,81,84],{},"Claude Code: 数式バーを",[22,78,79],{},"position: absolute","から",[22,82,83],{},"position: relative","に変えて、親要素内に閉じ込める",[51,86,87],{},"自分: 「F2押したときのExcelってこんな感じだよね。引数とセルが色で繋がるやつ」",[10,89,90],{},"このタイミングで、ただの吹き出しから「F2編集モード風の色対応」に方向が定まった。",[14,92,94],{"id":93},"f2編集モード風の色対応に振り切った","F2編集モード風の色対応に振り切った",[10,96,97],{},"Excelで数式セルを選んでF2を押すと、引数ごとに色が割り振られて、参照先のセルが同じ色の枠で囲まれる。あれを再現することにした。",[48,99,100,136,139,142,145],{},[51,101,102,105,111,114,119,121,126,128,133],{},[22,103,104],{},"=VLOOKUP(",[106,107,108],"strong",{},[22,109,110],{},"A2",[22,112,113],{},",",[106,115,116],{},[22,117,118],{},"商品マスタ!$B$2:$C$10",[22,120,113],{},[106,122,123],{},[22,124,125],{},"2",[22,127,113],{},[106,129,130],{},[22,131,132],{},"FALSE",[22,134,135],{},")",[51,137,138],{},"第1引数（検索値）= 青",[51,140,141],{},"第2引数（範囲）= 緑",[51,143,144],{},"第3引数（列番号）= ピンク",[51,146,147],{},"第4引数（検索方法）= グレー（補助色）",[10,149,150,151,154,155,157],{},"数式バーの中の各引数を",[22,152,153],{},"\u003Cspan>","で色分けし、参照先のセルにも同じ色の枠を巻く。これで「",[22,156,110],{},"を商品マスタの2列目から探してくる」という流れが目で追える図ができた。",[14,159,160],{"id":160},"シート分離で参照関係を可視化",[10,162,163],{},"もう1つ効いたのが、商品マスタと作業シートの背景色を分けたことだった。",[48,165,166,169],{},[51,167,168],{},"商品マスタ: 薄緑の背景・緑の枠",[51,170,171],{},"作業シート: 薄黄の背景・黄の枠",[10,173,174,175,177,178,181],{},"これで「異なるシートを参照している」が一目でわかる。",[22,176,118],{},"の",[22,179,180],{},"商品マスタ!","の部分が、画面上のどっちの色の表に対応するかが迷わなくなった。",[14,183,184],{"id":184},"吹き出し位置の調整地獄",[10,186,187],{},"色対応とシート分離が固まったあと、最後に残ったのが吹き出しの位置調整だった。",[48,189,190,193,196],{},[51,191,192],{},"数式バーが対象セル（D2）の真上に来ない",[51,194,195],{},"吹き出しの三角矢印がセルの中心を指していない",[51,197,198],{},"スマホ幅で見ると吹き出しがセルから離れすぎる",[10,200,201,204,205,208,209,212,213,216,217,177,220,223],{},[22,202,203],{},"top","と",[22,206,207],{},"left","を1pxずつ動かすやり取りを何度かやった末、対象セルから",[22,210,211],{},"transform: translateX(-50%)","で水平センター取り、",[22,214,215],{},"top: -60px","で上にオフセット、三角形は",[22,218,219],{},"::before",[22,221,222],{},"border","で描く、という形に落ち着いた。",[14,225,227],{"id":226},"ここでこれスキル化できると気づいた","ここで「これスキル化できる」と気づいた",[10,229,230],{},"VLOOKUPページが仕上がった時点で、ふと気づいた。",[48,232,233,247,250],{},[51,234,235,236,239,240,239,243,246],{},"F2モード風の色対応は、",[22,237,238],{},"IF","でも",[22,241,242],{},"SUMIFS",[22,244,245],{},"INDEX-MATCH","でも全く同じ構造で使える",[51,248,249],{},"シート分離も、マスタ表と作業表を扱う関数なら全部に当てはまる",[51,251,252],{},"吹き出しの位置調整ノウハウも、毎回ゼロから探りたくない",[10,254,255],{},"VLOOKUPページのHTMLには、数式吹き出しを描くための同じスタイルブロックが10個並んでいた。これを毎ページコピペして書き直すのは現実的じゃない。",[10,257,258,259,262,263,266],{},"そこで、Claude Codeに「このパターンを",[22,260,261],{},"excel-html-mock","プロジェクトスキルとして",[22,264,265],{},".claude/skills/excel-html-mock/SKILL.md","に切り出して。重複コードは1つのヘルパー関数に集約して」と頼んだ。",[10,268,269,270,273],{},"ここで",[22,271,272],{},"simplify","スキルが効いた。10個並んでいた数式吹き出しのHTMLが、1つのヘルパーを呼ぶだけになった。",[14,275,277],{"id":276},"formulacalloutヘルパーに集約","formulaCalloutヘルパーに集約",[10,279,280],{},"切り出したヘルパー関数のシグネチャはこんな形に落ち着いた。",[282,283,288],"pre",{"className":284,"code":285,"language":286,"meta":287,"style":287},"language-ts shiki shiki-themes vitesse-light vitesse-light","formulaCallout({\n  formula: '=VLOOKUP(A2, 商品マスタ!$B$2:$C$10, 2, FALSE)',\n  args: [\n    { text: 'A2', color: 'blue' },\n    { text: '商品マスタ!$B$2:$C$10', color: 'green' },\n    { text: '2', color: 'pink' },\n    { text: 'FALSE', color: 'gray' },\n  ],\n  targetCell: 'D2',\n  position: { top: -60, offsetX: 0 },\n})\n","ts","",[22,289,290,303,326,335,370,400,430,460,466,483,516],{"__ignoreMap":287},[291,292,295,299],"span",{"class":293,"line":294},"line",1,[291,296,298],{"class":297},"senZ8","formulaCallout",[291,300,302],{"class":301},"shFtX","({\n",[291,304,306,310,313,317,321,323],{"class":293,"line":305},2,[291,307,309],{"class":308},"sz8Xr","  formula",[291,311,312],{"class":301},": ",[291,314,316],{"class":315},"sMJiu","'",[291,318,320],{"class":319},"sdGka","=VLOOKUP(A2, 商品マスタ!$B$2:$C$10, 2, FALSE)",[291,322,316],{"class":315},[291,324,325],{"class":301},",\n",[291,327,329,332],{"class":293,"line":328},3,[291,330,331],{"class":308},"  args",[291,333,334],{"class":301},": [\n",[291,336,338,341,344,346,348,350,352,355,358,360,362,365,367],{"class":293,"line":337},4,[291,339,340],{"class":301},"    { ",[291,342,343],{"class":308},"text",[291,345,312],{"class":301},[291,347,316],{"class":315},[291,349,110],{"class":319},[291,351,316],{"class":315},[291,353,354],{"class":301},", ",[291,356,357],{"class":308},"color",[291,359,312],{"class":301},[291,361,316],{"class":315},[291,363,364],{"class":319},"blue",[291,366,316],{"class":315},[291,368,369],{"class":301}," },\n",[291,371,373,375,377,379,381,383,385,387,389,391,393,396,398],{"class":293,"line":372},5,[291,374,340],{"class":301},[291,376,343],{"class":308},[291,378,312],{"class":301},[291,380,316],{"class":315},[291,382,118],{"class":319},[291,384,316],{"class":315},[291,386,354],{"class":301},[291,388,357],{"class":308},[291,390,312],{"class":301},[291,392,316],{"class":315},[291,394,395],{"class":319},"green",[291,397,316],{"class":315},[291,399,369],{"class":301},[291,401,403,405,407,409,411,413,415,417,419,421,423,426,428],{"class":293,"line":402},6,[291,404,340],{"class":301},[291,406,343],{"class":308},[291,408,312],{"class":301},[291,410,316],{"class":315},[291,412,125],{"class":319},[291,414,316],{"class":315},[291,416,354],{"class":301},[291,418,357],{"class":308},[291,420,312],{"class":301},[291,422,316],{"class":315},[291,424,425],{"class":319},"pink",[291,427,316],{"class":315},[291,429,369],{"class":301},[291,431,433,435,437,439,441,443,445,447,449,451,453,456,458],{"class":293,"line":432},7,[291,434,340],{"class":301},[291,436,343],{"class":308},[291,438,312],{"class":301},[291,440,316],{"class":315},[291,442,132],{"class":319},[291,444,316],{"class":315},[291,446,354],{"class":301},[291,448,357],{"class":308},[291,450,312],{"class":301},[291,452,316],{"class":315},[291,454,455],{"class":319},"gray",[291,457,316],{"class":315},[291,459,369],{"class":301},[291,461,463],{"class":293,"line":462},8,[291,464,465],{"class":301},"  ],\n",[291,467,469,472,474,476,479,481],{"class":293,"line":468},9,[291,470,471],{"class":308},"  targetCell",[291,473,312],{"class":301},[291,475,316],{"class":315},[291,477,478],{"class":319},"D2",[291,480,316],{"class":315},[291,482,325],{"class":301},[291,484,486,489,492,494,496,500,504,506,509,511,514],{"class":293,"line":485},10,[291,487,488],{"class":308},"  position",[291,490,491],{"class":301},": { ",[291,493,203],{"class":308},[291,495,312],{"class":301},[291,497,499],{"class":498},"stQ0i","-",[291,501,503],{"class":502},"sM54T","60",[291,505,354],{"class":301},[291,507,508],{"class":308},"offsetX",[291,510,312],{"class":301},[291,512,513],{"class":502},"0",[291,515,369],{"class":301},[291,517,519],{"class":293,"line":518},11,[291,520,521],{"class":301},"})\n",[10,523,524,525,204,528,531],{},"呼び出し側は",[22,526,527],{},"formula",[22,529,530],{},"args","さえ渡せば、色分け・吹き出し位置・三角矢印まで全部勝手に組み上がる。",[14,533,535],{"id":534},"_11関数に横展開した","11関数に横展開した",[10,537,538],{},"スキルが固まったので、関数解説ページに横展開した。",[48,540,541,543,545,548,550,553,556,558,561,564,567],{},[51,542,24],{},[51,544,238],{},[51,546,547],{},"IFERROR",[51,549,245],{},[51,551,552],{},"SUM",[51,554,555],{},"SUMIF",[51,557,242],{},[51,559,560],{},"TEXT",[51,562,563],{},"ROUND",[51,565,566],{},"INDIRECT",[51,568,569],{},"絶対参照と相対参照",[10,571,572],{},"合計11セクション。それぞれに「商品マスタ＋作業シート＋数式吹き出し」のExcel風HTMLモックを差し込んだ。同じヘルパーを呼ぶだけなので、新規ページの追加コストが激減した。",[14,574,576],{"id":575},"sumifをsumifsで置換するメリットの気づき","SUMIFをSUMIFSで置換するメリットの気づき",[10,578,579],{},"横展開の途中で、SUMIFのページを書いていて気づいたことがある。",[10,581,582,585,586,589],{},[22,583,584],{},"SUMIF(範囲, 条件, 集計範囲)","は集計範囲が第3引数だが、",[22,587,588],{},"SUMIFS(集計範囲, 範囲1, 条件1, ...)","は集計範囲が第1引数に来る。",[10,591,592,593,595,596,599,600,602,603,605],{},"これだけだと「引数の順序が違うだけ」に見えるが、実務上の差がある。",[22,594,242],{},"なら、数式セルでF2を押した直後にCtrl+",[22,597,598],{},"[","を押すと、第1引数（=集計対象列）にジャンプして、合計される元の数値列をその場で確認できる。",[22,601,555],{},"だと第1引数は条件範囲なので、Ctrl+",[22,604,598],{},"で飛んでも条件列に着地してしまい、数値検証がワンステップ余計にかかる。",[10,607,608,609,611],{},"「条件が1つでも常に",[22,610,242],{},"を使う」理由が、引数順序のおかげで数値検証が速いから、という形でストンと落ちた。これも記事に追記した。",[14,613,615],{"id":614},"vlookup固有ではない注記の追加","「VLOOKUP固有ではない」注記の追加",[10,617,618,619,621],{},"11関数のページを並べたあと、自分で見直していて違和感が出てきた。VLOOKUPの落とし穴として書いていた「絶対参照の付け忘れ」「検索値と参照値の型不一致」「",[22,620,28],{},"の放置」は、よく考えるとVLOOKUP固有の話ではない。",[48,623,624,627,635],{},[51,625,626],{},"絶対参照の付け忘れ → 数式を下にコピーする時の一般的な癖",[51,628,629,630,239,632,634],{},"型不一致 → 文字列「100」と数値100の比較は",[22,631,238],{},[22,633,242],{},"でも起きる",[51,636,637,639],{},[22,638,28],{},"放置 → どの関数のエラーでも当てはまる",[10,641,642],{},"VLOOKUPページに集約していると「VLOOKUPだけの話」と読まれかねない。各セクションの該当箇所に「これはVLOOKUP固有の落とし穴ではなく、一般的な数式の癖」という注記を加えてもらった。読者が「自分はINDEX-MATCH派だから関係ない」と読み飛ばさないようにする予防線になった。",[14,644,646],{"id":645},"税理士会計士フォロワー視点での応用","税理士・会計士フォロワー視点での応用",[10,648,649],{},"この「F2編集モード風の色対応＋シート分離」のExcel風HTMLモックは、クライアント説明資料でExcel数式の動きを可視化する図解にそのまま使える。「先生、この消費税の按分計算どうなってるんですか」と聞かれたとき、Excelファイルを共有する代わりに、こういう静的なHTML図解を1枚渡すだけで参照関係が伝わる。",[14,651,652],{"id":652},"今日の構図",[10,654,655],{},"人間がやったこと: VLOOKUPページのモックを見て「数式バーがはみ出してる」「F2モード風にして」「シートの色を分けて」と違和感を1つずつ言語化したのと、SUMIFSの引数順序の意味と「VLOOKUP固有ではない」の指摘。",[10,657,658,659,661,662,664,665,668],{},"Claude Codeがやったこと: 数式吹き出しのHTML/CSSを何度も書き直し、10個の重複を1つの",[22,660,298],{},"ヘルパーに集約し、",[22,663,261],{},"スキルとして",[22,666,667],{},"SKILL.md","に書き出し、11関数のページに横展開し、注記を全セクションに追加した。",[10,670,671],{},"「画面の違和感を拾う係」と「拾った違和感を実装と仕組み化に落とす係」の分担が、今日もそのまま回った。",[673,674,675],"style",{},"html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":287,"searchDepth":305,"depth":305,"links":677},[678,679,680,681,682,683,684,685,686,687,688,689],{"id":16,"depth":305,"text":17},{"id":42,"depth":305,"text":43},{"id":93,"depth":305,"text":94},{"id":160,"depth":305,"text":160},{"id":184,"depth":305,"text":184},{"id":226,"depth":305,"text":227},{"id":276,"depth":305,"text":277},{"id":534,"depth":305,"text":535},{"id":575,"depth":305,"text":576},{"id":614,"depth":305,"text":615},{"id":645,"depth":305,"text":646},{"id":652,"depth":305,"text":652},"dev","VLOOKUPの注意点ページで作った『商品マスタ＋作業シート＋数式吹き出し』のExcel風HTMLモックを、F2編集モード風の色対応・シート分離・吹き出し位置調整まで詰めて、excel-html-mockプロジェクトスキルに固めた。10個の重複コードを1ヘルパー（formulaCallout）に集約し、IF/IFERROR/INDEX-MATCH/SUMIFS/TEXT/ROUNDなど11関数の解説に同じ図解を量産した日。","md",{},true,null,"/excel-html-mock-skill-and-functions","eurekapu-nuxt4",false,"2026-05-04T00:00:00.000Z",{"title":5,"description":691},"2026-05/2026-05-04/excel-html-mock-skill-and-functions",[703,704,705,706,707,708,709],"claude-code","skill","excel","vlookup","html-mock","vue","nuxt4","p1t3_TC3BKwQ6kCXT4cj5KUY9mu4r3Mu5wTyhvzH21g",[],"https://log.eurekapu.com/og/blog/excel-html-mock-skill-and-functions.png?v=2026-05-04T00%3A00%3A00.000Z&title=Excel%E9%A2%A8HTML%E3%83%A2%E3%83%83%E3%82%AF%E3%81%AE%E6%95%B0%E5%BC%8F%E5%90%B9%E3%81%8D%E5%87%BA%E3%81%97%E3%83%98%E3%83%AB%E3%83%91%E3%83%BC%E3%82%92Claude%20Code%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%B9%E3%82%AD%E3%83%AB%E5%8C%96%E3%81%97%E3%81%A611%E9%96%A2%E6%95%B0%E3%81%AE%E8%A7%A3%E8%AA%AC%E3%81%AB%E9%81%A9%E7%94%A8%E3%81%97%E3%81%9F%E8%A8%98%E9%8C%B2&author=Kei%20Komatsu&sig=fc671f0f0dbffdd5",1782528832857]