良いランディングページの成否を決める、ワイヤーフレーム設計その2

 

今回の記事は、ランディングページのワイヤーフレームの設計をテーマにした第二弾の記事になります。ランディングページの制作においては様々な工程がありますが、その中でも最初の工程となるワイヤーフレームの設計は、その後の成果物のクオリティーを決める重要な工程になります。以前の記事では、制作上のポイントをお伝えしましたが、第二弾の今回は、ワイヤーフレーム設計自体のプロセスについてお伝えします。

 

 

改めて定義しますと、ワイヤーフレームとは、デザインを制作する前段階でのランディングページそのものの設計書です。全体のシナリオ・コピーライティング・大まかなレイアウトや実際に使用する写真が配置されたものになり、デザインを行う上でのベースとなるものです。

 

 

 

 

ワイヤーフレームの設計はそのランディングページの骨組みになるものであり、その設計を間違えると、デザインやコーディングがしっかりしても、目指す成果を達成できないランディングページになってしまいます。

 

 

ランディングページの制作工程を大まかに分解すると、ワイヤーフレーム設計・デザイン・コーディングという3つの工程に分けられます。その中でも最も制作にかける時間を読みにくいのがワイヤーフレームの設計になります。コンバージョンラボでは、これまでに400本以上の様々な業種・商品のランディングページを制作してきましたが、最もノウハウ化しづらい職人の領域にあたるのがこのワイヤーフレームの設計だと思っています。

 

 

非常に企画力や経験値が求められる領域でもあるため、その設計プロセスも標準化しづらい面がありますが、以下の4つのプロセスに沿って進めることで、どのようなポイントに留意して作成すればよいか参考になるかと思います。

 

 

【ワイヤーフレーム設計プロセス】

 

1.事前準備（入口と出口の設計、キーワードリサーチ、競合調査）

 

2.大まかな流れを決める（シナリオ設計）

 

3.詳細テキストを書く（コピーライティング）

 

4.レイアウトの設計と写真選定

 

 

事前準備（入口と出口の設計、キーワードリサーチ、競合調査）

 

 

ワイヤーフレーム設計にあたっては、いきなりシナリオをつくるのではなく、いくつかのやるべきことがあります。

 

 

入口と出口の設計

 

 

まず入口と出口の設計が必要です。入口の設計とは、想定されるターゲット像を明確にすることです。ターゲット像は、どんな人に向けて訴求するのか可能な限り具体的にすることが大切です。もちろん、性別や年齢などの設定は当たり前のことですが、一番重要なことは、そのランディングページでアプローチしたい人がどのような悩みやニーズを持っている人なのかを具体的に想定することです。この想定・仮説次第で、ランディングページで伝えたいことやコピーやデザインの表現が変わってきます。

 

 

出口の設計とは、コンバージョンポイントを明確にすることです。コンバージョンとは、資料請求や問い合わせなどのユーザーが行うアクションのことですが、実際にユーザーにどのようなアクションを起こさせるかを明確にしておくことが大切です。そのことによって、ランディングページ自体のシナリオやコンテンツも変わってきます。

 

 

たとえば、「店舗への来店」をコンバージョンポイントに設定した場合、来店したいと思わせるようなコンテンツ設計が必要です。実際に店舗の写真をしっかり見せたり、来店自体の動機を形成するようなコンテンツが必要になります。あるいは「資料請求」をコンバージョンポイントとした場合は、資料を請求したいと思ってもらえるように資料の中身を少し見せるなどの情報設計が必要です。

 

 

 

キーワードリサーチ

 

 

ユーザーがどのような検索ワードを用いて、そのランディングページにたどりつくのかということは設計上、欠かせない要素です。自社の商品・サービスに近いキーワードを調べ、検索ボリュームの多いキーワードを意図的にランディングページの中に盛り込んでおくことが大切です。そうすることで、ユーザーのニーズとマッチしたランディングページに仕上がるとともに、広告の品質スコアを高めることや、SEO的な効果も見込める可能性があります。

 

 

また、ユーザーニーズを把握するのにも役立ち、検索ボリュームや検索傾向から、ユーザーがどのような悩みを持ち、解決方法を探しているのかの理解につながります。

 

 

キーワードの検索ボリュームを調べる方法は様々です。
参考情報として、いくつかご紹介しておきます。

 

 

■Google トレンド
https://trends.google.co.jp/trends/

 

■Google AdWords キーワード プランナー
https://adwords.google.co.jp/KeywordPlanner

 

■yahooプロモーション広告　キーワードアドバイスツール
http://promotionalads.yahoo.co.jp

 

 

他にもすでに運用しているランディングページへの流入キーワードを調べる場合には以下のツールが活用できます。
こちらも一例です。

 

 

■Google Analyitics（グーグルアナリティクス）

https://analytics.google.com/

・・・ランディングページ・webサイトを運用する上での必須ツールです。自社のランディングページやwebサイトにどういうキーワードで流入しているのか調べることができます。

 

■Similarweb（シミラーウェブ）

https://www.similarweb.com

・・・URLの入力だけで、そのランディングページやwebサイトのアクセス状況がわかる便利なツールです。対象サイトへの流入経路やキーワードなどを無料で調べることができます。有料版もあります。

 

 

競合企業・競合商品のランディングページの調査

 

 

複数の競合他社がすでにランディングページを運用している場合には、他社のランディングページ自体を見ておく必要があります。どのような訴求を行なっているのか？どのようなコンテンツを配置しているのか？どのようなデザインを行なっているのか？などいくつかのポイントを設定して、比較表などをつくってみると自社のランディングページのワイヤー設計の際に、非常に役立ちます。可能であれば比較表にすることで、どの企業のランディングページにもある定番コンテンツや逆に差別化できるコンテンツが見えてきます。

 

 

競合調査の考え方や詳しい内容について、別の記事にまとめておりますので、こちらもご参考ください。

 

・ランディングページ制作に欠かせない競合LP調査

https://conversion-labo.jp/report/lp_design/7790/

 

 

大まかな流れを決める（シナリオ設計）

 

 

事前準備が整ったら、実際のランディングページ全体の流れを大まかに決めていきます。大まかな流れのイメージとしては、必要なコンテンツを一通り並べてみて、順序の優先順位をつけることです。優先順位をつける際には、まずファーストビュー（最初の画面）で何を伝えるべきなのかを決めることがポイントとなります。

 

 

その際には、入口の設計で行なったターゲット設定が役立ってきます。ターゲットの悩みやニーズを想像することで、最初に伝えるべきことが変わってきます。最初に伝える内容次第で、その後に伝えるべき内容も変わってきますので、しっかりとユーザーインサイト（ユーザーの悩みやニーズを想像）することがシナリオ設計上、重要になります。

 

 

詳細なテキストを書く（コピーライティング）

 

 

大まかなシナリオが決まったら、各コンテンツの見出しキャッチとボディーコピー要素を考え、情報を具体化していきます。情報を具体的にする中で、コンテンツの順番の入れ替えなどが必要になることも出てきます。詳細情報へと落とし込んでいくことで、より適切なシナリオが見えてきます。2のステップと3のステップは、厳密には行き来することが多いでしょう。また、テキストの詳細化を行う際には、準備段階で抽出したキーワードも見出しをはじめとして適切に盛り込んでいくことが大切です。

 

 

レイアウトの設計と写真選定

 

 

具体的なテキストが文字ベースでできた後は、実際にエクセル等で、レイアウト作業を行なっていきます。この段階はデザイン作業とは異なるものではありますが、動きのあるレイアウトが必要になるランディングページでは、ある程度、ワイヤーフレームを設計する担当者がデザインのベースとなる設計図に落とし込むことが大切です。

 

 

また、写真選定も非常に重要になってきます。完成したランディングページを運用する際に、ヒートマップなどの解析ツールを使って分析を行いますが、ABテストの際にも、写真を変更するだけでスクロール率が大きく変わるという事例も数多くあります。それだけ写真が果たす役割はランディングページ上でも大きいものだと言えます。特にレンタルフォトなどを使う際には、如何にもレンタルフォトっぽい写真を使うのではなく、リアリティーのある写真を選ぶことで、購入する費用は同じでも見栄えが全く異なるものになるでしょう。仕上げのイメージに大きく関わるだけに写真選定にもしっかりこだわることは重要なポイントです。

 

 

 

まとめ

 

ワイヤーフレームの設計には、実際には経験値が必要になってきますが、上記のようなフローをおさえておくことで、0の状態からつくることに比べて、かなり設計がスムーズになると思います。

 

 

今回の記事では良いランディングページの成否を決める、ワイヤーフレーム設計についてのポイントを設計プロセスという観点からまとめてみました。