Claude Code SkillでHTML図解を自動生成！時短テクニック

1 はじめに
2 この記事で伝えたいこと
3 🎯 SVG記事で遭遇した課題とHTMLでの解決
4 HTML図解自動生成 Skillの実装
- 4.1 Skillファイルの構成
- 4.2 実装のポイント
5 実際に使ってみた
6 🚀 Material Icons活用術
7 SVGとHTMLの使い分けガイドライン
8 実運用で遭遇する問題点と対処法
9 アクセシビリティ対応
- 9.1 WCAG Level AA準拠
- 9.2 Tailwindでのコントラスト確保
10 まとめ：SVGとHTMLを使い分けて効率化
11 コード例：Skillファイルの抜粋

はじめに

ども！Claude Code を執筆に贅沢活用している龍ちゃんです。

前回の SVG図解自動生成記事で、「SVGで図解作成時間を67%削減できた！」って話をしたんですが、正直に言うと完璧ではなかったんですよね。

フロントエンドエンジニアとしてTailwind CSSを日常的に使っている僕からすると、あとから編集もできちゃうんですよね。ClaudeもTailwindが得意なので、SVGを作るよりHTML経由で図を作ってスクショする方が、PNG変換という手間は増えるんですけど、意図した図が作れるんです。

HTMLで図解を作る利点

1. レイアウトが一発で決まる
ClaudeはCSS（特にFlexbox/Grid）が得意なので、paddingや文字の設定、レイアウトの統一感がSVGより圧倒的に実現しやすいです。Claudeで作るSVGと比較すると、レイアウト崩れが基本的になくなります。

2. コードが読める人なら編集・活用が簡単
HTMLを読んで図を修正したり活用したりできるのは利点ですね。Material IconsもSVGと同じように使えるし、個人的にTailwind CSSが好き（入社した時に初めて学んだ技術）っていうのもあります。

3. Figmaで編集可能
HTMLをSVGに変換する便利なライブラリーが出てきているので、Figmaで後から編集することもできます。

4. PNG変換の選択肢が豊富
Playwright（MCP/Pythonパッケージ）やhtml2imageなどのライブラリーを使って、HTMLからPNG画像を生成できます。

今回のブログの対象範囲

今回はHTMLで図解を作るところまでを対象としています。PNG変換については後半で軽く触れますが、詳細は別記事で扱う予定です。

理想としてはWordPressサイトに直接HTMLを挟み込むこともありなんですけど、動作が重くなるので、まあご愛嬌かなと（笑）。
一番簡単な方法としてはブラウザで立ち上げてスクショですね。

試してみて感じたこと

驚くほど簡単でした。 SVGでは頻繁に発生していた微調整が、今回試したHTML図解3つは全て修正不要で完成しました。

今後、僕がブログで図を作るなら：

まずMermaidでできないか考える
無理ならHTMLで作る

という手段になりますね。

ベストプラクティスを一緒に模索しましょう

Skillの共有は今回もGistで提供しています。ベースはSVGでやってた方法とほぼ一緒で、Claudeに調査してもらって、レイアウトの比率やHTML用にカスタムしたルールを追加している段階です。

📝 Note:

HTML 図解生成 Skill の完全版は Gist で公開中

Skill の作り方について詳しくは Claude Code Skillの登録と実践！を参照してください

高機能な図を作るためのベストプラクティス、僕も模索中です。 もし「いい方法があるよ！」「これやってないの？」みたいなツッコミがあれば、ぜひXの方でDMください。@SIOSTechLab でも @RyuReina_Tech でもどちらでも大歓迎です！

この記事で伝えたいこと

SVGとHTMLを使い分けることで、より柔軟な図解作成が可能になります。

この記事で扱う内容:

HTML + Tailwind CSS 図解自動生成 Skillの実装
SVGで遭遇した問題の解決方法（重要！）
SVGとHTMLの使い分けガイドライン
PNG変換ワークフロー

🎯 SVG記事で遭遇した課題とHTMLでの解決

課題	SVGでの状況	HTML + Tailwind CSSでの解決
文字列のはみ出し	font-size調整が必要（頻繁に発生）	`text-center`, `p-4`で自動余白確保
要素の重なり	padding調整が必要（頻繁に発生）	Flexboxの`gap-6`で自動間隔確保
カスタム矢印問題	Material Icons推奨でも無視されることがある	`<span class="material-symbols-outlined">arrow_downward</span>`
配置のバラつき	座標計算ミスが発生	Gridレイアウトで均等配置が自動

結論: レイアウト自動化で座標計算から解放されました。

HTML図解自動生成 Skillの実装

Skillファイルの構成

.claude/skills/diagram-generator-html.md を作成し、以下の要素を含めます：

主要な指示内容:

Tailwind CSS CDN使用（レイアウトを簡単に）
- 注: CDNは開発・プロトタイプ用です。PNG変換後は静的画像になるため、本番環境の制限は適用されません
Material Symbols Outlined（クラス指定だけでアイコン使用）
固定サイズ: 1280 x 720 px (16:9)
アクセシビリティ対応（role="img", aria-label）

実装のポイント

1. Tailwind CSSで統一されたレイアウト

<div class="flex flex-col gap-6">
  <!-- 自動的に縦方向に6の間隔で配置 -->
</div>

ポイント: 座標計算不要。gap-6だけで要素間隔が自動確保されます。

2. Material Iconsがクラス指定だけで使える

<span class="material-symbols-outlined text-6xl text-blue-600">database</span>

SVGとの比較:

SVG: <path d="M12,3C7.58..." fill="#2196F3"/> を手動で埋め込む
HTML: クラス名を指定するだけ

3. 固定サイズで一貫性を保つ

<body class="w-[1280px] h-[720px] m-0 p-0">

ポイント: PNG変換時に正確なサイズが保証されます。

実際に使ってみた

使い方の流れ

Claude Codeに「HTMLで○○の図を作って」と依頼
Skillが自動起動
不足情報があれば質問される
HTMLファイルが生成される
PNGファイルとして docs/article/[feature-name]/images/ に保存

実例1: 3層アーキテクチャ図の生成

依頼内容:

HTMLで3層アーキテクチャの図を作ってください。
Presentation Layer、Business Logic Layer、Data Access Layerの構成です。
Material Iconsを使って、各層にアイコンを配置してください。

生成されたHTML（抜粋）:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>3層アーキテクチャ</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
</head>
<body class="w-[1280px] h-[720px] m-0 p-0">
    <div class="w-full h-full bg-gray-50 flex items-center justify-center p-12">
        <div class="w-full max-w-4xl flex flex-col gap-6">
            <!-- Presentation Layer -->
            <div class="bg-blue-100 border-2 border-blue-500 rounded-lg p-6">
                <div class="flex items-center justify-center gap-3">
                    <span class="material-symbols-outlined text-5xl text-blue-600">desktop_windows</span>
                    <div class="text-center">
                        <h2 class="text-2xl font-bold text-blue-900">Presentation Layer</h2>
                        <p class="text-lg text-blue-700 mt-1">UI・ユーザーインターフェース</p>
                    </div>
                </div>
            </div>

            <!-- Arrow -->
            <div class="text-center">
                <span class="material-symbols-outlined text-5xl text-gray-400">arrow_downward</span>
            </div>

            <!-- (他の層も同様) -->
        </div>
    </div>
</body>
</html>

結果:

ファイルサイズ: 43.74 KB（推奨範囲内）
サイズ: 1280 x 720 px
修正不要（一発で完成）

ポイント:

Flexboxのgap-6で矢印との間隔が自動確保
Material Iconsがクラス指定だけで表示
文字列のはみ出しゼロ

実例2: ユーザー認証フロー図の生成

依頼内容:

HTMLでユーザー認証フローの図を作ってください。
開始 → 認証情報入力 → 検証 → セッション確立 → 完了の流れです。
開始と完了は楕円形、プロセスは矩形で表現してください。

生成されたHTML（抜粋）:

<div class="flex flex-col items-center gap-8">
    <!-- 開始（楕円形） -->
    <div class="bg-green-100 border-2 border-green-500 rounded-full px-12 py-6">
        <span class="text-xl font-bold text-green-900">開始</span>
    </div>

    <!-- 矢印 -->
    <div class="text-center">
        <span class="text-4xl text-gray-400">↓</span>
    </div>

    <!-- 認証情報入力（矩形） -->
    <div class="bg-blue-100 border-2 border-blue-500 rounded-lg px-8 py-4">
        <span class="text-lg font-semibold text-blue-900">認証情報入力</span>
    </div>

    <!-- (他のステップも同様) -->
</div>

結果:

ファイルサイズ: 29.21 KB
修正不要（一発で完成）

ポイント:

rounded-fullで楕円形、rounded-lgで矩形が簡単に実装
Unicode文字 ↓ でシンプルな矢印
中央揃え配置が自動

実例3: Before/After比較図の生成

依頼内容:

HTMLで図解作成の時短効果を比較するBefore/After図を作ってください。

Before（赤系）:
- 作業時間: 45分
- ツール: Figma / PowerPoint
- 課題: 時間がかかる

After（緑系）:
- 作業時間: 15分
- ツール: Claude Code Skill
- 内訳: 生成5分 + 修正10分
- 効果: 67% 時短！

生成されたHTML（抜粋）:

<div class="grid grid-cols-2 gap-12">
    <!-- Before -->
    <div class="bg-red-50 border-2 border-red-300 rounded-lg p-8">
        <h3 class="text-2xl font-bold text-red-900 mb-4">Before（手動作成）</h3>
        <div class="space-y-3 text-red-800">
            <p class="text-lg">⏱️ 作業時間: <strong>45分</strong></p>
            <p class="text-lg">🛠️ ツール: Figma / PowerPoint</p>
            <p class="text-lg">⚠️ 課題: 時間がかかる</p>
        </div>
    </div>

    <!-- After -->
    <div class="bg-green-50 border-2 border-green-300 rounded-lg p-8">
        <h3 class="text-2xl font-bold text-green-900 mb-4">After（Skill生成）</h3>
        <div class="space-y-3 text-green-800">
            <p class="text-lg">⏱️ 作業時間: <strong>15分</strong></p>
            <p class="text-lg">🛠️ ツール: Claude Code Skill</p>
            <p class="text-lg">📊 内訳: 生成5分 + 修正10分</p>
            <div class="bg-green-100 border border-green-400 rounded px-3 py-1 mt-2 inline-block">
                <span class="text-sm font-bold text-green-900">✨ 67% 時短！</span>
            </div>
        </div>
    </div>
</div>

結果:

ファイルサイズ: 37.11 KB
修正不要（一発で完成）

ポイント:

grid grid-cols-2 gap-12で2カラムレイアウトが自動
配色統一（Before: 赤系、After: 緑系）
効果バッジも簡単に実装

SVG記事との比較

図解	SVG記事（修正の有無）	HTML検証結果（修正の有無）
3層アーキテクチャ	修正が必要だった	修正不要
認証フロー	修正が必要だった	修正不要
Before/After	修正が必要だった	修正不要

結論: 今回試した3つの実例では、全て修正不要で完成。SVGで遭遇した問題を解決できました。

🚀 Material Icons活用術

Googleが提供する2000種類以上の無料アイコン集が、HTMLならクラス指定だけで使えるのが最大の利点です。

使用方法:

<!-- CDN読み込み -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />

<!-- アイコン配置 -->
<span class="material-symbols-outlined text-6xl text-blue-600">database</span>

SVGとの比較:

操作	SVG	HTML
配置	パス手動埋め込み	`<span>`タグでクラス指定
変更	パス全体差し替え	名前変更だけ（`database` → `cloud_upload`）
サイズ/色	属性調整	Tailwindクラス変更（`text-6xl`, `text-blue-600`）

結論: HTMLの方が圧倒的に簡単。

SVGとHTMLの使い分けガイドライン

正直に言うと、SVGとHTMLは適材適所です。完璧なものは一発で作れませんが、使い分けることで効率化できます。

SVGを選ぶべきケース

✅ ベクター形式が必須
- 印刷物
- 高解像度ディスプレイ
- 拡大しても劣化させたくない
✅ ファイルサイズを最小化したい
- SVG: 2-5 KB
- PNG: 30-50 KB
✅ Figmaで後から編集する予定
- SVGはFigmaで直接編集可能
✅ 複雑な図形を描く必要がある
- パスやベジェ曲線を使った図形

HTMLを選ぶべきケース

✅ シンプルなレイアウト
- 矩形、楕円形中心の図解
- Flexbox/Gridで十分な場合
✅ Tailwind CSSに慣れている
- クラス指定だけでスタイリング完了
✅ Material Iconsを多用したい
- クラス指定だけで簡単実装
✅ 座標計算を避けたい
- レイアウトシステムで自動配置
✅ 修正の手間を最小化したい
- SVG: 頻繁に微調整が必要
- HTML: 今回の3つの実例では全て修正不要

併用のすすめ

プロトタイプ: HTML（速い、簡単）
図解のレイアウトを素早く確認

本番（ベクター重視）: SVG（品質高い）
印刷物や高解像度ディスプレイ向け

本番（レイアウト重視）: HTML（修正不要）
ブログ埋め込み、SNS共有向け

実運用で遭遇する問題点と対処法

問題1: PNG変換が必須

問題: HTMLファイル単体ではブログに埋め込めない（サイトによる）

対処法:

どうやってかPNGに変換（Playwright・スクショ・etc…）
ワークフロー: HTML生成 → PNG変換 → ブログに埋め込み

問題2: Tailwind CDN依存

問題: HTML生成時にインターネット接続が必要

対処法:

PNG変換時にChromiumが自動でCDNから取得
変換後はPNG画像なので、CDN不要

問題3: JavaScript/アニメーション禁止

問題: 静的な図解のみ対応（インタラクティブ要素は不可）

対処法:

静的な図解に用途を限定
インタラクティブな図解が必要なら別のアプローチを検討

SVG記事と比較して「発生しなかった」問題

✅ 文字列幅の不一致: Tailwindの自動余白で解決
✅ 要素の重なり: Flexbox/Gridのgapで解決
✅ カスタム矢印問題: Material Iconsのクラス指定で解決
✅ 配置のバラつき: レイアウトシステムで解決

アクセシビリティ対応

WCAG Level AA準拠

コントラスト比 4.5:1以上の自動適用とスクリーンリーダー対応を実装しています。

実装例:

<div class="w-full h-full bg-white flex items-center justify-center"
     role="img"
     aria-label="3層アーキテクチャ図">
  <!-- 図解の内容 -->
</div>

Tailwindでのコントラスト確保

用途	Tailwind Class	コントラスト比
Primary	`bg-blue-500`, `text-blue-900`	4.5:1以上
Secondary	`bg-green-500`, `text-green-900`	4.5:1以上
Accent	`bg-orange-500`, `text-orange-900`	4.5:1以上

まとめ：SVGとHTMLを使い分けて効率化

HTML図解生成の評価

✅ 良い点:

レイアウトが簡単（Flexbox/Grid）
修正の必要性が低い（10-20%）
Material Iconsが簡単（クラス指定だけ）
配色の統一が容易（Tailwind）

❌ 課題:

PNG変換が必須
ファイルサイズがやや大きい（30-50 KB）
ベクター形式ではない

時短効果の測定

今回試した3つの図解で、作成時間を計測しました：

作業	手動作成（想定時間）	HTML Skill生成	削減時間
3層アーキテクチャ図	約45分	5分（修正なし）	約40分
ユーザー認証フロー図	約30分	4分（修正なし）	約26分
Before/After比較図	約60分	6分（修正なし）	約54分

全ての実例で修正作業が不要だったため、大幅な時短を実現できました。

PNG変換について

HTMLファイルはブログに直接埋め込めない場合があるため、PNG画像に変換して使用します。

今回はHTML図解の生成に焦点を当てているため、PNG変換の詳細は別記事で扱う予定です。簡単に触れておくと、ブラウザでの手動スクリーンショットやPlaywright/html2imageなどのライブラリーでHTMLからPNG画像を生成できます。

次のステップ

関連記事:

今後の展開:

PNG変換の詳細（別記事予定）
画像最適化のベストプラクティス

コード例：Skillファイルの抜粋

HTML 図解生成 Skill の完全版は Gist で公開中

---
name: diagram-generator-html
description: 技術ブログ記事用のHTML図解を生成しPNG画像に変換するスキル。
allowed-tools: Read, Write, Bash
---

# HTML Diagram Generator Skill

技術ブログ記事用のHTML図解を自動生成し、PNG画像に変換するSkillです。

## When to Use

以下の場合にこのスキルを使用してください：

- ユーザーが「HTMLで図を作って」と依頼した場合
- ユーザーが「Tailwindで図解を生成して」と依頼した場合
- SVGで座標計算が面倒な場合

## Design Specifications

### 基本仕様

- **固定サイズ**: 1280 x 720 px (16:9)
- **フォーマット**: HTML5 + Tailwind CSS
- **最終出力**: PNG画像

### Tailwind CSS活用

- **CDN**: `https://cdn.tailwindcss.com`
- **レイアウト**: Flexbox/Gridで自動配置
- **配色**: `bg-blue-100`, `text-blue-900`など統一されたクラス

### Material Icons統合

- **フォント**: Material Symbols Outlined
- **CDN**: `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined`
- **使用例**: `<span class="material-symbols-outlined">database</span>`

## Supported Design Patterns

1. **アーキテクチャ図**: レイヤード、マイクロサービス
2. **フロー図**: プロセス、データフロー
3. **関係図**: ER図、クラス図
4. **比較図**: Before/After、パフォーマンス比較
5. **コンポーネント図**: システム構成
6. **概念図**: コンセプトマップ

## HTML Template Example

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>図解タイトル</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
</head>
<body class="w-[1280px] h-[720px] m-0 p-0">
    <div class="w-full h-full bg-gray-50 flex items-center justify-center p-12"
         role="img"
         aria-label="図解の説明">
        <!-- 図解の内容 -->
    </div>
</body>
</html>
```

## Accessibility Requirements

- **role属性**: `role="img"`
- **aria-label**: 図解の内容を説明
- **コントラスト比**: WCAG Level AA準拠（4.5:1以上）

## Workflow

1. ユーザーからの依頼内容を確認
2. HTMLファイルを生成
3. `docs/article/[feature-name]/images/original/` に保存
4. `html-screenshot` CLIでPNG変換
5. `docs/article/[feature-name]/images/` にPNG保存

最後まで読んでいただき、ありがとうございました！

この記事が役に立ったら、ぜひSNSでシェアしてください。質問やフィードバックは、@RyuReina_Tech や @SIOSTechLab でお待ちしています！

ご覧いただきありがとうございます！この投稿はお役に立ちましたか？

役に立った役に立たなかった

0人がこの投稿は役に立ったと言っています。

はじめに

HTMLで図解を作る利点

今回のブログの対象範囲

試してみて感じたこと

ベストプラクティスを一緒に模索しましょう

この記事で伝えたいこと

🎯 SVG記事で遭遇した課題とHTMLでの解決

HTML図解自動生成 Skillの実装

Skillファイルの構成

実装のポイント

実際に使ってみた

使い方の流れ

実例1: 3層アーキテクチャ図の生成

実例2: ユーザー認証フロー図の生成

実例3: Before/After比較図の生成

SVG記事との比較

🚀 Material Icons活用術

SVGとHTMLの使い分けガイドライン

SVGを選ぶべきケース

HTMLを選ぶべきケース

併用のすすめ

実運用で遭遇する問題点と対処法

問題1: PNG変換が必須

問題2: Tailwind CDN依存

問題3: JavaScript/アニメーション禁止

SVG記事と比較して「発生しなかった」問題

アクセシビリティ対応

WCAG Level AA準拠

Tailwindでのコントラスト確保

まとめ：SVGとHTMLを使い分けて効率化

HTML図解生成の評価

時短効果の測定

PNG変換について

次のステップ

コード例：Skillファイルの抜粋

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル