成果の上がるLPのワイヤーフレームを短時間で完成させる方法

この記事のタイトルとURLをコピーする

2016/09/26

皆さんこんにちは。ギャプライズ鎌田@kamatec)です。

Webプランナー・ディレクターさんの多くが「サイト品質」と「制作スピード」とのバランスに日々悩まれているのではないでしょうか?

『ページのクオリティはないがしろにできないが、納期が迫っているから効率よくサイトやLPの構成を切りたい…。』といった悩みは、制作現場に従事するものなら日々感じていることだと思います。

ギャプライズでも「売上が上がるランディングページのワイヤーフレーム(構成)制作に多くの時間をかけているのでは?」というお声をしばしばいただきます。

私自身、経験の浅い弊社スタッフには「時間をかけてもいいから、確実に成果が上がるものを作りなさい」と伝えています。しかし、一方で「長い時間をかければ、確実に成果が上がる精度の高い構成が作れる」という訳でもありません。「成果が上がるなら、いくら遅くてもいい」なんてことは現実問題としてありえません。

今回は、LP制作において「速さ」と「成果」を両立する構成のすすめ方・作り方をお教えいたします。

目次

-準備編-構成制作前に抑えておくコト

1.まず、基本の型に当てはめる

実は「成果の上がるLP」には、一定の型が存在します。

夢のような話に聞こえるかもしれませんが、現実に「型」は存在します。

さすがに「全てのLPにあてはまる」というのは無理がありますが、およそ8割程のLPはこの型に当てはめることができます。型を利用することで、掲載するべきコンテンツやその順番がおのずと決まり成果にも繋がります。

購買心理プロセス

弊社ではこの「成果の上がる型」「ギャプライズ購買心理プロセス」として社内で共有・徹底化しています。「ギャプライズ購買心理プロセス」は、弊社が創業して間もない頃に生み出されたものです。

当時行っていた「FAX DM戦略」の中で、数百枚に渡る反響率が著しく高いDMの原稿を解析したところ、共通するコンテンツや流れが存在することが判明したのです。それらのノウハウを体系化し、Webマーケティングのメソッドに落としこんだものが、弊社の勝ちパターンとなり、現在でも利用しています。コンテンツをイチから考えていては時間がいくらあっても足りません。型にあてはめることは、スピードアップをする上で鉄則です。

例えば、弊社ではこの型をどのように利用しているかというと、

  • ユーザーに「一致と驚き」を与える為インパクトのある事例や他社に負けない実績を訴求
  • 「理由と言い訳」という感情をユーザーに、もたらすため“今しか購入できない”期間限定のキャンペーンなどで訴求する

このように型を利用していきます。

ただし、購買心理プロセスだけではNG!?
「成果に繋がる良いLP」の決め手は、“圧倒的強み”を打ち出せるか否か!

構成のスピードを上げるという話から少し逸れますが、成果を上げるという面において重要なので併せてご説明します。

実のところ、上記のような「ギャプライズ購買心理プロセス」に近しいメソッドを説明した書籍や記事は、数多く出回っています。しかしながらそういった書籍に当てはめただけのLPでは、ユーザーに「コレコレ! こういう商品が欲しかったんだよ!」と言わせることは到底できません。

「購買心理プロセスに当てはめただけの残念なLP」「成果の上がるLP」の差は“圧倒的な強みを訴求するコンテンツ”がページ内にあるか否かという点です。

例えば、下図の製品が検討候補に上がっていた際、あなたならどの会社の製品を選びますか?
圧倒的強みコンテンツのない商品例

A社・B社・C社で意見が別れる、もしくはどこの会社の製品も選ばないといった意見になるのではないかと思います。

このように「圧倒的強み要素」を持たないLPは、いくらデザインや構成の他の部分が優れていても成果を上げることは絶対にできません。

お手伝いする製品の“圧倒的強み”をヒアリングから見つけ出せない場合はその時点でプロジェクト自体失敗と心得よ!

「圧倒的強み・訴求コンテンツ」は、クライアントへのヒアリングを通じて、見つけることができます。我々Webプランナーやディレクターは、Webサイトやページのスペシャリストではありますが、お手伝いする製品のスペシャリストとは限りません。「クライアント以上にその製品の強みに詳しい人はいない」ということを認識する必要があります。

つまりヒアリングこそが「圧倒的強み・訴求コンテンツの種」を見つけ出すための最適なのです。逆説的になりますが、十分なヒアリングから「圧倒的強み・訴求コンテンツの種」となる情報を獲得し、構成に盛り込むことが高速かつ高確率で成果が上がる構成につながるのです。

ヒアリングに関しては、前所長の鎌田が書いた記事も併せて読んでいただくと良いと思います。

Webディレクターがヒアリング前にやっておくべき5つの事前準備 | LPO研究所

2.LPの全体企画を制作前に固める(ながら企画にならないためのコツ)

ワイヤーフレームを制作しながら、LPの全体企画(コンセプト/運用方針)やデザインのトーン(使う色や使用するフォント等)を考えるWebプランナーさんを今でもお見掛けします。

断言します。一部の“超天才プランナー”を除いて、このような「ながら企画」はできません。

自身では「できた」と思っていても、実は出し戻しが増えてしまっているケースがほとんどでしょう。

「ながら企画」がLP制作で最も危険と言われるのには、ふたつの理由があります。

理由1:構成提出時に、クライアントからフィードバックをもらう項目が必然的に多くなる。

もし、「ながら企画」をしてしまうと、

  • 全体の企画内容
  • LPコンセプト
  • 訴求ターゲット
  • メインキャッチ
  • 構成の詳細

というような多くの点を1回の構成提出のみでクライアントに判断してもらうことになるわけです。

理由2:クライントから得た情報を整理する前に構成に向き合うため、熟練したWebプランナーやディレクターでない限り企画全体の精度が落ちる。

この問題を解決するべく、弊社では「LP設計書」の作成を行っています。「LP設計書」は、以下のようなポイントを抑え、LPにおける企画内容の全てをまとめた資料になっています。

  • 現状と与件の整理
  • 競合分析
  • 自社製品分析
  • 業界内容のポジショニング
  • ターゲティング/ペルソナの設定
  • 訴求内容の明確化

企画書サンプル

LP設計書のフォーマットや枚数に制限はありません。資料の量ではなく、上記のような内容を、準備段階できちんとまとめ企画を立案し、クライントとアグリーがとれるかどうかが最も重要です。

この作業でLPの成果の可否が定まるといっても過言ではありません。この策定を手堅くしておくことで、案件事故を回避することにも繋がるのです。

-スピードを上げるテクニック編-構成制作時に時間を短縮する賢い進め方

3.ストーリーは、必ず「手書き」で考える

前段はこれくらいとし、ここからは実際にワイヤーフレーム(構成)を作っていきましょう。
LPのコンテンツ順序、つまり「LPページストーリー」を決めていく作業を行う際は、PCを一旦横に置き、紙とペンと使って「手書き」で考え始めることをオススメします。

手書きで構想を固めることは、

  1. PCと比べ紙に書くコトは心理的な制限を感じづらく、「全体の流れ」を意識しやすい
  2. 周囲からの意見やフィードバックを早い段階で取り入れられる
  3. 案件やケースによっては、クライアントと事前に擦り合わせられる

という3つの利点を得ることができます。

1.紙は書くことへの心理的な制限を減らし「ページ全体」の流れを意識しやすい。

ノート・タブレットPCなど比較的小さいディスプレイを利用している方は、特に気を付けていただきたいポイントです。PCのディスプレイ上だけで構成を組んでいると、立て幅が非常に狭い領域だけを見て作業することになります。

目に入る領域が狭いPCだけで作業すると、「断続的な面」には集中することができますがLP全体の流れを意識することが極端に減ってしまいます。これを原因として熟練したプランナーでも「LPストーリー」が破綻してしまうことがしばしばあります。

購買心理プロセスに沿ったストーリーになっているか、確認しながら作業するために、紙やホワイトボード等、全体を俯瞰できる状態で作業することが重要です。

2.周囲からの意見やフィードバックを早期に取り入れられる。

「感じたことや考えたことを詳細かつ丁寧に伝えれば、正確に共有できる」と思っている方がよくいらっしゃいますが、現実はなかなかそうはいきません。人間は他者の感じていることや思っていることのすべてをくみ取ることは難しいのです。

そこで、物事の詳細を説明する際に「たたき台」を用意するコトをオススメします。家族・上司・後輩などどのような人間でも「たたき台」があるだけで、内容が伝わりやすいフィードバックや意見が積極的に生まれるのです。

経験の浅い人ほどこの工程をはぶいて、仕事が中々終わらない傾向にあります。そんな方は上司に本資料を提出する前に、手書き資料でアグリーをとってから作業するのがオススメでしょう。

3.ケースによっては、クライアントと事前に擦り合わせることができる。

弊社ではクライアントとの関係値や納期までの期間によっては手書きの構成をクライアントとの初回MTG時に提示することがあります。

そうすることでクライアントの要望や案件独自の制限をより具体的に知ることができ、「出せないコンテンツや集まらない事例の為に無駄な時間を使って構成を進める」という無駄を防げます。実際に構成を引く上で、「手書き構成」をつくる作業は欠かしてはならない作業なのです。

4.「お気に入りパーツ」で最短で成果を再現する

まず誤解がないようにお伝えしておきます。弊社ギャプライズが提供するLPは基本的に各クライアント様に合わせた「完全オーダーメイドLP」です。また、本ブログで説明している内容もこういったページを制作するケースを想定しています。

そうはいっても「購買心理プロセス」に沿ったコンテンツを用意する場合、全く別のジャンルの商材でも類似したコンテンツを盛り込むことがあります。

このとき自分や会社独自の「お気に入りパーツストック」の中から選んだパーツを使うことで構成を切るスピードは格段に速くなります。

実際に私の使っている「お気に入りパーツ」を紹介します。

お気に入りパーツ

このパーツをご覧になっていただくと分かるのですが、同じ構成から2種類のクリエイティブが生まれていることが分かりますね。

構成が遅い方は「四角」・「三角」・「テキストボックス」といった図形の大きさや位置を決めるのが「物理的に遅い」といった特徴があります。この手法を使うことで、その弱点を「ほぼ0」にすることが可能です。

「お気に入りパーツ」を使う割合は、案件の難易度に応じてプランナーやディレクターがその都度判断すれば良い問題です。特にクリエイターの経験があったり、クリエイティブディレクションに自信があるといった方は、お気に入りパーツを極力使うことをオススメします。

5.色数やフォント数を減らした「控えめな構成」を心掛ける

色数やフォント数が豊富な構成は「デザインのトーン&マナー」をクライアントと擦り合わせるために非常に重宝します。が、「速さ」「成果」に繋がることは“絶対ない”ということを認識してください。その上で「主張する構成」を作るか作らないかを判断するといいと思います。

構成をつくるのが不慣れなうちは、

  • 黒色
  • 白色
  • 濃灰色
  • 薄灰色

といったモノクロ4色程度で組んでいくほうがいいでしょう。

色を入れながら組んでいくと、色選びや配色に悩み、気付いたら1時間、2時間も経過・・・していたなんて経験が、私自身もあります。好きな商材や注力したい案件ほどやってしまいがちです。

充分な時間があり、こういったことを考えるのが好きなのであれば無理には止めません。が、進行がスムーズにいってない時は「あなたの職業がプランナーである」ことをいまいちど意識するべきでしょう。「速さ」と「成果」をアップするために領域外の仕事を無理にする必要はないのです。

また、同様の理由でフォントの種類も減らしましょう。メイリオなど小さい文字サイズでもアンチエイリアスが有効で、大抵のパソコンにプリインストールされているフォントがオススメです。

どうしても手間をかけたように見せたいという方には「新ゴ」がオススメです。標準フォントではないのですが、フォントファミリーが豊富でインパクトを感じさせます。「勢いがある」といった印象を持つクライアントが多いようです。

6.作るページに合わせたフォーマットを用意する

構成を作る際はパワーポイントやエクセルなどで一定の幅を決め上から組んでいくことがほとんどでしょう。その際、構成の横幅をなんとなくで決めている人が多いのではないでしょうか?

この横幅ですが、作るページに合わせて事前に策定することを強くオススメします。

PCなのかSPなのか、幅広ページを想定しているのか、狭いページなのかを意識しそれらに合わせた横幅にします。こうすることで、実際に入る文字量を正確に見積ることができます。

LPの知見が多少ある方の中には、『LPは流し読みをする人が多いから、見出しは2行位が良い…。』と言う方が多くいます。たしかにそれは間違っていません。しかし、作るページに応じて「2行が20文字程度になる場合も30文字程度になる場合もある」という認識は持っておくほうがよいでしょう。

これを意識した上で構成を進めないと、『あれ? この文章3行になっちゃうから、文字を減らして無理やり2行に押しこめたい』といった無駄な作業を何十・何百回も繰り返すことになります

事前に構成の横幅を策定していれば、文章の練り直しにおいても構成上の文字サイズを過度に調整することを防げるのです。

最近のLPのコンテンツ幅は960ピクセルを超えることも多いので、普段からデバイスに応じて構成を使い分けている方ももう一度自身の構成幅を見直してみて下さい。

まとめ

いかがでしたでしょうか。

冒頭でも述べましたが「時間短縮=効率的に手を早く動かすこと」と考えてしまいがちです。

けれども今回ご紹介したような

  • 「物理的」に構成のスピードを早くする手法
  • 「企画や構成」を考えている思考の時間を短くする手法
  • 「クライアントからの出戻り」を少なくする手法

といった手法からのアプローチも可能なのです。

仮に「手を早く動かすこと」で構成を作成できたとしても、成果に繋がるかは疑わしいと言わざるを得ません。

  1. 製品の強みをしっかり見つけ、理解する。
  2. 過去にうまく行ってるパターン、型をなぞる。
  3. 作業戻りを極力防ぐ。

普段の構成作りがこれらを意識出来ているか、もう一度見直してみてはいかがでしょうか。

それではまた次回。

この記事のタイトルとURLをコピーする

関連記事一覧

タグから探す
パフォーマンス
バックオフィス
Web接客
DX(デジタルトランスフォーメーション)
SMSマーケティング
マーケティング全般
市場・競合分析
AR(拡張現実)
画像認識AI
VOC(voice of customer)
BI(ビジネスインテリジェンス)
D2C
EC
ロイヤリティマーケティング
リードジェネレーション
インサイドセールス
インフルエンサーマーケティング
UGCマーケティング
SNSマーケティング
コンテンツマーケティング
メールマーケティング
ソーシャルリスニング
サイト改善
レコメンド
パーソナライズ
ABテスト
UI/UX
ヒートマップ
LPO
アクセス解析
EFO
サイト集客
SEO
Googleショッピング
アドフラウド(不正広告)
広告最適化
リスティング広告
SNS広告
Amazon広告
営業・顧客管理
プロジェクト管理