requirements-ui-sketch

star 86

画面構成とユーザーフローを整理し、ワイヤーフレームを作成する。ユーザーストーリー作成後、実装前にUIの方向性を固めたい場合に使用。「UIを整理したい」「画面構成を考えたい」「ワイヤーフレームを作りたい」「ユーザーフローを可視化」などのリクエストで起動。

skanehira By skanehira schedule Updated 2/21/2026
play_arrow Run Skill in Manus View GitHub

name: requirements-ui-sketch description: 画面構成とユーザーフローを整理し、ワイヤーフレームを作成する。ユーザーストーリー作成後、実装前にUIの方向性を固めたい場合に使用。「UIを整理したい」「画面構成を考えたい」「ワイヤーフレームを作りたい」「ユーザーフローを可視化」などのリクエストで起動。

UI/UXスケッチ

概要

対話を通じてUIの方向性を整理し、成果物を 単一の docs/UI_SKETCH.html に集約する。 この HTML 1ファイルに以下をすべて含める：

  1. 画面一覧
  2. ユーザーフロー図（HTML/SVG/CSS で描画。Mermaid は使わない）
  3. クリッカブルなインタラクティブプロトタイプ（React + Tailwind CSS / CDN）
  4. 各画面の要素・インタラクション

ASCII アートも別 Markdown（UI_SKETCH.md）も作らない。 成果物は操作できる HTML 1ファイルに統一する。 ASCII は全角・罫線（East Asian Width が曖昧幅）の表示幅差で崩れ、 Mermaid/Markdown はプロトタイプとの二重管理になるため。

ワークフロー

フェーズ1: コンテキストの確認

対象プロダクトと既存ドキュメントを確認する。

1.1 前提ドキュメントの読み込み

Read({ file_path: "docs/USER_STORIES.md" })
Read({ file_path: "docs/PRODUCT_SPEC.md" })

1.2 コンテキストの活用

ファイルが存在する場合:

  • USER_STORIES.md: ユーザーが行いたい操作を把握
  • PRODUCT_SPEC.md: プロダクトのスコープを把握

これらの情報を元に、必要な画面を効率的に洗い出す。

遷移条件: フェーズ2へ

ファイルが存在しない場合: AskUserQuestionで対象プロダクトを確認。

AskUserQuestion({
  questions: [
    {
      question: "どのプロダクト/機能のUIをスケッチしますか？",
      header: "対象",
      options: [
        { label: "プロダクトを入力", description: "対象のプロダクトや機能領域" }
      ],
      multiSelect: false
    }
  ]
})

遷移条件: コンテキストが把握できたらフェーズ2へ

フェーズ2: 画面の洗い出し

必要な画面を特定する。

質問パターン:

  • 「ユーザーが最初に見る画面は？」
  • 「主要な操作をする画面は？」
  • 「設定や管理をする画面は？」
  • 「エラーや確認のための画面は？」
AskUserQuestion({
  questions: [
    {
      question: "このプロダクトに必要な画面をすべて挙げてください",
      header: "画面一覧",
      options: [
        { label: "画面を入力", description: "例: ログイン、ダッシュボード、SQL入力、結果表示" }
      ],
      multiSelect: false
    }
  ]
})

画面の分類

種類 説明 例
認証系 ログイン、登録、パスワードリセット ログイン画面
メイン機能 コア機能を実行する SQL入力画面
結果表示 処理結果を表示 改善案一覧
設定系 ユーザー設定、プロフィール アカウント設定
管理系 管理者向け ユーザー管理
補助系 ヘルプ、エラー 404ページ

遷移条件: 主要な画面が5-15個出たらフェーズ3へ

フェーズ3: ユーザーフローの整理

画面間の遷移を整理する。

質問パターン:

  • 「この画面から次にどこへ行けますか？」
  • 「この操作が成功したらどの画面に遷移しますか？」
  • 「エラーの場合はどうなりますか？」
AskUserQuestion({
  questions: [
    {
      question: "主要なユーザーフロー（画面遷移）を教えてください\n\n例: ログイン → ダッシュボード → SQL入力 → 結果表示",
      header: "ユーザーフロー",
      options: [
        { label: "フローを入力", description: "画面A → 画面B → 画面C" }
      ],
      multiSelect: false
    }
  ]
})

フローの整理

ここではフローを言語化して整理するだけにとどめる。 図は Mermaid で描かず、フェーズ5で UI_SKETCH.html 内に HTML/SVG/CSS のフロー図として作成する。

整理の例（テキスト）:

  • ログイン → ダッシュボード → SQL入力 →（分析）→ 成功: 結果表示 ／ 失敗: エラー表示 → SQL入力

遷移条件: 主要フローが整理できたらフェーズ4へ

フェーズ4: 各画面の要素整理

各画面に必要な要素を洗い出す。

AskUserQuestion({
  questions: [
    {
      question: "[画面名]に必要な要素は何ですか？",
      header: "画面要素",
      options: [
        { label: "要素を入力", description: "例: 入力欄、ボタン、テーブル、グラフ" }
      ],
      multiSelect: false
    }
  ]
})

要素の種類

種類 説明 例
入力 テキスト、セレクト、チェックボックス SQL入力欄
アクション ボタン、リンク 「分析」ボタン
表示 テキスト、テーブル、リスト 改善案リスト
ナビ メニュー、タブ、パンくず サイドバー
フィードバック アラート、トースト、モーダル 成功メッセージ

遷移条件: 主要画面の要素が整理できたらフェーズ5へ

フェーズ5: インタラクティブプロトタイプ作成

ワイヤーフレームは「React + Tailwind CSS を CDN で読み込んだ単一 HTML の クリッカブル・プロトタイプ」として作成する。ASCII アートは使わない。

理由:

  • ASCII は全角／半角・罫線の表示幅差で崩れる（環境依存）
  • 操作できるプロトタイプの方が画面遷移・フローが正確に伝わる
  • React + Tailwind を CDN で使えば、本番実装（React + Tailwind）へそのまま流用できる

5.1 デザイン方向性の確認（着手前・必須）

ビジュアルを作り込む前に、必ずデザインの方向性をユーザに確認する。 frontend-design などのデザインスキルを使う場合も、起動する前にここで方向性の合意を取る。

AskUserQuestion で2〜3案を提示し、選んでもらってから着手する。観点:

  • プロダクトのブランド文脈に合うトーンか（例: 外資系ラグジュアリー／国内カジュアル／開発者向け 等）
  • 全体の雰囲気（ミニマル／エディトリアル／ポップ 等）、ライト／ダーク
  • 主要フォント・配色の方向性

方向性を確認せずに作り込むと、ブランド不一致で手戻りになる （例: 外資系ホテルのプロダクトを和風デザインで作ってしまう、など）。

5.2 プロトタイプの構成

  • 単一 HTML ファイル docs/UI_SKETCH.html に設計書のすべてを集約・自己完結させる
  • React 19 + Tailwind CSS を CDN で読み込む
    • React 19 は UMD ビルドを廃止しているため、importmap + esm.sh（ESM）で読み込む
    • JSX は Babel standalone（<script type="text/babel" data-type="module">）で変換、Tailwind は Play CDN
  • 次のセクション（タブ/ページ）をHTML内に持たせる:
    • 概要: 画面一覧テーブル
    • ユーザーフロー図: 画面遷移の俯瞰図を HTML/SVG/CSS で描く（Mermaid 不使用）
    • 各フローのクリッカブルプロトタイプ: 画面内のボタンで実際に遷移する
    • 各画面の要素・インタラクション: プロトタイプ内の注釈、または一覧として併記
  • 各フローに説明文（何のフローか・ステップ・関連 US）を併記する
  • 凝ったビジュアルにする場合は frontend-design スキルを使う（5.1 で方向性合意済みであること）

5.3 動作確認

  • chrome-devtools MCP で docs/UI_SKETCH.html を開き、 コンソールエラーが無いこと・各フローが遷移することを確認する

遷移条件: 主要フローのプロトタイプが作成・動作確認できたらフェーズ6へ

フェーズ6: インタラクションの整理

画面上のインタラクションを定義する。

AskUserQuestion({
  questions: [
    {
      question: "この画面でユーザーが行う主要な操作と、その結果を教えてください",
      header: "インタラクション",
      options: [
        { label: "操作を入力", description: "例: ボタンクリック → モーダル表示" }
      ],
      multiSelect: false
    }
  ]
})

インタラクション定義

トリガー アクション 結果
「分析」ボタンクリック API呼び出し ローディング → 結果表示
SQL入力欄フォーカスアウト バリデーション エラー表示 or 正常
履歴項目クリック SQLを入力欄にロード 入力欄が更新される

遷移条件: 主要なインタラクションが定義できたらフェーズ7へ

フェーズ7: UI_SKETCH.html への集約（最終化）

別 Markdown（UI_SKETCH.md）は作らない。フェーズ2〜6で整理した内容を docs/UI_SKETCH.html の各セクションに反映し、1ファイルで完結させる。

最終的に HTML 内に含めるセクション:

  • 画面一覧（テーブル）
  • ユーザーフロー図（HTML/SVG/CSS。Mermaid 不使用）
  • 各フローのクリッカブルプロトタイプ
  • 各画面の要素・インタラクション
  • デザイン方針（フェーズ5.1 で合意したトーン・フォント・配色）

フェーズ8: セルフレビュー（サブエージェント）

生成したドキュメントのレビューをサブエージェントに委譲する。

Task({
  description: "UI/UXスケッチレビュー",
  subagent_type: "general-purpose",
  prompt: `
以下のUI/UXスケッチドキュメントをレビューし、問題があれば修正してください。

## レビュー対象ファイル
- docs/UI_SKETCH.html

## レビュー観点

1. **画面の網羅性**: 必要な画面がすべてリストアップされているか
2. **フローの完全性**: ユーザーフローに抜け漏れがないか
3. **プロトタイプの明確さ**: 各画面の要素が明確に配置され、フローが操作で遷移するか
4. **インタラクションの定義**: 主要な操作と結果が定義されているか
5. **一貫性**: 画面間でUI要素やナビゲーションが一貫しているか
6. **ユーザビリティ**: 直感的で使いやすい設計になっているか

## 出力形式

1. 発見した問題のリスト（問題がない場合は「問題なし」）
2. 各問題の修正内容
3. 修正後のファイル更新（Editツールで修正）

問題がなくなるまでレビューと修正を繰り返すこと。
`
})

完了条件

  • 画面一覧が UI_SKETCH.html に含まれている
  • ユーザーフロー図が HTML で描かれている（Mermaid 不使用）
  • デザインの方向性をユーザに確認・合意している（デザインスキル利用前）
  • 各フローのクリッカブルプロトタイプが作成されている
  • 各画面の要素・インタラクションが UI_SKETCH.html に整理されている
  • chrome-devtools で動作確認している（コンソールエラーなし・遷移する）
  • 成果物が docs/UI_SKETCH.html 1ファイルに集約されている（別 Markdown を作らない）
  • セルフレビューが完了し、問題が解消されている

関連スキル

  • user-story: UIスケッチの前にストーリーを作成する場合
  • usecase-description: より詳細なフローを整理する場合
  • analyzing-requirements: 技術設計に進む場合
Install via CLI
npx skills add https://github.com/skanehira/dotfiles --skill requirements-ui-sketch
Repository Details
star Stars 86
call_split Forks 4
navigation Branch main
article Path SKILL.md
More from Creator
skanehira
skanehira Explore all skills →