[{"data":1,"prerenderedAt":343},["ShallowReactive",2],{"content-/excel-paste-dialog-rich-mocks":3,"all-pages-for-dir":341,"og-image-/excel-paste-dialog-rich-mocks":342},{"id":4,"title":5,"body":6,"category":323,"description":324,"extension":325,"meta":326,"navigation":296,"ogImage":327,"path":328,"project_name":329,"published":330,"publishedAt":331,"seo":332,"stem":333,"tags":334,"todo":339,"unpublished":330,"updatedAt":327,"__hash__":340},"pages/2026-05/2026-05-08/excel-paste-dialog-rich-mocks.md","Excel貼り付けダイアログをHTMLで忠実再現 — 解説カードオーバーレイで操作を可視化",{"type":7,"value":8,"toc":305},"minimark",[9,14,27,30,33,36,48,55,58,60,64,71,74,76,80,87,101,104,106,109,112,114,118,124,131,133,137,147,150,152,155,158,161,163,167,170,172,176,179,198,201,203,207,214,225,228,231,233,237,251,253,257,264,270,272,275,282,285],[10,11,13],"h2",{"id":12},"形式を選択して貼り付けをhtmlで描き直した","「形式を選択して貼り付け」をHTMLで描き直した",[15,16,17,18,22,23,26],"p",{},"eurekapu-nuxt4 の ",[19,20,21],"code",{},"/lessons/excel/basic-functions"," で扱う「形式を選択して貼り付け」ダイアログを、画像ではなくHTMLで再現した。緑のラジオボタンは丸に内側ドット、フォーカス枠は ",[19,24,25],{},"outline: dotted"," 1px、OK/キャンセルボタンには Win32 風の二重ボーダー。Excel の見た目をピクセル単位で追いかけたら、CSS だけでそれっぽく組めた。",[15,28,29],{},"画像で済ませなかった理由は、解説カードを上に重ねたかったから。画像にカードを重ねると、PNGの解像度に縛られて指す矢印が微妙にズレる。HTMLで組めば、要素同士の相対位置で矢印を引けるので、ブラウザ幅が変わっても破綻しない。",[31,32],"hr",{},[10,34,35],{"id":35},"解説カードの位置を3回動かした",[15,37,38,39,43,44,47],{},"最初は解説カード①②③をダイアログの",[40,41,42],"strong",{},"左側","に並べた。「①が一番上、②が中段、③が下」と縦に積んだら、ダイアログ本体と並走してしまって読みにくい。次に",[40,45,46],{},"ダイアログの上","に横並びで置いた。今度は矢印が長くなりすぎて、視線が散る。",[15,49,50,51,54],{},"3回目で",[40,52,53],{},"ダイアログ本体にオーバーレイ","する形に着地した。①はタイトルバーの上に、下向き矢印を添える。②は値(V)のラジオボタン横、③はOKボタンの上にOK指示を出す。番号と矢印の対応がひと目で取れて、視線が迷わなくなった。",[15,56,57],{},"形容詞で言えば「見やすくなった」だが、動詞で言うと「視線がカードと対象を1往復で済むようになった」。これがオーバーレイの効果。",[31,59],{},[10,61,63],{"id":62},"_6セクションすべてに同じダイアログを展開した","6セクションすべてに同じダイアログを展開した",[15,65,66,67,70],{},"basic-functions ページには貼り付けの種類が6つある（値のみ／加算減算／数式のみ／書式のみ／行列入れ替え／乗算除算）。同じダイアログを各セクションで使い回し、",[40,68,69],{},"②だけセクション固有のラジオボタンをハイライト","する設計にした。",[15,72,73],{},"ただし「行列入れ替え」だけは挙動が違う。Excelのダイアログでは右上のチェックボックスを使うため、②を右上に置き、③をダイアログ下のチェックボックス位置に移した。Eキーで選択する操作も②に書き加えた。同じ部品を使いながら、セクションごとに矢印先と説明文を差し替える構造になった。",[31,75],{},[10,77,79],{"id":78},"ショートカットは別ブロックで-kbd-に統一した","ショートカットは別ブロックで kbd に統一した",[15,81,82,83,86],{},"旧Excel流のリボンショートカット ",[19,84,85],{},"Alt → H → V → S"," は、ダイアログとは別ブロックで表示することにした。同じカードに混ぜると、ダイアログのオーバーレイと干渉して読みにくい。",[15,88,89,90,93,94,97,98,100],{},"ショートカット装飾は全ページで ",[19,91,92],{},"kbd"," スタイルに統一した。白背景・1px枠・角丸2px・等幅フォント。",[19,95,96],{},"Ctrl + V"," も ",[19,99,85],{}," も同じ見た目になり、テキスト中で「これはキー操作」と即座に伝わる。",[15,102,103],{},"ブロック1（操作）とブロック2（実例）は薄いグレーの点線で囲み、境界をはっきりさせた。点線は実線より主張が弱いので、コンテンツの邪魔をせず構造だけ伝えてくれる。",[31,105],{},[10,107,108],{"id":108},"演習リンクを内部リンク化した",[15,110,111],{},"各セクション末尾に「→ 演習01」のような内部リンクを追加した。値のみ → 演習01、加算減算 → 演習02 という対応。教材ページから演習ページに飛んで、戻ってこられる導線になった。",[31,113],{},[10,115,117],{"id":116},"検索置換ダイアログも同じ手法で再現した","検索/置換ダイアログも同じ手法で再現した",[15,119,120,123],{},[19,121,122],{},"/lessons/excel/readable-sheets"," の検索/置換も、画像ではなくHTMLで組み直した。タイトルバー、検索場所のドロップダウン（「シート」「ブック」）、検索ボックス、黄色ハイライトの一致セル。Excel そっくりに見える。",[15,125,126,127,130],{},"ワイルドカード演習用には Excel風の表もHTMLで作って、ChatMessage コンポーネントの ",[19,128,129],{},"dataHtml"," フィールドに渡した。boss発言の直下、downloads リンクの上に表が差し込まれる構造。チャット風の会話の中に「実際のシートはこんな感じ」という具体例が挟まれて、文脈が切れずに読み進められる。",[31,132],{},[10,134,136],{"id":135},"stagehtml-が-exercise-セクションで描画されない罠","stageHtml が exercise セクションで描画されない罠",[15,138,139,140,142,143,146],{},"ChatMessage の ",[19,141,129],{}," を入れた直後、画面に何も出ない。原因を追ったら、",[19,144,145],{},"TheaterViewer.vue"," が exercise/video セクションでは stageHtml をレンダリングしない実装になっていた。lesson セクションだけが対象だった。",[15,148,149],{},"「あ、これ仕様か」と気づいて、TheaterViewer 側に exercise/video でも stageHtml を描画する分岐を足した。1ファイルの修正で全演習ページに反映された。コンポーネントの責務として、ステージ表示は本来セクション種別に依存すべきではない。仕様の方が間違っていた、という整理。",[31,151],{},[10,153,154],{"id":154},"スクショ確認で配置ミスを見つけて再調整した",[15,156,157],{},"ダイアログのHTMLが組み上がったあと、Chrome DevTools MCP でスクショを撮って確認した。最初は「OK」と判定したが、よく見ると②の矢印が値(V)ラジオではなく**1つ下の「コメント」**を指していた。",[15,159,160],{},"再調整して矢印の起点を5px上にずらしたら、ピタリと値(V)を指した。スクショで一度OK判定したものを、見直して再調整するのは地味だがコケやすい工程。AIに任せると「だいたい合ってる」で通してしまうので、目視のレイヤーは残しておく必要がある。",[31,162],{},[10,164,166],{"id":165},"a列スペーサーをプロジェクト規約として揃えた","A列スペーサーをプロジェクト規約として揃えた",[15,168,169],{},"readable-sheets コースのHTMLモックは、A列を列幅1相当のスペーサーに統一した。プロジェクト規約として、Excel風モックは A列を装飾用の余白として固定することにしている。データはB列以降。これだけで「画面の左端ピッタリにセルが寄っている」見た目を回避できる。",[31,171],{},[10,173,175],{"id":174},"readable-sheets-コース改修","readable-sheets コース改修",[15,177,178],{},"ついでに同コースの構成を見直した。",[180,181,182,186,189,192,195],"ul",{},[183,184,185],"li",{},"ch3「Excel設計の原則」をリフレーミング。「設計＝後から読む人のために整える行為」と定義し直した",[183,187,188],{},"ch9「データベース設計を意識する」を末尾に追加",[183,190,191],{},"ch11「IBフォーマット早見表」を末尾に追加",[183,193,194],{},"「対応章」列の章名をすべて内部リンク化",[183,196,197],{},"ステップカードの枠を撤去（点線ブロックと衝突して二重囲みになっていた）",[15,199,200],{},"入力／計算／表示の3シート役割は、抽象論で終わらせず具体例HTMLモックを入れた。売上データ月次集計（入力シート）、SUMIFS（計算シート）、AJE/ワークシート/FS連結フロー（表示シート）。読者が「自分の実務でこう分けるのか」と再生できるレベルまで落とした。",[31,202],{},[10,204,206],{"id":205},"ibフォーマット早見表の色ルール","IBフォーマット早見表の色ルール",[15,208,209,210,213],{},"ch11で追加したIBフォーマット早見表は、色ルールを",[40,211,212],{},"数値セル限定","にした。",[180,215,216,219,222],{},[183,217,218],{},"青：ベタ打ち（手入力の数値）",[183,220,221],{},"黒：数式（計算結果の数値）",[183,223,224],{},"緑：他シート参照（数値）",[15,226,227],{},"日付・文字列は黒で固定する。色を多用しすぎると、シートを開いた瞬間にノイズが多くなる。「色は数値の出自を示すサイン」と意味を絞ることで、読み手は色を見れば「触っていいセル」がすぐ分かる。",[15,229,230],{},"早見表は Markdown でコピペ可能な形でも提供し、PDF/PNG のダウンロードリンクも添えた。ページ内で読むのもよし、印刷して横に置くのもよし、という二段構え。",[31,232],{},[10,234,236],{"id":235},"戸村涼子さんのexcel記事を読んで観点メモを残した","戸村涼子さんのExcel記事を読んで観点メモを残した",[15,238,239,246,247,250],{},[240,241,245],"a",{"href":242,"rel":243},"https://lesspaper.sios.jp/",[244],"nofollow","戸村涼子さんのExcel記事"," を読んで、取り込みたい観点を ",[19,248,249],{},"memo/2026-05-08/excel-article-takeaways.md"," に保存した。税理士視点でのExcel活用の整理が体系的で、自分のコースでも参考にしたい論点がいくつか拾えた。観点を並べただけのメモなので公開はせず、内部資料として残す。",[31,252],{},[10,254,256],{"id":255},"動画圧縮スクリプトの-p1p7-プリセット対応","動画圧縮スクリプトの p1〜p7 プリセット対応",[15,258,259,260,263],{},"Excel講座の動画素材を圧縮するために、動画圧縮スクリプトを修正した。FFmpeg NVENC の品質プリセットが p1〜p7（数字が大きいほど高品質・低速）になっているので、スクリプト側で ",[19,261,262],{},"-preset p4"," のような指定を渡せるようにした。",[15,265,266,269],{},[19,267,268],{},"C:\\Tools\\ffmpeg\\bin\\ffmpeg.exe"," を確認したら、2025年9月の N-121199 ビルドで、すでに p1〜p7 対応済みだった。FFmpeg バイナリは触らず、スクリプトの引数定義を直すだけで動いた。バイナリのバージョンを毎回確認する習慣がないと、「FFmpegのアップデートが必要」と勘違いして時間を溶かすところだった。",[31,271],{},[10,273,274],{"id":274},"振り返り",[15,276,277,278,281],{},"ダイアログをHTMLで再現する作業は、最初「画像で十分では？」と疑った。組み始めると、解説カードのオーバーレイが効きすぎて画像には戻れない。教材における説明は、",[40,279,280],{},"対象を指す矢印の精度","で読みやすさが決まる。",[15,283,284],{},"明日以降のTODO:",[180,286,289,299],{"className":287},[288],"contains-task-list",[183,290,293,298],{"className":291},[292],"task-list-item",[294,295],"input",{"disabled":296,"type":297},true,"checkbox"," 各演習ページの導線確認（演習01〜06のリンクを実際に踏んで、戻り導線まで通るか）",[183,300,302,304],{"className":301},[292],[294,303],{"disabled":296,"type":297}," IBフォーマット早見表のPDFダウンロードリンクが本番ビルドで効いているか確認",{"title":306,"searchDepth":307,"depth":307,"links":308},"",2,[309,310,311,312,313,314,315,316,317,318,319,320,321,322],{"id":12,"depth":307,"text":13},{"id":35,"depth":307,"text":35},{"id":62,"depth":307,"text":63},{"id":78,"depth":307,"text":79},{"id":108,"depth":307,"text":108},{"id":116,"depth":307,"text":117},{"id":135,"depth":307,"text":136},{"id":154,"depth":307,"text":154},{"id":165,"depth":307,"text":166},{"id":174,"depth":307,"text":175},{"id":205,"depth":307,"text":206},{"id":235,"depth":307,"text":236},{"id":255,"depth":307,"text":256},{"id":274,"depth":307,"text":274},"dev","Excel講座の「形式を選択して貼り付け」ダイアログと検索置換ダイアログをHTMLモック化し、解説カードを番号付きでオーバーレイ表示する仕組みを作った1日の記録。配置の試行錯誤、TheaterViewer改修、IBフォーマット早見表の追加までまとめた。","md",{},null,"/excel-paste-dialog-rich-mocks","eurekapu-nuxt4",false,"2026-05-08T00:00:00.000Z",{"title":5,"description":324},"2026-05/2026-05-08/excel-paste-dialog-rich-mocks",[329,335,336,337,338],"Excel","HTMLモック","教材","IBフォーマット","memo","Pcp5WzqffmnP8nUX2tTif9icCcaPvkFJBCKr9ACKjng",[],"https://log.eurekapu.com/og/blog/excel-paste-dialog-rich-mocks.png?v=2026-05-08T00%3A00%3A00.000Z&title=Excel%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%82%92HTML%E3%81%A7%E5%BF%A0%E5%AE%9F%E5%86%8D%E7%8F%BE%20%E2%80%94%20%E8%A7%A3%E8%AA%AC%E3%82%AB%E3%83%BC%E3%83%89%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%83%AC%E3%82%A4%E3%81%A7%E6%93%8D%E4%BD%9C%E3%82%92%E5%8F%AF%E8%A6%96%E5%8C%96&author=Kei%20Komatsu&sig=23a4f6e73889add3",1782528834079]