「ワイヤーフレームってどこまで作るのが正解？」LP制作のWEBディレクターがガチで答えてみた

どうもこんにちは。
昨日もワイヤーフレーム、明日もワイヤーフレーム、明後日もきっとワイヤーフレームの作成。
WEBディレクターになってから、ワイヤーフレームを作成している時間が一番苦しくて、一番楽しくて、一番頭を抱えて、夢中になっているわいわいです。（恋？）　

今日は、自社のLPをこれから作ろうとしている方、
もしくは、一度LPを作ってみたけれど思うように成果が出ていない方に向けて、書いていきます！

テーマは、ワイヤーフレーム。
WEB制作をしたことがある方にとっては聞き慣れている言葉だと思いますが、
簡単にいうと、LPの設計図にあたる一番土台の部分のことです。

実はこのワイヤーフレーム、
結論をいうと、どこまで作り込むかでできあがるLPの成果が大きく変わってきます…！
クロスバズへ入社する前の私は、その大切さに気づいていませんでした。

しかし、WEBディレクターとして何本ものLPに向き合ううちに、
考えがすっかり変わりました。

ワイヤーフレームをどこまで作り込むか問題。
この線引きこそ、LPが売れるかどうかを分ける、一番大事な分かれ道だったんです！

だから今日は、その話を現場のリアルも交えながら、じっくりお伝えさせてください。

そもそもワイヤーフレームとは？

ワイヤーフレームは、ひとことで言うとLPやサイトの設計図のことです。
どの要素を、どんな順番で、どこに置くか。
見出し・本文・画像・ボタンといったパーツのレイアウトと、ページ全体の骨組みを決める土台になります。

言い換えると、ワイヤーフレームとは、
LPの中で「ここになにが入る想定なのか」が、はっきり伝わるもの。

クロスバズでは、枠だけではなく「確定原稿のテキスト（＝しっかり考えられたコピー）＋枠」のセットを、ワイヤーフレームと呼んでいます。

「構成」がコンテンツの順番（ストーリー）のみであることに対して、
「ワイヤーフレーム」は、そのままデザインをのせられることがイメージできるくらい、構成に合うレイアウトや文字の大きさまでしっかり落とし込んだものだとイメージいただくと、分かりやすいかと思います。

イメージは、家を建てるときの間取り図！
壁紙の色や家具を選ぶ前に、まずは部屋の配置と動線を固めますよね。
ワイヤーフレームは、ちょうどあの工程にあたります。

デザインカンプとの違い

よく混同されやすいのが、デザインカンプですが、ふたつの役割ははっきり分かれています。
ワイヤーフレームは、何をどの順番で伝えるかという情報設計。

対してデザインカンプは、それをどう見せるかというビジュアルの完成イメージです。
色やフォント、装飾、写真のトーンなどの見た目の要素が乗ってくるのがカンプの段階で、
ワイヤーフレームはその一歩手前です。

つまり、構成と情報の優先順位を、先に決めておくための工程ということです。

仮テキスト＋枠だけのワイヤーフレーム作成をおすすめしない理由

多くの制作現場では、枠とダミーテキストだけ置いた状態をワイヤーフレームの完成として定め、先へ進めていきます。

あなたも以下のような進め方で、ワイヤーフレームを作っていませんか？

こんな風に分担を決めている制作会社は、決して少なくないと思います。

実際に私もWEBデザインスクールの学生時代は、デザイン制作のほうに夢中で、
テキストなんてコーディングしながら考えていました（遅すぎる笑）

でも、具体的な構成を考えずに「仮テキスト＋枠」だけでワイヤーフレームの制作を進めると、後の工程で必ずと言っていいほどつまずきます。

たとえば、デザインをつくったあとにテキストを入れると、デザインのやり直しが発生する可能性が高まってしまいます。

デザインは、全体を通した訴求軸（＝LP全体を通して一貫したひとつの勝ち筋）や、各セクションでの訴求内容に合わせて、方向性を決めるものです。

そのため、デザインを先に作ってからテキストを入れるとなると、見せたい狙いが固まらないまま手を動かすことになり、結局、デザインを作り直す工程が新たに発生します。

さらに、「このセクションは何のためにあるんだろう…？」という肝心の問いが、中身を考えずに置いた枠を先に決めたことで、その部分がとくに訴求力を発揮せず、宙ぶらりん状態となります。

そして行き着く先が、装飾で見栄えを整えるしかない状態。

設計の弱さを、見た目のきれいさでカバーしようとするので、本来はワイヤーフレームの段階で決めておくべきだったことが、全部デザインフェーズに後ろ倒しに。

修正は次々と出てくるし、
できあがったLPは見た目はきれいなのに肝心の問い合わせも申し込みも増えない…。（つらすぎるよー汗）

これが、一番避けたい結末です。

クロスバズが考える、ワイヤーフレームの境界線

では、ワイヤーフレームはどこまで作るべきなのか。
クロスバズの答えは、はっきりしています。

「なぜこのLPで売れるのか。それを自分の言葉で語れる状態まで！」

これが、私たちの引いている境界線です。
枠が埋まっているかどうかが一番重要なのではなく、

その構成で成果が出る理由を、ちゃんと説明できるかどうか。

そこだけを基準にしています。

ワイヤーフレームに揃っているべき3つの要素

具体的には、ワイヤーフレームに以下の3つが揃っている状態を指しています。

この3つが伝わらなければ、それはまだ熟考されたワイヤーフレームとはいい切れません。

売れるLPのために、ワイヤーフレームの段階で必ず作り込む7つの要素

ここからは、クロスバズが実際にワイヤーフレームの段階で作り込んでいる要素を、

7つに分けてお話しします。どれも、デザインに入る前に固めておくものばかり。

さっそくいきましょう！

① まず、流入経路から考える

ワイヤーフレームを作成する際に最初に考えるのは、そのLPをどこから見に来てもらうのかの流入経路です。

配信する媒体がGoogleリスティング広告なのか、Meta広告なのか。
これだけで、訪れる人の層がガラッと変わります！

Googleリスティング広告用のLPなら、すでにニーズがはっきりしている顕在層が多くなります。
自分から検索して来てくれているぶん、知りたいことも具体的です。
だから、内容にもしっかり具体性が必要です。

一方、Meta広告用のLPは、まだ商品やサービスを知らない潜在層が中心。
じっくり読み込む人は少なくて、流し見でそのまま離れていく人も少なくありません。
だからこそ、ひと目で内容が伝わる作りにしておく必要があるんですよね。

② 業界でのポジションを取りに行く

ワイヤーフレームを描き始める前に、競合10社以上のLPを徹底的に分析します。

10社のLPを並べてみると、似たような商品・サービスにも関わらず、それぞれ別の訴求軸を持ちながら、独自の魅力を発信しています（品質、スピード感、実績、安心、手軽さなど）。

だからこそ、沢山の同業者の中で他がアピールできていないことをしっかりと伝わる形で届けた会社は、ユーザーの心にしっかり響きます。

クロスバズでの市場分析には型を使います。
市場・競合・自社を整理する「3C分析」、自社の強みと弱みを洗い出す「SWOT分析」、立ち位置を2軸で可視化する「ポジショニングマップ」。
ただ、これはあくまで地図のようなもので、地図を持っているだけでは勝てません。

型を使って勝ち筋を探し特定しつつ、
制作事業部内でも壁打ちをして「これで本当に勝てるのか？」を徹底的に考え抜きます。

本当に大事なのは、その地図を広げたうえで、競合がうっかり空けている場所を見つけて、そこを先に取ること。

一番強い相手と同じ土俵で真っ向から勝負しても、たいてい消耗戦にしかならない事が多いです。
最終的に目指すのは、「この商品は他と何が違うのか」という問いに、一言で答えられる状態です。

そのポジショニングをはっきりさせてから、ようやく構成に入ります。
ディレクターである私は、打ち合わせの段階で、競合それぞれの強みにどう打ち勝つかという戦略までお伝えするようにしています。

ワイヤーフレームはなんとなく良さそうな構成ではなく、勝ち筋を持ってから描き始める。
ここは、クロスバズWEBディレクター陣全員が強くこだわっている部分です。

③ ペルソナの感情変化に合わせて、セクションの順序を考える

読み手がLPを訪れてから問い合わせにいたるまで。
その心の動きには、おおまかな流れがあります。

興味 → 疑問 → 納得 → 共感 → 不安の解消 → 決断

この流れは、思いつきで並べているわけではありません。
人が何かを知って、申し込みにいたるまでの心理には、ある程度きまった順序があります。
いきなり決断はできないし、疑問が残ったままでは共感もしてもらえない。
その自然な心の順番を土台にしながら、商品・サービスに合わせて組み立てています。

まず、ターゲットを一人の人物像まで落とし込むペルソナ設計をして、
その人がたどる道のりをカスタマージャーニーマップに描き出します。
「このペルソナであれば、絶対に何が合ってもこの商品・サービスを選んでくれるだろう」というところまで落とし込みます。

またペルソナは一人だけではなく、ターゲット層を分解した上で、メインペルソナとサブペルソナを設計します。

さらに、AIDMAやPASONAのような購買行動モデルの構造もディレクターは理解したうえで、
人がものを買うときの心理プロセスから逆算します。

そのうえで、どのセクションをどの順番で並べるかを決めていきます。
感情の動きを無視して情報だけ詰め込んでも、読み手の気持ちはついてきません。

セクションやコピーの順番そのものが、説得力を左右します。

④ 各セクションの役割を、はっきりさせる

ワイヤーフレームのセクションをひとつ置くごとに、これは読み手に何を起こさせるためのものか。
これを必ず考えます。

興味を引いて、次のセクションへ進んでもらうため？
価格への不安を、価格以外の価値で解消するため？
それとも、共感で読み手の本音に触れて、ページから離れるのを引き止めるため？

役割がはっきりしているセクションは、文章も配置も自然と決まってきます。
逆に、役割を言葉にできないセクションは、たいてい無くても成立してしまうことが多いです。

⑤ 行動経済学にもとづいてコピーを作る

行動経済学の観点は、クロスバズ全員が意識しているところです。
そもそも人間の意思決定は、必ずしも合理的とはかぎりません。

お得だと分かっていても動かない。
理屈では説明できない理由で選んでしまう。

…そんなこと、普段から普通に起きているんです！

だからクロスバズでは、こうした人の心のクセを逆手にとって設計します。

たとえば、損失を避けたくなる「プロスペクト理論」、
最初に見た数字に基準が引っぱられる「アンカリング効果」、
多くの人が選んでいるほど安心して選びたくなる「バンドワゴン効果」、
第三者の口コミだからこそ信じてしまう「ウィンザー効果」、
限定だからこそ欲しくなる「スノッブ効果」。

こうした認知バイアスを、キャッチコピー・サブコピー・ビジュアル・CTAの配置のどこで効かせるかまで、離脱させない観点で組み立てています。

行動経済学そのものについては、過去にこちらの記事でくわしく書いています。
あわせて読んでいただけたら、うれしいです！

• 行動経済学とは【基本編】やりたいのにできない…私たちの矛盾はマーケの宝庫だった！
• 行動経済学の身近な例7選！つい読みたくなるLPには仕掛けがあった

⑥ ファーストビューのキャッチの軸を、多角的に考える

ファーストビューは、読み手が最初に目にする場所。
ここで続きを読むかどうかが、ほぼ決まります。

だからこそ、キャッチコピーの軸は、一方向だけで決めません。
手軽さで訴える？価格で訴える？それとも、得られるベネフィットで訴える？
いくつもの切り口を並べて、比べて、そのLPの読み手に一番響くものを選び抜きます。

最初のひと言にどの軸を持ってくるか。
それだけで、その先の読まれ方がまるごと変わります！

⑦ オファー部分（CTA）を強める

最後は、行動につなげるCTA。
ボタンの文言、置く場所、そしてボタンの手前に添えるひと言まで、ひとつずつ作り込みます。

意識しているのは、いま押す理由を用意すること。
「あとで考えよう」そう思われた時点で、多くの人は戻ってきません。

だから、すべてのCTAに対して、今このタイミングで動く理由が生まれる心理導線を設計しています。

最後の最後まで、気を抜きません！

【必見】クロスバズのワイヤーフレームは、こうつくっています！

普段クロスバズはどのようにワイヤーフレームを作成しているのか、ちょっとだけご紹介します。

以下は実際の案件に近い、架空のワイヤーフレームとその設計資料です。

確定のテキストが全部入った状態まで作り込んでいるのが伝わるのではないでしょうか。

ワイヤーフレームを形にする前から市場調査〜消費者心理まで考え、戦略的に設計すること。
これこそが、ほかの制作会社にはない、クロスバズ最大の差別化ポイントだと思っています。

そしてこの戦略的な設計・考え方は、ワイヤーフレーム作成のあとのデザイン・実装まで続きます。

手前味噌ですが、クロスバズのメンバーは、全員、成果への執着心がとにかく凄いです。
LPは公開して終わりではなく、問い合わせや申し込みが増えてこそ意味があるので、
ワイヤーフレームの段階から最後の公開まで誰も妥協しません。

クライアントとのお打ち合わせでも社内フィードバックでも、もっと成果が伸びる形はないかと、全員が当たり前のように考えています。

ただ、この「売れるLP」をつくる根幹の部分がワイヤーフレームの精度。
一番重要なフェーズといっても過言ではありません。
だからこそ、私はここで手を抜かず考え抜いた設計で進めていくことが非常に重要だと考えています。

まとめ：ワイヤーフレームをどこまでつくるべきかの答えは、成果の根拠を言える深さ

長くなりましたが、最初の問いに戻ります。

ワイヤーフレームは、どこまで作るのが正解なのか？

私の答えは、
なぜ成果が出るのかを「自分の言葉でちゃんと語れる深さまで」。これに尽きます。

枠を埋めることは、ゴールではありません。
競合との差別化、感情の流れ、各セクションの役割、そして行動につなげる導線。
そのひとつひとつに理由を持たせられたとき、ワイヤーフレームははじめて、売れるLPの設計図になります。

どこまで作るか迷ったら、この構成で売れる理由を自分の言葉で説明できるか。
そこを基準にしてみてください。
きっと、作り込むべき深さが見えてくるはずです！

私たちクロスバズは、戦略的に消費者心理を考え抜いたLPの設計・デザインを得意としています。
もし「最近LPの成果がいまいち…でも戦略的にLPを考える時間も余裕もない！」
「どうしたら売れるLPになるかわからない！」と頭を抱えられている方がいらっしゃいましたら、
是非クロスバズへお気軽にご相談ください。

クロスバズにLP制作を頼んでよかったと感じていただけることをお約束します。

依頼殺到中…！クロスバズのなんか、すごいLP。サービス詳細はこちら