# HTML モックアップ スケッチャー
> 単一のアプローチに決める前に、UI/UXデザインの方向性を比較するために、2〜3種類のインタラクティブなHTMLモックアップを生成します。異なるビジュアルスタンスを素早く探求し、フィードバックを収集します。
- Canonical: https://nanoskill.ai/ja/skills/html-mockup-sketcher
- Markdown: https://nanoskill.ai/ja/skills/html-mockup-sketcher.md
- Author: NousResearch
- Published: 2026-06-04T05:30:00.000Z
- Updated: 2026-07-21T18:34:02.819Z
- Language: ja
- Source type: github
- Popularity signal: 2137
## Sources
- https://github.com/NousResearch/hermes-agent
## Install
```shell
npx skills add https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/sketch
```
## About
HTML Mockup Sketcherは、使い捨てのHTMLモックアップを通じて、ユーザーがUI/UXデザインの方向性を素早く探求し比較するのを支援する強力なスキルです。単一のデザインに決める代わりに、このツールは2〜3のインタラクティブなバリエーションを生成し、異なるビジュアルスタンスを並べて比較できます。初期段階のデザイン探求に最適で、大きな開発投資の前にコンセプトを視覚化しフィードバックを集めるのに役立ちます。
このスキルは、静的な画像を超えた、機能的でインタラクティブなHTMLモックアップの作成に重点を置いています。各バリエーションは、インラインCSS、システムフォント、リアルなコンテンツを備えた自己完結型のHTMLファイルです。重要なのは、モックアップにはクリック可能なリンク、ホバー状態、少なくとも1つの状態遷移などの基本的なインタラクティブ性が含まれており、より具体的なユーザーエクスペリエンスを提供します。統合されたブラウザツールにより視覚的な検証が可能で、モックアップがクリーンでバグのない状態を保証します。
情報に基づいた意思決定を促進するため、HTML Mockup Sketcherは構造化された比較を提供します。各バリエーションには、デザインの原則、主要な選択、トレードオフ、最適なユースケースを概説した詳細な\`README.md\`が付属します。生成後、比較表がさまざまなデザイン次元での違いを要約し、意見に基づいた分析が、勝者を選んだり、要素を組み合わせたり、さらに反復したりするのを支援します。
## Key features
- **複数のデザインバリアントを生成**: 異なるデザインスタンス（密度、強調、美学、レイアウトなど）を探求する2～3種類の明確に異なるHTMLモックアップバリアントを同時に生成し、並べて比較できます。
- **インタラクティブなHTMLモックアップ**: インラインCSS、システムフォント、リアルなダミーコンテンツを備えた自己完結型のHTMLファイルを作成します。モックアップはインタラクティブで、クリック可能なリンク、ホバー、少なくとも1つの状態遷移を可能にします。
- **ブラウザツールによる視覚的検証**: 統合されたブラウザナビゲーションとビジョンツールを利用して、各HTMLモックアップを視覚的に検査・検証し、プレゼンテーション前にレイアウトが清潔で読みやすく、バグがないことを確認します。
- **構造化されたバリアントドキュメント**: 各HTMLモックアップバリアントには、そのデザインスタンス、主要な選択（レイアウト、タイポグラフィ、色、インタラクション）、トレードオフ、理想的なユースケースを詳述した\`README.md\`が含まれており、情報に基づいた比較を容易にします。
- **比較分析表**: 生成されたすべてのHTMLモックアップバリアントを比較表で提示し、密度、主要アクションの可視性、スキャンしやすさ、全体的な感触などの主要な次元にわたる違いを強調し、意見を含む要約も提供します。
## Use cases
- **UI/UXデザインの方向性を探る**: 開発に多大な時間を費やす前に、複数のHTMLモックアップバリアントを素早く生成・比較して、さまざまなユーザーインターフェースやユーザーエクスペリエンスのデザインアイデアを探ります。
- **ビジュアルコンセプトに関するフィードバックを収集**: インタラクティブなHTMLモックアップをステークホルダーやユーザーに提示し、さまざまなビジュアルの方向性に関する早期のフィードバックを収集することで、コンセプトを洗練させ、情報に基づいたデザイン決定を行います。
- **新機能の迅速なプロトタイピング**: 本番環境で使えるコードではなく、コア機能と視覚的な流れに焦点を当てて、新機能や画面を迅速にプロトタイピングするための使い捨てHTMLモックアップを作成します。
## Result preview
このエージェントスキルによって生成された、ブティックホテルのウェブサイトに関する実際のHTMLをご覧ください。
## Result walkthrough
### ステップ1：インストール
エージェントにスキルを追加します。
### ステップ2：ウェブサイトを説明する
作成したいウェブサイトの詳細情報（スタイル、タイプなど）を説明してください。
### ステップ3：結果を確認する
生成されたHTMLモックアップを確認し、比較します。
## Skill definition
# スケッチ
このスキルは、ユーザーが**コミットする前にデザインの方向性を確認したい**場合に使用します — UI/UXのアイデアを使い捨てのHTMLモックアップとして探索します。目的は、2〜3つのインタラクティブなバリエーションを生成し、ユーザーがビジュアルの方向性を並べて比較できるようにすることで、出荷可能なコードを生成することではありません。
ユーザーが「この画面をスケッチして」「Xがどのように見えるか見せて」「レイアウトAとBを比較して」「このUIの2〜3の案を見せて」「いくつかのバリエーションを見せて」「構築する前にこれをモックアップして」などと言ったときにロードします。
## 使用すべきでない場合
- ユーザーが本番用のコンポーネントを求めている場合 — `claude-design` を使用するか、適切に構築してください
- ユーザーが完成度の高い一回限りのHTML作品（ランディングページ、資料）を求めている場合 — `claude-design`
- ユーザーが図を求めている場合 — `excalidraw`、`architecture-diagram`
- デザインが既に確定している場合 — 単に構築してください
## ユーザーが完全なGSDシステムをインストールしている場合
`gsd-sketch` が兄弟スキルとして表示される場合（`npx get-shit-done-cc --hermes` でインストール）、完全なワークフローには **`gsd-sketch`** を優先します：MANIFESTを含む永続的な `.planning/sketches/`、フロンティアモード分析、過去のスケッチにわたる一貫性監査、GSDの他の部分との統合。このスキルは軽量のスタンドアロンバージョンで、状態管理機構のない一回限りのスケッチです。
## コアメソッド
```
intake → variants → head-to-head → pick winner (or iterate)
```
### 1. インテーク（ユーザーが既に十分な情報を提供している場合はスキップ）
バリエーションを生成する前に、3つのことを聞きます — 一度にすべてではなく、質問は一度に1つずつ：
1. **感触。** 「これはどのような感じにすべきですか？ 形容詞、感情、雰囲気。」 — *「落ち着いていて、編集風で、Linearのような」* と聞けば、*「ミニマル」* よりも多くの情報が得られます。
2. **参考。** 「イメージしている感触を捉えているアプリ、サイト、製品はありますか？」 — 具体的な参考の方が抽象的な説明よりも優れています。
3. **コアアクション。** 「ユーザーがこの画面で行う最も重要なことは何ですか？」 — バリエーションはすべてこれをうまく提供するべきであり、そうでなければ単なる装飾です。
各回答を次の質問の前に簡潔に反映させます。ユーザーが既に3つすべてを前もって提供している場合は、バリエーションに直接進みます。
### 2. バリエーション（2〜3、絶対に1つではなく、まれに4つ以上）
**2〜3のバリエーション** を一度に生成します。各バリエーションは完全で独立したHTMLファイルです。バリエーションを説明するのではなく、構築してください。ポイントは比較です。
各バリエーションは、異なるピクセル値ではなく、**異なるデザインスタンス** を取るべきです。良いバリエーションの軸を3つ挙げます：
- **密度:** コンパクト / ゆったり / 超高密度（対照的な2極を選ぶ）
- **強調:** コンテンツ重視 / アクション重視 / ツール重視
- **美的感覚:** 編集風 / 実用的 / 遊び心
- **レイアウト:** 1カラム / サイドバー / 分割ペイン
- **基盤:** カードベース / むき出しのコンテンツ / ドキュメントスタイル
1つの軸を選び、そこから引き離します。アクセントカラーだけが異なる2つのバリエーションは無駄な努力です — ユーザーはそれらを区別できません。
**バリエーションの命名：** 番号ではなく、スタンスを説明します。
```
sketches/
├── 001-calm-editorial/
│ ├── index.html
│ └── README.md
├── 001-utilitarian-dense/
│ ├── index.html
│ └── README.md
└── 001-playful-split/
├── index.html
└── README.md
```
### 3. 本物のHTMLにする
各バリエーションは**1つの自己完結型HTMLファイル**です：
- インライン `
```
### 4. バリエーションのREADME
各バリエーションの `README.md` は次のことを回答します：
```markdown
## Variant: {stance name}
### Design stance
One sentence on the principle driving this variant.
### Key choices
- Layout: ...
- Typography: ...
- Color: ...
- Interaction: ...
### Trade-offs
- Strong at: ...
- Weak at: ...
### Best for
- The kind of user or use case this variant actually serves
```
### 5. 直接対決
すべてのバリエーションが構築された後、比較として提示します。単にリストするのではなく — **意見を述べます**：
```markdown
## Three takes on the home screen
| Dimension | Calm editorial | Utilitarian dense | Playful split |
|-----------|----------------|-------------------|---------------|
| Density | Low | High | Medium |
| Primary action visibility | Low | High | Medium |
| Scan-ability | High | Medium | Low |
| Feel | Calm, trusted | Sharp, tool-like | Inviting, energetic |
**My take:** Utilitarian dense for power users, calm editorial for content-forward audiences. Playful split is weakest — tries to do both and commits to neither.
```
ユーザーに勝者を選ばせるか、2つを組み合わせてハイブリッドにするか、別のラウンドを依頼します。
## テーマ設定（プロジェクトにビジュアルアイデンティティがある場合）
ユーザーが既存のテーマ（色、フォント、トークン）を持っている場合、共有トークンを `sketches/themes/tokens.css` に配置し、各バリエーションで `@import` します。トークンは最小限に保ちます：
```css
/* sketches/themes/tokens.css */
:root {
--color-bg: #fafafa;
--color-fg: #1a1a1a;
--color-accent: #0066ff;
--color-muted: #666;
--radius: 8px;
--font-display: "Inter", sans-serif;
--font-body: -apple-system, BlinkMacSystemFont, sans-serif;
}
```
使い捨てのスケッチをトークン化しすぎないでください — 3色と1つのフォントで通常は十分です。
## インタラクティビティの基準
スケッチが十分にインタラクティブであるのは、ユーザーが次のことができる場合です：
1. **主要アクションをクリック** して、何か目に見えることが起こる（状態変化、モーダル、トースト、ナビゲーションのフェイント）
2. **1つの意味のある状態遷移を確認** （リストのフィルタリング、モードの切り替え、パネルの開閉）
3. **認識可能なアフォーダンスにホバー** （ボタン、行、タブ）
それを超えると使い捨ての過剰エンジニアリングです。それ以下だとスクリーンショットです。
## フロンティアモード（次に何をスケッチするか選ぶ）
既にスケッチが存在し、ユーザーが「次に何をスケッチすべきですか？」と言った場合：
- **一貫性のギャップ** — 異なるスケッチの2つの勝者バリアントが、まだ組み合わされていない独立した選択を行った
- **スケッチされていない画面** — 参照されたが探索されていない
- **状態カバレッジ** — 正常系はスケッチされたが、空 / ローディング / エラー / 1000項目はスケッチされていない
- **レスポンシブのギャップ** — 1つのビューポートで検証されたが、モバイル / 超ワイドで保持されるか？
- **インタラクションパターン** — 静的なレイアウトは存在するが、遷移、ドラッグ、スクロール動作は存在しない
2〜4の名前付き候補を提案します。ユーザーに選ばせます。
## 出力
- リポジトリルートに `sketches/` （またはユーザーがGSD規約を使用している場合は `.planning/sketches/`）を作成
- 各バリアントに1つのサブディレクトリ： `NNN-stance-name/index.html` + `README.md`
- 開く方法をユーザーに伝える：macOSでは `open sketches/001-calm-editorial/index.html`、Linuxでは `xdg-open`、Windowsでは `start`
- バリアントは使い捨て可能に保つ — 保存する必要があると感じたスケッチは、資産としてキュレーションするのではなく、実際のプロジェクトコードに昇格させるべきです
**1つのバリアントの典型的なツールシーケンス：**
```
terminal("mkdir -p sketches/001-calm-editorial")
write_file("sketches/001-calm-editorial/index.html", "...")
write_file("sketches/001-calm-editorial/README.md", "## Variant: Calm editorial\n...")
browser_navigate(url="file://$(pwd)/sketches/001-calm-editorial/index.html")
browser_vision(question="How does this look? Any obvious layout issues?")
```
各バリアントに対して繰り返し、比較表を提示します。
## 帰属
GSD（Get Shit Done）プロジェクトの `/gsd-sketch` ワークフローから改変 — MIT © 2025 Lex Christopherson ([gsd-build/get-shit-done](https://github.com/gsd-build/get-shit-done))。完全なGSDシステムは、永続的なスケッチ状態、テーマ/バリアントパターン参照、一貫性監査ワークフローを提供します； `npx get-shit-done-cc --hermes --global` でインストールします。
## FAQ
### HTMLモックアップとは何ですか？
HTMLモックアップとは、異なるUI/UXデザインのアイデアを素早く視覚化して比較するために、HTMLと基本的なスタイリング（多くの場合、インラインCSS）で構築された使い捨てのインタラクティブなWebページです。本番環境向けではなく、初期段階のデザイン探索を目的としています。
### このスキルは何種類のHTMLモックアップバリアントを生成しますか？
このスキルは通常、一度に2～3種類のインタラクティブなHTMLモックアップバリアントを生成します。目的は比較のために対照的なデザインスタンスを提供することであり、細かなバリエーションの網羅的なリストを作成することではありません。
### このスキルを本番環境で使えるコードの作成に使用できますか？
いいえ、このスキルはデザインの方向性を探るための「使い捨て」HTMLモックアップ向けに特別に設計されています。本番環境で使えるコンポーネントや洗練された成果物を作成するには、\`claude-design\` のような他のツールやスキルを使用してください。
### HTMLモックアップにはどのようなインタラクティブ性がありますか？
生成されるHTMLモックアップはインタラクティブで、リンクはクリック可能、ホバーは実際に機能し、少なくとも1つの状態遷移（例：パネルの開閉、リストのフィルタリング）があります。これにより、静的な画像よりも現実的な感触が得られます。
### このスキルはどのように異なるデザインの比較に役立ちますか？
HTMLモックアップを生成した後、このスキルはさまざまなデザイン次元（密度、レイアウト、美学など）にわたる主な違いを強調する比較表を提供します。また、意思決定を導くための意見を含む要約も提供されます。
### HTMLモックアップを生成するためにどのような情報を提供する必要がありますか？
効果的なHTMLモックアップを生成するには、望ましい「感触」（形容詞、雰囲気）、その感触を捉えたリファレンスアプリやサイト、そしてユーザーが画面上で実行する最も重要な「コアアクション」について尋ねられます。