構造とワイヤーフレーム
なぜ： コンテンツはデザインに先立つ。見た目を決める前に、何をどこに配置するかを決定する。プレーンなグレーのワイヤーフレームは構造に対する批判を促す。完成されたように見えると、人々は色だけにコメントする。良好な結果を生み出すAIサイトビルダー（Relume、Google Stitch）も、同じ理由でサイトマップ→ワイヤーフレーム→スタイルの順序を踏む。
必要なもの： 01-facts/facts.md、01-facts/inventory.md（リデザイン時）、02-personas/personas.md、03-brand/brand.md。
生成物： 04-structure/sitemap.md（ページツリー、ナビゲーション、URLルール、リダイレクト、メッセージ順序）、04-structure/wireframes/r<round>/*.html。
このステップには、それぞれレビューを含む2つのパートがある。構造とワイヤーフレームは1ラウンドでは扱いきれないためである。パート1でページツリーを確定し、パート2でワイヤーフレームを提示する。
1. ページツリー
古いサイトや組織図ではなく、ペルソナの質問から始める。各ページは、1つの主要ペルソナの1つの主要な質問に答える。
sitemap.mdに、各ページについて以下を記述する：URL、タイトル、主要な質問、プライマリペルソナ、プライマリアクション、ステータス（公開 / 後日）。次に：
- ナビゲーション： トップレベルの項目（5～7を目指す）、フッターに配置するもの、メガメニューが必要かどうか。
- URLルール： 言語プレフィックス、末尾スラッシュの有無、小文字、単語ベース（ID不使用）。
- リダイレクト： インベントリでマークされたすべてのページについて、旧URL → 新URL。
- 公開スコープ： プライマリペルソナの質問に答える最小限のページセット。空のセクション（「ブログ – 近日公開」など）は含めない。
提供内容が許す限り小さく保つ。すべてのページは、執筆、デザイン、メンテナンスが必要となる。
レビュー、パート1（review/04-structure-r1.html）：ページツリー、ナビゲーション、URLルール、リダイレクト、公開スコープ。停止： 決定が下されるまでワイヤーフレーム作成を待つ。
2. 主要ページごとのメッセージ順序
sitemap.mdに、ページごとに1ブロックずつ記述する。ホームページと各ページタイプ（製品、価格、概要、お問い合わせ、記事など）について、セクションを上から下にリストする。各セクションについて：その時点での訪問者の質問、1行での回答、facts.mdからの証拠、そして次のセクションにつながる要素。最初の画面では、約束とプライマリアクションを示す。
3. ワイヤーフレーム
主要なページタイプごとに1つのHTMLワイヤーフレームを構築する。モバイルファーストで、デスクトップ幅でも確認する。最初のワイヤーフレームラウンドでは、最大4つ（ホームページと最も重要な3つのページタイプ）を表示する。他のタイプは次のラウンドで追加する。各ラウンドは固有のフォルダ（wireframes/r2/など）に保存し、1つのスタイルシートを共有する。
- グレーのみ、単一のシステムフォント、画像には×印のボックス、ブランドカラーなし、アイコンセットなし、シャドウなし。
- 実際のドラフトコピーを
brand.mdとfacts.mdから使用し、決してダミーテキストは使わない。見出しはまだラフでもよく、draftとマークする。 - 実際の長さ：リストに12項目ある場合は12項目を表示する。
- 各セクションに、そのセクションが答える質問を、セクションの上に小さなグレーのテキストでラベル付けする。
- 各ワイヤーフレームを390pxと1440pxでレンダリングして確認してから提示する。
レビュー、パート2
メッセージ順序とワイヤーフレームを、モバイルとデスクトップのスクリーンショットを並べて表示する（各々をHTMLファイルにリンク）。典型的な決定事項：ページごとのセクション順序、不足または冗長なページタイプ、最初の画面に含めるべき内容。
完了条件： ページツリー、ナビゲーション、URLルール、リダイレクト、主要ページのセクション順序が決定された時点。コピーはステップ8で洗練され、レイアウトの詳細はステップ9で変更される可能性がある。