ワイヤーフレームは、色や写真を作り込む前の画面の配置案です。Webサイト全体のページ関係を示すサイトマップとは違い、一つのページの中へ見出し、説明、画像、リンクなどを置きます。「上に大きい写真」だけでは、何を伝える画面か分かりません。仮でも実際の見出しや説明を入れます。

架空の道具の修理相談ページなら、訪問者は「この道具を相談できるか」「何を用意するか」を先に知りたいでしょう。そこで短い答え、対象と対象外、用意する物、相談後の流れを配置します。販売ページや採用ページでは問いが違うため、同じ枠を使い回すだけでは合いません。

完成デザインは色・文字・画像の外観まで決める案、プロトタイプはクリック後の移動なども試せる模型です。ワイヤーフレームで決まっていない操作を、動く画面だと思わせないよう、リンク先や未作成の状態を注記します。紙でも作れますが、情報と次の移動が分かることが目的です。

この章の根拠：出典1出典2

紙や表計算に、ページへ置く内容を一項目ずつ書きます。架空の修理相談なら「対象になる道具」「受付できない物」「品名と症状」「用意する写真」「相談後の連絡」「次の項目説明ページ」です。担当部署がまだ答えを出せない条件は、確定した文章と分けて「確認中」とします。

見出しだけでなく、入る文章の長さも試します。「対象になる道具」の下へ数行で書けるのか、長い一覧が必要なのかで配置は変わります。写真を置くなら、何の写真でどんな疑問へ答えるのかを記します。装飾用の写真と、傷の写し方を説明する写真は役割が違います。

材料の整理では、情報の出典・最終確認日・確認先も残します。これは画面に全て載せるためではなく、制作中に事実と仮文を取り違えないためです。実在の顧客の写真や連絡先は許可なく共有用の配置案へ入れません。ダミーの例には架空と明記し、本番へ残ったまま公開されないようにします。

この章の根拠：出典2出典1

紙を縦長の画面に見立て、最上部へ案内主体と必要なメニュー、主見出し、短い答えを置きます。次に対象と対象外、準備物、相談後の流れを並べます。訪問者が受付できないと分かる条件を、申込み後の説明へ隠す配置は避けます。本例の順序は編集上の提案で、全ページの固定の正解ではありません。

それぞれの枠へ、実際の見出しと一文の説明を書きます。写真の位置には「全体写真の見本」のように役割を入れ、リンクの位置には名称と移動先を添えます。「ボタン」という文字だけでは何が起こるか分かりません。「相談に必要な項目を見る→項目説明ページ」と書けば、制作担当と確認できます。

狭い画面で読み順が成立したら、広い画面で準備物の三つの見本を横に並べる案などを加えます。共通メニューと主な内容は役割を分けます。W3Cはmainやnavなどの領域を識別する方法を示していますが、配置案を描いただけでそのHTMLが実装されるわけではありません。役割も制作担当へ渡します。

紙で作る場合は、A4用紙に狭い画面の外枠を描き、上から実際の見出しを書きます。横に別紙を置き、同じ材料を広い画面へ並べます。写真の枠には「品名が読める全体写真」のように内容を書くので、素材担当も何を探すか分かります。紙を撮影して共有するときは、裏写りしたメモや個人情報が含まれないか確認します。

この章の根拠：出典1出典2

相談フォームをページ内へ置く場合は、名前や連絡先の入力欄を描くだけで終わりません。どの項目が必須か、写真を受け付けるなら形式や容量をどう伝えるか、入力内容を誰が受け取るかを確認します。確定していない条件には数値を作らず「担当確認」と書きます。

W3CのForm Instructionsは、入力方法、必須と任意、必要な形式を知らせることを説明しています。欄の中へ薄く入れる入力例は、入力すると消えるため、項目名の代わりにはなりません。ワイヤーフレームでも欄の外に「品名」「症状」を書き、入力例は別に付けます。実装時にはラベルと入力欄の対応が必要です。

送信ボタンを押したあと、確認画面へ進むのか、完了画面が出るのか、エラーなら入力を残すのかも記します。本稿の完成見本は別の説明ページへ進むリンクだけで、フォームを送信しません。決まっていない受付の動作を制作担当が推測して作らないよう、操作仕様の未決事項を残します。

この章の根拠：出典3出典1

自分で配置案を見ながら「この道具は相談できるか」「写真は何を撮るか」「次にどのページへ進むか」に答えてみます。情報がない場合は、枠を大きくするより材料を補います。答えが下のほうへ埋もれる場合は読む順序を変えます。確認者へ完成案を説明してから答えてもらうと、見つけにくさを見逃すことがあります。

広い案と狭い案に、同じ情報があるかも比べます。スマホ側で受付条件だけが消えていないか、画像の文字が読めない大きさにならないか、長い見出しを入れる余地があるかを見ます。リンク先がまだなければ「未作成」と記し、完成済みの行き先と区別します。

紙の配置案はクリックの動作、文字拡大、読み上げ、読み込み速度を実測できません。操作を判断するには簡単なプロトタイプや実装での確認が必要です。商品購入や複雑な予約のように分岐の多いページでは、一画面だけの案に加えて画面の移動図も作ります。配置案の作成を、そのままサイト完成の承認にしないでください。

表計算やスライドで作る場合は、新規ファイルへ長方形と文章を置き、修理相談_配置案_v1などの名前で作業場所へ保存します。文字を枠からはみ出させず、PDF等の閲覧用コピーも開いて確かめます。共有リンクを使う場合は、閲覧だけでよい確認者へ編集権限を広げず、原本を複製して次の版を作ります。編集できない人からは「準備物の写真枠へ説明がほしい」のように位置を指定して意見を受けます。

この章の根拠：出典1出典2出典3

完成見本には主見出し、短い答え、受付範囲、準備物、相談後の流れ、次のリンクを入れました。内容の役割と、訪問者が次へ進む条件が分かります。色や写真の好みを決める前に、これで疑問へ答えられるかを確かめます。

制作担当へは配置案だけでなく、仮文と確認済みの文、リンク先、必要な画像、フォームの未決事項を渡します。版名と日付を付け、修正前の案を残すと変更の理由を追えます。共有ファイルへ他者が編集する場合は編集者と閲覧者の権限を確かめ、原本を消す操作は避けます。

記入表を埋めたあと、まず主見出しと短い答えを実際の文章へ置き換えてください。ページの目的自体が未決なら配置を作り込むより、その問いを先に決める必要があります。ワイヤーフレームは目的を作る資料ではなく、決めた問いへの答えを画面へ並べて確かめる資料です。

この章の根拠：出典1出典2出典3