wireframing について
wireframingは、プロダクトのデザインチームや開発チーム向けのスキルです。低忠実度のスケッチからインタラクティブなプロトタイプまでの手法に加え、情報設計、ユーザーフロー、注釈の付け方を扱います。
主な機能
- 01ワイヤーフレームの忠実度レベルの区別
- 02情報設計とコンテンツ階層の計画
- 03タスクフローとユーザージャーニーの作成
- 04インタラクション、状態、例外ケースの仕様化
- 05ワイヤーフレームの反復とレビュー手法
活用シーン
- 01プロダクト開発の初期に画面レイアウト案を検討
- 02関係者とコンテンツ構造やユーザーフローを検証
- 03開発への引き継ぎ用にインタラクション仕様を記録
- 04低コストのプロトタイプでユーザビリティテストを実施
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/wireframingを入力して読み込まれたか確認します。
同梱ファイルEXAMPLES.mdREADME.md
詳細
ワイヤーフレーム作成スキル
目次
- このスキルを使用する場面
- 基本概念
- ワイヤーフレームの種類
- 情報アーキテクチャ
- ユーザーフロー
- ワイヤーフレームの要素
- 注釈と仕様
- ツールと技術
- 反復プロセス
- ベストプラクティス
- ワイヤーフレームの例
このスキルを使用する場面
ワイヤーフレーム作成は、製品開発やデザインのさまざまな段階で不可欠です。
初期の製品探索
- 要件の収集：関係者のアイデアや要件を視覚化します
- コンセプトの検討：複数のデザインの方向性をすばやく試します
- 実現可能性の評価：技術的な制約を早期に特定します
- スコープの定義：機能セットと機能範囲を定義します
デザインプロセス
- 情報アーキテクチャ：コンテンツとナビゲーションの階層構造を設計します
- レイアウトの検討：UI 要素のさまざまな配置を試します
- ユーザーフローのマッピング：製品内でのユーザーの行動経路を視覚化します
- インタラクションデザイン：ユーザーがインターフェース要素をどのように操作するかを定義します
コラボレーションとコミュニケーション
- 関係者間の合意形成：詳細なデザイン作業に入る前に承認を得ます
- 開発者への引き継ぎ：機能と構造を伝えます
- ユーザーテスト：高コストな高精度の制作を行わずにコンセプトを検証します
- デザインドキュメント：チーム向けの参照資料を作成します
反復と改善
- デザインレビュー：美しさではなく構造に焦点を当ててフィードバックします
- ラピッドプロトタイピング：最小限の投資でアイデアをすばやく検証します
- A/B テストのコンセプト：異なるアプローチを効率よく比較します
- デザインシステムの基盤：ビジュアルデザインに入る前にパターンを確立します
基本概念
低精度と高精度
低精度ワイヤーフレーム
特徴：
- 基本的な図形とプレースホルダー（ボックス、線、簡単なテキスト）
- グレースケールまたは単色の配色
- 細部や視覚的な仕上げは最小限
- 構造とレイアウトに重点を置く
- 作成や修正がすばやく行える
- 手描き、または基本的なデジタルツールを使用することが多い
使用する場面：
- 初期のコンセプト検討段階
- すばやい反復と検討
- 関係者とのワークショップやブレインストーミング
- 構造についてすばやくフィードバックを得たい場合
- 予算や時間に制約がある場合
利点：
- すばやく作成し、反復できます
- 投資が少ないため、アイデアに固執しにくくなります
- 機能への注目を促します
- デザイナー以外の人も利用できます
- レビュー時の認知負荷を軽減します
高精度ワイヤーフレーム
特徴：
- 詳細な UI 要素とコンポーネント
- 洗練された余白と配置
- 実際のコンテンツ、またはそれを模したコンテンツ
- インタラクティブ要素が明確に定義されている
- 実際の画像やコピーを含む場合がある
- 最終デザインに近い
使用する場面：
- コンセプトの検証後
- 開発者への引き継ぎ準備
- 詳細なユーザーテスト
- 正確な仕様が必要な場合
- 仕上がりが求められる関係者向けのプレゼンテーション
利点：
- 意図を明確に伝えられます
- ユーザビリティテストに適しています
- 開発時の参照資料になります
- エッジケースや詳細を特定できます
- 実装における曖昧さを軽減します
ワイヤーフレームの精度の幅
Sketches → Low-Fi → Mid-Fi → High-Fi → Mockups → Prototypes
↓ ↓ ↓ ↓ ↓ ↓
Paper Boxes & Details Refined Visual Interactive
notes labels added content design behavior
精度の側面
ワイヤーフレームは、複数の側面で精度を変えられます。
- 視覚的な精度：視覚的な詳細度と仕上がりの水準
- コンテンツの精度：実際のコンテンツか、プレースホルダーのコンテンツか
- 機能的な精度：インタラクティブか、静的か
- レイアウトの精度：余白が正確か、おおよそか
ワイヤーフレームの種類
1. 紙のスケッチ
説明：紙やホワイトボードに手描きしたワイヤーフレーム
ユースケース：
- ブレインストーミングセッション
- 手早いアイデア出し
- 初期段階のコンセプト検討
- 共同ワークショップ
- 個人の思考プロセス
ツール：
- ペンと紙
- ホワイトボード
- 付箋
- ドット方眼ノート
- ステンシルとテンプレート
手法：
- 基本図形を使った素早いスケッチ
- Crazy 8's メソッド（8分で8つのアイデアを出す）
- 複数のコンセプトを描くサムネイルスケッチ
- 矢印やメモを使った注釈
- デジタルアーカイブ用の写真撮影
メリット：
- 学習コストがゼロ
- ツールによる障壁がない
- 創造性を促す
- 共同作業に自然になじむ
- 携帯しやすく、誰でも利用できる
制約：
- リモートで共有しにくい
- デジタルで反復しにくい
- 精度に欠ける
- バージョン管理が難しい
- 開発者への引き継ぎには適さない
2. 低忠実度のデジタルワイヤーフレーム
説明：基本図形と最小限のスタイルを使ったシンプルなデジタルワイヤーフレーム
視覚的特徴：
- ボックス、線、単純な幾何学図形
- グレースケールのカラーパレット
- プレースホルダーテキスト（Lorem ipsum または FPO）
- 汎用アイコン（画像を表す X 印入りの四角形）
- サイズと太さによる最小限の階層構造
コンテンツ：
- ビジュアル用の「ヒーロー画像」またはグレーのボックス
- Lorem ipsum または繰り返しのテキスト
- 汎用ラベルと見出し
- 簡略化したナビゲーション構造
一般的な要素：
- ヘッダーのプレースホルダー
- ナビゲーションバー（単純な線やボックス）
- コンテンツブロック（長方形）
- ボタンのプレースホルダー（枠線付きボックス）
- フォームフィールド（線またはシンプルな入力欄）
- フッター領域
最適な用途：
- 複数のレイアウト案の検討
- 情報の階層構造のテスト
- ステークホルダーからの迅速なフィードバックの獲得
- ユーザーフローの検証
- デザインチームでのディスカッション
3. 中忠実度のワイヤーフレーム
説明：中程度の詳細さを備えた、より洗練されたワイヤーフレーム
視覚的特徴：
- 実際の UI コンポーネントを表現
- 洗練された余白と配置
- タイポグラフィの階層構造（異なる太さやサイズ）
- プレースホルダーと実際のコンテンツを一部混在
- 基本的なアイコン表現
- グリッドベースのレイアウト
コンテンツ：
- 実際のテキストとプレースホルダーテキストの混在
- 実際の見出しと主要なコピー
- 実際のコンテンツを想定した分量
- 現実的なフォームラベル
- 実際のナビゲーション項目
インタラクティブ要素：
- 明確なボタンの状態
- 定義済みのフォームフィールドの種類
- ドロップダウンのインジケーター
- リンクのスタイル
- アクティブ状態の表示
最適な用途：
- 構造とフローのユーザーテスト
- 詳細なステークホルダーレビュー
- 情報アーキテクチャの検証
- コンテンツ戦略との整合
- 開発前の計画
4. 高忠実度のワイヤーフレーム
説明：最終デザインを忠実に再現する、詳細で洗練されたワイヤーフレーム
視覚的特徴：
- 正確な余白と寸法
- 洗練されたタイポグラフィシステム
- 実際のコンテンツ、または高品質なプレースホルダーコンテンツ
- 詳細なコンポーネントの状態
- アクセシビリティへの配慮
- レスポンシブのブレークポイントを表示
コンテンツ：
- 実際のコピー、または最終版に近いコンテンツ
- 実際の画像、または高品質なストックフォト
- 正確なデータ表現
- 適切なコンテンツの階層構造
- 文字数への配慮
注釈：
- インタラクションの仕様
- 状態の説明
- 条件付きロジック
- エラー処理
- 読み込み状態
- エッジケースの記録
最適な用途：
- 開発者への引き継ぎ
- 詳細なユーザビリティテスト
- ステークホルダーの承認
- デザインシステムのドキュメント作成
- アクセシビリティレビュー
5. インタラクティブプロトタイプ
説明：ユーザーインタラクションをシミュレートする、クリック可能なワイヤーフレーム
機能：
- ページナビゲーション
- フォームの操作
- モーダルとオーバーレイの動作
- アニメーションとトランジション
- 条件付きロジック
- ユーザー入力の処理
忠実度のレベル：
- 低忠実度のインタラクティブ：基本的なクリック遷移
- 中忠実度のインタラクティブ：一部の条件付きフロー
- 高忠実度のインタラクティブ：複雑な動作とマイクロインタラクション
ユースケース：
- ユーザビリティテスト
- ステークホルダーへのデモ
- ユーザーフローの検証
- インタラクションパターンのテスト
- 経営幹部へのプレゼンテーション
ツール：
- Figma プロトタイピング
- Axure RP
- Proto.io
- InVision
- Adobe XD
情報アーキテクチャ
サイトマップ
目的：Webサイト／アプリの構造と階層を視覚的に表現します。
構成要素：
- ノードで表されたページ／画面
- 階層関係
- ナビゲーション経路
- コンテンツのグループ
- ユーザーのアクセスレベル
サイトマップの種類：
- 階層型サイトマップ：
Home
├── Products
│ ├── Category A
│ │ ├── Product 1
│ │ └── Product 2
│ └── Category B
│ ├── Product 3
│ └── Product 4
├── About
│ ├── Team
│ └── History
└── Contact
- シーケンシャル型サイトマップ：直線的なフロー（例：オンボーディング、購入手続き）
- マトリックス型サイトマップ：同じ目的地に至る複数の経路
- オーガニック型サイトマップ：ユーザー生成コンテンツや動的なコンテンツ構造
ベストプラクティス：
- 表記法と記号を一貫して使用します。
- ページテンプレートと固有のページを区別して示します。
- ナビゲーションの種類（グローバル、ユーティリティ、コンテキスト）を示します。
- ユーザーの権限とアクセスについて記録します。
- 外部サイトへのリンクや連携を含めます。
- サイトマップにバージョンと日付を付けます。
コンテンツ階層
定義：重要度と関連性に基づいてコンテンツを整理することです。
原則：
- 視覚的階層：
- サイズ：大きい要素ほど注目を集めます。
- 太さ：太字のテキストは強調を生みます。
- 色：コントラストによって重要性が際立ちます。
- 位置：上部と左側が最初に注目されます。
- 余白：ゆとりのある空間が存在感を高めます。
- 情報の階層：
- 第一次情報：ユーザーの主な目的
- 第二次情報：補足情報
- 第三次情報：任意の情報やコンテキスト情報
- メタデータ：システムレベルの情報
FパターンとZパターン：
-
Fパターン：テキスト量の多いコンテンツで一般的な読み取りパターン
- ユーザーは上部を水平方向に読み進めます。
- その下を、もう一度水平方向に読み進めます。
- 左側を垂直方向に読み進めます。
-
Zパターン：テキスト量が少なく、ビジュアル要素が多いコンテンツ向け
- 左上から右上へ
- 左下へ斜めに移動
- 左下から右下へ
明確な階層の作成：
- 明確なコンテンツの種類（H1、H2、H3、本文、キャプション）を設定します。
- 一貫性のある間隔の尺度を使用します。
- 関連する情報をまとめます。
- 近接の原則を適用します。
- 階層のレベル数を制限します（通常は最大3～4段階）。
- 目を細めて階層を確認します（ぼかしテスト）。
カードソーティング
目的：コンテンツの整理に関するユーザーのメンタルモデルを理解します。
種類：
- オープンカードソーティング：
- 参加者が独自のカテゴリーを作成します。
- 自然なグループ分けを見つけるのに役立ちます。
- 新しい製品やリデザインに適しています。
- クローズドカードソーティング：
- 参加者が事前に定義されたカテゴリーに分類します。
- 既存の構造を検証します。
- カテゴリー名をテストします。
- ハイブリッドカードソーティング：
- 事前に定義されたカテゴリーを用意し、新しいカテゴリーも作成できるようにします。
- 構造と発見のバランスを取ります。
プロセス：
- 分類するコンテンツ項目を特定します。
- カードを作成します（物理またはデジタル）。
- 代表的なユーザーを募集します。
- ソーティングセッションを実施します。
- 結果を分析し、パターンを見つけます。
- 情報アーキテクチャを反復して改善します。
ツール：
- OptimalSort
- UserZoom
- Miro（バーチャルカードソーティング）
- 物理的なインデックスカード
ユーザーフロー
タスクフロー
定義：特定のタスクを完了するためにユーザーがたどる、段階的な経路です。
構成要素：
- 開始地点
- 判断ポイント
- アクション／ステップ
- システムの応答
- 成功基準
- エラー状態
フロー図の要素：
- 長方形：画面またはページ
- ひし形：判断ポイント
- 楕円：開始／終了地点
- 矢印：フローの方向
- 注釈：補足情報
タスクフローの構成例：
[Start] → [Login Page] → {Valid Credentials?}
↓ Yes ↓ No
[Dashboard] [Error Message]
↓ ↓
[Success] [Retry Login]
効果的なタスクフローの作成：
- ユーザーの目標を明確に定義します。
- 考えられるすべての経路（標準的な経路と例外ケース）をマッピングします。
- 判断ポイントを特定します。
- システムの応答を記録します。
- エラー処理を含めます。
- 前提条件があれば記載します。
- 実際のユーザーシナリオでテストします。
ユーザージャーニー
定義：時間の経過に伴うタッチポイント全体でのユーザー体験を包括的に捉えたもの
タスクフローとの違い：
- より広い範囲を扱う（複数のタスク／セッション）
- 感情の変化も含む
- すべてのタッチポイントを考慮する
- ユーザーの思考や感情をマッピングする
- ペインポイントと機会を特定する
ジャーニーマップの構成要素：
- ペルソナ：ユーザーは誰か？
- シナリオ：ユーザーは何を達成しようとしているのか？
- フェーズ：ジャーニーの主な段階
- アクション：ユーザーが行うこと
- タッチポイント：やり取りが発生する場所
- 思考：ユーザーのメンタルモデル
- 感情：ユーザーの感情（多くの場合、グラフで可視化）
- ペインポイント：不満や障害
- 機会：改善の余地がある領域
ジャーニーのフェーズ例（E-commerce）：
- 認知：製品の必要性を知る
- 調査：選択肢を比較する
- 購入：取引を完了する
- 配送：製品を受け取る
- 使用：製品を体験する
- サポート：必要に応じてサポートを受ける
- ロイヤルティ：再購入する、または他者に勧める
フローチャート
目的：ロジック、プロセス、システムの動作を可視化する
標準的なフローチャート記号：
- 端子（楕円）：開始／終了
- 処理（長方形）：アクションまたは手順
- 判断（ひし形）：はい／いいえの質問
- 入力／出力（平行四辺形）：データの入力または表示
- コネクタ（円）：フローの別の部分への接続
- 書類（底辺が波形の長方形）：書類またはレポート
UX向けフローチャートの種類：
- ユーザーフローチャート：インターフェース上でのユーザーの経路
- システムフローチャート：バックエンドのロジックとプロセス
- スイムレーンフローチャート：複数のアクターまたはシステム
- 状態図：オブジェクトの状態と遷移
ベストプラクティス：
- 標準的な記号を一貫して使用する
- 上から下、左から右へ流れるようにする
- 線の交差を最小限にする
- すべての判断分岐に明確なラベルを付ける
- 可能な場合はフローを1ページに収める
- 複雑なフローにはコネクタを使用する
- 必要に応じて凡例を付ける
ワイヤーフロー
定義：ワイヤーフレームとユーザーフローを組み合わせたもの
形式：
- 実際のワイヤーフレーム画面を矢印で接続する
- インターフェースのデザインとフローのロジックの両方を示す
- 遷移やインタラクションに注釈を付ける
使用する場面：
- 複雑なインタラクションパターン
- 複数段階のプロセス
- 条件付きナビゲーション
- フローの開発者への引き継ぎ
- インタラクティブなプロトタイプのドキュメント化
ワイヤーフローの作成：
- 各ステップの主要なワイヤーフレームを作成する
- 論理的な順序に並べる
- 遷移を示す矢印で接続する
- トリガーと条件に注釈を付ける
- 代替経路を含める
- エラー状態とエッジケースを記載する
ワイヤーフレームの要素
レイアウトコンポーネント
グリッドシステム：
- 12カラムグリッド（レスポンシブデザインで最も一般的）
- 8カラムグリッド（よりシンプルなレイアウト）
- 16カラムグリッド（複雑で詳細なレイアウト）
- ベースライングリッド（垂直方向のリズム）
コンテナの種類：
- 固定幅コンテナ
- 流動的なコンテナ（全幅）
- 幅を制限したコンテナ（最大幅）
スペーシングシステム：
- 4pxまたは8pxを基本単位とする
- パディングとマージンを一貫させる
- 読みやすさのための垂直方向のリズム
ナビゲーション要素
プライマリーナビゲーション：
- 上部の水平ナビゲーションバー
- ハンバーガーメニュー／モバイルメニュー
- メガメニュー
- サイドバーナビゲーション
- タブナビゲーション
セカンダリーナビゲーション：
- パンくずリスト
- ページネーション
- フィルターと並べ替え
- ページ内ナビゲーション（アンカーリンク）
- 関連リンク
ユーティリティナビゲーション：
- ユーザーアカウントメニュー
- カート／ショッピングバッグ
- 検索
- 言語／地域セレクター
- 設定と環境設定
コンテンツ要素
タイポグラフィのプレースホルダー：
- 見出し（H1、H2、H3など）
- 本文（段落）
- リスト（箇条書き、番号付き）
- キャプションとラベル
- リンクとCTA
メディアのプレースホルダー：
- 画像（X印または斜線の入ったボックス）
- 動画プレーヤー（再生アイコン付きのボックス）
- アイコン（単純な図形または実際のアイコン）
- 地図（「MAP」と記載したボックス）
- チャートとグラフ
フォーム要素：
- テキスト入力欄
- テキストエリア
- チェックボックス
- ラジオボタン
- ドロップダウン／選択メニュー
- 日付ピッカー
- ファイルアップロード
- 送信ボタン
インタラクティブ要素
ボタン:
- プライマリボタン（塗りつぶし）
- セカンダリボタン（枠線）
- ターシャリボタン（テキストのみ）
- アイコンボタン
- ボタングループ
- トグルボタン
リンク:
- インラインテキストリンク
- 単独リンク
- ナビゲーションリンク
- フッターリンク
トグルとスイッチ:
- オン／オフ切り替え
- チェックボックスによる切り替え
- セグメントコントロール
カード:
- コンテンツカード
- 製品カード
- プロフィールカード
- インタラクティブカード
フィードバック要素
ステータスインジケーター:
- 読み込みスピナー
- プログレスバー
- 成功メッセージ
- エラーメッセージ
- 警告メッセージ
- 情報メッセージ
モーダルとオーバーレイ:
- モーダルダイアログ
- ライトボックス
- ツールチップ
- ポップオーバー
- ドロワー／サイドパネル
注釈と仕様
注釈の種類
1. 機能に関する注釈:
- ユーザーがクリック／タップしたときの動作
- フォームの検証ルール
- 動的なコンテンツ更新
- 条件分岐ロジック
例：
[Button: "Add to Cart"]
→ On click: Add item to cart
→ Update cart count in header
→ Show success message
→ Animate button (scale feedback)
2. コンテンツに関する注釈:
- 文字数制限
- コンテンツのソース
- プレースホルダーと最終コンテンツの区別
- コンテンツのルールとロジック
例：
[Product Title]
→ Max 60 characters
→ Source: Product database, title field
→ Truncate with ellipsis if exceeds limit
3. 動作に関する注釈:
- ホバー状態
- アクティブ状態
- 無効状態
- 読み込み状態
- エラー状態
4. 技術的な注釈:
- API エンドポイント
- データ要件
- パフォーマンスに関する考慮事項
- サードパーティとの連携
5. アクセシビリティに関する注釈:
- 代替テキストの要件
- ARIA ラベル
- フォーカス順序
- キーボード操作
- スクリーンリーダーの動作
注釈の方法
番号付きコールアウト:
Wireframe with numbered markers:
1. Logo links to homepage
2. Search expands on click
3. Cart shows item count
4. User menu drops down on hover
インライン注記:
- 要素上またはその近くに直接注釈を記載する
- 分かりやすくするために引き出し線を使う
- 注釈の種類ごとに色分けする
個別の仕様書:
- ワイヤーフレームとは別に詳細な仕様を記載する
- 画面名／番号を使ってワイヤーフレームを参照する
- ユーザーストーリーと受け入れ条件を含める
インタラクティブ注釈（プロトタイピングツール内）:
- ホバーして注記を表示する
- クリックして詳細を展開する
- 仕様書へのリンク
明確な注釈の書き方
ベストプラクティス:
- 具体的で曖昧さのない表現にする
- 用語を一貫して使う
- 実装ではなく動作に焦点を当てる
- エッジケースを含める
- デザインパターンや例を参照する
- 重要な場合を除き、方法ではなく内容を指定する
よくない注釈: 「ボタンをクリックすると何かが起こる」
よい注釈: 「クリック時：フォームデータを送信します。検証に成功した場合は確認ページに移動します。検証に失敗した場合は、無効なフィールドの横にインラインエラーメッセージを表示し、最初のエラーまでスクロールします。」
開発者向け仕様
含める内容:
- レイアウト仕様:
- 余白の値（パディング、マージン）
- グリッドの列とガター
- ブレークポイントごとの動作
- 配置ルール
- コンポーネント仕様:
- 状態（デフォルト、ホバー、アクティブ、無効、エラー）
- サイズのバリエーション
- コンテンツのルール
- アクセシビリティ要件
- インタラクション仕様:
- ユーザーの操作（クリック、タップ、ホバー、スワイプ）
- システムの応答
- アニメーションのタイミングとイージング
- トランジションの動作
- データ仕様:
- 必須データと任意データ
- データ形式
- デフォルト値
- 検証ルール
- 条件分岐ロジック:
- 条件と結果のシナリオ
- ユーザーの権限レベル
- 機能フラグ
- パーソナライズのルール
ツールとテクノロジー
紙と実物のツール
ペンと紙:
- 最適な用途：素早いアイデア出し、ブレインストーミング
- 長所：すぐに使える、手触りがある、手軽に利用できる
- 短所：リモートで共有しにくい、反復作業に制限がある
ホワイトボード:
- 最適な用途：共同作業、ワークショップ
- 長所：簡単に消して修正でき、グループでの作業に適している
- 短所：持ち運びにくく、記録として保存するには撮影が必要
付箋:
- 最適な用途：カードソーティング、親和図の作成、フローの作成
- 長所：柔軟で手触りがあり、簡単に並べ替えられる
- 短所：一時的なもので、物理的なスペースが必要
ワイヤーフレーム用ノートとテンプレート:
- ドット方眼ノート
- 印刷済みデバイステンプレート
- UI ステンシル
- 長所：構成が整っていて、プロフェッショナルな見た目
- 短所：柔軟性に限りがある
低忠実度デジタルツール
Balsamiq：
- 説明：スケッチ風のワイヤーフレーム作成ツール
- 最適な用途：低忠実度ワイヤーフレーム、迅速なプロトタイピング
- 主な機能：
- 意図的に「手描き風」にしたデザイン
- 豊富なコンポーネントライブラリ
- モックアップをすばやく作成
- 組み込みの UI コンポーネント
- 料金：サブスクリプション制
- 学習曲線：低い
Whimsical：
- 説明：軽量な図表作成・ワイヤーフレームツール
- 最適な用途：フローチャート、ワイヤーフレーム、マインドマップ
- 主な機能：
- 高速なパフォーマンス
- すっきりとしたミニマルなインターフェース
- リアルタイムコラボレーション
- フローチャートとワイヤーフレームを統合
- 料金：フリーミアム
- 学習曲線：非常に低い
Miro：
- 説明：デジタルホワイトボードプラットフォーム
- 最適な用途：ワークショップ、ブレインストーミング、共同でのワイヤーフレーム作成
- 主な機能：
- 無限のキャンバス
- ワイヤーフレームのテンプレート
- リアルタイムコラボレーション
- 他のツールとの連携
- 料金：フリーミアム
- 学習曲線：低い
プロ向けワイヤーフレームツール
Figma：
- 説明：共同作業に対応したインターフェースデザインツール
- 最適な用途：あらゆる忠実度のデザイン、デザインシステム、プロトタイピング
- 主な機能：
- ブラウザベース、クロスプラットフォーム対応
- リアルタイムコラボレーション
- コンポーネントライブラリ
- 高度なプロトタイピング
- デザインシステムをサポート
- 開発者への引き継ぎ
- バージョン履歴
- 料金：フリーミアム（個人利用は無料）
- 学習曲線：中程度
- ワイヤーフレーム作成のアプローチ：
- Auto Layout を使用してレスポンシブデザインを作成
- コンポーネントライブラリを作成
- コミュニティのワイヤーフレームキットを活用
- コンポーネントの状態にはバリアントを使用
Sketch：
- 説明：ベクターベースのデザインツール（macOS のみ）
- 最適な用途：高忠実度ワイヤーフレーム、UI デザイン
- 主な機能：
- シンボルとライブラリ
- プラグインエコシステム
- プロトタイピング機能
- 開発者への引き継ぎ
- 料金：サブスクリプション制
- 学習曲線：中程度
- 制限事項：macOS のみ、コラボレーション機能が限定的
Adobe XD：
- 説明：UI/UX デザインおよびプロトタイピングツール
- 最適な用途：高忠実度ワイヤーフレーム、インタラクティブなプロトタイプ
- 主な機能：
- コンポーネントと状態
- 高度なプロトタイピング
- 自動アニメーション
- 音声プロトタイピング
- デザインシステム
- 料金：Creative Cloud に含まれています
- 学習曲線：中程度
Axure RP：
- 説明：プロ向けのプロトタイピングおよび仕様作成ツール
- 最適な用途：複雑なインタラクション、詳細な仕様書
- 主な機能：
- 高度な条件ロジック
- 動的コンテンツ
- 変数と式
- 詳細なドキュメントの生成
- チームでのコラボレーション
- 料金：ライセンス制（高額）
- 学習曲線：高い
- 最適な用途：エンタープライズ、複雑なアプリケーション
特化型ツール
OmniGraffle（macOS/iOS）：
- 最適な用途：図表、サイトマップ、ユーザーフロー
- 強み：高機能な図表作成、美しい出力
- 制限事項：macOS/iOS のみ
Lucidchart：
- 最適な用途：フローチャート、サイトマップ、システム図
- 強み：コラボレーション、連携機能
- ユースケース：情報アーキテクチャのドキュメント作成
FlowMapp：
- 最適な用途：サイトマップとユーザーフロー
- 強み：IA 作業に特化して開発
- 機能：視覚的なサイトマップ、ユーザーフローの作成
Overflow：
- 最適な用途：デザインからのユーザーフロー図の作成
- 強み：デザインツールからインポートし、美しいフロー図を作成
- ユースケース：ドキュメント作成とプレゼンテーション
コードベースのワイヤーフレーム作成
HTML/CSS ワイヤーフレーム：
- 使用する場面：ワイヤーフレームに機能を持たせたい場合
- メリット：真のレスポンシブ対応、テスト可能、本番コードとして利用可能
- デメリット：時間がかかる、コーディングスキルが必要
ワイヤーフレーム作成用フレームワーク：
- Tailwind CSS：ユーティリティファーストの CSS フレームワーク
- Bootstrap：コンポーネントライブラリ
- Material UI：Google のデザインシステム
- Semantic UI：人に優しい HTML
ツールの例：
- CodePen：迅速なプロトタイピング
- JSFiddle：インタラクティブなコーディング
- StackBlitz：フル機能の開発環境
適切なツールの選択
判断要因：
- プロジェクトの忠実度に関する要件：
- 低忠実度：Balsamiq、Whimsical、紙
- 中忠実度：Figma、Sketch、Adobe XD
- 高忠実度：Figma、Sketch、Adobe XD、Axure
- コラボレーションの要件：
- 個人：任意のツール
- 小規模チーム：Figma、Miro、Whimsical
- 大規模チーム：Figma、Adobe XD、Axure
- 予算：
- 無料：Figma（無料プラン）、Miro（無料プラン）、紙
- 中程度：Whimsical、Balsamiq
- エンタープライズ：Axure、Sketch
- プラットフォーム：
- クロスプラットフォーム：Figma、Adobe XD、ウェブベースのツール
- macOS のみ：Sketch、OmniGraffle
- 学習曲線：
- 簡単：Balsamiq、Whimsical、紙
- 中程度：Figma、Adobe XD
- 高度：Axure、コードベース
イテレーションプロセス
デザインのイテレーションサイクル
1. 初期ワイヤーフレームの作成：
- 低忠実度のスケッチから始めます
- ユーザーの主要なフローに焦点を当てます
- 複数のコンセプトを検討します
- 最初のアイデアに固執しないでください
2. 内部レビュー：
- デザインチームと共有します
- 構成とフローについてフィードバックを得ます
- 前提や不足点を特定します
- チームからの意見に基づいて改善します
3. ステークホルダーレビュー：
- プロダクトオーナーやビジネスステークホルダーに提示します
- ビジネス要件との整合性を検証します
- 範囲と優先順位を確認します
- 決定事項とその根拠を記録します
4. ユーザーテスト：
- 代表的なユーザーを対象にテストします
- 意見だけでなく、行動を観察します
- 問題点や混乱を特定します
- 前提を検証します
5. 分析と統合：
- フィードバックとデータを確認します
- パターンやテーマを特定します
- 変更に優先順位を付けます
- アクションアイテムを作成します
6. 改善：
- 検証済みの変更を反映します
- 適切であれば忠実度を高めます
- 必要な箇所に詳細を追加します
- 次のラウンドに備えます
7. 繰り返し：
- 複数回のイテレーションは通常のことです
- 各サイクルで具体的な質問に答える必要があります
- 次に進むタイミングを見極めます
フィードバックループ
フィードバックの種類：
- デザイン批評：
- デザインチームとの定期的なセッション
- 特定の側面に焦点を当てます
- 構造化されたフィードバック形式
- 決定事項を記録します
- ステークホルダーからのフィードバック：
- ビジネスとの整合性の確認
- 技術的な実現可能性のレビュー
- リソースとスケジュールへの影響
- 戦略との適合性
- ユーザーからのフィードバック：
- ユーザビリティテスト
- アンケートとインタビュー
- アナリティクスと行動データ
- A/B テストの結果
フィードバックのベストプラクティス：
- 各レビューの目標を明確に設定します
- 具体的な質問をします
- 個人の好みではなく、ユーザーのニーズに焦点を当てます
- すべてのフィードバックと決定事項を記録します
- フィードバックへの対応を示し、ループを閉じます
ワイヤーフレームを使ったユーザビリティテスト
テストするタイミング：
- 初期コンセプトの検証後
- 高忠実度のデザイン作業に入る前
- 新しいパターンを検討するとき
- 大きな変更を検証するとき
テスト方法：
- モデレーター付きユーザビリティテスト：
- 1 対 1 のセッション
- 発話思考法プロトコル
- タスクベースのシナリオ
- オブザーバーがメモを取ります
- モデレーターなしテスト：
- リモートで非同期に実施
- ユーザーが個別にタスクを完了します
- 画面録画
- アンケートの回答
- ゲリラテスト：
- 短時間で気軽に実施するテスト
- コーヒーショップや公共の場所
- 短いセッション（5～10 分）
- 低忠実度が適しています
テスト対象：
- ユーザーは主要なタスクを完了できますか？
- ユーザーは情報の階層を理解できますか？
- ナビゲーションは直感的ですか？
- インタラクションは明確ですか？
- フローはユーザーのメンタルモデルに合っていますか？
- 混乱や摩擦が生じる箇所はありますか？
ワイヤーフレームと高忠実度デザインのテスト：
- ワイヤーフレーム：構成とフローをテストします
- 高忠実度：視覚的な階層と詳細をテストします
- 両方：ユーザビリティとユーザーの理解度をテストします
段階的なブラッシュアップ
低忠実度から高忠実度への進行：
ステージ 1：スケッチ（数時間）：
- 複数のラフなコンセプトを作成する
- さまざまなアプローチを検討する
- チーム内で素早く合意を得る
- 明らかな問題を特定する
ステージ 2：低忠実度ワイヤーフレーム（数日）：
- 最良のコンセプトをデジタル化する
- 基本的なユーザーフローを作成する
- コアとなる構成をテストする
- ステークホルダーによるレビューを受ける
ステージ 3：中忠実度ワイヤーフレーム（数日〜数週間）：
- 詳細を追加し、ブラッシュアップする
- 可能な限り実際のコンテンツを含める
- コンポーネントの一貫性を確保する
- ユーザーテストを実施する
ステージ 4：高忠実度ワイヤーフレーム（数週間）：
- 正確な仕様を作成する
- すべての状態を文書化する
- エッジケースに対処する
- 開発者がすぐに使える状態にする
ステージ 5：インタラクティブなプロトタイプ（数週間）：
- 機能するインタラクション
- アニメーションとトランジション
- 高度なユーザーテスト
- ステークホルダー向けのデモ
忠実度を高めるタイミング：
- コアとなる構成が検証されている
- 大幅な変更が起こりそうにない
- 特定の詳細をテストする必要がある
- 開発者への引き継ぎが近づいている
- ステークホルダーの承認が必要である
低忠実度を維持するタイミング：
- まだ選択肢を検討している
- 重要な疑問が未解決である
- プロセスの初期段階である
- 時間や予算が限られている
- 基本的なコンセプトをテストしている
ベストプラクティス
明確さとコミュニケーション
1. 一貫したビジュアル言語を使う：
- プレースホルダーのスタイルを全体で統一する
- 注釈の形式を一貫させる
- 標準的な記号と表記法を使う
- コンポーネントの表現を統一する
2. 明確な階層を設ける：
- サイズで重要度を示す
- 余白で関係性を表現する
- 太さで強調する
- 配置で視線を誘導する
3. すべてにラベルを付ける：
- ページ／画面名
- セクションの見出し
- インタラクティブな要素
- ナビゲーション項目
- フォームフィールド
4. コンテキストを示す：
- ユーザーがフローのどこにいるかを示す
- パンくずリストや進行状況インジケーターを含める
- 関連する画面を参照する
- ユーザーの状態やコンテキストを記す
5. 前提を文書化する：
- ユーザーの知識について何を前提としているかを記す
- 技術的な前提を文書化する
- コンテンツに関する前提を明確にする
- ユーザーの権限や役割を指定する
スタイルより構成を重視する
1. ビジュアルデザインへの誘惑を抑える：
- まだ最終的な色を選ばない
- 具体的なタイポグラフィの決定を避ける
- 不要な装飾を追加しない
- レイアウトと機能に集中する
2. グレースケールを使う：
- 構成に意識を集中できる
- 時期尚早なスタイルの決定を防げる
- ステークホルダーの注意が逸れるのを抑えられる
- 階層をテストしやすくなる
3. 要素のスタイルを統一する：
- すべてのボタンの見た目を統一する
- すべてのフォームフィールドを統一する
- すべての見出しを統一する
- 機能上の違いがある場合にのみ変化を付ける
4. コンテンツとコンテナを分ける：
- プレースホルダーを適切に使う
- コンテンツにレイアウトを左右させない
- さまざまなコンテンツのパターンを考慮する
- エッジケース（長い／短いコンテンツ）に備える
コラボレーションと引き継ぎ
1. ステークホルダーを早い段階から巻き込む：
- 低忠実度のコンセプトを早めに共有する
- 詳細な作業に入る前に合意を得る
- 定期的に確認する
- 決定事項を文書化する
2. 開発者と連携する：
- 技術的な制約を把握する
- 実現可能性について確認する
- 明確な仕様を提示する
- 質問に対応できるようにしておく
3. バージョン管理：
- すべてのワイヤーフレームに日付を付ける
- 大きな変更を追跡する
- 変更履歴を維持する
- 古いバージョンをアーカイブする
4. デザインシステムを作成する：
- 再利用可能なコンポーネント
- 一貫したパターン
- 共有ライブラリ
- ドキュメント
5. 引き継ぎチェックリスト：
- すべての画面が文書化されている
- インタラクションが指定されている
- 状態が定義されている
- エッジケースに対処している
- アセットが準備されている
- 仕様が明確である
アクセシビリティに関する考慮事項
1. スクリーンリーダーを考慮する：
- 論理的な見出し階層
- 意味のあるリンクテキスト
- フォームラベルの関連付け
- 代替テキストの要件を明記
2. キーボード操作：
- フォーカス順序が自然である
- すべてのインタラクティブ要素にアクセスできる
- キーボードショートカットを記載する
- 長いページにはスキップリンクを設ける
3. 色とコントラスト：
- 色だけに頼らない
- コントラストが重要な箇所を明記する
- 色覚障害のあるユーザーを考慮する
- ハイコントラストモードに対応する
4. タッチターゲット：
- モバイルでは最小44x44px
- ターゲット間に十分な間隔を設ける
- 親指で操作しやすい範囲を考慮する
- さまざまな入力方法に対応する
5. コンテンツのアクセシビリティ：
- 明確な言葉遣い
- 論理的な構成
- 複雑なコンテンツには代替手段を用意する
- メディアにはキャプションを付ける
よくある落とし穴とその回避方法
1. 初期段階で詳細を詰めすぎる：
- リスク：誤った方向性に労力を費やす
- 解決策：検証が済むまでは低忠実度の状態を保つ
2. 独りよがりな設計：
- リスク：ユーザーのニーズやビジネス目標とのずれ
- 解決策：定期的にフィードバックを得てテストする
3. エッジケースを無視する：
- リスク：仕様が不完全になり、開発時に予想外の問題が発生する
- 解決策：エラー状態、空の状態、読み込み中の状態などを検討する
4. パターンに一貫性がない：
- リスク：ユーザーが混乱し、開発効率が低下する
- 解決策：パターンを確立し、それに従う
5. モバイルやレスポンシブ対応への配慮不足：
- リスク：すべてのデバイスでデザインが機能しない
- 解決策：複数のブレークポイントに対応するデザインにする
6. 注釈が不十分：
- リスク：要件が誤解され、手戻りが発生する
- 解決策：明確で包括的な仕様を作成する
7. ユーザーテストを省略する：
- リスク：誤ったものを作ってしまう
- 解決策：早い段階から頻繁にテストする
8. コンテンツを考慮しない：
- リスク：実際のコンテンツでデザインが崩れる
- 解決策：現実的なコンテンツを使い、バリエーションを想定する
ワイヤーフレームの例
例1：ECサイトの商品一覧ページ
目的：フィルタリングと並べ替え機能を使って複数の商品を表示する
低忠実度のアプローチ：
[Header]
+------------------------------------------+
| Logo Search Cart Account |
+------------------------------------------+
[Breadcrumbs]
Home > Category > Subcategory
[Main Content Area]
+------------+ +------------------------+
| Filters | | [Sort: Dropdown] |
| | | [Grid View] [List View]|
| Category | | |
| [ ] Option | | +----+ +----+ +----+ |
| [ ] Option | | |Img | |Img | |Img | |
| | | | | | | | | |
| Price | | |Name| |Name| |Name| |
| [Slider] | | |$XXX| |$XXX| |$XXX| |
| | | +----+ +----+ +----+ |
| Brand | | |
| [ ] Option | | +----+ +----+ +----+ |
| [ ] Option | | |Img | |Img | |Img | |
| | | +----+ +----+ +----+ |
| [Apply] | | |
+------------+ | [Load More] |
+------------------------+
注釈：
- フィルターサイドバー：モバイルでは折りたたみ可能
- 商品グリッド：デスクトップでは3列、タブレットでは2列、モバイルでは1列
- 並べ替えドロップダウン：価格、評価、新着順などの選択肢を含む
- 各商品カードから商品詳細ページにリンクする
- 「さらに読み込む」では、モバイルで無限スクロールを使用する
高忠実度で考慮する点：
- 商品画像のアスペクト比：1:1
- 通貨に合わせた価格表示
- セール価格の表示方法
- クイックビュー機能
- ウィッシュリスト／お気に入りアイコン
- 在庫切れの表示
- 評価の星表示
例2：ユーザー登録フロー
フローの概要：
[Landing Page] → [Sign Up Form] → [Email Verification] → [Profile Setup] → [Dashboard]
↓
[Login Instead]
サインアップフォームのワイヤーフレーム：
+------------------------------------------+
| Create Account |
+------------------------------------------+
| |
| Full Name |
| [________________________] |
| |
| Email Address |
| [________________________] |
| |
| Password |
| [________________________] [👁] |
| • Must be 8+ characters |
| • Include number and special character |
| |
| [ ] I agree to Terms and Privacy Policy |
| |
| [ Create Account ] |
| |
| Already have an account? [Log In] |
| |
| -------- Or sign up with -------- |
| |
| [Google] [Apple] [Facebook] |
+------------------------------------------+
注釈：
- メールアドレス欄：フォーカスが外れたときに形式を検証する
- パスワード欄：目のアイコンで表示／非表示を切り替える
- パスワード強度インジケーター：ユーザーの入力に応じて更新する
- 利用規約のチェックボックス：必須項目とし、利用規約全文へのリンクを設ける
- ソーシャルサインアップ：OAuthフローを使い、最小限の情報でアカウントを作成する
- エラー処理：入力欄の横で検証し、入力欄の上にエラーを表示する
考慮する状態：
- 空の状態（初期状態）
- 入力済みの状態（有効）
- エラー状態（無効なメールアドレス、弱いパスワード）
- 読み込み中の状態（送信中）
- 成功状態（アカウント作成済み）
例3：データ可視化を含むダッシュボード
目的：主要な指標とパフォーマンスデータを表示する
レイアウト構造：
+----------------------------------------------------+
| Logo Dashboard Reports Settings [Profile▼] |
+----------------------------------------------------+
| Welcome back, [User Name] [Date Range ▼] |
| |
| +---------------+ +---------------+ +---------+ |
| | Total Sales | | Orders | | Growth | |
| | $XXX,XXX | | XXX | | +XX% | |
| | +XX% vs LM | | +XX% vs LM | | ↑ | |
| +---------------+ +---------------+ +---------+ |
| |
| +------------------------------------------------+ |
| | Revenue Over Time [Month▼] | |
| | [Line Chart] | |
| | | |
| | | |
| +------------------------------------------------+ |
| |
| +-----------------------+ +---------------------+ |
| | Top Products | | Recent Orders | |
| | 1. Product A $XXX | | #1234 [Status] | |
| | 2. Product B $XXX | | #1235 [Status] | |
| | 3. Product C $XXX | | #1236 [Status] | |
| | [View All] | | [View All] | |
| +-----------------------+ +---------------------+ |
+----------------------------------------------------+
インタラクティブ要素：
- 期間選択：すべてのデータを更新する
- 指標カード：クリックすると詳細を表示する
- グラフ：ホバーするとデータポイントを表示し、クリックすると詳細を表示する
- テーブル：列の並べ替えが可能で、行をクリックすると詳細を表示する
レスポンシブ時の動作：
- デスクトップ：指標カードは3列、テーブルは横並び
- タブレット：指標は2列、テーブルは縦に配置
- モバイル：1列の縦並び、簡略化したグラフ
例 4：モバイルアプリのオンボーディング
画面フロー：
[Splash] → [Welcome] → [Feature 1] → [Feature 2] → [Feature 3] → [Sign Up/Login]
↓
[Skip]
ウェルカム画面：
+-------------------+
| |
| [Illustration] |
| |
| Welcome to App |
| |
| Discover amazing |
| features that |
| make life easier |
| |
| ● ○ ○ ○ |
| |
| [ Next ] |
| |
| [Skip] |
+-------------------+
注釈：
- スワイプ操作：左右にスワイプして移動
- 進行状況ドット：現在の画面を表示（全 4 画面）
- 次へボタン：次の画面に進む
- スキップリンク：登録／ログインに直接移動
- 自動進行：タイマーで自動再生するオプション
デザイン上の考慮事項：
- シンプルで要点を絞ったメッセージ
- 1 画面につき 1 つのコンセプト
- テキストよりビジュアルを重視
- 簡単に終了できるオプション
- ユーザーの設定を記憶する（次回から表示しない）
例 5：検索結果ページ
レイアウト：
+--------------------------------------------------+
| Logo [Search: "keyword" ] [Search] |
+--------------------------------------------------+
| About X,XXX results (0.XX seconds) |
| |
| Filters: [All] [Images] [Videos] [News] [More▼] |
| |
| +---------+ |
| | [Image] | Result Title - Linked |
| +---------+ www.example.com › path |
| Brief description of the content |
| showing search term highlighted... |
| Additional context line. |
| |
| +---------+ |
| | [Image] | Result Title - Linked |
| +---------+ www.example.com › path |
| Brief description... |
| |
| [People also ask] |
| ▼ Question related to search? |
| ▼ Another question? |
| |
| ... more results ... |
| |
| [Previous] [1] [2] [3] [4] [5] [Next] |
+--------------------------------------------------+
注釈：
- 検索ボックス：検索クエリを維持し、改善案を提示
- フィルター：結果の種類を変更し、ページを更新
- 結果画像：利用可能な場合はプレビュー画像を表示
- パンくず URL：ページ階層を表示
- 説明：キーワードを強調表示
- 「他のユーザーはこちらも質問しています」：展開可能な FAQ アコーディオン
- ページネーション：標準的なページナビゲーション
例 6：ブログ記事ページ
構成：
+--------------------------------------------------+
| Logo Home Articles About Contact [Search] |
+--------------------------------------------------+
| |
| Home > Category > Article Title |
| |
| Article Title Here |
| A compelling subtitle or summary |
| |
| By [Author Name] | [Date] | X min read |
| |
| [Featured Image - Full Width] |
| |
| +--------------------------------------------+ |
| | Article content begins here. Lorem ipsum | |
| | dolor sit amet, consectetur adipiscing | |
| | elit. Paragraphs of main content... | |
| | | |
| | ## Subheading | |
| | | |
| | More content with proper hierarchy and | |
| | formatting. Lists, quotes, images, etc. | |
| | | |
| | [Inline Image with Caption] | |
| | | |
| +--------------------------------------------+ |
| |
| Tags: [Design] [UX] [Wireframing] |
| |
| Share: [Twitter] [Facebook] [LinkedIn] |
| |
| +--------------------------------------------+ |
| | About the Author | |
| | [Avatar] Name | |
| | Brief bio and social links | |
| +--------------------------------------------+ |
| |
| Related Articles |
| +-------+ +-------+ +-------+ |
| |[Image]| |[Image]| |[Image]| |
| |Title | |Title | |Title | |
| +-------+ +-------+ +-------+ |
+--------------------------------------------------+
レスポンシブ対応に関する考慮事項：
- デスクトップ：読みやすさを考慮して最大幅を 680〜720px にしたコンテナー
- モバイル：余白を設けた全幅レイアウト、縦積みレイアウト
- 画像：レスポンシブ対応、アスペクト比を維持
- 関連記事：3 列から 1 列へ
例 7：設定／環境設定ページ
タブベースのレイアウト：
+--------------------------------------------------+
| [Account] [Privacy] [Notifications] [Billing] |
+--------------------------------------------------+
| |
| Account Settings |
| |
| Profile Photo |
| [ Avatar ] [Change Photo] [Remove] |
| |
| Display Name |
| [_____________________________] |
| |
| Email Address |
| [email protected] [Verified ✓] |
| [Change Email] |
| |
| Password |
| •••••••• |
| [Change Password] |
| |
| Two-Factor Authentication |
| [ Enabled ] |
| Add an extra layer of security |
| [Manage 2FA] |
| |
| Timezone |
| [America/New_York ▼] |
| |
| Language |
| [English ▼] |
| |
| Danger Zone |
| [Delete Account] This action cannot be undone |
| |
| [Cancel] [Save Changes] |
+--------------------------------------------------+
注釈：
- タブ：異なる設定セクションを読み込む
- 変更操作：モーダルまたはインライン編集
- 2FA の切り替え：確認が必要
- 保存ボタン：変更がある場合のみ有効
- 危険な操作のセクション：パスワードを求める確認モーダル
- 自動保存オプション：UX 向上のために検討
例 8：カレンダー／スケジュール管理インターフェース
月表示：
+--------------------------------------------------+
| [<] October 2024 [>] [Today] [+ Event] |
+--------------------------------------------------+
| Sun | Mon | Tue | Wed | Thu | Fri | Sat | |
+--------------------------------------------------+
| | | 1 | 2 | 3 | 4 | 5 | |
| | | | | | | | |
+--------------------------------------------------+
| 6 | 7 | 8 | 9 | 10 | 11 | 12 | |
| | ● | | ●● | | | | |
+--------------------------------------------------+
| 13 | 14 | 15 | 16 | 17 | 18 | 19 | |
| | | ● | | ● | ●●● | | |
+--------------------------------------------------+
| 20 | 21 | 22 | 23 | 24 | 25 | 26 | |
| | ● | | | | ● | | |
+--------------------------------------------------+
| 27 | 28 | 29 | 30 | 31 | | | |
| | | | ●● | | | | |
+--------------------------------------------------+
| |
| Upcoming Events |
| Oct 9, 9:00 AM - Team Meeting |
| Oct 15, 2:00 PM - Client Call |
| Oct 17, 10:00 AM - Design Review |
| [View All] |
+--------------------------------------------------+
その他の表示方法：
- 週表示：イベントブロックを配置した時間単位のグリッド
- 日表示：競合を表示する詳細なタイムライン
- 予定一覧表示：すべてのイベントの一覧
操作：
- 日付をクリック：その日の詳細を表示、またはイベントを作成
- ドット：イベントを表示（種類ごとに色分け）
- イベントをドラッグ：スケジュールを変更
- イベントをクリック：詳細を表示／編集
- 月の移動：前月／翌月に移動、または日付選択
例 9：ソーシャルメディアフィード
フィードの構成：
+--------------------------------------------------+
| [Home] [Discover] [Messages] [Profile] [@user] |
+--------------------------------------------------+
| What's on your mind? |
| [____________________________] [Photo] [Post] |
+--------------------------------------------------+
| |
| +----------------------------------------------+ |
| | [Avatar] User Name [•••] | |
| | @username · 2h ago | |
| | | |
| | Post content here. This could be text, | |
| | images, links, or other media. #hashtag | |
| | | |
| | [Preview Image if link/media] | |
| | | |
| | [💬 12] [🔄 5] [❤️ 24] [🔖] [📤] | |
| +----------------------------------------------+ |
| |
| +----------------------------------------------+ |
| | [Avatar] Another User [•••] | |
| | @user2 · 5h ago | |
| | | |
| | Another post with different content... | |
| | | |
| | [💬 3] [🔄 1] [❤️ 8] [🔖] [📤] | |
| +----------------------------------------------+ |
| |
| [Load More Posts] |
+--------------------------------------------------+
投稿の操作：
- アバター／名前：ユーザープロフィールへのリンク
- 3 点メニュー：報告、ミュート、ブロックなど
- 返信アイコン：コメントスレッドを開く
- リポストアイコン：自分のフィードに共有
- いいねアイコン：いいねの状態を切り替え
- ブックマーク：後で見るために保存
- 共有：外部に共有
機能：
- 無限スクロールまたは「さらに読み込む」
- モバイルでのプル・トゥ・リフレッシュ
- 新しい投稿をリアルタイムで更新
- エンゲージメント数をリアルタイムで更新
例 10：動画プレーヤーインターフェース
プレーヤーのワイヤーフレーム：
+--------------------------------------------------+
| |
| [Video Content] |
| |
| [Play/Pause Overlay] |
| |
+--------------------------------------------------+
| [▶/⏸] [⏮] [⏭] ——●———————————————— [🔊] [⚙] [⛶]|
| 0:45 12:34 |
+--------------------------------------------------+
| |
| Video Title Goes Here |
| 1.2M views · 2 days ago |
| |
| [Avatar] Channel Name [Subscribe] |
| 125K subscribers |
| |
| [👍 12K] [👎] [Share] [Download] [Save] [•••] |
| |
| [Show Description ▼] |
+--------------------------------------------------+
プレーヤーのコントロール：
- 再生／一時停止：再生状態を切り替え
- スキップボタン：10 秒戻る／進む
- プログレスバー：任意の位置に移動し、バッファーを表示
- 音量：スライダーで調整、ミュートを切り替え
- 設定：画質、再生速度、字幕
- 全画面表示：全画面モードを切り替え
追加機能：
- 操作がない状態が続くとコントロールを自動的に非表示
- キーボードショートカット
- ピクチャー・イン・ピクチャーモード
- 字幕の切り替え
- プレイリストの移動
例 11：購入手続きフロー
複数ステップのプロセス：
Step 1: Cart → Step 2: Shipping → Step 3: Payment → Step 4: Review → Confirmation
支払いステップのワイヤーフレーム：
+--------------------------------------------------+
| [Logo] [Help] |
+--------------------------------------------------+
| [✓] Cart [✓] Shipping [●] Payment [ ] Review |
+--------------------------------------------------+
| |
| Payment Method |
| (•) Credit Card |
| ( ) PayPal |
| ( ) Apple Pay |
| |
| Card Number |
| [____-____-____-____] [VISA] |
| |
| Expiry Date CVV |
| [MM/YY] [___] [?] |
| |
| Cardholder Name |
| [_____________________________] |
| |
| Billing Address |
| [ ] Same as shipping address |
| |
| [Apply Promo Code ▼] |
| |
| +--------------------------------------------+ |
| | Order Summary | |
| | Subtotal: $XX.XX | |
| | Shipping: $X.XX | |
| | Tax: $X.XX | |
| | ---------------------------------------- | |
| | Total: $XX.XX | |
| +--------------------------------------------+ |
| |
| [< Back to Shipping] [Continue to Review >] |
+--------------------------------------------------+
セキュリティと信頼性を示す要素：
- SSL バッジ／ロックアイコン
- 利用可能な支払い方法を表示
- セキュリティに関する説明／保証
- 支払い情報を保存するオプション（ログイン時）
例 12：FAQ／ヘルプセンター
レイアウト：
+--------------------------------------------------+
| Logo Products Resources Support [Sign In] |
+--------------------------------------------------+
| |
| How can we help you? |
| [Search for help topics... ] [Search] |
| |
| Popular Topics |
| +-------------+ +-------------+ +-------------+|
| | [Icon] | | [Icon] | | [Icon] ||
| | Getting | | Billing & | | Technical ||
| | Started | | Account | | Support ||
| +-------------+ +-------------+ +-------------+|
| |
| Frequently Asked Questions |
| |
| [▼] How do I reset my password? |
| To reset your password, click on... |
| |
| [>] How do I update my billing information? |
| |
| [>] What payment methods do you accept? |
| |
| [>] How do I cancel my subscription? |
| |
| [>] How do I contact customer support? |
| |
| [Browse All Articles] |
| |
| Still need help? |
| [Contact Support] or [Community Forum] |
+--------------------------------------------------+
インタラクティブ要素：
- 検索：関連する記事を自動提案
- カテゴリーカード：絞り込み表示へのリンク
- FAQ アコーディオン：回答を展開／折りたたみ
- 関連記事：FAQ の閲覧後に表示
- 役立ち度の投票：「役に立ちましたか？ はい／いいえ」
例 13：アクション付きデータテーブル
複雑なテーブルインターフェース：
+--------------------------------------------------+
| [+ New Item] [Search: _____] [Filter▼]|
+--------------------------------------------------+
| [ ] | Name | Status | Date | Actions |
+--------------------------------------------------+
| [✓] | Item Alpha | Active | 01/15/24 | [•••] |
| [ ] | Item Beta | Pending | 01/16/24 | [•••] |
| [✓] | Item Gamma | Active | 01/17/24 | [•••] |
| [ ] | Item Delta | Inactive| 01/18/24 | [•••] |
| [ ] | Item Echo | Active | 01/19/24 | [•••] |
+--------------------------------------------------+
| Bulk Actions: [Delete] [Export] [Change Status] |
| |
| Showing 5 of 127 items [< 1 2 3 4 5 >] |
+--------------------------------------------------+
注釈：
- チェックボックス：一括操作のための複数選択
- 列見出し：クリックして並べ替え
- ステータス：色分けされたバッジ
- アクションメニュー：編集、複製、削除、詳細を表示
- 検索：テーブルをリアルタイムで絞り込み
- フィルター：複数の条件を指定できるドロップダウン
- ページネーション：標準的なページ操作
レスポンシブ対応の方針：
- デスクトップ：テーブル全体を表示
- タブレット：横スクロール、または重要度の低い列を非表示
- モバイル：重要な情報を含むカード形式のビュー
例 14：モーダルダイアログ
確認モーダル：
+------------------------------+
| [X]|
| Delete Item? |
| |
| Are you sure you want to |
| delete "Item Name"? This |
| action cannot be undone. |
| |
| [Cancel] [Delete] |
+------------------------------+
フォームモーダル：
+------------------------------+
| Add New Item [X]|
+------------------------------+
| |
| Item Name |
| [_______________________] |
| |
| Category |
| [Select category ▼] |
| |
| Description |
| [_______________________] |
| [_______________________] |
| [_______________________] |
| |
| [ ] Mark as featured |
| |
| [Cancel] [Add Item] |
+------------------------------+
モーダルのベストプラクティス：
- オーバーレイ／背景幕を使って注意を引き付けます
- 明確な閉じる方法を用意します（X ボタン、キャンセル、外側をクリック）
- アクションボタンを論理的な位置に配置します
- キーボード操作に対応します（ESC で閉じる、Tab で移動）
- フォーカストラップを設けます（フォーカスをモーダル内に維持）
- モーダルの中にモーダルを表示するのは避けます
例 15：モバイルナビゲーションのパターン
ハンバーガーメニュー：
+-------------------+
| [☰] Logo [🔍] |
+-------------------+
| |
| Main Content |
| |
+-------------------+
[Menu Open State]
+-------------------+
| [✕] Menu |
+-------------------+
| Home |
| Products |
| About |
| Contact |
| Account |
+-------------------+
タブバーナビゲーション（下部）：
+-------------------+
| |
| Content Area |
| |
+-------------------+
| [🏠] [🔍] [+] |
| Home Search Add |
| |
| [♥] [👤] |
| Saved Profile |
+-------------------+
タブバーのベストプラクティス：
- 主な移動先は 3～5 個にします
- アイコンとラベルを組み合わせて分かりやすくします
- 選択中の状態を明確に示します
- 主なアクションを隠さないようにします
- 画面下部に固定します
まとめ
ワイヤーフレーム作成は、UX デザインプロセスにおける重要なスキルです。アイデアをすばやく検討し、最小限の投資でコンセプトを検証し、関係者間の明確なコミュニケーションを促進するとともに、ビジュアルデザインと開発の確かな基盤を築けます。
重要なポイント：
- デザインプロセスの段階に合わせて忠実度を調整します
- 見た目よりも構造と機能に重点を置きます
- フィードバックとテストに基づいて反復します
- ニーズとチームに適したツールを使用します
- インタラクションと仕様を明確に記録します
- 最初からアクセシビリティを考慮します
- プロセス全体を通して関係者とユーザーを巻き込みます
ワイヤーフレーム作成の手法を習得し、ベストプラクティスに従うことで、より効果的なデザインを作成し、コストのかかる修正を減らして、より優れたユーザー体験を提供できます。
コメント
Markdown 対応