商品やサービスの売り上げを伸ばすための手段としてLP（ランディングページ）があげられます。
今回はセブンデックスがLPの制作・改善を通しかけたコストの何十倍の成果に繋がった事例を元に、LPをどう制作し運用していけば良いかお話していきます。
目次
LP（ランディングページ）とは
そもそもLP（ランディングページ）とはなんでしょうか？
縦長1枚のページに商品やサービスの情報が詰まったものといえばイメージがつきやすいかもしれません。ランディングとは「着地」という意味で、顧客が検索や広告から一番最初に着地するサービスページをさします。
LPの役割はコンバージョンを向上させる事です。
LPはサービスの概要や共感を得るコンテンツが1枚のページにまとまっています。そのためページの遷移によるユーザーの離脱を避け、効率的にコンバージョンに繋げる事ができます。
- コンバージョン…マーケティングの分野ではwebサイトで最終的に獲得できる成果をさします。ECサイトでいえば商品の購入。
LP制作の流れ
基本的なLP制作の流れを説明します。
まずはLPを作るためにはどんな人が必要でしょうか？
- ディレクター…目的やコンテンツなど構成を考える
- コピーライター…キャッチコピーを考える
- デザイナー…見た目を考える
- エンジニア…LPを実装する
…といった役割があげられます。しかし、現場では人員や納期といった制約から、案件への取り組み方は様々です。セブンデックスのLPは構成を考えるPMが1人、キャッチコピーやデザインを考えるデザイナーが1人、実装は外部に委託したため社内で制作に携わったのは2人でした。
そのため、今回は特定の役割事ではなく一連のプロセスを辿る形で制作の流れを説明します。
- 目的設定
- ペルソナ設定
- コンテンツ整理
- 競合分析
- ワイヤーフレーム
- デザイン制作
- コーディング
- 運用
（1）目的設定
まずはなんのためLPを作るのか考えましょう。一括りにLPと言ってもその目的によって、見せ方は違ってきます。
商品を売りたい
ユーザーは商品の購入を検討する際、
「自分にあった商品なのかな」
といった不安を抱えています。
不安を払拭してあげるため、商品の写真やお客様の声などを多く載せてあげましょう。
BtoBの商品を売りたい
BtoBの商品購入を検討する際は、複数の企業を比較し最も自社に適した企業はどこか探します。他社の商品に比べどこが優れているのか分かるよう、事例を多く載せたり導入の流れといった説明をしましょう。
（2）ペルソナ設定
ユーザーの課題感を明確にするためペルソナの設定をしましょう。
例えば同じ目的のユーザーでも、男性か女性かで興味を持つコンテンツは異なります。何に悩んでいて、それを解決するためどんな情報が欲しいのかは人それぞれです。一方的な情報発信にならないよう、誰に届けるLPなのかペルソナを設定し明確にしましょう。
（3）コンテンツ整理
ユーザーは課題を解決するために、どんなキーワードで検索するか考えましょう。そのキーワードがどのくらい検索されているのか確認する事で、実際にニーズがあるのか、LPを見にきてもらえるのかなどが把握できます。
キーワードが決まれば、その人にどんなコンテンツを提供すれば満足してもらえるかが見えてきます。どんなユーザーがどんなシーンでLPを見にくるかを想像し、載せるべきコンテンツを整理していきましょう。
（4）競合分析
コンテンツが整理できたら競合分析をしていきましょう。
キーワード単位で検索し、競合はどんなコンテンツを提供しているか調べます。差別化をするためには競合と違う視点を取り入れたり、同じ視点でも良いものを提供できる部分はあるかなどコンテンツの見せ方を考えます。ユーザーが見たとき、問い合わせたくなるようなフックとなる要素を作りましょう。
（5）ワイヤーフレーム
LPは商談をwebで行っているようなものです。商談で上手く契約を結びつけるには「誰に、何を、どのような順番で」話すかが大切です。LPも同じでどんな構成でコンテンツを伝えるかが大切です。
一般的にLPはこのような構成で作る事が良いとされています。これを元に、ユーザーがどのような流れでLPを見るか考えワイヤーフレームを作成します。
商談で「誰に、何を、どのような順番で」話せば良いか考えるように、ワイヤーフレームでも「どこに、何を、どのような順番で」配置するか考えましょう。
（6）デザイン制作
ワイヤーフレームを元にデザインをしていきましょう。
商品についてを1つのページにまとめるという性質上、どうしても情報量が多くなってしまいます。
その中でも一番目立たなければいけないのは商品写真やコンバージョンエリアです。そのため、商品写真の周りは余白をとったり、コンバーションエリアはLP全体で目立つ色を使うなどメリハリを持たせたデザインが大切です。
（7）コーディング
決まったデザインを元にLPを実装していきましょう。自社でエンジニアを抱えていない場合は外部に実装を委託することになります。この際に作る開発仕様書はエンジニアが困らないように、思った通りのLPができるようにといった理由があります。
スムーズにLPを実装するにはコンポーネントの活用が有効です。
画像や動画の比率、文字サイズをコンポーネントとし、LP制作に一貫したデザインを用いる事でエンジニアの負担軽減に繋がります。その際は、デザイナーは背景の画像を工夫するなど、同じようなページだと思わせない工夫が必要です。
（8）運用
LPは一度作って終わりではありません。どんなユーザーがどのようにLPを見ているかデータを集め改善していく必要があります。
ヒートマップ
Hotjarなどのサイト分析ソフトはマウスの動きや画面の滞在時間から、ユーザーがどこに興味を持っているか視覚化します。サーモグラフィーのように、ユーザーが興味を持って見ている部分が赤く、興味を持っていない部分が青くなります。これによりどの部分に修正が必要か見極める事ができます。
A/Bテスト
AとB、2つのパターンを用意しユーザーの反応の違いからどちらが適した表現か検証します。アイキャッチやキャッチコピー、ボタンの配置などの改善で活用します。
セブンデックスが案件獲得につながったLPの事例
ここからはセブンデックスのLPを元に、案件獲得に繋げるにはどうすればいいか解説していきます。
セブンデックスはUXデザイン、データグロース、ブランディングの3つの事業を展開しています。今回はその中でもブランディングの案件獲得を目的とし制作したLPについて説明します。
（1）目的の設定
「売り上げを上げる」という課題があり、「問い合わせを増やす」という目的を設定しました。そこで考えた問い合わせを増やすための施策が以下の3つです。
- 自社メディアの発信…社内のナレッジを記事として発信する
- 広告…リスティング広告を設定しLPに誘導する
- 紹介…以前お取引をしたクライアント様にお声をかける
自社メディアは長期的に続けないと成果が出ず、紹介もいつ成果につながるか分かりません。そのためセブンデックスではこれら2つの施策を進めつつ、短期的に安定した成果を得られる広告に力を入れました。
広告にはいくつか種類がありますが、今回はリスティング広告からLPへのアクセスを狙いました。リスティング広告はユーザーが特定のキーワードを検索した際、それに連動して表示される広告です。検索は少なからず興味を持ち行うので、ニーズが顕在化しているユーザーに対してアプローチする事ができます。
（2）ペルソナの設定
ブランディングについて問い合わせをする人はどんな人か。それはクライアントとなりうる企業の意思決定者と考えました。
リスティング広告はどんな属性に対して広告を打つか指定する事ができます。そこでGoogleアナリティクスで設定できる項目を元に、ペルソナの属性を設定していきます。設定した項目の一部は以下の通りです。
- 年齢：26~55才…マネージャー職の人が30~50代と考えられるため
- 性別：男性…マネージャー職の人は一般的に男性が多いため
- 在住地：東京23区内…全国に広告は打っても現実問題仕事を受けるのが困難なため
（3）コンテンツ整理
ユーザーがどんな課題感を持っているか把握するため、ペルソナがどんなキーワードを検索しそうか列挙していきました。
- ブランディング 会社
- ブランディング コーポレート
- 経営コンサル
- リブランディング
- 新規事業
キーワードは言葉単体だけでなく共起語についても考えます。情報を検索するとき、課題を持っていれば「ブランディング」という言葉単体ではなく「ブランディング ○○○○」と調べるかと思います。これによりターゲットの課題感が鮮明に掴めます。
上がったキーワードの中から自社が解決できる事をピックアップし、自社のソリューションとターゲットのニーズをすり合わせます。それらを踏まえると、どんなコンテンツを提供すればいいか見えてきます。
（4）競合調査
狙うキーワードが決まったら、キーワード単位で競合について調べました。抑えておくべき要素を把握したり、構成単位でどのような事を伝えればいいかが分かります。競合との差別化を測りつつも、どうすれば広告から飛んできたターゲットが安心するかを考え必要なコンテンツの見せ方を考えます。
例えば「ブランディング 会社」で検索したユーザーは、
「その会社に頼むと、どんなブランディングをしてくれるのだろうか」
と不安を抱えています。
多くの場合、解決策は事例の紹介です。しかしクライアントとの契約の関係で具体的な内容を載せられない場合が多々あります。そこで架空の企業を想定しリブランディングを行う事で、具体的なブランディングプロセスを掲載しました。
これにより競合との差別化をしつつ、ユーザーの不安を解消する事ができました。
（5）ワイヤーフレーム
ユーザーがどんな流れでLPを読むか、ストーリーを立てワイヤーフレームを設計しました。
ユーザーは「数字をあげたい」「売り上げを伸ばしたい」と課題を抽象的に捉えています。
これらの課題は「UXの設計ができていない」「自社のブランディングができていない」など専門用語を用いれば、解像度を上げて語ることもできます。しかし、そんな知らない専門用語にユーザーは共感しません。
専門的な言葉で自社のできる事を説明する場合も、まずはユーザーから共感できる話から始めるよう構成を立てなければいけません。
（6）デザイン
LP全体でセブンデックスらしさが表現するよう、次の点に注意しデザインをしました。
- カラー
- フォント
- 図形
- アイキャッチ
カラー
自社らしさを出そうと、むやみにコーポレートカラーを使えば良いわけではありません。
LPは情報量が多いため、まずは白黒でデザインをし目立たせたい所に対して色を置いていきます。
コーポレートカラーを単色で使うのではなく、グラデーションで使う事でセブンデックスらしさを出しました。
フォント
欧米フォントはGothamを和文フォントはNoto Sans JPを使いました。太めのズドンッとしたフォントは、セブンデックスの力強さや誠実なイメージを表現します。
図形
LPのなかで使われている図形にもこだわりがあります。
下の図のようにセブンデックスのシンボルマークをモチーフにデザインがされています。
アイキャッチ
アイキャッチは「ブランディングで事業を伸ばす」というイメージを表現しています。
一般的にアイキャッチには写真を使う場合が多いですが、どこかコンサルティング会社の様に見えセブンデックスらしさがありません。そこで、セブンデックスのロゴをモチーフにし、デザイン会社らしさと「事業を伸ばす」というイメ―ジを両立させました。
（7）コーディング
開発仕様書では、デザインの要件をピクセル単位で規定します。
どのオブジェクトがどんな条件で配置されているか決めないと、ウィンドウサイズが変わった際などにデザインが崩れてしまいます。開発仕様書では規定しきれなかった部分も、エンジニアとしっかり話し合って仕様を詰めていきました。
（8）運用
LPをリリースしてすぐに案件獲得ができたわけではありません。
はじめはなかなか成果に繋がらず改善を繰り返しました。なかでも注力したのが次の2点です。
キーワードの最適化
問い合わせを頂いても、お話を伺う中でニーズに沿わず案件に繋がらない場合もあります。齟齬をなくすためにはキーワードの最適化が有効です。
Googleアナリティクスでは、顧客がどのような検索ワードでLPに辿り着いたかが分かります。実際の問い合わせ内容と照らし合わせる事で、想定したキーワードで狙ったユーザーが来たのか検証する事ができます。キーワードを最適化していく事で、より自社の価値が届く顧客につながるよう広告を打てるようになりました。
構成の最適化
LPは基本となる構成はありますが、運用データを元に構成を組み変える必要があります。
Hotjarは、ヒートマップやユーザーがサイトを閲覧した様子を動画で見れます。すると、LP上段で離脱してしまい下段まで読まれていない事がわかりました。
とくに離脱が多かったのは「共感」の部分です。「確かにこういう悩みあるな」と思ってもらえても、それをプロに任せようと思って貰えなかったようです。そこでセブンデックスのメンバー紹介を挟み、ブランディングが小手先の物ではなくプロの力が必要であるというメッセージを加えました。
これにより構成は
1.アイキャッチ
2.共感
3.共感の念押し
4.事例
5.導入実績
…となりました。
ユーザーを惹きつけ共感してもらい、裏付けとなる事例を見て、それをどうやって実現するか知ってもらう。そんな体験ができる構成としました。
おわりに
これらの改善を繰り返すなかで、最終的にはコストの何十倍となる案件獲得の獲得に繋がりました。
LPを改善をする際、何が原因で伸びていないかはハッキリとは分からず1つずつ潰していくしかありません。確かにLPの作成は売り上げを伸ばす事に貢献しますが、決して魔法の道具ではなく継続して取り組む姿勢が大切と言えます。
UXUIデザイン支援資料
セブンデックスのUXUIデザインプロセスと実績詳細が解説されている資料を無料でダウンロードできます。
