WF / ワイヤーフレーム
よみ: わいやーふれーむ
サイト・LP のレイアウトを、配色や装飾なしで骨組みだけ描いた設計図。略して「WF」。要素の配置・優先順位・サイズ感・遷移先を明示し、情報設計とデザインの橋渡しをする。Figma・Adobe XD・PowerPoint・Sketch・Cacoo・手描きスケッチなど、ツールは何でも良いが、業者と共有できる形であることが必要。
押さえておきたいのは「WF こそ心臓部」という考え方。情報構造・優先順位・動線が決まるのは WF 段階で、配色やフォントを足したデザインカンプ(カンプ / デザインカンプ)段階での大幅修正は手戻りコストが大きい。WF の時点で「上部の詰め込みすぎ」「動線の詰まり」「自社らしさ」を担当者がしっかり判断するのが、後の事故を減らす鉄則。
担当者が見るポイントは、主要 CV 経路がファーストビューから 1 クリック以内か、必須情報の優先順位がサイズ・位置・余白で表現されているか、スマホの WF が PC とは別に作られているか、ゴールデンルートに沿って動線が描かれているか、競合と同じ配置になっていないか。WF 承認時の判断理由を 1 枚残しておくと、後で「なんでこうしたんだっけ」が湧かない。
落とし穴は、WF を業者の社内資料扱いして担当者が真剣に見ない、スマホの WF が PC を縦並びに変えただけで設計されていない、業者がいきなりカンプから入って WF を飛ばす、承認時の議事録がなく後で蒸し返す、ペルソナやゴールデンルートと無関係の WF を「綺麗だから」で承認、WF を作り込みすぎてカンプとの境界が曖昧になる、など。
言葉をよく利用する人
- デザイナー
- ディレクター
- Web 担当者(発注側)
- マーケター
- コーダー / フロントエンドエンジニア
会話上での使用例
業者から WF をスキップしてカンプから提案された場面
-
業者ディレクター
スピード重視でWF を飛ばしてカンプから入りますね
-
Web 担当者
WF こそ心臓部なので、必ず WF フェーズを挟んでください。WF 段階での承認 → カンプ、の順番です。WF レビュー会を 1 回設けたいです
SP の WF が PC の縦並びだけだった場面
-
Web 担当者
SP のWF、PC のセクションを縦にしただけに見えます
-
デザイナー
失礼しました。SP は片手スマホでの操作・タップ範囲・ファーストビューの情報量が PC と別設計が必要です。SP 専用 WF を作り直して再提出します