WF / ワイヤーフレーム

Web サイトや LP(縦長の集客特化ページ)のレイアウトを、配色や写真などの装飾を一切入れずに「白黒の線と箱」だけで描いた骨組み(設計図)のこと。略して「WF」。要素の配置・優先順位・サイズ感・ボタンの遷移先などを明示し、情報設計とデザイン作業の橋渡しをする。ツールは Figma、Adobe XD、PowerPoint、手描きスケッチなど何でも構わないが、制作業者と URL 等で簡単に共有できる形であることが必須。

最大の特徴：「WF こそ制作の心臓部」であり、ここでの決定は絶対である

現場で絶対に押さえておくべき鉄則は、サイトの情報構造や動線が決まるのはこの WF の段階だということ。WF を承認した後に、配色やフォントを足したデザインカンプ(完成見本)が出てきてから「やっぱりこのブロックを一番上に持ってきて」と大幅な修正を出すのは、Web 制作における最大のタブー(手戻りコストが甚大になる)。WF の白黒の状態で、「情報が上部に詰め込まれすぎていないか」「ユーザーの動線が詰まっていないか」を担当者が血眼になって判断し、確定させなければならない。

運用の要点：担当者がチェックすべき「5 つの視点」

WF が出てきたら、以下の視点で厳しくチェックする。さらに、承認した際の「判断理由(なぜこの配置にしたか)」を議事録として 1 枚残しておくと、後で社内から「なんでこうしたんだっけ?」と蒸し返されるのを防げる。

• 主要な CV(コンバージョン)(購入やお問い合わせ)へのボタンが、ファーストビュー(画面を開いて最初に目に入る領域)に配置されているか。
• 情報の優先順位が、ブロックの「サイズ・位置・余白」の大きさで正しく表現されているか。
• ゴールデンルート(ユーザーが最もスムーズに購入に至る理想の道筋)に沿って視線が誘導されているか。
• スマホ用の WF が、PC 用とは「別」に設計されているか。
• 競合他社と全く同じような配置になって埋もれていないか。

現場でよくある「落とし穴」

WF を軽視する発注者は、デザイン段階で必ず修羅場を迎える。

• 「色がないと分からない」という悪魔の言葉：担当者が白黒の WF を適当に眺め、「色や写真がないとイメージが湧かないから、とりあえずデザイン(カンプ)を作ってよ」と業者に指示を出す(あるいは WF を飛ばしていきなりデザインを出させる)。悲惨な末路として、デザインが出来上がってから「やっぱり構成を変えたい」と言い出し、デザイナーが数日かけてピクセル単位で調整した余白や背景グラフィックが全て水の泡になる。結果、業者から多額の追加費用を請求されたり、スケジュールが完全に崩壊したりする。
• 「PC の縦並び」をスマホ版と呼ぶ手抜き：スマホ版の WF が、単に PC 版の横並び要素を「縦に積んだだけ」の手抜き設計になっている。結果、スマホ(レスポンシブ)で見た時に延々とスクロールさせられたり、親指でボタンが押せなかったり(タップ領域)と、ユーザー体験が最悪なサイトが完成する。
• 「ペルソナ(ターゲット顧客像)」不在の承認：「なんとなくスッキリしていて綺麗だから」という個人の好みだけで承認してしまう(本来はターゲット顧客が使いやすいかどうかが全て。ペルソナ基準で判断する)。