ワイヤーフレームが作り直しになる原因｜先に決めるべき順番

「デザインに入ってから載せる項目が増えて、画面をまるごと作り直した」「文章が後から届いて、用意した枠に収まらなかった」——サイトやページを作るたびに、同じ手戻りを繰り返している会社は少なくありません。ワイヤーフレームは、見た目の下書きではありません。制作の現場の解説を読み比べると、共通して置かれている定義は一つで、どの情報を、画面のどこに、どういう優先順位で置くかを決め、その意図まで書き残したものです。作り直しが起きるのは、この骨組みの段階で決めるべきことを決めないまま、次の工程へ渡してしまうからです。この記事では、作り直しになる原因を4つに分け、色や文章の前に固めておく順番と、決めたことの残し方までを整理します。

ワイヤーフレームは何を決める道具か

ワイヤーフレームは、画面の骨組みを描いた設計図です。どの情報を、ページのどこに、どれくらいの分量で置くのか。そして、なぜその順番なのか。この二つを一枚にまとめたものが骨組みです。線と四角と文字だけで描き、色やフォント、写真の中身には意味を持たせません。装飾を持ち込まないのは、議論の対象を情報の並びだけに絞るためです。逆に言えば、骨組みが整っていない状態で見た目を作り始めると、並びの議論と見た目の議論が同時に走り、どちらも決まらないまま日程だけが進みます。

よく混同されるのが、デザインカンプ、モックアップ、プロトタイプとの違いです。いずれも制作の流れの中にありますが、決める対象が違います。骨組みで決め切れなかったことを後の工程で決め直そうとすると、その分だけ作り直しが発生します。まず、それぞれが何を確かめるための物なのかを揃えておきます。

成果物	確かめること	含まないもの
ワイヤーフレーム	情報の並びと優先順位、その理由	色・フォント・写真の中身
デザインカンプ	仕上がりの見た目	押したときの動きや遷移
モックアップ	見た目と骨組みを合わせた状態	実際の操作
プロトタイプ	押したときの動きと画面の遷移	本番の中身

この違いを関係者で共有していないと、骨組みのレビューで「写真はこれを使うのか」「この青は自社の色と違う」といった指摘が並びます。指摘そのものが悪いわけではありません。ただ、骨組みの段階で色の話を始めると、肝心の並び順が誰も見ないまま通ってしまう。今日決めることと、後の工程で決めることを、レビューを始める前に宣言しておくと、この事故はかなり減ります。

作り直しが起きる4つの原因

手戻りの正体は、技術の問題ではありません。決めていないことを、決めたつもりで次の工程に渡してしまうことです。骨組みは一枚の絵に見えるので、枠が整うと合意できた気になります。ところが、その絵が答えていない問いが残っていると、後の工程で必ず蒸し返されます。しかも蒸し返される場所は、たいてい工程がいちばん進んだあとです。

実際に起きる作り直しは、原因をたどると次の4つに収まります。自社の直前の案件がどれに当たるかを先に当てておくと、対策を打つ場所が絞れます。複数が同時に起きていることも珍しくありません。

• 目的と読者が決まっていない：載せる情報を選ぶ基準がなく、思いついた項目が全部入る
• 要素の優先順位を合意していない：部門ごとに一位が違い、絵の上で調停しようとして全部が上に来る
• 文章が後回しになっている：仮の文字と本番の分量が違い、枠に収まらず組み直しになる
• 決める人が場にいない：担当者どうしで先に進み、決裁者が仕上がりを見てから骨組みに戻る

4つはどれも、骨組みを描く前に片付けられる問題です。逆に、骨組みを描きながら片付けようとすると、描き直しそのものが対策になってしまい、時間だけが消えていきます。だから対策は、絵を描く技術ではなく、描く前の段取りに寄せます。以降の四つの節で、原因ごとに何を決めておくかを見ていきます。

原因1：目的と読者が決まっていない

いちばん多い原因が、そのページで何を達成したいのか、誰に読ませるのかが決まっていないことです。目的が決まっていないと、載せる情報を選ぶ基準がありません。基準がないので、関係者が思いついた項目が全部入り、どれが主役か分からない画面になります。この状態の骨組みは、レビューでも指摘が出ません。反対する理由がないからです。

ここで効くのが、ページ単位で一文の目的を書くことです。「初めて社名を知った情報システム部門の担当者が、比較検討の材料として資料請求に進む」のように、読者と、取ってほしい行動を一文に入れます。この一文に貢献しない項目は載せない、という判断ができるようになります。目的が二つ以上あるページは、たいてい二枚に分けたほうが成果が出ます。

目的の一文は、骨組みの余白に書き添えておきます。レビューの場で議論が広がったとき、この一文に戻れば「それは別のページの仕事ですね」と切り分けられます。書き添えていないと、同じ議論が毎回ゼロから始まり、そのたびに骨組みが少しずつ膨らみます。膨らんだ骨組みは、作り直しの予約だと考えてよいでしょう。

原因2：要素の優先順位を関係者で合意していない

載せる項目が決まっても、順番が決まっていなければ骨組みは組めません。そして順番は、たいてい部門ごとに違います。営業は導入実績を上に置きたい、開発は機能の正確な説明を上に置きたい、法務は注意書きを目立たせたい。この対立を骨組みの絵で調停しようとすると、全部が上に来て、結果として何も目立たない画面になります。

対策は、絵ではなく一覧で合意を取ることです。項目を縦に並べ、一位から順に番号を振って関係者の合意を取る。一覧のほうが、対立が言葉になって扱いやすくなります。同じ順位を二つの項目に付けないという制約を置くと、議論が前に進みます。順位を決めた理由も一行で残します。理由がないと、順位は次の打ち合わせで簡単に覆ります。

合意した一覧は、骨組みの版と一緒に保管します。後から「なぜこの項目が下なのか」と聞かれたときに、理由が残っていれば説明が一往復で済みます。理由が残っていないと、順位を決め直す打ち合わせがもう一度必要になり、そこで決まった新しい順位に合わせて骨組みを引き直すことになります。手戻りの費用は、この二度手間の分だけ膨らみます。

原因3：文章が後回しになっている

三つめは、文章を後から入れることです。骨組みの段階では仮の文字を置き、後から本文を差し込む進め方が一般的ですが、この仮の文字が短すぎたり長すぎたりすると、枠に収まらず組み直しになります。見出しが二行に伸びる、ボタンの文言が枠から出る、説明文が想定の三倍になる。どれも、後から気づいて直す作業です。

完全な原稿を先に用意するのは現実的ではありません。ただ、参照した制作の現場の解説では、少なくとも読者を引きつける一文、見出し、そして行動を促すボタンの文言だけは、骨組みを作る前に確定させることを強く勧めています。この三つは分量が枠の大きさを決めてしまうため、後から動かすと影響が広い箇所です。逆に言えば、この三つが決まらないうちは骨組みを確定と宣言できません。

残りの本文は、文字数の目安だけを枠に書いておきます。「ここは全角で三百字前後」と書いてあれば、原稿を書く側も枠に合わせられます。目安がないまま「後で入れます」とだけ書いた枠は、ほぼ必ず溢れます。枠の大きさは分量の約束であり、約束のない枠は守られません。

原因4：決める人が場にいない

四つめは、決める人がレビューに出てこないことです。担当者どうしで合意して先に進み、デザインが仕上がった段階で決裁者が初めて見る。そこで「思っていたのと違う」と言われると、骨組みまで戻ることになります。この戻りは、工程が進むほど費用と日数が膨らみます。骨組みで直せば一日の作業が、仕上がりの後では二週間の作業になります。

参照した制作会社の解説でも、決裁者は少なくとも骨組みの確定とデザインの確定の二回は同席すべきだと整理されています。裏を返せば、決裁者が同席できない日程で骨組みを確定させてはいけないということです。日程の都合で確定を宣言してしまうと、後の工程がまるごとやり直しの候補になります。

どうしても同席できないときは、確認してもらう論点を三つ以内に絞り、選択肢の形で渡します。「一位を導入実績にするか、課題の提示にするか」のように選ぶだけの形にすれば、短時間でも判断を取れます。自由記述で意見を求めると、論点が増えて戻りが大きくなります。決裁者に渡すのは白紙ではなく選択肢、と決めておくと運用が安定します。

色や文章の前に決める順番

原因の4つを踏まえると、骨組みを描き始める前に片付けておく順番が決まります。上から順に固めていくと、後戻りが起きにくくなります。制作の現場の解説でも、コンセプト、全体の地図、読者の動線、原稿という順に固めてから骨組みに入る流れが共通して示されています。

この順番の要点は、骨組みを描くのが最後になることです。多くの現場では最初に絵を描き始め、描きながら目的や順位を決めようとします。絵は説明力が強いので、決まっていないことも決まったように見えてしまいます。順番を守るだけで、作り直しの回数は目に見えて減ります。

一方で、全部を完璧に固めてから描き始めると、着手が遅れます。目安としては、目的の一文と、上位五項目の順位、そして見出しの文言が確定していれば、描き始めて構いません。残りは骨組みの上で詰めていきます。固めるのは上位だけと割り切ると、日程と精度のつり合いが取れます。上位五項目という区切りに意味があるのは、画面を開いてすぐ目に入る範囲が、だいたいそこで終わるからです。六番目以降の順位で議論が長引いているときは、決め方を変えるより、決める場所を後ろの版に回したほうが早く進みます。

並びの型と画面の大きさを先に選ぶ

骨組みを描く前にもう一つ決めておくと楽になるのが、並びの型です。制作の現場の解説では、よく使われる型として、一列に積むもの、複数の列に分けるもの、格子状に並べるもの、画面いっぱいに一つを見せるもの、格子をあえて崩すものが挙げられています。型を先に選ぶと、順位を枠に落とす作業が機械的になります。BtoBのサイトでは読ませたい順番がはっきりしているため、一列に積む型が扱いやすい場面が多くなります。

型を決めずに描き始めると、枠の並べ方が節ごとに変わり、読者は毎回どこを見ればよいか探すことになります。逆に、型を決めてから描くと、はみ出す項目が目に見えます。型に収まらない項目は、そのページの役割から外れている合図と考えて、別のページに回すか、順位を下げる判断ができます。型は途中で変えてもかまいませんが、変えたら順位の一覧に戻って、影響する項目を洗い直します。

もう一つが、画面の大きさです。参照した制作の解説では、パソコンとスマートフォンでは画面の幅と縦横の比が大きく違うため、骨組みを別に作ることが勧められています。パソコンの骨組みだけを作って後から幅を詰めると、横に並べた枠が縦に積み替わり、意図しない順位に変わってしまいます。並びの順位は、狭い画面のほうが厳しく効きます。下調べが携帯から行われる前提で、狭い画面の骨組みを先に作り、広い画面へ広げる進め方のほうが手戻りが少なくなります。

骨組みに書く要素

骨組みに載せるのは、枠だけではありません。参照した設計の解説では、骨組みは配置と設計意図を合わせたものだと定義されています。意図が書かれていない骨組みは、受け取った側が推測で埋めることになり、そこで解釈のずれが生まれます。ずれは仕上がりを見るまで気づけないため、発見が遅れるほど直す範囲が広がります。

• 枠の役割（この場所は何を担保するのか）
• 載せる項目と、その優先順位
• 文字の分量の目安（引きつける一文・見出し・本文・ボタン）
• 画像や図の役割（写真か図解か、何を示すのか）
• 前後の画面へのつながり（どこから来て、どこへ行くのか）
• 確定している文言と、仮の文言の区別
• 決めきれていない論点と、それを決める人

特に効くのが、分量の目安と枠の役割です。「ここは会社の信頼を担保する枠。実績を三つ、各二十字前後」と書いてあれば、受け取った側は迷いません。枠の大きさは優先順位の宣言でもあるため、大きさの理由も一行で添えます。仮の文言には印を付け、確定した文言と見分けられるようにします。

逆に、骨組みに書かないほうがよいものもあります。色の指定、フォントの指定、実際の写真、そして装飾の細かい指示です。これらを書き込むと、レビューの論点がそちらに移り、並びの合意が取れないまま次の工程に進みます。書かないことを決めるのも骨組みの設計です。画像の枠には、写真そのものではなく役割だけを書きます。「導入した会社の現場の様子が分かる横長の写真、一枚」と書いてあれば、後で素材を探す側も迷いません。

粗い段階と詳しい段階を分ける

骨組みは一発で仕上げるものではありません。粗い段階と詳しい段階を分け、それぞれで確かめることを変えます。粗い段階は手で描いた線でも構いません。ここで見るのは、並びの大枠と、抜けている項目がないかだけです。線の美しさを整える時間は、この段階では投資になりません。

参照した制作の現場の解説では、六割程度の完成度で早めに共有し、意見をもらってから作り込むことを勧めています。完成度を上げてから見せると、指摘が直しにくいものになり、受け取った側も遠慮します。粗いうちに見せるほうが、率直な指摘が返ってくるのは、直す余地が見た目にも残っているからです。

詳しい段階では、確定した文言を入れ、枠の大きさを実際の分量に合わせます。共同編集ができるツールを使うと、意見を枠の横に残せるため、どの指摘がどこに対するものか迷いません。段階を分けるときの注意点を、あわせて押さえておきます。

• 粗い段階で色や写真を入れると、指摘が見た目に流れる。線と文字だけで止める
• 同じ並びのページは代表の一枚だけ作る。全ページ分を作ると、直しの回数が枚数分に増える
• 粗い段階の絵も捨てずに残す。なぜその並びを選ばなかったのかの記録になる

生成AIに骨組みの案を出させるときの渡し方

生成AIは、骨組みの案を短時間で複数並べるのが得意です。文章から画面の構成を起こす機能を備えた設計ツールや作図ツールも増えており、手書きのスケッチを読み取って編集できる形に起こすものもあります。ただし出てくるのは一般的な並びです。自社の商談の順序を知らないため、そのままでは使えません。渡す情報の量が、案の使えるかどうかを決めます。

渡すのは次の六つです。ページの目的の一文、読者、取ってほしい行動、載せる項目の一覧と順位、分量の目安、そして避けたい構成。順位を渡さずに項目だけを渡すと、AIは一般的な順番で並べ直します。そこが自社の意図と食い違うため、直す手間が案を得た時間を上回ります。参考にしたい他社のページを渡すのも避けます。並びだけを真似ると、目的の違いごと持ち込むことになります。

出させ方にも工夫が要ります。一案ではなく三案を並べさせ、案ごとに「上から順にこう置いた理由」を書かせます。理由を書かせると、使えない案を早く落とせるため、選ぶ時間が短くなります。図として出させるより、項目と順位の一覧として出させたほうが、そのあとの合意に使いやすい形になります。絵の形で受け取ると、直すより作り直したくなるのも、一覧で受け取るほうがよい理由の一つです。

AIの案の、何を人が決めるか

骨組みでAIに任せてよいのは、並べ方の選択肢を増やすところまでです。何を上に置くかの判断と、載せないと決める判断は人が持ちます。載せない決定は社内の力関係が絡むため、根拠と決めた人の名前が必要になります。AIの出力には、この二つがありません。名前のない決定は、後から必ず覆されます。

実務では、人が確認する範囲を先に決めておくと運用が安定します。数字と実績、他社との比較、法務が関わる表記、そして順位の一位。この四つはAIの出力をそのまま採用せず、必ず人が原典を確かめると決めておきます。参照した設計の現場の記事でも、自動で生成した骨組みはあくまでたたき台であり、現場の感覚を入れるには人の手による調整が必要だと整理されています。

もう一つの落とし穴が、AIの案が体裁として整っているために、目的の一文に合っているかを誰も確かめないことです。案を採用する前に、目的の一文を読み上げてから並びを見る、という手順を挟むだけで、この見落としは減ります。整っている案ほど、疑われずに通ってしまいます。

制作会社に渡すときの形

社内で固めた骨組みを外部に渡すとき、絵だけを送ると意図が伝わりません。渡すのは、骨組みの絵、項目の順位一覧、目的の一文、確定した文言、そして決めきれていない論点の一覧です。決めきれていない論点を明記することが、いちばん効きます。明記されていない論点は、受け取った側が決まったものとして扱います。

参照した制作の現場の解説では、渡すときに「この枠は優先度が低いのでまとめてよい」といった意図を注記や口頭で伝えることが、仕上がりの質を左右すると整理されています。裏を返せば、注記のない枠は、受け取った側が優先度を推測して作るということです。推測が外れた箇所が、そのまま作り直しになります。

加えて、変更の窓口と、変更を受け付ける締切を書き添えます。誰からの依頼を正とするかが決まっていないと、部門ごとの追加要望が別々に届き、骨組みが版ごとに違う姿になります。窓口を一つにするだけで、版の混乱はほぼ消えます。締切を過ぎた要望は次の版に回す、という運用もあわせて決めておきます。

レビューの回し方

骨組みのレビューは、見せて意見を集める場ではありません。決める場です。だから、始める前に三つを宣言します。今日決めること、今日は決めないこと、そして決める人。この宣言がないレビューは、感想が集まって終わり、次の版でまた同じ感想が集まります。

参照した制作の現場の解説では、共有するだけでは足りず、迷っている点を添えて意見を求めるべきだと整理されています。「上位三項目の順番に迷っています」と書いて渡すと、返ってくる意見が論点に集まります。迷いを隠して渡すと、関係のない指摘が増えるのは、見る側が何を見ればよいか分からないからです。

指摘は、その場で採否を決めます。持ち帰る指摘が増えるほど版が増え、どれが最新か分からなくなります。採用しない指摘は、理由を一行で書いて残します。理由が残っていれば、同じ指摘が次の版で再燃しません。時間内に決め切れない論点は、決める人と期日を決めて閉じます。閉じずに終わった論点は、次の工程で必ず戻ってきます。戻ってくる場所が仕上がりの後になるほど、直す費用は膨らみます。

決めたことの残し方

骨組みは、確定した瞬間から古くなり始めます。運用に乗せるには、決めたことを絵とは別に残す必要があります。残すのは、目的の一文、項目の順位と理由、確定した文言、採用しなかった案とその理由、そして変更の履歴です。絵だけを残すと、答えは残っても理由が消えます。

履歴は、日付と、変えた箇所と、変えた理由の三点で足ります。理由のない変更履歴は、次の担当者が読んでも使えません。半年後にページを直すとき、なぜこの並びなのかが分かれば、直す範囲を小さく抑えられます。分からなければ、また全部を議論し直すことになります。

残す場所は、絵と同じところにします。設計の記録が別の場所に散ると、絵だけが引き継がれ、理由が失われます。次の案件で同じ議論が始まる原因は、ほとんどがこれです。記録は絵に付いていて初めて引き継がれる、と考えて置き場所を決めます。

よくある質問

ワイヤーフレームは発注側が作るべきですか

必ず発注側が描く必要はありません。ただし、目的の一文と項目の順位は発注側が決めるものです。ここを制作側に任せると、推測で並べられ、レビューで覆すことになります。絵は制作側、順位と理由は発注側、という分担にすると噛み合いやすくなります。

全ページ分を作る必要がありますか

同じ並びのページは代表の一枚で足ります。制作の現場の解説でも、同一のレイアウトは一つだけ作って効率化することが勧められています。役割が違うページ、たとえば入口のページ、一覧のページ、申し込みのページは、それぞれ作ります。

生成AIに骨組みを作らせれば、制作会社に頼まなくてよくなりますか

骨組みの案までは自社で出せるようになりました。ただ、仕上がりの見た目、実装、表示の速さ、公開後の運用までを含めると、外部と組む価値は残ります。AIで骨組みの精度を上げ、外部にはその先を任せる、という分け方が現実的です。

原稿が間に合わないときはどうすればよいですか

引きつける一文、見出し、ボタンの文言の三つだけを先に確定させ、残りは文字数の目安を枠に書いて進めます。この三つが決まっていれば、枠の大きさは動きません。三つが決まらないときは、骨組みを確定と宣言しないほうが安全です。宣言してしまうと、後で原稿が届いた時点の直しが仕様の変更として扱われ、費用の話になります。

骨組みは手書きでもよいですか

粗い段階は手書きで問題ありません。むしろ、清書に時間をかけないほうが意見が出やすくなります。詳しい段階に進むときは、意見を枠の横に残せる形にしておくと、どの指摘がどこに対するものか迷いません。手書きで撮った写真を後から編集できる形に起こす機能を持つツールもあります。

レビューで意見が割れたときは何を基準に決めますか

目的の一文に戻ります。「初めて社名を知った担当者が、比較の材料として資料請求に進む」という一文に、より貢献するのはどちらかを問い直します。それでも割れるなら、両案を残したまま順位だけを決め、公開後に反応を見て入れ替える前提にします。決められないことを理由に確定を延ばすほうが損になります。

まとめ

ワイヤーフレームが作り直しになるのは、絵を描く技術の問題ではなく、描く前に決めるべきことを決めていないからです。目的と読者、項目の優先順位、枠を決める三つの文言、そして決裁者の同席。この四つを先に片付ければ、骨組みは一度で通ります。生成AIは案を早く並べてくれますが、何を上に置き、何を載せないかの判断は人が持ちます。決めた理由を絵と一緒に残すところまでを工程に入れて、次の案件で同じ議論を繰り返さない形にしていきましょう。

※本記事にはAIが活用されています。編集者が確認・編集し、可能な限り正確で最新の情報を提供するよう努めておりますが、情報の完全性、正確性、最新性、有用性等について保証するものではありません。本記事の内容に基づいて行動を取る場合は、読者ご自身の責任で行っていただくようお願いいたします。