ログイン
セクション

その図、スクリーンショットで貼っていませんか。

Excelの解説に添える図は、撮らなくても作れます。HTMLでシートの見た目を再現すれば、軽くて、あとから直せて、テキスト検索もできる図になります。

——そのデザインルールを一式のClaude Codeスキルにして、書き方から運用まで解説するのがこの講座です。

Claude Codeスキル実践: Excel風HTMLモック

Excelシートの見た目をHTMLで再現し、数式の引数を色分けで見せる教材ブロックの作り方

こんな経験、ありませんか

  • 関数解説の図を作るためにExcelを開き、サンプルデータを打ち、スクリーンショットを撮って、トリミングして……を数値1つの修正のたびに繰り返している
  • 撮ったスクショが記事の幅に合わずぼやける。スマホで見ると文字がつぶれて読めない
  • 「VLOOKUPの第2引数はどのセル範囲か」を口で説明しても伝わらず、図では矢印だらけになって余計に分かりにくい
  • 画像の中の文字は検索にかからないので、あとから「あの図どこだっけ」が見つからない

これらはすべて、「Excelの見た目」を画像でしか作れないことが原因です。

この講座で学べること

この講座では、Excelシートの見た目（列ヘッダー・行番号・罫線・シートタブ）と、関数の引数とセル参照の対応関係を、インラインstyle付きの素のHTMLだけで再現するデザインルール集「Excel風HTMLモック」を体系的に解説します。実際に日常運用されている Claude Code スキルを教材に、「なぜそのルールが必要なのか」から一つずつ紐解きます。

  • 3ブロック構成 — 元データシート・作業シート・数式吹き出し。最小事例の理想形とテンプレート
  • 引数ロールの色意味論 — 検索値は青、範囲は緑、列番号・定数はピンク。どの関数でも固定する理由
  • 見た目の再現パターン — シートタブ・列ヘッダー・行番号・罫線・セル寸法・揃えのHTML実装
  • 関数別の事例パターン — VLOOKUP・INDEX-MATCH・XLOOKUP・IF・IFERROR・SUMIFSの6パターン
  • 仕上げと運用 — 文字列埋め込みの注意、公開前チェックリスト、Claude Codeスキルとしての導入手順

スキルファイル一式はダウンロードできます。そのまま自分の Claude Code に入れて使えます。

対象者

この講座は主に以下の方を対象にしています。

  • Excelの使い方を人に教える立場の方 — 社内研修資料・マニュアル・ブログ・学習サイトの作り手
  • 関数解説に「伝わる図」を入れたいが、スクリーンショット運用に疲れている方
  • Claude Code などの AI エージェントに教材・解説コンテンツの図を作らせたい方

HTMLの深い知識は不要です。この講座に出てくるHTMLは <div> と <table> とインラインstyleだけで、コピペから始められます。

本講座の特徴

図が「本物」で動いている

この講座に出てくるExcel風の図は、画像ではなく本物のHTMLです。「書くコード」と「出る見た目」を上下に並べて対で見せるので、読みながらそのまま手元で再現できます。

すでに本番で使われているルール集

このスキルは当サイトのExcel講座・IBフォーマット講座の図を量産するために作られ、実際に運用されています。机上のルールではなく、数十枚の図を作る中で固まった実戦のルールです。

最後はAIに作らせるところまで

ルールを覚えて手で書くだけでなく、Claude Code のスキルとして導入して「VLOOKUPの図を入れて」の一言で生成させる運用まで解説します。

講座の構成

1. なぜExcelの見た目をHTMLで作るのか

スクリーンショットの3つの弱点と、HTMLモックの使いどころ。SVG図解との使い分けもここで整理します。

2. 3ブロック構成 — 元データ・作業シート・数式吹き出し

最小事例の理想形。テンプレートを部品ごとに分解し、数式吹き出しを生成する formulaCallout ヘルパーまで解説します。

3. 引数ロールの色意味論 — 青・緑・ピンクを固定する

色の意味を全ページで固定するから、読者は初見の図でも直感で読めます。グレー2段階とエラー表示の流儀も扱います。

4. Excelの見た目を再現するHTMLパターン

シートタブ・列ヘッダー・行番号・罫線・セル寸法・揃え。「Excelに見える」を構成する部品の実装カタログです。

5. 関数別の事例パターン

検索系・条件系・集計系の6関数それぞれで「どのセルに何色を付けるか」の型をライブモック付きで解説します。

6. チェックリストとスキル運用

文字列埋め込みの注意点と公開前チェックリスト。ここでスキルファイル一式をダウンロードできます。

本講座で扱わないこと

  • Excel関数そのものの解説 — VLOOKUPやSUMIFSの使い方・引数の意味は別講座（Excel基礎講座）の領分です。本講座は「その解説に添える図の作り方」を扱います
  • 実際のExcelファイルの画像化 — 手元のファイルの中身を忠実に見せたい場合はスクリーンショットの領分です。本講座は「解説用の最小事例」を作ります
  • スキルという仕組みの一般論 — シリーズ第1弾「SVG図解」の第Ⅱ章で詳しく扱っています。本講座では導入手順だけ補足します

その図、スクリーンショットで貼っていませんか。

Excelの解説に添える図は、撮らなくても作れます。HTMLでシートの見た目を再現すれば、軽くて、あとから直せて、テキスト検索もできる図になります。

——そのデザインルールを一式のClaude Codeスキルにして、書き方から運用まで解説するのがこの講座です。

Claude Codeスキル実践: Excel風HTMLモック

Excelシートの見た目をHTMLで再現し、数式の引数を色分けで見せる教材ブロックの作り方

こんな経験、ありませんか

  • 関数解説の図を作るためにExcelを開き、サンプルデータを打ち、スクリーンショットを撮って、トリミングして……を数値1つの修正のたびに繰り返している
  • 撮ったスクショが記事の幅に合わずぼやける。スマホで見ると文字がつぶれて読めない
  • 「VLOOKUPの第2引数はどのセル範囲か」を口で説明しても伝わらず、図では矢印だらけになって余計に分かりにくい
  • 画像の中の文字は検索にかからないので、あとから「あの図どこだっけ」が見つからない

これらはすべて、「Excelの見た目」を画像でしか作れないことが原因です。

この講座で学べること

この講座では、Excelシートの見た目（列ヘッダー・行番号・罫線・シートタブ）と、関数の引数とセル参照の対応関係を、インラインstyle付きの素のHTMLだけで再現するデザインルール集「Excel風HTMLモック」を体系的に解説します。実際に日常運用されている Claude Code スキルを教材に、「なぜそのルールが必要なのか」から一つずつ紐解きます。

  • 3ブロック構成 — 元データシート・作業シート・数式吹き出し。最小事例の理想形とテンプレート
  • 引数ロールの色意味論 — 検索値は青、範囲は緑、列番号・定数はピンク。どの関数でも固定する理由
  • 見た目の再現パターン — シートタブ・列ヘッダー・行番号・罫線・セル寸法・揃えのHTML実装
  • 関数別の事例パターン — VLOOKUP・INDEX-MATCH・XLOOKUP・IF・IFERROR・SUMIFSの6パターン
  • 仕上げと運用 — 文字列埋め込みの注意、公開前チェックリスト、Claude Codeスキルとしての導入手順

スキルファイル一式はダウンロードできます。そのまま自分の Claude Code に入れて使えます。

対象者

この講座は主に以下の方を対象にしています。

  • Excelの使い方を人に教える立場の方 — 社内研修資料・マニュアル・ブログ・学習サイトの作り手
  • 関数解説に「伝わる図」を入れたいが、スクリーンショット運用に疲れている方
  • Claude Code などの AI エージェントに教材・解説コンテンツの図を作らせたい方

HTMLの深い知識は不要です。この講座に出てくるHTMLは <div> と <table> とインラインstyleだけで、コピペから始められます。

本講座の特徴

図が「本物」で動いている

この講座に出てくるExcel風の図は、画像ではなく本物のHTMLです。「書くコード」と「出る見た目」を上下に並べて対で見せるので、読みながらそのまま手元で再現できます。

すでに本番で使われているルール集

このスキルは当サイトのExcel講座・IBフォーマット講座の図を量産するために作られ、実際に運用されています。机上のルールではなく、数十枚の図を作る中で固まった実戦のルールです。

最後はAIに作らせるところまで

ルールを覚えて手で書くだけでなく、Claude Code のスキルとして導入して「VLOOKUPの図を入れて」の一言で生成させる運用まで解説します。

講座の構成

1. なぜExcelの見た目をHTMLで作るのか

スクリーンショットの3つの弱点と、HTMLモックの使いどころ。SVG図解との使い分けもここで整理します。

2. 3ブロック構成 — 元データ・作業シート・数式吹き出し

最小事例の理想形。テンプレートを部品ごとに分解し、数式吹き出しを生成する formulaCallout ヘルパーまで解説します。

3. 引数ロールの色意味論 — 青・緑・ピンクを固定する

色の意味を全ページで固定するから、読者は初見の図でも直感で読めます。グレー2段階とエラー表示の流儀も扱います。

4. Excelの見た目を再現するHTMLパターン

シートタブ・列ヘッダー・行番号・罫線・セル寸法・揃え。「Excelに見える」を構成する部品の実装カタログです。

5. 関数別の事例パターン

検索系・条件系・集計系の6関数それぞれで「どのセルに何色を付けるか」の型をライブモック付きで解説します。

6. チェックリストとスキル運用

文字列埋め込みの注意点と公開前チェックリスト。ここでスキルファイル一式をダウンロードできます。

本講座で扱わないこと

  • Excel関数そのものの解説 — VLOOKUPやSUMIFSの使い方・引数の意味は別講座（Excel基礎講座）の領分です。本講座は「その解説に添える図の作り方」を扱います
  • 実際のExcelファイルの画像化 — 手元のファイルの中身を忠実に見せたい場合はスクリーンショットの領分です。本講座は「解説用の最小事例」を作ります
  • スキルという仕組みの一般論 — シリーズ第1弾「SVG図解」の第Ⅱ章で詳しく扱っています。本講座では導入手順だけ補足します