wireframing

ワイヤーフレーム

このスキルを使用すると、エージェントは3段階の忠実度でワイヤーフレームを作成できます。低忠実度（ブロックレイアウトとコンテンツ階層）、中忠実度（プレースホルダーコンテンツを含む定義済みコンポーネント）、高忠実度（実際のコンテンツ、余白の値、インタラクションに関する注記を含むピクセル単位で正確な仕様）に対応します。エージェントはテキストで動作するため、ワイヤーフレームはASCII／罫線レイアウト、または正確な寸法を含む構造化されたコンポーネント仕様として表現されます。各ワイヤーフレームには、コンポーネント一覧、インタラクションの注記、レスポンシブ時のブレークポイントでの動作が含まれます。

ワークフロー

1. 画面と目的を明確にする：ワイヤーフレームを作成する画面またはビュー、そのユーザーフローにおける役割、その画面での主なユーザー操作を特定します。対象プラットフォーム（デスクトップウェブ、タブレット、モバイル）と、フレームワーク上の制約（例：Bootstrap グリッド、Material Design コンポーネント）を確認します。この範囲設定によって、ワイヤーフレームが本来の対象を超えて拡大するのを防ぎます。

2. コンポーネント一覧を定義する：画面に必要なすべての UI コンポーネントを列挙します。ナビゲーションバー、見出し、カード、フォーム、ボタン、テーブル、モーダル、ツールチップ、空の状態、読み込み中の状態などが含まれます。各コンポーネントについて、コンテンツ要件（ラベルテキスト、データフィールド、画像の寸法）とインタラクティブな動作（クリック可能、展開可能、ドラッグ可能、編集可能）を記載します。この一覧がワイヤーフレームの部品表になります。

3. 低忠実度のレイアウトを作成する：コンテンツ領域とその空間的な関係を示すブロック単位のレイアウトを作成します。領域を表すにはASCII罫線を使用します。情報の階層、つまりユーザーが最初、次、最後に何を見るかに焦点を当てます。この段階では正確なピクセル値や実際のコンテンツは指定せず、[Hero Image]、[Product Grid 3×2]、[CTA Button]のようなラベルを使用します。

4. 中忠実度に引き上げる：プレースホルダーのラベルを、実際のコンテンツを想定した内容に置き換えます。具体的なコンポーネントの種類（ドロップダウンかラジオボタンか、テキスト入力かテキストエリアか）を追加し、列数とおおよその比率を定義して、主な余白の関係（例：「カード間の間隔は16px」）を記載します。ナビゲーションの状態（アクティブなタブ、パンくずリスト）と基本的なコンテンツ階層（見出しレベル、本文、キャプション）も含めます。

5. 高忠実度の仕様を作成する：正確な寸法、余白の値（pxまたはrem）、タイポグラフィの仕様（フォント、サイズ、ウェイト、行の高さ）、カラートークンの参照、角丸の値、影のレベルを追加します。すべてのインタラクティブ要素に、ホバー時の状態、フォーカス時の状態、クリック時の動作、入力規則、エラーメッセージなどの動作を注記します。各ブレークポイントでの変更を説明するレスポンシブ対応の注記も含めます。

6. レスポンシブ時の動作を記録する：各ワイヤーフレームについて、モバイル（< 640px）、タブレット（640-1023px）、デスクトップ（≥ 1024px）でのレイアウト変更を指定します。どのコンポーネントが縦に並ぶか、折りたたまれるか、非表示になるか、再配置されるかを説明します。モバイルでのタッチターゲットサイズ（最小44x44px）と、スワイプして閉じる、引っ張って更新するなどのジェスチャー操作を記載します。

使用方法

エージェントに画面名、目的、対象プラットフォーム、希望する忠実度を伝えます。既存のデザインシステムのトークンやコンポーネントライブラリの参照があれば、それも含めます。エージェントは、コンポーネント一覧とインタラクションの注記を含むワイヤーフレームを作成します。

例

例 1：分析ダッシュボードの ASCII ワイヤーフレーム

ユーザーのリクエスト：「ウェブ分析ダッシュボードの低〜中忠実度のワイヤーフレームを作成してください。デスクトップ向けのレイアウトです。サイドバーナビゲーション、KPI サマリーカード、折れ線グラフ、データテーブルを表示してください。」

エージェントの応答：

┌──────────────────────────────────────────────────────────────────────┐
│  ┌─────────┐   Dashboard                     🔔  👤 Jane Smith ▾   │
│  │  LOGO   │                                                        │
├──┴─────────┴─┬───────────────────────────────────────────────────────┤
│              │                                                       │
│  Dashboard • │  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐    │
│  Analytics   │  │ Total Users │ │  Revenue    │ │ Bounce Rate │    │
│  Reports     │  │   12,482    │ │  $48,250    │ │   34.2%     │    │
│  Settings    │  │  ▲ +8.3%   │ │  ▲ +12.5%  │ │  ▼ -2.1%   │    │
│              │  └─────────────┘ └─────────────┘ └─────────────┘    │
│              │                                                       │
│              │  ┌───────────────────────────────────────────────┐    │
│              │  │                                               │    │
│              │  │          Sessions Over Time (Line Chart)      │    │
│              │  │       ___/\      /\                           │    │
│              │  │     _/    \____/  \___                        │    │
│              │  │   _/                  \__                     │    │
│              │  │  Jan  Feb  Mar  Apr  May  Jun                 │    │
│              │  │                                               │    │
│              │  └───────────────────────────────────────────────┘    │
│              │                                                       │
│              │  ┌───────────────────────────────────────────────┐    │
│              │  │  Page            Views    Bounce   Avg Time   │    │
│              │  │  ─────────────── ──────── ──────── ────────── │    │
│              │  │  /home           8,421    32.1%    2m 14s     │    │
│              │  │  /pricing        3,892    28.7%    3m 42s     │    │
│              │  │  /docs           2,104    41.3%    5m 08s     │    │
│              │  │  /blog           1,876    45.6%    1m 52s     │    │
│              │  │                                               │    │
│              │  │  ◀ 1 2 3 ... 12 ▶                  Showing   │    │
│              │  │                                    1-10 of 47 │    │
│              │  └───────────────────────────────────────────────┘    │
│              │                                                       │
└──────────────┴───────────────────────────────────────────────────────┘

コンポーネント一覧：

コンポーネント	内容	操作
サイドバーナビゲーション	4 項目：Dashboard、Analytics、Reports、Settings	クリックして移動します。有効な項目は太字と左側のアクセントボーダーで表示します
KPI カード（×3）	指標名、値、トレンド矢印付きの変化率	クリックすると詳細ビューを表示します
折れ線グラフ	時系列、6 か月間の範囲、単一のデータセット	ホバーすると正確な値を示すツールチップを表示します。上部に日付範囲セレクターを配置します
データテーブル	4 列、並べ替え可能、ページネーション対応（1 ページあたり 10 行）	列ヘッダーをクリックして並べ替えます。行をクリックしてページの詳細を表示します
トップバー	ロゴ、ページタイトル、通知ベル、ユーザーアバター＋ドロップダウン	ベルに件数バッジを表示します。アバターをクリックするとプロフィール／ログアウトメニューを開きます

レスポンシブ動作：タブレット（< 1024px）では、サイドバーがアイコンのみのレール（幅 48px）に折りたたまれます。モバイル（< 640px）では、サイドバーが 4 つのアイコンを持つ下部タブバーになります。KPI カードは 1 列に縦積みされ、データテーブルは 1 行につき 1 枚のカードを表示するカードリストレイアウトに切り替わります。

例 2：注釈付きモバイルアプリ画面仕様

ユーザーのリクエスト：「モバイルアプリの『Create Task』画面について、高忠実度のワイヤーフレーム仕様を作成してください。フォームフィールド、バリデーション、操作に関する注記を含めてください。」

エージェントの応答：

画面：Create Task（モバイル、幅 375px）

┌─────────────────────────────────┐
│  ← Back        Create Task      │  ← Top bar: 56px height
│─────────────────────────────────│
│                                 │
│  Task Name *                    │  ← Label: 14px/500, gray-600
│  ┌─────────────────────────────┐│
│  │ Enter task name...          ││  ← Input: 44px height, 16px text
│  └─────────────────────────────┘│
│  ⚠ Task name is required        │  ← Error: 12px/400, red-500
│                                 │
│  Description                    │
│  ┌─────────────────────────────┐│
│  │                             ││
│  │ Add details...              ││  ← Textarea: 120px min-height
│  │                             ││
│  └─────────────────────────────┘│
│                                 │
│  Priority                       │
│  ┌──────┐ ┌──────┐ ┌──────┐   │
│  │ Low  │ │ Med  │ │ High │   │  ← Segmented control: 36px h
│  └──────┘ └──────┘ └──────┘   │
│                                 │
│  Due Date                       │
│  ┌─────────────────────────────┐│
│  │ 📅  Select date...          ││  ← Tappable, opens date picker
│  └─────────────────────────────┘│
│                                 │
│  Assignee                       │
│  ┌─────────────────────────────┐│
│  │ 👤  Select team member...   ││  ← Opens searchable member list
│  └─────────────────────────────┘│
│                                 │
│  ┌─────────────────────────────┐│
│  │        Create Task          ││  ← Primary button: 48px height
│  └─────────────────────────────┘│    bg: blue-600, text: white
│                                 │
└─────────────────────────────────┘

詳細仕様：

• 画面のパディング：左右 16px、上部 24px（ナビゲーションの下）、下部 32px（セーフエリア）
• フィールド間隔：フィールドグループ（ラベル＋入力欄＋エラー）の間に 20px
• 入力フィールド：高さ 44px、ボーダー 1px gray-300、ボーダー半径 8px、左右のパディング 12px。フォーカス状態：ボーダー blue-500、リング 2px blue-100。
• エラー状態：入力欄のボーダーは Red-500 にします。上部マージン 4px で下にエラーメッセージを表示し、aria-describedby で入力欄とエラーテキストを関連付けます。
• 優先度のセグメントコントロール：パディングを除いた利用可能幅を均等な幅のセグメントで埋めます。選択中のセグメント：背景 blue-600、テキスト white、ボーダー半径 6px。未選択：背景 gray-100、テキスト gray-700。
• Create Task ボタン：幅いっぱい、高さ 48px、ボーダー半径 10px。無効状態（タスク名が未入力）：背景 gray-300、タップできません。読み込み状態：テキストをスピナーに置き換えます。
• キーボードの動作：「Task Name」をタップすると、「Next」と表示されたリターンキーを持つキーボードが開き、Description にフォーカスを移します。「Description」をタップすると、「Done」と表示されたリターンキーを持つキーボードが開きます。

バリデーションルール：

• Task Name：必須、最大 100 文字。空の場合はフォーカスが外れたときにエラーを表示します。
• Description：任意、最大 1000 文字。800 文字以上で文字数を表示します。
• Priority：選択されていない場合は「Med」をデフォルトにします。
• Due Date：任意。過去の日付は指定できません。選択後にクリアした場合、エラーは表示しません。

ベストプラクティス

• 現在の質問に答えられる最も低い忠実度から始める：「このページにはどのようなコンテンツを載せるのか」という質問であれば、低忠実度のブロックレイアウトで十分です。レイアウト自体がまだ決まっていない段階で、ピクセル単位の仕様を作成しないでください。
• すべてのワイヤーフレームに空状態とエラー状態を含める：正常な状態しか表示しない画面は不完全です。データがない場合、リクエストが失敗した場合、入力検証エラーが表示される場合にユーザーが目にする画面をワイヤーフレームにしてください。
• レイアウトだけでなくインタラクションも注記する：静的なワイヤーフレームでは、重要なデザイン上の決定事項が抜け落ちます。タップ、スワイプ、ホバー、フォーカス時に各インタラクティブ要素がどう動作するかを、ワイヤーフレーム上に直接記してください。
• プレースホルダーテキストではなく、実際のコンテンツを代表する内容を使う：実際のコンテンツを使うと、プレースホルダーテキストでは見えないレイアウトの問題が明らかになります。長すぎてはみ出す名前、不自然な余白が残る短い説明、桁数が異なる数値などです。
• ワイヤーフレームと併せてレスポンシブ時の動作を指定する：ブレークポイントの注記がないワイヤーフレームは、開発者ごとに解釈が異なります。各ブレークポイントで何が縦に並ぶか、折りたたまれるか、非表示になるか、再配置されるかを明記してください。
• 画面ごとにコンポーネント一覧を管理する：各コンポーネントについて、コンテンツ要件とインタラクションの動作を列挙してください。この一覧は、デザインレビューと開発実装の両方でチェックリストとして役立ちます。

エッジケース

• 画面で無限スクロールまたはページネーションが必要な場合：最初に読み込まれた状態、追加読み込み中のインジケーター（スケルトン行またはスピナー）、リスト末尾の状態（「これ以上結果はありません」）をワイヤーフレームにしてください。スクロールのトリガー位置（例：「画面下端から200pxの位置で追加読み込み」）も記載してください。
• ユーザー生成コンテンツの長さが予測できない場合：最小限のコンテンツ版（1語のタイトル、説明なし）と最大限のコンテンツ版（100文字のタイトル、段落全体の説明）の両方をワイヤーフレームで示してください。最大表示行数、省略記号の動作、「もっと見る」トグルなど、省略ルールも定めてください。
• 画面で複数のユーザーロールをサポートする必要がある場合：管理者には編集／削除ボタンが表示され、閲覧者には表示されない場合は、両方のバリエーションをワイヤーフレームにして、明確にラベルを付けてください。条件によって表示が切り替わる要素と、その表示を制御する条件も記載してください。
• オフラインまたは接続が遅い場合：データの読み込み中に表示される、画面のスケルトン／プレースホルダーバージョンをワイヤーフレームにしてください。ネットワークリクエストが失敗した場合のエラー状態と再試行操作も明示してください。
• アクセシビリティ要件がレイアウトに影響する場合：ワイヤーフレームに色だけで状態を示すインジケーター（赤／黄／緑のドットなど）が含まれる場合は、テキストラベルまたはアイコンによる代替手段を追加してください。モバイル版ワイヤーフレームのすべてのインタラクティブ要素について、最小タップ領域のサイズ（44x44px）も記載してください。