Wireframe Creator

ワイヤーフレーム作成

迅速なプロトタイピングと反復のために、低忠実度のワイヤーフレームを作成するUXデザインのエキスパートです。このスキルでは、ビジュアルデザインに気を取られることなく、構造、階層、ユーザーフローに重点を置き、高忠実度デザインに投資する前にコンセプトを素早く検証できます。

ランディングページの簡単なスケッチ、アプリの完全なユーザーフロー、ダッシュボードのレイアウトなど、このスキルを使えば、情報アーキテクチャとインタラクションパターンを伝える、明快で注釈付きのワイヤーフレームを作成できます。

主なワークフロー

ワークフロー1：Webサイト／ランディングページのワイヤーフレーム

1. ページ構造を定義する

   • ヘッダー／ナビゲーション
   • ヒーローセクション
   • コンテンツセクション
   • フッター

2. ASCIIワイヤーフレームを作成する

   • ボックス、線、テキストを使ってレイアウトを表現する
   • 間隔やサイズで階層を示す
   • インタラクティブな要素を示す
   • すべてのコンポーネントにラベルを付ける

3. 注釈を追加する

   • コンテンツの説明
   • インタラクションに関するメモ
   • レスポンシブな動作
   • 優先度マーカー

4. ユーザーフローを定義する

   • エントリーポイント
   • CTAとパス
   • 離脱ポイント

5. 次のステップを提示する

   • コンテンツ要件
   • デザイン上の考慮事項
   • 開発に関するメモ

ワークフロー2：アプリ画面のワイヤーフレーム

1. ユーザージャーニーをマッピングする

   • 必要な画面をすべて列挙する
   • 画面間のフローを定義する
   • 判断ポイントを特定する

2. 各画面をデザインする

   • ナビゲーション構造
   • コンテンツの配置
   • インタラクティブな要素
   • 状態（空、読み込み中、エラー、成功）

3. つながりを示す

   • フローを示す矢印
   • 番号付きのステップ
   • 決定木

4. インタラクションを記録する

   • タップ／クリック操作
   • スワイプジェスチャー
   • 長押し時の動作
   • トランジション

ワークフロー3：ダッシュボードのワイヤーフレーム

1. データの階層を定義する

   • 最も重要な指標
   • 補足情報
   • 詳細ビュー
   • フィルター／コントロールの配置

2. パネルをレイアウトする

   • メインコンテンツ領域
   • サイドバーナビゲーション
   • トップバーのユーティリティ
   • ウィジェットの配置

3. データの可視化をデザインする

   • グラフのプレースホルダー
   • テーブル構造
   • カードレイアウト
   • 空の状態

4. インタラクションを計画する

   • 詳細へのドリルダウンフロー
   • フィルターの動作
   • エクスポート／アクション
   • 更新のパターン

ワークフロー4：ユーザーフローのワイヤーフレーム

1. フロー全体をマッピングする

   • 開始状態
   • すべての判断ポイント
   • 成功パス
   • エラーパス
   • 終了状態

2. 各ステップをワイヤーフレーム化する

   • 1ステップにつき1画面
   • 状態の変化を示す
   • 検証を示す

3. フローをつなぐ

   • 画面間の矢印
   • トリガーに注釈を付ける
   • 条件分岐のロジックを記載する

4. エッジケースを記録する

   • もしもシナリオ
   • エラー処理
   • 検証フィードバック

クイックリファレンス

アクション	コマンド／トリガー
ランディングページのワイヤーフレーム	「[product]のランディングページをワイヤーフレーム化」
アプリ画面のワイヤーフレーム	「[feature]画面のワイヤーフレームを作成」
ユーザーフロー	「[task]のユーザーフローをマッピング」
ダッシュボード	「[use case]のダッシュボードをワイヤーフレーム化」
フォームのワイヤーフレーム	「[purpose]のフォームをデザイン」
ナビゲーション	「[site]のナビゲーションをワイヤーフレーム化」

ワイヤーフレーム要素ライブラリ

レイアウトコンポーネント

+----------------------------------+
|           HEADER                 |
| [Logo]    [Nav] [Nav] [Nav] [CTA]|
+----------------------------------+

+----------------------------------+
|         HERO SECTION             |
|                                  |
|   [Headline]                     |
|   [Subheading]                   |
|   [CTA Button]                   |
|                                  |
+----------------------------------+

+-------+  +-------+  +-------+
|       |  |       |  |       |
| Card  |  | Card  |  | Card  |
|       |  |       |  |       |
+-------+  +-------+  +-------+

+----------------------------------+
|           FOOTER                 |
| [Links] [Links] [Social] [Legal] |
+----------------------------------+

フォーム要素

[Input Field Label]
[___________________]

[Dropdown Label]
[Select ▼]

[Radio Options]
( ) Option 1
( ) Option 2
(•) Option 3

[Checkbox Options]
[✓] Option A
[ ] Option B
[✓] Option C

[Text Area]
[                    ]
[                    ]
[                    ]

[Button]  [Secondary Button]

ナビゲーションパターン

Horizontal Nav:
[Logo] [Link] [Link] [Link] [Link] [Button]

Sidebar Nav:
+--------+
| [Logo] |
|        |
| [Nav]  |
| [Nav]  |
| [Nav]  |
| [Nav]  |
+--------+

Hamburger Nav (Mobile):
[☰] [Logo]          [🔍][👤]

Tabs:
[Active Tab] [Tab] [Tab] [Tab]
─────────────────────────────

データ表示

Table:
+--------+----------+--------+
| Header | Header   | Header |
+--------+----------+--------+
| Cell   | Cell     | Cell   |
| Cell   | Cell     | Cell   |
+--------+----------+--------+

Card Grid:
+-------+  +-------+  +-------+
|[IMG]  |  |[IMG]  |  |[IMG]  |
| Title |  | Title |  | Title |
| Text  |  | Text  |  | Text  |
| [Link]|  | [Link]|  | [Link]|
+-------+  +-------+  +-------+

List:
• Item with icon
• Item with icon
• Item with icon

注釈記号

[Component Name] - Placeholder for element
(...) - Truncated/overflow content
[IMG] - Image placeholder
[LOGO] - Logo placement
[CTA] - Call to action button
[---] - Divider/separator
→ - User flow direction
* - Important note
? - Decision point
! - Error/warning state
✓ - Success state

ワイヤーフレームのベストプラクティス

• 低忠実度を保つ：視覚的な仕上げを加えたくなる気持ちを抑えます
• 構造に集中する：色やフォントではなく、階層とレイアウトに注目します
• 実際のコンテンツを使う：可能な限り、lorem ipsum ではなく実際のテキストを使います
• 状態を示す：各コンポーネントの空、読み込み中、エラー、成功の状態を示します
• 注釈を多く付ける：インタラクション、動作、制約を説明します
• モバイルファーストで考える：最小の画面から始めます
• 要素に番号を付ける：注釈を簡単に参照できるようにします
• 余白を統一する：ワイヤーフレームでも視覚的なリズムを保ちます
• コンテンツの種類を示す：[見出し]、[本文]、[ボタンのラベル]
• すべてのインタラクションを示す：ホバー、クリック、スワイプ、ジェスチャー
• エッジケースを記録する：問題が起きたときの動作を示します
• シンプルに保つ：ボックス、線、ラベルで十分です

よくあるパターン

ランディングページの構成

1. Header (sticky)
   - Logo + Navigation + CTA

2. Hero (above fold)
   - Headline + Subheading + CTA + Visual

3. Social Proof
   - Logos or testimonials

4. Features (3-column)
   - Icon + Headline + Description × 3

5. How It Works (stepped)
   - Step 1, Step 2, Step 3 with visuals

6. Pricing (table or cards)
   - 3 tiers with features listed

7. Final CTA
   - Headline + Button + Trust signals

8. Footer
   - Links, social, legal

ダッシュボードのレイアウト

+-----+---------------------------+
| Nav | Top Bar [Search] [User]   |
| [L] +---------------------------+
| [I] |                           |
| [N] |     Main Content          |
| [K] |     (Charts, Tables)      |
| [S] |                           |
|     |                           |
+-----+---------------------------+

フォームのフロー

Step 1: Basic Info
[Name Input]
[Email Input]
[Next Button]
  ↓
Step 2: Details
[Multiple fields]
[Back] [Next]
  ↓
Step 3: Confirmation
[Review info]
[Edit] [Submit]
  ↓
Success State
[✓] Thank you message
[Next action]

成果物の形式

WIREFRAME SPECIFICATION
Project: [Name]
Page/Screen: [Landing Page / Dashboard / etc.]
Date: [Date]

USER FLOW
Entry → Action → Result → Next Step

WIREFRAME
[ASCII diagram of layout]

COMPONENTS

1. Header
   - Height: 64px
   - Elements: Logo (left), Nav (center), CTA (right)
   - Behavior: Sticky on scroll
   - Mobile: Collapses to hamburger menu

2. Hero Section
   - Height: 100vh
   - Layout: 60% text (left), 40% image (right)
   - Elements:
     * H1 headline (max 60 chars)
     * Subheading (max 120 chars)
     * Primary CTA button
     * Secondary CTA link
   - Responsive: Stacks vertically on mobile

3. Feature Cards
   - Layout: 3-column grid
   - Card structure:
     * Icon (top)
     * Headline (h3)
     * Description (2-3 lines)
     * Optional link
   - Responsive: 1 column mobile, 2 tablet, 3 desktop

[... more components ...]

INTERACTIONS

Hover States:
- Nav links: Underline
- Buttons: Darken background
- Cards: Lift shadow

Click Actions:
- Primary CTA → Opens signup form
- Feature cards → Expands details
- Nav links → Smooth scroll to section

CONTENT REQUIREMENTS

Copy Needed:
- [ ] H1 headline (max 60 characters)
- [ ] Subheading (max 120 characters)
- [ ] 3 feature headlines
- [ ] 3 feature descriptions
- [ ] CTA button text

Images Needed:
- [ ] Hero image (1600x900px)
- [ ] 3 feature icons (SVG)
- [ ] Logo (SVG, white and color versions)

RESPONSIVE BREAKPOINTS

Mobile (<768px):
- Single column layout
- Hamburger navigation
- Stacked hero content
- Larger touch targets (min 44px)

Tablet (768-1024px):
- 2-column feature grid
- Partial navigation visible
- Balanced hero layout

Desktop (>1024px):
- Full layout as wireframed
- All navigation visible
- Multi-column grids

STATES

Default: As shown in wireframe
Loading: Show skeleton placeholders
Error: Display error message with retry option
Empty: Show empty state with CTA
Success: Show confirmation message

NOTES
- Prioritize above-fold content
- Ensure clear CTA visibility
- Test mobile interaction zones
- Consider accessibility (focus states, screen readers)
- Plan for content that may overflow

ツールとの連携

• 詳細なグリッド仕様には layout-designer スキルを使用します
• ワイヤーフレームをコードに変換するには ui-builder スキルを使用します
• ワイヤーフレームからビジュアルデザインを生成するには Midjourney を使用します
• ワイヤーフレームのインタラクションをテストするには Playwright を使用します

ワイヤーフレームの忠実度レベル

低忠実度（このスキル）

• ボックスと線
• グレースケール
• プレースホルダーコンテンツ
• 焦点：構造
• 速度：非常に速い
• 用途：初期のアイデア出し、迅速な反復

中忠実度

• より洗練された形状
• 一部に実際のコンテンツを使用
• 基本的なインタラクションを表示
• 焦点：レイアウト＋コンテンツ
• 速度：中程度
• 用途：ステークホルダーによるレビュー、ユーザーテスト

高忠実度

• ビジュアルデザインを適用
• 実際のコンテンツ
• インタラクティブなプロトタイプ
• 焦点：最終デザイン
• 速度：遅め
• 用途：開発者への引き継ぎ、最終承認

よくある依頼

E コマースの商品ページ：ヒーロー画像＋詳細＋CTA＋関連商品 SaaS の登録フロー：進捗インジケーター付きの複数ステップフォーム ブログのホームページ：注目の記事＋記事のグリッド＋サイドバー モバイルアプリのオンボーディング：スワイプ可能な3～4画面＋スキップ／次へ 管理者用ダッシュボード：サイドバーナビゲーション＋指標カード＋データテーブル プロフィールページ：ヘッダー＋タブ＋コンテンツセクション