jpskill.com
💬 コミュニケーション コミュニティ

ux-prototyping

仕様書やUX設計に基づいて、プロトタイプやインタラクティブなワイヤーフレームをHTML形式で作成し、UX検証を効率的に進めることができるSkill。

📜 元の英語説明(参考)

Create interactive single-file HTML prototypes for UX validation. Use when the user asks to create a prototype, mockup, or interactive wireframe based on specs/architecture/ux.md or any UX specification. Triggers include requests like "create a prototype", "build a prototype from the UX spec", "make an interactive mockup", "prototype the user flow", or "validate the UX".

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

一言でいうと

仕様書やUX設計に基づいて、プロトタイプやインタラクティブなワイヤーフレームをHTML形式で作成し、UX検証を効率的に進めることができるSkill。

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

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o ux-prototyping.zip https://jpskill.com/download/19054.zip && unzip -o ux-prototyping.zip && rm ux-prototyping.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/19054.zip -OutFile "$d\ux-prototyping.zip"; Expand-Archive "$d\ux-prototyping.zip" -DestinationPath $d -Force; ri "$d\ux-prototyping.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して ux-prototyping.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → ux-prototyping フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

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

🎯 このSkillでできること

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

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

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

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

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
2

📖 Skill本文(日本語訳)

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

UXプロトタイピングスキル

ユーザーフロー、インタラクションパターン、情報アーキテクチャの検証に焦点を当てた単一ファイルHTMLプロトタイプを作成します。視覚的な洗練度よりもUXの忠実度を優先します。

ワークフロー

  1. UX仕様を読む - specs/architecture/ux.md（またはユーザー指定のパス）
  2. コアフローを特定する - ユーザーのジャーニー、画面、状態、インタラクションを抽出します。
  3. プロトタイプを構築する - すべての画面とインタラクションを含む単一のHTMLファイルを作成します。
  4. 出力 - /mnt/user-data/outputs/prototype.htmlに保存します。

プロトタイプの構造

以下の内容を含む単一のHTMLファイルを生成します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[App Name] - UX Prototype</title>
  <style>/* All CSS inline */</style>
</head>
<body>
  <!-- All screens as sections -->
  <!-- Navigation/state management -->
  <script>/* All JS inline */</script>
</body>
</html>

コア原則

UXファースト、UIセカンド

  • 実施すること: すべてのユーザーフロー、状態、トランジション、エラー状態、空の状態を実装します。
  • 実施すること: インタラクションが応答性が高く論理的であるように感じさせます。
  • 実施すること: 現実的なデータとコンテンツの階層を表示します。
  • 後回しにすること: ピクセルパーフェクトなスタイリング、アニメーション、ブランドカラー（クリーンなデフォルトを使用します）。

画面管理パターン

画面をdata-screen属性を持つ<section>要素として実装します。

function showScreen(screenId) {
  document.querySelectorAll('[data-screen]').forEach(s => s.hidden = true);
  document.querySelector(`[data-screen="${screenId}"]`).hidden = false;
}

状態管理パターン

シンプルな状態オブジェクトを使用します。

const state = { currentScreen: 'home', user: null, data: [] };
function setState(updates) { Object.assign(state, updates); render(); }

必須UX要素

1. ユーザーフロー

  • 主要なタスク完了パス
  • 代替/二次フロー
  • エラー回復フロー

2. 画面の状態

  • 空 - 初めてのユーザー、データなし
  • 読み込み中 - スケルトンまたはスピナー
  • エラー - ネットワーク/検証エラー
  • 成功 - 確認
  • 部分 - 一部のデータが読み込まれた状態

3. インタラクション

  • 検証付きフォーム入力
  • ボタンの状態（ホバー/アクティブ/無効）
  • 画面ナビゲーション
  • モーダル/オーバーレイの動作

基本スタイル

* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f8fafc; --surface: #fff; --text: #1e293b;
  --text-muted: #64748b; --primary: #3b82f6; --border: #e2e8f0;
  --success: #22c55e; --error: #ef4444; --radius: 8px;
}
body { font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); }
[data-screen] { display: none; }
[data-screen].active { display: block; }
.card { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.btn { padding: 0.625rem 1.25rem; border-radius: var(--radius); font-weight: 500; cursor: pointer; border: none; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: #2563eb; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.input { width: 100%; padding: 0.625rem; border: 1px solid var(--border); border-radius: var(--radius); }
.input:focus { outline: none; border-color: var(--primary); }
.container { max-width: 480px; margin: 0 auto; padding: 1rem; }
.stack > * + * { margin-top: 1rem; }
.empty-state { text-align: center; padding: 3rem; color: var(--text-muted); }
.error-msg { color: var(--error); font-size: 0.875rem; }

検証チェックリスト

納品前に、以下を確認してください。

  • [ ] 仕様書からのすべての画面が実装されていること
  • [ ] プライマリーフローがエンドツーエンドで完了できること
  • [ ] 空/エラー/読み込み状態が表示されること
  • [ ] ナビゲーションが正しく機能すること
  • [ ] インタラクティブな要素にフィードバックがあること
  • [ ] モバイルビューポートでレスポンシブであること

出力

/mnt/user-data/outputs/prototype.html（またはprototype-onboarding.htmlのような分かりやすい名前）に保存します。

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

UX Prototyping Skill

Create single-file HTML prototypes focused on validating user flows, interaction patterns, and information architecture. Prioritize UX fidelity over visual polish.

Workflow

  1. Read the UX spec at specs/architecture/ux.md (or user-specified path)
  2. Identify core flows - Extract user journeys, screens, states, and interactions
  3. Build prototype - Create single HTML file with all screens and interactions
  4. Output - Save to /mnt/user-data/outputs/prototype.html

Prototype Structure

Generate a single HTML file containing:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[App Name] - UX Prototype</title>
  <style>/* All CSS inline */</style>
</head>
<body>
  <!-- All screens as sections -->
  <!-- Navigation/state management -->
  <script>/* All JS inline */</script>
</body>
</html>

Core Principles

UX First, UI Second

  • Do: Implement all user flows, states, transitions, error states, empty states
  • Do: Make interactions feel responsive and logical
  • Do: Show realistic data and content hierarchy
  • Defer: Pixel-perfect styling, animations, brand colors (use clean defaults)

Screen Management Pattern

Implement screens as <section> elements with data-screen attributes:

function showScreen(screenId) {
  document.querySelectorAll('[data-screen]').forEach(s => s.hidden = true);
  document.querySelector(`[data-screen="${screenId}"]`).hidden = false;
}

State Management Pattern

Use a simple state object:

const state = { currentScreen: 'home', user: null, data: [] };
function setState(updates) { Object.assign(state, updates); render(); }

Essential UX Elements

1. User Flows

  • Primary task completion paths
  • Alternative/secondary flows
  • Error recovery flows

2. Screen States

  • Empty - First-time user, no data
  • Loading - Skeleton or spinner
  • Error - Network/validation errors
  • Success - Confirmations
  • Partial - Some data loaded

3. Interactions

  • Form inputs with validation
  • Button states (hover/active/disabled)
  • Screen navigation
  • Modal/overlay behaviors

Base Styles

* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f8fafc; --surface: #fff; --text: #1e293b;
  --text-muted: #64748b; --primary: #3b82f6; --border: #e2e8f0;
  --success: #22c55e; --error: #ef4444; --radius: 8px;
}
body { font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); }
[data-screen] { display: none; }
[data-screen].active { display: block; }
.card { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.btn { padding: 0.625rem 1.25rem; border-radius: var(--radius); font-weight: 500; cursor: pointer; border: none; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: #2563eb; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.input { width: 100%; padding: 0.625rem; border: 1px solid var(--border); border-radius: var(--radius); }
.input:focus { outline: none; border-color: var(--primary); }
.container { max-width: 480px; margin: 0 auto; padding: 1rem; }
.stack > * + * { margin-top: 1rem; }
.empty-state { text-align: center; padding: 3rem; color: var(--text-muted); }
.error-msg { color: var(--error); font-size: 0.875rem; }

Validation Checklist

Before delivering, verify:

  • [ ] All screens from spec implemented
  • [ ] Primary flow completable end-to-end
  • [ ] Empty/error/loading states shown
  • [ ] Navigation works correctly
  • [ ] Interactive elements have feedback
  • [ ] Responsive on mobile viewport

Output

Save to /mnt/user-data/outputs/prototype.html (or descriptive name like prototype-onboarding.html).

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。