制作の裏側 | How to Webデザイナー（メイキング特典）

ワイヤーフレームとは？

建築に例えると、ワイヤーフレームは「間取り図」にあたる。家を建てる前に「リビングはどこか」「扉はどちらに開くか」を決めるように、 Webサイトを作る前に「何をどこに置くか」「どんな目的を持たせるか」を設計する工程です。

この段階では、色・写真・装飾はまだ関係ありません。大事なのは「構造」と「情報の流れ」です。

ただし、このサイトのワイヤーフレームは少し特殊です。通常のグレーボックス型ではなく、最終的なデザイン（色・フォント）を当てた「高品質プロトタイプ型ワイヤーフレーム」として作られています。見た目はほぼ本番版と同じだが、「設計者から実装者へのメモ」が随所に残っています。

このサイトのワイヤーフレームの読み方

次の2つに注目しながら各ページを開くと、本番版との違いが掴みやすい。

要素1：黄色い注釈ボックス（.wf-note）

【実装注釈の例】 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) で自動折返し。 PC：3〜4列／タブレット：2列／スマホ：1列に自動で変わります。各カードは <a> タグでリンク。

この黄色いボックスが「.wf-note（ワイヤーフレーム注釈）」。実装を担当するコーダーに向けた、設計者からのメモ書きだ。「ここはアコーディオンUIにしてほしい」「スマホでは1カラムにすること」「このテキストは仮。本番では差し替え」—— コーダーが迷わないよう、判断に必要な情報を書き込んでいます。

本番サイトではすべて削除されています。ワイヤーフレーム版でのみ見ることができます。

要素2：黒帯（.page-meta）

How to Webデザイナー

PAGE 02 / page02_workflow.html Phase 2 ワイヤーフレーム

ページ最上部の黒帯が「.page-meta（開発管理バー）」。「今どのページを見ているか」「どのフェーズの作業か」を管理するための開発用ラベルだ。複数のファイルを並行して作るとき、混在を防ぐための目印になります。こちらも本番サイトでは削除されています。

制作プロセス全体図

STEP 1

設計（Claude Code）

要件定義・サイト構成案・デザイン仕様・コンテンツ定義・実装計画書の作成

→ site_structure.md / implementation_plan.md

STEP 2

ワイヤーフレーム実装（Cursor）

実装計画書を読み、HTML/CSSでワイヤーフレームを生成

→ wireframe/*.html（このフォルダ）

STEP 3

レビュー（Claude Code）

実装の品質確認・問題点の指摘・修正指示の作成

→ implementation_plan.md への修正追記

STEP 4

本番化（Cursor）

.wf-note・.page-meta の削除、実コンテンツ差し替え、新規セクション追加

→ webdesigner_guide/*.html（本番版）

STEP 5

デプロイ（Antigravity）

Cloudflare Pages への公開

→ 公開URL

PC では横並び、スマホでは縦積みに自動切り替え。矢印の向きも連動して変わります。

本番版との比較ポイント3選

① ヒーローのCTAボタンが消えた

ワイヤー版: ヒーロー直下に「Page 01を読む」ボタンがあった
本番版: ボタンを廃止し「↓ まずはこのサイトについて」スクロール誘導に変更
なぜ？: CTAボタンがあると真面目な人がそこで飛んでしまい、下部コンテンツ（このサイトについて・7カード）を読まずに終わる問題があった

② 「このサイトについて」が後から生まれた

ワイヤー版: このセクションは存在しない
本番版: ヒーロー直後に「こんな人のために」「なぜ作ったか」「読み終えたら」の3ブロックを追加
なぜ？: ターゲットと目的が最初に伝わらないと、読者が「自分向けかどうか」判断できないため

③ 注釈がどう実装に反映されたか

例: 「アコーディオンUI → CSS <details>で実装可」という注釈
本番版で: 実際にどう実装されたかを、ワイヤー版と見比べてみよう

では、実際のワイヤーフレームを見てみよう。
黄色い注釈と黒帯に注目しながら、本番版と見比べてほしい。

ワイヤーフレーム版 index.html を開く

page01〜page07 はヘッダーナビから移動できます

このサイトは、どのように作られたのか。