Excel貼り付けダイアログをHTMLで忠実再現 — 解説カードオーバーレイで操作を可視化

「形式を選択して貼り付け」をHTMLで描き直した

eurekapu-nuxt4 の /lessons/excel/basic-functions で扱う「形式を選択して貼り付け」ダイアログを、画像ではなくHTMLで再現した。緑のラジオボタンは丸に内側ドット、フォーカス枠は outline: dotted 1px、OK/キャンセルボタンには Win32 風の二重ボーダー。Excel の見た目をピクセル単位で追いかけたら、CSS だけでそれっぽく組めた。

画像で済ませなかった理由は、解説カードを上に重ねたかったから。画像にカードを重ねると、PNGの解像度に縛られて指す矢印が微妙にズレる。HTMLで組めば、要素同士の相対位置で矢印を引けるので、ブラウザ幅が変わっても破綻しない。

解説カードの位置を3回動かした

最初は解説カード①②③をダイアログの左側に並べた。「①が一番上、②が中段、③が下」と縦に積んだら、ダイアログ本体と並走してしまって読みにくい。次にダイアログの上に横並びで置いた。今度は矢印が長くなりすぎて、視線が散る。

3回目でダイアログ本体にオーバーレイする形に着地した。①はタイトルバーの上に、下向き矢印を添える。②は値(V)のラジオボタン横、③はOKボタンの上にOK指示を出す。番号と矢印の対応がひと目で取れて、視線が迷わなくなった。

形容詞で言えば「見やすくなった」だが、動詞で言うと「視線がカードと対象を1往復で済むようになった」。これがオーバーレイの効果。

6セクションすべてに同じダイアログを展開した

basic-functions ページには貼り付けの種類が6つある（値のみ／加算減算／数式のみ／書式のみ／行列入れ替え／乗算除算）。同じダイアログを各セクションで使い回し、②だけセクション固有のラジオボタンをハイライトする設計にした。

ただし「行列入れ替え」だけは挙動が違う。Excelのダイアログでは右上のチェックボックスを使うため、②を右上に置き、③をダイアログ下のチェックボックス位置に移した。Eキーで選択する操作も②に書き加えた。同じ部品を使いながら、セクションごとに矢印先と説明文を差し替える構造になった。

ショートカットは別ブロックで kbd に統一した

旧Excel流のリボンショートカット Alt → H → V → S は、ダイアログとは別ブロックで表示することにした。同じカードに混ぜると、ダイアログのオーバーレイと干渉して読みにくい。

ショートカット装飾は全ページで kbd スタイルに統一した。白背景・1px枠・角丸2px・等幅フォント。Ctrl + V も Alt → H → V → S も同じ見た目になり、テキスト中で「これはキー操作」と即座に伝わる。

ブロック1（操作）とブロック2（実例）は薄いグレーの点線で囲み、境界をはっきりさせた。点線は実線より主張が弱いので、コンテンツの邪魔をせず構造だけ伝えてくれる。

演習リンクを内部リンク化した

各セクション末尾に「→ 演習01」のような内部リンクを追加した。値のみ → 演習01、加算減算 → 演習02 という対応。教材ページから演習ページに飛んで、戻ってこられる導線になった。

検索/置換ダイアログも同じ手法で再現した

/lessons/excel/readable-sheets の検索/置換も、画像ではなくHTMLで組み直した。タイトルバー、検索場所のドロップダウン（「シート」「ブック」）、検索ボックス、黄色ハイライトの一致セル。Excel そっくりに見える。

ワイルドカード演習用には Excel風の表もHTMLで作って、ChatMessage コンポーネントの dataHtml フィールドに渡した。boss発言の直下、downloads リンクの上に表が差し込まれる構造。チャット風の会話の中に「実際のシートはこんな感じ」という具体例が挟まれて、文脈が切れずに読み進められる。

stageHtml が exercise セクションで描画されない罠

ChatMessage の dataHtml を入れた直後、画面に何も出ない。原因を追ったら、TheaterViewer.vue が exercise/video セクションでは stageHtml をレンダリングしない実装になっていた。lesson セクションだけが対象だった。

「あ、これ仕様か」と気づいて、TheaterViewer 側に exercise/video でも stageHtml を描画する分岐を足した。1ファイルの修正で全演習ページに反映された。コンポーネントの責務として、ステージ表示は本来セクション種別に依存すべきではない。仕様の方が間違っていた、という整理。

スクショ確認で配置ミスを見つけて再調整した

ダイアログのHTMLが組み上がったあと、Chrome DevTools MCP でスクショを撮って確認した。最初は「OK」と判定したが、よく見ると②の矢印が値(V)ラジオではなく**1つ下の「コメント」**を指していた。

再調整して矢印の起点を5px上にずらしたら、ピタリと値(V)を指した。スクショで一度OK判定したものを、見直して再調整するのは地味だがコケやすい工程。AIに任せると「だいたい合ってる」で通してしまうので、目視のレイヤーは残しておく必要がある。

A列スペーサーをプロジェクト規約として揃えた

readable-sheets コースのHTMLモックは、A列を列幅1相当のスペーサーに統一した。プロジェクト規約として、Excel風モックは A列を装飾用の余白として固定することにしている。データはB列以降。これだけで「画面の左端ピッタリにセルが寄っている」見た目を回避できる。

readable-sheets コース改修

ついでに同コースの構成を見直した。

ch3「Excel設計の原則」をリフレーミング。「設計＝後から読む人のために整える行為」と定義し直した
ch9「データベース設計を意識する」を末尾に追加
ch11「IBフォーマット早見表」を末尾に追加
「対応章」列の章名をすべて内部リンク化
ステップカードの枠を撤去（点線ブロックと衝突して二重囲みになっていた）

入力／計算／表示の3シート役割は、抽象論で終わらせず具体例HTMLモックを入れた。売上データ月次集計（入力シート）、SUMIFS（計算シート）、AJE/ワークシート/FS連結フロー（表示シート）。読者が「自分の実務でこう分けるのか」と再生できるレベルまで落とした。

IBフォーマット早見表の色ルール

ch11で追加したIBフォーマット早見表は、色ルールを数値セル限定にした。

青：ベタ打ち（手入力の数値）
黒：数式（計算結果の数値）
緑：他シート参照（数値）

日付・文字列は黒で固定する。色を多用しすぎると、シートを開いた瞬間にノイズが多くなる。「色は数値の出自を示すサイン」と意味を絞ることで、読み手は色を見れば「触っていいセル」がすぐ分かる。

早見表は Markdown でコピペ可能な形でも提供し、PDF/PNG のダウンロードリンクも添えた。ページ内で読むのもよし、印刷して横に置くのもよし、という二段構え。

各演習ページの導線確認（演習01〜06のリンクを実際に踏んで、戻り導線まで通るか）
IBフォーマット早見表のPDFダウンロードリンクが本番ビルドで効いているか確認