html-wireframe

HTML ワイヤーフレーム

プロダクトに関する質問を、確認、変更、検討がしやすい低忠実度の HTML 成果物にします。ワイヤーフレームは、画面に何を含めるか、タスクをどのように進めるかをレビュー担当者が判断するのに役立つものである必要があります。完成品のように見せてはいけません。

レビューの問いを明確にする

レイアウトを決める前に、会話、提供された概要、関連するプロジェクト資料を確認します。プロジェクトで使われている用語、コンテンツモデル、既知のプロダクト上の制約を再利用します。

優先順位は次のとおりです。

1. ユーザーの明示的な指示と、合意済みの決定。
2. プロダクトの既存の構造と用語。
3. モデル化するユーザー、タスク、コンテンツ。
4. 独自のレイアウト判断。

コーディングの前に、次の点を明確にします。

• ユーザーと、完了する必要のある作業。
• レビュー対象の画面または限定されたフロー。
• 成果物に含める必要のある情報とアクション。
• 安全に置ける前提。
• ワイヤーフレームで答えを導きたい構造上の問い。

実際に使うラベルと、内容を把握できる例を使います。低忠実度だからといって、文言がレイアウトに影響する箇所で、意味のないボックスやダミーテキストを使ってよいわけではありません。

スタイルより先に構造を検討する

design-artifact が利用できる場合は、分野に応じた構成と階層のガイダンスを確認します。編集物のような仕上がりは持ち込まないでください。このスキルの低忠実度に関する要件が引き続き優先されます。

レイアウトがまだ固まっていない場合は、意味のある違いを持つ案を2つか3つ作成します。次のようなプロダクト上の判断を変えてください。

• ナビゲーションの方式。
• グループ分けと順序。
• 主なアクションの配置。
• コンテンツの密度。
• 概要表示とステップごとのフロー。
• デスクトップからモバイルへの再配置。

色の変更やカードの小さな配置換えを、別の案として扱わないでください。各案に短い説明的な名前と、トレードオフを述べる1文を付けます。

実用的であれば、複数の案を1つの HTML ファイルにまとめます。レビュー担当者が複数のファイルを開かずに比較できるよう、キーボードで操作できるシンプルなセレクターを使います。どの案でも、中心となるコンテンツとタスクは同じにします。ユーザーがすでに構造を選んでいる場合は、その案だけを作成します。

意図的に未完成の状態にする

• 控えめなグレースケールの配色、システムフォント、飾り気のない境界線、シンプルなブロックを使います。
• ブランドカラー、グラデーション、シャドウ、イラスト、装飾的な画像、仕上げ込まれたコンポーネントのスタイルは避けます。
• 角丸と余白は控えめにします。階層を判断できる程度に整理しつつ、ブランドレビューを促すほど仕上げないでください。
• アセットが構造上の判断を左右しない限り、画像やリッチメディアはラベル付きのプレースホルダーで表示します。
• 前提、未解決の問い、または直接表現できない動作を明らかにする場合に限り、注釈を追加します。

ワイヤーフレームの構成自体は整っていてもかまいません。意図的に未完成にすることは、余白の不統一、読みにくい文字、レスポンシブ表示の不具合とは異なります。

役立つ動作だけを追加する

ナビゲーション、開示表示、短いタスクフローのテストに役立つ場合は、基本的なクリック操作を実装します。即時に反応する、簡素な動作にしてください。

• レビュー対象となるリンク、タブ、次へ・戻るのアクションは動作させます。
• ネイティブのコントロールを使い、キーボードフォーカスを見えるようにします。
• 複雑なアニメーション、永続化、API のシミュレーション、本番向けの状態管理は実装しません。
• レビュー上の目的がないコントロールは削除するか、対象外であることを明記します。

制作要件

• 必要な CSS と JavaScript をインラインで含む、自己完結型の .html ファイルを1つ納品します。
• ビルドツールや外部サービスを必要としないようにします。
• セマンティックなランドマーク、見出し、リスト、フォーム、ボタンを使用します。
• 横幅の広いデスクトップでも、幅の狭いモバイルでも使いやすいレイアウトにします。
• 意図しない横方向のはみ出しが発生しないようにします。
• 元の資料を尊重します。余白を埋めるために、プロダクトの範囲を勝手に広げないでください。

確認して引き渡す

デスクトップとモバイルの幅で成果物を開きます。読み上げ順序、折り返し、はみ出し、フォーカスの視認性、実装したすべてのクリック経路を確認します。どちらのサイズでも、各方向性が構造的に区別できることを確認します。

絶対ファイルパス、各方向性の名称とトレードオフ、後のモックアップまたはプロトタイプまで意図的に保留したビジュアル上の判断を提示します。

さらに読む

ワイヤーフレーム段階で何を決めるべきかについては、Plannotator のコーディングエージェント向け HTML ワイヤーフレームとプロトタイプをお読みください。