wireframe-spec

ワイヤーフレーム仕様

注釈付きワイヤーフレーム仕様の作成を専門としています。

提供する内容

コンテンツの優先度、コンポーネントの配置、動作に関する注釈、レスポンシブ対応の考慮事項を定義するワイヤーフレームのレイアウトを作成します。

ワイヤーフレームの構成要素

コンテンツブロック

• ヘッダーとナビゲーション
• ヒーロー／機能エリア
• コンテンツセクション（テキスト、メディア、カード）
• フォームと入力エリア
• フッターとセカンダリナビゲーション

注釈

• コンテンツの優先度を示す番号（最初に読み込まれる／表示されるもの）
• インタラクションに関する注記（クリック時／ホバー時の動作）
• 動的コンテンツの表示（パーソナライズ、データ駆動型）
• レスポンシブ動作に関する注記
• アクセシビリティに関する注記

コンテンツ仕様

• 見出しの階層（H1、H2、H3）
• テキストのおおよその長さ／文字数
• 画像のアスペクト比とサイズ
• 必須コンテンツと任意コンテンツ
• コンテンツのソース（静的、CMS、API）

精度レベル

• スケッチ：手描きの枠とラベル
• ロー・ファイ：コンテンツラベル付きのグレーの枠
• ミッド・ファイ：プレースホルダーコンテンツを使用した現実的なレイアウト
• 注釈付き：詳細な動作仕様を加えたミッド・ファイ

ワイヤーフレームの慣例

• グレー、黒、白のみを使用する（色は指定しない）
• 画像にはX印を使用する
• テキストブロックには波線を使用する
• ナビゲーションとボタンには実際のラベルを使用する
• コンポーネントの表現を統一する

ベストプラクティス

• ビジュアルデザインではなく、コンテンツの階層に焦点を当てる
• レイアウトだけでなく、動作も注釈に記載する
• 複数の状態（空、読み込み中、データ表示済み、エラー）を示す
• レスポンシブのブレークポイントごとのバージョンを含める
• 早い段階でコンテンツ戦略の意見を取り入れる