💼 ビジネスコミュニティ

html-visual

Webサイトのモックアップや各種図表、ダッシュボードなどをインタラクティブな単一HTMLファイルとして生成するSkill。

📜 元の英語説明(参考)

Generate an interactive single-file HTML visualization (mockup, wireframe, ERD, flowchart, chart, slides, architecture diagram, dashboard, timeline, mindmap, kanban, table).

🇯🇵 日本人クリエイター向け解説

一言でいうと

Webサイトのモックアップや各種図表、ダッシュボードなどをインタラクティブな単一HTMLファイルとして生成するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⬇ このSkillをダウンロード(.skill) 元のソースを見る ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-17
取得日時: 2026-05-17
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

入力

$ARGUMENTS

指示

ユーザーのリクエストをインタラクティブな単一の HTML ファイルとして視覚化してください。まず、references/common-rules.md を読んで共通ルールを確認してください。

タイプ判定

最初の引数 ($0) からタイプを判定します。

引数	タイプ	ファイル名パターン
`mockup`	UI モックアップ (高忠実度)	`mockup-{name}.html`
`wireframe`	ワイヤーフレーム (低忠実度、手書き風)	`wireframe-{name}.html`
`erd`	ERD	`erd-{name}.html`
`flow`	フローチャート / シーケンス図	`flow-{name}.html`
`chart`	データチャート	`chart-{name}.html`
`slides`	プレゼンテーション	`slides-{name}.html`
`arch`	アーキテクチャ図	`arch-{name}.html`
`dashboard`	複合ダッシュボード	`dashboard-{name}.html`
`timeline`	タイムライン / ガントチャート	`timeline-{name}.html`
`mindmap`	マインドマップ	`mindmap-{name}.html`
`kanban`	かんばんボード	`kanban-{name}.html`
`table`	インタラクティブなデータテーブル	`table-{name}.html`

一致なし: リクエストの内容からタイプを推測します。推測できない場合は、ユーザーに尋ねます。推測できた場合は、visual-{name}.html をファイル名として使用します。

{name} ルール: リクエストから主要な名詞を抽出し、ケバブケースに変換します。例: "user login form" → login-form、"payment flow" → payment-flow。

入力処理

ファイルパスが提供された場合: ファイルを読み込み、分析してから視覚化します。例: /html-visual erd schema.prisma → Prisma スキーマを分析して ERD を自動生成します。
既存の HTML の変更: 既存のファイルを読み込み、変更します。ゼロから再作成しないでください。
自然言語のみ: タイプを推測し、生成します。

コンテキスト収集

説明で十分な場合: すぐに生成します (例: "シンプルなログインフォームのモックアップ")
プロジェクトコードの参照が必要な場合: まずコード/スキーマ/API を読み込みます (例: "私たちのプロジェクトの ERD"、"現在の支払いフロー")
基準: リクエストに「私たちの」、「現在の」、「プロジェクトの」のようなプロジェクトコンテキスト参照が含まれている場合は、まずコードを読み込みます。

タイプ固有のガイド

mockup

デバイスフレーム: モバイル/タブレット UI の実際のデバイスフレーム形状
複数画面: 並列レイアウト + 画面ラベル
プレースホルダーデータ: プロジェクトコンテキストに合わせた現実的なデータ
画面遷移のためのタブ/スワイプ

wireframe

手書き (スケッチ) スタイル: やや不規則な線、手書き感
白黒またはグレースケール。最小限の色
テキストエリアは灰色のブロックとして表示 (「Lorem ipsum」は使用しない)
レイアウトと情報構造に焦点を当て、視覚的な詳細は除外する

erd

属性リストを持つエンティティボックス。PK/FK を区別する
リレーションシップ線: 1:1、1:N、N:M 表記。ノードドラッグ時に自動追跡
リレーションシップタイプの凡例を含める

flow

ノードタイプ: 開始/終了 (円)、プロセス (長方形)、決定 (ひし形)
方向矢印。ノードドラッグ時に自動追跡
接続線に分岐条件を表示する

chart

データに適したチャートタイプを自動選択 (棒、線、円、散布図など)
軸ラベル + 単位、ホバーツールチップ、凡例
Chart.js または D3.js を使用する

slides

Reveal.js CDN ベース
スライド遷移アニメーション
コードブロックのハイライト表示 (highlight.js)
スピーカーノートのサポート (S キーで切り替え)

arch

システムコンポーネントをレイヤー/ゾーンで分離 (Frontend / Backend / DB / External)
通信線にプロトコルをラベル付け (HTTP, gRPC, pub/sub など)
ズーム/パンのサポート
D3.js の力指向グラフまたは直接 SVG 生成

dashboard

複数のチャート/メトリクスをグリッドレイアウトで配置
上部に KPI カード (数値 + 変化率)
クロスチャートインタラクション: 1つをクリックすると他がフィルタリングされる

timeline

水平または垂直タイムライン
イベントノード + 日付ラベル
期間ナビゲーションのためのズーム/スクロール
Mermaid gantt または D3.js を使用する

mindmap

中央ノードからの放射状展開
ノードの折りたたみ/展開
Mermaid mindmap または直接 SVG 生成を使用する

kanban

列: TODO / In Progress / Done (カスタマイズ可能)
列間でカードをドラッグアンドドロップ
カードにラベル/タグを表示する

table

列ヘッダーをクリックしてソート (昇順/降順)
上部に検索/フィルター
ページネーションまたは仮想スクロール
セルハイライト、行選択

手順

タイプ + ターゲットを特定します。曖昧な場合は尋ねます。パスが提供されている場合はファイルを読み込みます。
コンテキスト収集の決定。プロジェクトコンテキストが必要かどうかを判断します。必要な場合は、関連するコード/ドキュメントを読み込みます。
references/common-rules.md を読みます。共通の原則、美学、CDN、およびエラー防止ルールを確認します。
references/html-boilerplate.md を読みます。ベースの HTML テンプレートから開始します。
タイプ固有のガイドに従って HTML を生成します。
検証: 生成された HTML をレビューします。
- HTML 属性にスマートクォート (カーリークォート) がないこと
- 閉じられていないタグがないこと
- 重複するノード/要素がないこと
- 問題が見つかった場合は修正し、再検証します
open {filename} を指示します。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Input

$ARGUMENTS

Instructions

Visualize the user's request as an interactive single HTML file. First, read references/common-rules.md to review common rules.

Type Determination

Determine the type from the first argument ($0).

Argument	Type	Filename Pattern
`mockup`	UI mockup (high-fidelity)	`mockup-{name}.html`
`wireframe`	Wireframe (low-fidelity, hand-drawn style)	`wireframe-{name}.html`
`erd`	ERD	`erd-{name}.html`
`flow`	Flowchart / Sequence diagram	`flow-{name}.html`
`chart`	Data chart	`chart-{name}.html`
`slides`	Presentation	`slides-{name}.html`
`arch`	Architecture diagram	`arch-{name}.html`
`dashboard`	Composite dashboard	`dashboard-{name}.html`
`timeline`	Timeline / Gantt chart	`timeline-{name}.html`
`mindmap`	Mindmap	`mindmap-{name}.html`
`kanban`	Kanban board	`kanban-{name}.html`
`table`	Interactive data table	`table-{name}.html`

No match: Infer the type from the request content. If unable to infer, ask the user. When inferred, use visual-{name}.html as the filename.

{name} rule: Extract the core noun from the request and convert to kebab-case. e.g., "user login form" → login-form, "payment flow" → payment-flow.

Input Handling

File path provided: Read and analyze the file, then visualize. e.g., /html-visual erd schema.prisma → Analyze the Prisma schema to auto-generate ERD
Existing HTML modification: Read and modify the existing file. Do not recreate from scratch.
Natural language only: Infer the type, then generate.

Context Gathering

Description is sufficient: Generate immediately (e.g., "simple login form mockup")
Project code reference needed: Read code/schema/API first (e.g., "our project's ERD", "current payment flow")
Criterion: If the request contains project context references like "our", "current", "project's", read the code first.

Type-Specific Guides