ワイヤーフレームからコーディングまで — 心臓部はワイヤーフレーム段階

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

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

WF(ワイヤーフレーム)

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

デザインカンプ

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

コーディング

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

順番が崩れると手戻りが起きやすい

カンプから WF に戻る、コーディングから WF に戻る — こうした手戻りは、コスト・期間・信頼のいずれにも響いてきます。 特にコーディングからの手戻りは、最もコストが大きくなります。 フェーズを進めたら戻らずに済むよう、WF の承認前に「必要な情報」「CV までの流れ」「各セクションの目的」を関係者で確認しておきましょう。

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

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

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

これらは 本書のスコープ外 になります。 自社の案件が標準ケースか例外ケースかをまず見極め、標準ケースなら本書の「WF → デザイン → コーディング」で進めます。 例外ケースにあたる場合は、第1章 Lesson 1 で紹介した「専門家と擦り合わせて判断する」領域だと捉えて、業者と相談しながら進め方を決めるのがよいでしょう。

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

WF 段階を端折ると、議論が「見た目」に流される

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

WF で固めるべき 5 つ

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

• 必要な情報がすべて揃っているか
• 主要な動線(第2章 Lesson 5 のゴールデンルート)が明確か
• 各セクションの目的をひとことで言えるか
• 情報の優先順位(上下関係)が決まっているか
• 不要なものが削られているか

「WF が薄い」業者は要注意

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

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

スマホファーストならスマホ WF を確認

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

掲載すべき情報が揃っているか

第2章 Lesson 5 で「ページより情報が先」と整理したことを思い出してください。 企画段階で作った情報リストと、WF の中身が一致しているかを突き合わせます。 抜けがあれば、その箇所を WF に追加してもらいましょう。

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

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

上部詰め込みと余白のバランスを見る

ここは特に注意したい点です。「重要なことは上に置く」を信じすぎて、ファーストビュー(最初に見える範囲)に情報を詰め込むと、ユーザーは疲れて離脱します。かといって下げすぎると、そこまで読まれません。上でも下でも「詰めすぎ」は読まれない、と覚えておきましょう。 見るときの判断基準は次の 3 つです。

• ファーストビューに入れるのは 「誰向けか・何ができるか・次に押すボタン」の 3 点まで に絞れているか
• 重要な情報を下げるなら、上部に導入文やリンクを置いて 到達できる ようにしてあるか
• 1 セクション 1 テーマになっていて、余白(間)で読みやすく区切られているか

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

印象の軸 — 与えたい印象になっているか

第4章 Lesson 1 の「印象」を、カンプで確認する番です。ポイントは次の 3 つです。

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

CV 動線の軸 — 迷わず行動に進めるか

印象だけでは足りません。 「行動」につながる CV 動線にも、同じだけ重みをかけて確認します。

• CV ボタンやリンクが見つけやすいか
• スマホの指で押しやすいか
• ゴールデンルートが自然に通っているか

両方が揃って初めて「OK」

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

見るときの優先順

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

カンプを実機サイズで見る

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

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

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

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

コーディング後の確認

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

• 実機での表示(iOS / Android。確認の観点は 第4章 Lesson 4 のチェックリストが使えます)
• 表示速度(Core Web Vitals＝Google が見る、表示速度・操作性の指標)
• フォームの動作(送信・入力チェック・完了ページへの遷移)

テスト環境(ステージング)で確認

本番公開前に、必ずステージング環境(本番と同じ作りのテスト用ページ)で確認します。おおまかな流れはこうです。 ステージング URL を受け取る → スマホで主要ページを見る → フォーム送信を試す → 表示速度の資料を確認する → 直したい点を一覧にして業者へ渡す。 本番でしか出ない問題もありますが、まずはステージングで潰せるものを潰します。

業者から提出される確認資料

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

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

6. フェーズ別・避けたいこと早見表

どのフェーズでも、手戻りはコスト・期間・信頼のすべてに響きます。最初の段階で丁寧に詰めるのが、結果として最も低コストです。

7. 「フェーズ飛ばし」を業者に確認する質問

WF を出さずにいきなりカンプ、カンプを出さずにいきなりコーディング——こうした「フェーズ飛ばし」は安く速く見えますが、合意形成の場がなくなり、認識のズレが残ったまま実装に進みがちです。 提案でフェーズが省かれていたら、頭ごなしに断らず、次のように確認しましょう。

• 「WF(中身と動線の設計図)は、どの段階で共有してもらえますか?」
• 「デザインに入る前に、情報と動線を確認する場はありますか?」
• 「フェーズを省く理由と、認識ズレを防ぐ工夫を教えてください」

答え方そのものにも、業者の進め方の丁寧さが表れます。

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