ワイヤーフレームとは|「デザイン前の導線確定工程」の本質と設計の正解

『ワイヤーフレーム』って、ぶっちゃけ何のことか、説明できますか?

株式会社Cameen 西村温裕ことおんゆーです。

Web制作・LP制作・アプリ開発の世界で、ワイヤーフレームは標準工程として組み込まれています。Figma・Sketch・Adobe XD、こういうデザインツールを開けば、まず最初にやることはワイヤーフレーム作成だと教えられます。「ワイヤーフレームから始めましょう」、こういうフレーズが業界の合言葉になっています。

でも、いざ「ワイヤーフレームって具体的に何を決める工程?」「モックアップとどう違う?」「どこまで作り込むの?」と聞かれると、答えに詰まる方が多いんですよね。「だいたいのレイアウト案」という認識で止まって、ワイヤーフレームの本質的な役割まで理解している人は意外と少ない。これ、自分だけだと思ってませんか?

うちの事業ではLP・コーポレートサイト・教材ページ・販売ページを長年運用してきて、ワイヤーフレームを飛ばして直接Figmaで作り始めて大きく手戻りした経験も、ワイヤーフレームに時間を投じて後工程が劇的にスムーズになった経験も、両方しています。その中で見えてきたのは、ワイヤーフレームは単なる「下書き」ではなく、「視覚デザインに進む前に導線と要素配置をステークホルダー全員で合意確定するための設計工程」だということ。線を綺麗に引くことが目的ではなく、合意を取ることが本質です。

もう1つ繰り返し痛感したのは、「ワイヤーフレームをFigmaの中で詳細に作り込もうとして、結局合意形成が遅れて納期が崩れる」という失敗パターン。ワイヤーフレームはローファイ(粗い)状態で議論する方が、本質的な議論ができて手戻りが減ります。綺麗に作り込むほど、参加者が「もう完成形」と錯覚して、本質的な指摘が出にくくなる構造です。

今回はその「今さら聞けないワイヤーフレーム」を、業界一般の知見と、うちの事業でWeb運用してきた現場感覚の両面から、設計工程の構造と判断基準まで深掘りしていきます。読み終わる頃には、自分のプロジェクトでワイヤーフレームをどこまで作り込むべきか、誰と合意を取るべきか、紙に書き出せるレベルになっているはずです。

結論:ワイヤーフレームの核心は「デザインカンプ前の素描」ではなく「視覚デザイン前の導線確定工程」

ワイヤーフレームの本当の正体は、「視覚デザイン(色・写真・装飾)に進む前に、ページの要素配置・優先度ヒエラルキー・導線の流れ・インタラクション仮定・レスポンシブ前提をステークホルダー全員で合意確定する設計工程」のことです。線を引くこと自体は手段で、合意形成が目的です。

業界の体感として、ワイヤーフレームを丁寧にやるプロジェクトと、いきなりFigmaでカンプを作り始めるプロジェクトでは、後工程の手戻り発生率が3〜5倍違います。ワイヤーフレーム段階の30分議論が、デザインカンプ段階での30時間の手戻りを防ぐ、これがWeb制作現場のリアルです。

ワイヤーフレームには「ローファイ(low-fidelity)」「ミディアムファイ(medium-fidelity)」「ハイファイ(high-fidelity)」の3段階があります。ローファイは手書き・紙ベースの粗い線画、ミディアムはFigmaなどで作るグレースケールの構造図、ハイファイは色・写真は載せないがレイアウト精度が高い完成形に近い状態。プロジェクト段階に応じて使い分けるのが業界標準です。

ワイヤーフレームの真の価値は線画そのものではなく、それを叩き台にステークホルダー(クライアント・PM・デザイナー・エンジニア・マーケ担当)が「ここに何が来るのか」「優先度はこの順で良いのか」「導線はこの流れで間違いないか」を合意確定するプロセスです。良いワイヤーフレームを1枚作るかどうかで、その後のWeb制作全体の効率が大きく変わります。線の綺麗さより、合意の深さが命です。

なぜ「ワイヤーフレーム(wire frame)」と名付けられたのか

もう少し深く掘ります。なぜこの工程は「ワイヤーフレーム(wire frame=針金枠)」と名付けられたのか。命名の背景を整理します。

「ワイヤーフレーム(wire frame)」は元々、製造業・建築業・3Dグラフィックスの分野で使われていた言葉です。針金で作った骨格模型、塗装や肉付けをする前の「骨だけの構造」を意味していました。立体物の輪郭線だけを残した3Dモデルを「ワイヤーフレームモデル」と呼ぶ習慣があり、これがUI/UX設計の世界に転用された経緯があります。

UI/UX分野でワイヤーフレームという用語が使われ始めたのは、1990年代のUX研究領域から。当時、ソフトウェア開発でUI設計の重要性が認識され始めて、「視覚デザインに進む前にUI構造を確定する工程」を表現する言葉として「ワイヤーフレーム」が定着しました。針金枠のように、骨格だけを示して肉付けは後でやる、こういう発想です。

Webデザイン分野で広く使われるようになったのは、2000年代以降。Webサイト制作の規模が大きくなり、クライアント・デザイナー・エンジニア間での合意形成の重要性が高まったタイミングで、ワイヤーフレームが標準工程として組み込まれました。Adobe XD・Sketch・Figmaなどのデザインツールが普及した2010年代以降、ワイヤーフレーム作成がデジタル化され、現在のスタイルが確立しています。

業界の体感として、ワイヤーフレーム作成にかかる工数は、Webサイト全体制作工数の10〜20%程度。一見少なく見えますが、ここで導線・要素配置を確定しておくと、後のデザインカンプ・コーディング工程の手戻りが激減します。「ワイヤーフレームに時間を投じる方が、結局トータル工数は減る」、これが業界の合言葉です。

近年は、Figmaの普及により「ワイヤーフレームとデザインカンプの境界が曖昧になる」現象も起きています。同じツール内で連続的に作業できるため、ローファイのまま議論せずいきなりミディアム〜ハイファイで詰めてしまうケースが増えています。ただし、この流れには弊害もあり、「ローファイでの議論を飛ばすことで本質的な指摘が出にくくなる」という問題が起きています。

業界の進化として、ワイヤーフレーム段階での「インタラクション仮定」「レスポンシブ前提」の組み込みが、より精緻化しています。単なる静的レイアウトではなく、「クリックしたらどう遷移するか」「スマホ表示でどう並ぶか」までワイヤーフレーム段階で議論する文化が定着しつつあります。線画より動きが重視される領域へ進化しています。

ワイヤーfフレーム作成の現場で何が起きているか

ワイヤーフレーム作成の現場で、具体的に何が起きているか。5段階で整理します。

ステージ1:要件確認とゴール設定

ワイヤーフレーム作成に入る前段階で、プロジェクトの要件とゴールを確定します。「このページで誰に何を伝えるのか」「コンバージョンゴールは何か」「ユーザーはどんな状態でこのページに来るのか」、こういう前提を言語化してから線を引き始めます。要件が曖昧なままワイヤーフレームを始めると、議論が空中戦になります。

要件確認の標準的なアウトプットは1ページの「要件定義書」または「サイトマップ」。誰の・どんな課題を・どう解決して・どこに着地させるか、これを1枚にまとめます。Webディレクターが主体的に整理し、クライアント・マーケ担当・エンジニアと合意を取ってから次の段階に進むのが業界標準です。

ステージ2:情報設計(IA)の確定

要件が固まったら、情報設計(Information Architecture)を確定します。ページに載せるべき要素を全部洗い出して、グルーピング・優先度付け・順序付けをします。「ヒーローエリアには何を置くか」「ボディには何セクション必要か」「フッターに何を入れるか」、こういう骨格を確定する作業です。

情報設計の標準的なアウトプットは、要素一覧の箇条書きまたはツリー構造図。Excel・Notion・Miroなどのツールで整理し、視覚的に並べ替えながら優先度を決めていきます。この段階で要素の取捨選択がほぼ確定するので、後の線画作成は機械的な作業になります。線を引く前に情報設計を固めるのが鉄則です。

ステージ3:ローファイ(手書き/紙)で粗い線画

情報設計が固まったら、まずローファイのワイヤーフレームを作ります。紙とペンで手書き、またはMiroなどの粗いツールで、各セクションを四角や直線だけで配置します。色・写真・フォントは一切意識しない、骨格だけを示す段階です。1ページ作るのに15〜30分程度が業界標準。

ローファイ段階の最大の価値は「議論しやすさ」。粗い線画だからこそ、ステークホルダー全員が「ここはもっと上に持ってきた方が良い」「この要素は要らないのでは」と気軽に指摘できます。Figmaで綺麗に作り込んでしまうと、参加者が遠慮して本質的な指摘が出なくなります。粗いほど議論が活発になる、これが現場のリアルです。

ステージ4:ミディアムファイ(Figma)で構造を詰める

ローファイで方向性が合意できたら、Figma・Sketch・Adobe XDなどでミディアムファイのワイヤーフレームに進みます。グレースケールで、各セクションのサイズ感・余白・テキスト量・ボタン配置を精緻化します。1ページ作るのに1〜3時間程度。色や写真は一切載せず、構造だけを詰める段階です。

ミディアムファイ段階で重要なのは「実コンテンツに近い文字量で線を引く」こと。Lorem Ipsumのダミーテキストではなく、実際のキャッチコピー案・見出し案・本文の概算文字数で線を引くと、レイアウトの破綻が事前に見えます。レスポンシブ前提でPCとスマホの両ビューを並べて確認するのも業界標準です。

ステージ5:ハイファイ(対話確認用)で最終合意

ミディアムファイで構造が固まったら、必要に応じてハイファイのワイヤーフレームに進みます。色・写真は載せませんが、レイアウト精度を完成形に近づけて、ステークホルダーとの最終合意取得用に使います。インタラクション仮定(クリック時の挙動・ホバー・遷移)も書き込みます。

ハイファイ段階の合意取得が終わったら、ようやくデザインカンプ工程(色・写真・装飾を載せる工程)に進みます。ここまでで「導線・要素配置・優先度・インタラクション仮定・レスポンシブ前提」が全てステークホルダー間で合意済みの状態になっているので、デザインカンプ以降の手戻りが激減します。ワイヤーフレームの真の役割は、ここまでの合意形成プロセス全体です。

身近な話で全体像をつかむ

ちょっと身近な話で、全体像を掴み直しましょう。

家を建てるプロセスに置き換えてみます。あなたが注文住宅を建てようとしている、と仮定します。土地は確保済み、家族構成は4人、予算は3,500万円。さて、設計士に何を最初に依頼しますか?

普通の人はいきなり「壁紙はベージュで、フローリングは無垢材で、キッチンはアイランド型で」とは言いません。最初にやることは「間取り図の確定」です。リビングは何畳でどの方角に向けるか、寝室は何部屋必要か、お風呂と洗面所はどう繋げるか、玄関から各部屋への動きの流れはどうするか。これを決めずに内装や設備の話に進むと、後で全部壊して作り直すことになります。

ワイヤーフレームは、まさにこの「間取り図」に相当する工程です。Webページにおける「壁の位置」「部屋の役割」「人の動きの流れ」を確定する設計図。壁紙(色)・床材(写真)・照明(装飾)を選ぶ前に、間取りを確定する。当たり前の手順ですが、Web制作の現場では意外と飛ばされがちなんですよね。

家の間取り図で重要なのは「線が綺麗かどうか」ではなく「家族全員が納得しているかどうか」。妻はキッチンの動きの流れにこだわる、子供は自分の部屋の広さにこだわる、夫はリビングからテレビが見える角度にこだわる。それぞれの視点から間取り図に意見を出して、最終的に「これでいこう」と合意する。この合意プロセスが、間取り図の本当の価値です。

ワイヤーフレームも全く同じ構造。クライアントは商品の見せ方にこだわる、マーケ担当はCVRにこだわる、エンジニアは実装の現実性にこだわる、デザイナーは美しさにこだわる。それぞれの視点からワイヤーフレームに意見を出して、合意確定する。線画そのものより、この合意プロセスが命です。

業界の例として、家の間取り図を確定せずにいきなり壁紙選びから始める施主はまずいません。みんな間取り図を時間をかけて確定してから内装に進みます。一方、Web制作ではなぜか「ワイヤーフレームを飛ばしていきなりFigmaでデザインカンプから始める」プロジェクトが頻発します。家を建てる時は間取り図を作るのに、Webを作る時はワイヤーフレームを飛ばす。この矛盾が、Web制作現場の手戻り発生の最大原因です。

逆に、家の間取り図を丁寧にやるとどうなるか。「キッチンはここに、テレビはここに、子供部屋はここに」と全員が合意したら、その後の内装決めは劇的にスムーズになります。「ここの壁紙はこれで」「この部屋の照明はこれで」と、間取り前提の上で部分判断を積み上げるだけ。Web制作でも、ワイヤーフレームを丁寧にやれば、デザインカンプ以降は機械的な作業になります。

ワイヤーフレームで確定するべき5要素

要素1:ページ要素配置(レイアウト)

1つ目は、ページに載せる全要素の配置を確定すること。ヒーローエリアに何を置くか、ヘッダーにナビゲーションをどう配置するか、ボディに何セクション作るか、フッターに何を入れるか。要素のリストアップから、画面上の物理的な配置まで決めます。

配置確定のポイントは「要素の漏れがないか」と「無駄な要素がないか」の両面チェック。情報が足りないと読者が離脱し、情報が多すぎると読者が混乱します。業界の感覚値として、LP1ページに載せるセクション数は5〜10個が標準。これを超えると読者の集中力が切れて読み飛ばされます。

要素2:優先度ヒエラルキー

2つ目は、要素の優先度ヒエラルキーを確定すること。同じページ内でも「絶対に伝えたい1つ」「次に重要な3つ」「補足の5つ」と階層構造があります。これを線画上で「大きさ」「位置」「目立たせ方」で表現するのがワイヤーフレームの役割です。

優先度確定のポイントは「全要素が同じ重さに見えていないか」のチェック。よくある失敗は、クライアントが「これも大事、あれも大事」と全部を強調しろと言うパターン。全部が大事だと、結局何も大事じゃなく見えます。優先度を絞り込んで、重要な1〜3つに視線を集中させる構造を作るのがワイヤーフレームの腕の見せ所です。

要素3:導線の流れ

3つ目は、読者がページ内をどう移動するか、その導線の流れを確定すること。ページに入って最初に視線が落ちる位置、そこから読み進める方向、最終的にどのCTAボタンに向かうか。読者の視線・スクロール・クリックの流れを設計します。

導線確定のポイントは「ゴールから逆算する」こと。最終的に押してほしいCTAボタンを起点に、そこに辿り着くまでに何を見せるか、どんな順序で説得するかを設計します。逆に、最初から見せたい順番で並べると、CTAボタンに辿り着く前に読者が離脱するパターンが多発します。導線設計は「最後から逆引き」で組むのが業界の鉄則です。

要素4:インタラクション仮定

4つ目は、ページ内で発生するインタラクションの仮定を確定すること。クリックしたらどうなるか、ホバーしたらどう変化するか、スクロールしたら何がアニメーションするか、フォームに入力したら次にどこに進むか。動的な挙動の仮定をワイヤーフレーム段階で書き込みます。

インタラクション仮定のポイントは「実装難易度との整合性」を取ること。デザイナー側のアイデアだけで進めると、エンジニアが実装する段階で「これは無理」「工数3倍かかる」となるケースが頻発します。エンジニアにワイヤーフレーム段階で確認を取って、実装可能性を担保するのが業界標準です。インタラクション設計は、ワイヤーフレーム工程でエンジニアを巻き込むかどうかで質が決まります。

要素5:レスポンシブ前提

5つ目は、レスポンシブ(PC・タブレット・スマホ)前提を確定すること。同じページがPC幅・タブレット幅・スマホ幅でどう見えるか、要素の並び順・サイズ感・表示有無をワイヤーフレーム段階で確定します。現代のWeb制作では、スマホ比率が70%を超える業界も多いため、スマホ表示を最優先で設計するのが標準です。

レスポンシブ確定のポイントは「PCワイヤーフレームとスマホワイヤーフレームを並べて作る」こと。PCだけ作って後でスマホを考えると、必ず破綻します。「PCで横並びの3要素はスマホで縦並びになる」「PCで右上のメニューはスマホでハンバーガーになる」、こういう変換ルールをワイヤーフレーム段階で確定しておくと、後のコーディング工程で迷いがなくなります。

5要素それぞれの確定は、ワイヤーフレーム工程の中で同時並行で進みます。「レイアウト→優先度→導線→インタラクション→レスポンシブ」の順で一周し、必要に応じて何周も繰り返して精度を高めるのが業界標準。1周目で完璧を狙わず、3〜5周のイテレーションで詰めるのが現実的です。

ワイヤーフレーム作成で失敗する典型3パターン

うちの事業でWeb制作・LP制作を運用してきた中で、ワイヤーフレーム作成で失敗する典型パターンはこの3つに集約されます。

うちの事業で運用してわかった本音

うちの事業ではLP・コーポレートサイト・販売ページ・教材ページを長年運用してきましたが、Web制作の現場で見えてきた本音をお伝えします。

本音1:ローファイで議論する方が手戻りが圧倒的に少ない

うちの事業でLP制作を何度もやってきて、最大の学びは「ローファイ(手書き)で議論する方が、Figmaで詰めてから議論するより手戻りが圧倒的に少ない」という事実。最初は逆だと思っていたんですよ。「綺麗に作り込んだ方がイメージが伝わって、議論が早く済むはず」と。

でも実際にやってみると、Figmaで綺麗に作ったワイヤーフレームを見せると、関係者が「もう完成形」と錯覚して、本質的な指摘が出てこないんです。「ここの色がもう少し」「フォントの種類は」みたいな細部の話に終始して、レイアウト構造への根本的な疑問が議論されません。一方で、紙にざっくり手書きしたものを見せると、「これじゃ伝わらない」「ここはもっと前に持ってきた方がいい」と根本的な指摘が次々と出ます。粗いほど議論の質が上がる、これは現場で何度も実感した法則です。

本音2:ワイヤーフレーム段階の30分議論が後の30時間の手戻りを防ぐ

これは現場で何度も体感した数字なんですが、ワイヤーフレーム段階で30分かけて議論して合意取得した内容は、その後のデザインカンプ・コーディング・公開後の修正フェーズ合計で30時間分の手戻りを防ぎます。比率にして約60倍。ワイヤーフレーム工程は、Web制作全体のコスパが最も高い工程です。

逆に、ワイヤーフレームを飛ばして「とりあえずFigmaで作ってみました」とデザインカンプから始めると、公開直前で「やっぱりここの構造が違う」「優先度を入れ替えたい」となって、デザインを全部作り直す事態が頻発します。デザインカンプを作り直すのに10時間、コーディングを作り直すのに15時間、QAをやり直すのに5時間。合計30時間の追加工数。これがワイヤーフレーム段階の30分議論で防げる、という構造です。

うちの事業で運用してきた中で、ワイヤーフレーム段階に時間を投じたプロジェクトは公開後の修正発生率が低く、逆にワイヤーフレームを飛ばしたプロジェクトは公開後も修正が長く続きました。ワイヤーフレーム工程は「やってもやらなくても同じ」ではなく、Web制作全体のROIを大きく左右する決定的な工程です。

本音3:PMがエンジニアと先にワイヤーフレームで合意するとMTGが激減する

これはチーム運営の現場で見えてきた本音なんですが、PM(プロジェクトマネージャー)がエンジニアと「ワイヤーフレーム段階で」インタラクション仮定・実装難易度を合意確定すると、その後のMTG回数が激減します。理由は、デザインカンプ段階での「これ実装難しい」議論が事前にゼロになるから。

具体的に、PMがエンジニアと合意するべき5項目は決まっています。(1)インタラクションの実装難易度、(2)レスポンシブの分岐点、(3)既存コンポーネントの再利用範囲、(4)API連携の有無と仕様、(5)パフォーマンス要件。この5項目をワイヤーフレーム段階で確定すると、デザインカンプ・コーディング段階で「実装無理」「仕様変更」のループがゼロになる構造です。

逆に、PMがデザイナーとだけ先に合意して、エンジニアに後で見せると、「これは現実的じゃない」「実装に3倍工数がかかる」「既存DBの構造と合わない」と、デザインカンプを全部やり直す事態が発生します。エンジニアの早期巻き込みは、PMの最重要スキルの一つ。「ワイヤーフレーム段階でエンジニアを呼ぶ」、これだけでチーム全体の生産性が大きく変わります。

もう一つ重要なのが、ワイヤーフレームを「PMだけで作る」のではなく、「PM+デザイナー+エンジニアの3者で同時に作る」のが理想ということ。Figmaの同時編集機能・Miroの共同ホワイトボード機能を使って、3者が同じ画面を見ながらリアルタイムで議論しながら線を引きます。1人で作って後で見せるより、3者で同時に作る方が、合意形成のスピードと精度の両方が劇的に上がります。

ワイヤーフレーム作成の5STEP

ここまで読んでくださった方、お疲れさまです。ワイヤーフレーム作成の標準フローを5ステップで置いておきます。

シンプルですが、この5STEPを順番通りに踏むだけで、Web制作の手戻りが大きく減ります。ワイヤーフレーム工程は「面倒な前段作業」ではなく、Web制作全体のROIを決定する核心工程です。

よくある質問(FAQ)

まとめ

で、結局ワイヤーフレームとは、こういうことです。

• ワイヤーフレームの核心は「デザインカンプ前の素描」ではなく「視覚デザイン前に導線と要素配置を確定する設計工程」
• 本質は綺麗な線画ではなく、ステークホルダー全員での「導線・優先度・要素配置」の合意形成
• 5要素(ページ要素配置・優先度ヒエラルキー・導線の流れ・インタラクション仮定・レスポンシブ前提)を全て確定してから、デザインカンプ工程に進む

線を綺麗に引くことが目的なのではなく、未来のWeb制作を一緒に作るチーム全員での合意を獲得すること。これがワイヤーフレームの本来の役割です。Webサイト・LP制作を始めるなら、ワイヤーフレーム工程をどう設計するかから整理してみてください。

ではでは。