WF → デザインカンプ → コーディング — WF 段階こそ心臓部

Web 制作には決まった順番があります。 WF(ワイヤーフレーム)→ デザインカンプ → コーディング。 この順番を崩すと、手戻りが起きやすくなります。 本書は特に WF 段階 に最大限の力を割くことをおすすめします。 ここを丁寧にやっておくと、その後の工程がぐっとスムーズに進むからです。

1. 3 つのフェーズを整理する

1-1. WF(ワイヤーフレーム)

WF は 中身と動線の設計図 です。 白黒の枠線だけで、色やデザインは入っていません。 どこに何を置くか、どんな順序で読ませるか、CV までどう導くか — これらを設計する段階です。

1-2. デザインカンプ

カンプは、WF に 色・写真・フォント を乗せた完成イメージです。 実装の前段階で、ほぼ見た目通りの絵を作って合意するためのものです。

1-3. コーディング

コーディングは、HTML / CSS / JS で実装する作業です。 カンプを実際に動くページに落とす段階で、ここに入るとデザイン変更のコストが急上昇します。

1-4. 順番が崩れると手戻りが起きやすい

カンプから WF に戻る、コーディングから WF に戻る — こうした手戻りは、コスト・期間・信頼のいずれにも響いてきます。 特にコーディングからの手戻りは、最もコストが大きくなります。 フェーズを進めたら戻らずに済むよう、最初に覚悟を決めておくと安心です。

1-5. 本書の前提と、当てはまらない例外ケース

本書は 中小企業の Web 制作標準ケース を前提に、「WF → デザイン → コーディング」の段階的進行を主軸として扱います。 この前提が当てはまらない例外ケースもあるので、最初に押さえておきます。

• 探索的に進める案件：企画自体が固まっていない、PoC、新規事業の初動 — WF を完全に詰める前に複数案を作って検証する進め方が必要
• ブランド表現が先の案件：リブランディング、採用ブランディング、周年事業など、ブランド方向性(デザイン的な印象)が先に論点化する案件 — デザインコンセプトを先に作ってから WF に落とす流れ
• プロトタイプ検証案件：Web サービス・SaaS など、ユーザーテストで反応を見ながら調整 — WF / デザイン / コーディングが反復で進む(アジャイル / プロトタイピング)

これらは 本書のスコープ外 になります。 専門家・業者と相談しながら進めるのがよいでしょう。 自社の案件が標準ケースか例外ケースかをまず見極め、標準ケースなら本書の「WF → デザイン → コーディング」、例外ケースなら別フローに乗せます。 判断レイヤー(Lesson 1-1 H2-4-4)で言えば、標準ケースは判断レイヤー 1〜2、例外ケースは判断レイヤー 2〜3 です。

2. WF で「伝えたいこと / 動線」を詰め切る

2-1. WF 段階を端折ると、デザインで議論がぐらぐらになる

WF を端折ってカンプから始めると、デザインに入った途端「見た目」の議論になります。 「ここの色は」「フォントは」「写真は」 — そうやって見た目に頭が引っ張られると、中身が見えなくなります。 「そもそもこのセクションは何を伝えるためにあるのか」が議論から消えるのです。

2-2. WF で固めるべき 5 つ

WF 段階で固めるべき要素は、次の 5 つです。

• 必要な情報がすべて揃っているか
• 主要動線(ゴールデンルート / Lesson 2-5)が明確か
• 各セクションの目的が言える
• 上下関係(優先順)が決まっている
• 不要なものは削除されている

2-3. 「WF が薄い」業者は要注意

いきなりデザインカンプから始める業者、WF を出さずに進めようとする業者には注意したいところです。 後で認識のズレが表面化しやすいからです。 Lesson 3-1 で扱った業者選びの軸に「WF を丁寧に作る業者か」も加えておくと安心です。

3. WF を見るときのチェックポイント

3-1. スマホファーストならスマホ WF を確認

Lesson 1-6 と連動します。 スマホファースト前提の案件なら、スマホ WF を必ず確認しておきましょう。 PC WF だけ見て「OK」とせず、スマホ WF にも目を通します。 PC で問題なくても、スマホで破綻しているケースはとても多いからです。

3-2. 掲載すべき情報が取り揃っているか

Lesson 2-5「情報が先」と連動します。 企画段階で整理した情報リストと、WF の中身が一致しているかを確認します。 抜けがあれば、その箇所を WF に追加してもらいましょう。

3-3. ページ内ストーリーが破綻していないか

WF を上から下へ順に読んでみて、自然な流れになっているかを確認します。 論理が飛んでいないか、唐突に話題が変わっていないか、結論への流れがスムーズか。 違和感のある箇所は、遠慮なく指摘していきましょう。

3-4. 言いたいことを無理に上部に上げ過ぎていないか

本書独自の警告です。 「重要なことは上に置く」を信じすぎて、ファーストビューに大量の情報を詰め込むサイトが多いです。 でも、ファーストビュー詰め込み はユーザーを疲れさせて、結果として離脱を招きます。 重要なことを伝えるためには、適切な余白と段階的な情報開示が必要です。

3-5. 「下に置いて読まれない」と「上に詰めて読まれない」、どちらも NG

両極端のどちらに転んでも、読まれません。 下に置きすぎると到達しない、上に詰めすぎると疲れて離脱。 バランスを取って、ユーザーが自然に読み進められる流れを作ります。

3-6. 読まれるためには「間」が必要

余白、段落、休符 — 音楽で言えば「間」にあたるものが、Web ページにも必要です。 詰め込まれた文章は読まれにくく、かといって空っぽすぎても伝わりません。 「読ませる」ための余白は、業者の提案する WF でも前向きに受け入れたいところです。

4. デザインカンプを見るときのチェック — 印象と CV 動線の両方

4-1. 印象軸(Lesson 4-1 連動)

カンプで印象軸を確認するポイントは、次の 3 つです。

• ターゲットに与えたい印象と一致しているか
• 色・フォント・写真・余白がトーンとして揃っているか
• ブランドトーンと矛盾していないか

4-2. CV 動線軸(Lesson 4-1 連動)

印象だけでは足りません。 CV 動線も同じだけ重みをかけて確認します。

• CV ボタン・リンクが見つけやすい
• スマホで指でタップしやすい(Lesson 1-6)
• ゴールデンルート(Lesson 2-5)が自然に通る

4-3. 両方が揃って初めて「OK」

印象だけ、CV 動線だけ、どちらも片手落ちです。 Lesson 4-1 で定義した「印象 × 行動」の両輪を、ここで実装レベルで確認します。

4-4. 見るときの優先順

確認するときは、スマホカンプ → PC カンプ の順で見るのがおすすめです。 スマホファースト原則を、レビュー時にも貫きます。 PC からチェックすると、スマホで問題があっても見落としがちだからです。

4-5. カンプを実機サイズで見る

縮小プレビューで全体を眺めるだけでは判断しきれません。 実機サイズ でカンプを開いて、実際にユーザーになりきって動線を辿ってみましょう。 机上で良くても、実機で使えないカンプは現場でよく見かけます。

5. コーディング段階で担当者がすること

5-1. コーディングに入ると修正コストが急上昇

WF・カンプで決まったことが、ここで実装で固まります。 この段階で大きな変更を出すと、コストが急に高くなります。 細かな修正はあり得ますが、方向性を変える話は WF / カンプ段階で済ませておきましょう。

5-2. コーディング後の確認

実装後は、次の項目を確認します。

• 実機表示(iOS / Android)— Lesson 1-6 / 4-4 連動
• 表示速度(Core Web Vitals)
• フォーム動作(送信・バリデーション・サンクスページ)

5-3. テスト環境(ステージング)で確認

本番公開前に、必ずステージング環境で確認します。 本番でしか出ない問題もありますが、まずはステージングで潰せるものを潰します。

5-4. 業者から提出される確認資料

業者からは、次の確認資料を受け取っておきましょう。

• 表示確認結果(スクリーンショット + 機種・OS バージョン)
• ブラウザ別チェック(Chrome / Safari / Firefox / Edge)
• 表示速度測定(Core Web Vitals の数値)

6. 各フェーズで避けたいこと

6-1. WF 段階

デザイン議論をする。 まだ早いです。 色・フォント・写真の話に頭が引っ張られると、WF の本質(中身と動線)が見えなくなります。

6-2. カンプ段階

大幅な動線変更を要求する。 WF に戻ることになり、コストが大きくなります。 動線の話は、WF 段階で決め切っておきましょう。

6-3. コーディング段階

デザインの大幅変更を要求する。 カンプに戻ることになり、最高コストです。 ここに入ったら、デザインは固まっている前提です。

6-4. 手戻りはコスト・期間・信頼すべてに影響

どのフェーズでも、手戻りは関係者全員のコスト・期間・信頼に悪影響を与えます。 最初の段階で丁寧に詰めるのが、結果として最も低コストです。

7. 業者が「フェーズ飛ばし」してきたら要注意

• WF を出さずにいきなりカンプ
• カンプを出さずにいきなりコーディング

これらは安く速く見えますが、後で認識のズレが表面化しやすくなります。 フェーズを飛ばすと、合意形成の場がなくなり、認識ズレが残ったまま実装に進んでしまうからです。 業者の提案でフェーズ飛ばしがあれば、内容を確認し、必要なら追加してもらいましょう。

WF → カンプ → コーディングという順番と、各フェーズの見どころを一度つかんでおけば、制作の流れに迷わず立ち会えます。 すべてを完璧にチェックしようと気負う必要はありません。 まずは「WF 段階で中身と動線を詰め切る」という一点を意識するだけでも、その後の工程はぐっと安定します。 フェーズが進むごとに少しずつ目が利くようになっていきますので、焦らず一歩ずつ進めていきましょう。