【LPO】結果を出せる!ランディングページの作り方

Webマーケティングの中で、最もゴールに近いのがLP(ランディングページ)。

LP作成についてのフレームワークは検索するとたくさん情報が出てきます。

でも、「解る」ことと「出来る」ことは違いますよね?

フレームワーク通りに制作したのに、

実際にデザインしてみたら、何だか印象に残らないLPになってしまった。

ディレクターの依頼内容は全てクリアしているのに、どうも今いち「シズらない」など。

そこで今回は、LPのアプトプットを担うデザイナーさん向けに

運用の実体験に基づいた具体的なノウハウをお伝えして行きたいと思います。

LPデザインはフレームワークの先が難しい!

LPには必要な要素を満たしながら、ページ全体を通して

ユーザーがどのように思い、どう行動して行くのかストーリーを立てて作ります。

LPの役割・重要性・構成要素などについては、こちら記事をご参照ください。

5年間のランディングページ制作で行き着いた鉄板の構成と7つのポイント

デザイナーもこの部分を担えれば理想的ですが、

現実的にはディレクターやマーケターがここが設計してるケースが多いでしょう。

なので、ここでは、ストラクチャ(設計書、指示書)などのアウトラインを受け取った後で

デザイナーがすべきことをお話しします。

<制作に入る前>

【1】LPの流入条件とゴールを理解

【2】ターゲット&ペルソナを確認

【3】制作における「キモ」を決める

<制作>

【4】デザインテイストを決める

【5】制作~ファーストビューに注力

【6】全体の流れ、メリハリを調整

【1】LPの流入条件とゴールを理解

仕事としてのページデザインには必ずビジネスゴールと、ターゲットユーザー(ペルソナ)があります。

ここからズレると、「デザインとしてはキレイだけど、結果が出ない」ページになってしまいます。

例として 「留学デビュー」のLPの流入条件とゴールを見てみましょう。

・流入条件:

「留学」や「ワーキングホリデー」で検索したユーザー

・LPのゴール:

留学エージェントに資料請求をする

流入条件とは集客方法やキーワードですが、ユーザーの意向や、サービス理解度を知る重要なポイントとなり、次の【2】ターゲット&ペルソナ理解に繋がります。

【2】ターゲット&ペルソナを確認

Webマーケティング全体に言えることですが、とにかく「誰に訴えるのか?」は最重要ポイントです。

性別は年齢だけでは不十分。

ディレクター・マーケターと話し合い、その人の嗜好性・サービス理解度・意向度 は最低限でも押さえておきましょう。

◼︎ターゲット属性

・女子大学生・20代前半の若い女性

◼︎ペルソナ

・情報収集があまり得意ではない。

・ 面倒な事が嫌い。割と慌てん坊。

・ エンタメ大好き。ミーハー。

◼︎サービス理解度

・低め。

 → 検索ワードは「留学」「ワーキングホリデー」というビッグキーワードなので、

   留学には漠然と憧れあるが、どうすれば実現できるか具体的な手段を知らない段階。

   留学エージェントの存在も知らない可能性が高い。

◼︎意向度

・高い。顕在層。

→ゴールが資料請求という意味で健在層

◼︎ディヴァイス

・スマホで見る人が多いか?PCが多いか?

→レスポンシブルデザインにする場合、スマホとPCどちらでの見易さを優先するかなど、レイアウトの仕方に関わります。

ターゲットをあまりに幅広く設定すると訴求が刺さりにくくなり、効果は出にくくなります。

アレもコレも取ろうとせずに、「こういう人だけに刺されば良い!」という割り切りでペルソナを明確に、具体的に設定しておきましょう。

ペルソナによって、情報を見せる順番や、何を目立たせるべきかが、大きく変わって来ます。

【3】制作における「キモ」を決める

【1】と【2】を踏まえて、制作において一貫して念頭に置くべき「キモ」を決めます。

デザインのテイストや、コピーのトンマナ、情報のボリューム感などに関わって来ます。

このLPの例では下記を「キモ」として制作しました。

・解りやすさ

・親しみやすさ

・ミーハー心

・とにかく簡単に!友達に説明する感覚で!

正確に間違いなく物事を伝えようとすると、このペルソナにとってはボリューム過多になる。

なので、少々大雑把でも

「要するにこーゆーこと!」「ぶっちゃけ、こう!」「簡単に言うとこう!」

というマインドでストーリーを作っていきました。

【4】デザインテイストを決める

いよいよ制作段階です。

デザインテイストに影響する3つの要素を決めます。

①配色

②画像

③フォント

このLPでは下記のように設定しました。

①配色:

カラフル、ポップ、ガーリー

 ピンク系と茶系をメインカラーに、

ミントブルー、アップルグリーン、ゴールデンオレンジを差し色で

海外のキャンディストアのようなイメージのカラーコディネート。

②画像:

海外ドラマで見るような、日本にはない憧れの風景

カワイイ建物やカフェ、庭でのBBQパーティ、大学のカフェテリア

楽しそうな女の子たち

③フォント

丸みを帯びたフォント。

手書き風フォントをポイントに。

【5】制作~ファーストビューに注力

制作の中で力を入れるポイント、目立たせるポイントを押さえてメリハリのあるページに仕上げます。ざっと全体に必要な要素を入れた後、ファーストビューに注力して作り込みます。

なんだかんだ、LPの決め手はファーストビューです。

ユーザーは数多くのサイトを見ては閉じて比較して行きます。

なので、まず最初の数秒で興味を持たせなければなりません。

下記のポイントを踏まえて制作しましょう。

①ペルソナ好みの世界観になっているか?

海外ドラマや海外セレブ雑誌で見たような憧れのキャンパスライフをイメージさせる写真、

女の子の好きな配色とハートなどのパーツで、

ワクワク楽しく読み進められそうなデザインに仕上げています。

②一番言いたいことが一瞬で伝わるか?

「前から留学したいと思っているけど、どうしたら良いか分からない」状態で止まっている人に対し、「このサイトに従えば、最初の一歩を踏み出せる!」という事を伝えています。

また、この例でのペルソナは、じっくり読み進めるタイプではありません。

なので、ファーストビューだけで結論がわかり、仮に下まで読まなくてもすぐにアクション出来るような構成にしています。

ペルソナがじっくり読み進めるタイプの場合は、「○○でお困りではないですか?」のように

疑問を投げかけ、その先まで読み進めさせる方法も有効です。

③流入前のクリエイティヴとの違和感がないか?

検索した時に出てくるバナーやタイトルや説明文をクリックしてLPを開いた時、違和感がない内容になっているか?

このLP例では、ユーザーは「留学」というキーワードで検索し、下記のタイトルをクリッしてこのページを見ることになります。

【留学デビュー】女子のための留学サイト。最新の留学情報や格安プラン無料パンフレット取り寄せも♪

タイトルをクリックしたユーザーの期待に応えられるファーストビューになっているかが肝心です。

【6】全体の流れ、メリハリを調整

最後に全体の流れ、メリハリをチェックします。

検索したユーザーの気持ちになって、ユーザーと同じ画面サイズで、ユーザーが見る速度でスクロールしてチェックしてみましょう。

主なポイントは3点です。

①CTA(お問い合わせボタンなど)

②見出し

③全体の流れ

①CTA(お問い合わせボタンなど):

お問い合わせボタンや申し込みフォームなど、ユーザーが最終的にアクションをするパーツをCTA(Call to Action)と良います。

CTAはサイト内で目立つ色やトーンにする方がクリック率が高い傾向があります。

馴染み過ぎない、サイト内で目立つ色や、少し立体的にするなど、

「問い合わせしたいと思ったら、ここを押せば良いんだな」とはっきり解るデザインにしましょう。

CTAを入れる位置ですが、今まで運用したLPでクリック率を計測したところ、

サイトの一番上と、一番下がクリック率が高いのが解りました。

まずはファーストビュー内にはCTAを置くようにしましょう。

中間のCTAに関しては、1セクションごと、1スクロールごとなど、コンテンツボリュームに応じて配置すると良いでしょう。

特にスマホからの流入割合が多いページの場合は、スマホで見て良い区切りの箇所にCTAを置くようにします。

②見出し

記事制作のメソッドと同じで、見出しだけ流し読みをしても、全容が把握できるような見出しをつけます。

デザインも、見出しの内容が瞬間的に頭に入って来るようなフォントサイズと色を心がけましょう。

③全体の流れ

ストレスなく読み進められて、スムーズにアクションできるようになっているかをチェックしましょう。

・CTAの周りには程よいスペースを空けて目立たせる。

・セクションとセクションの間は十分なスペースを空けて、構成をわかりやすくする。

・思わず読み進めたくなるように矢印を入れるなど。

流れが止まらないように。でも、セクションの区切りでは程よくひと呼吸できるようにして、読みやすいページにします。

いかがでしたか?

最もビジネスゴールに近いLP

サービスの成功を担うデザインです。

 

ユーザーの気持ちに寄り添って、最適なLPデザインを考えましょう。

小林ひかる

小林ひかる

女子美術大学卒業。ベーシック勤務12年。 LPやサービスサイトを中心に、企画・コピーを含めたトータルで「ユーザーに伝える」を担います。 「デザイナーではありません。ビジネスマンの心強いパートナーです。」をモットーに、誰のためのデザインかを考えて制作しています。 洋楽ROCKとイチローが好き。

Recommend Articles

1

バナーのデザインで悩んだ時に参考にしたい5つのパターン

簡単なようで難しいバナーをデザインすることって難しいですよね。小さいスペースに必要な要素を入れなければならないので、悩んだことがある方も多いのではないでしょうか?この記事ではバナーデザインを取り上げるだけではなく、どんなところが参考になるのかを合わせてご紹介します!バナーのアイデアで煮詰まっているデザイナーさんや、デザインの勉強のためにバナーのコピーをしようと思っている学生さんは是非読んでみてください。

2

簡単にオシャレで見やすくなるスライドの作り方

この記事では、デザイナーではない方や新人のデザイナーさんがプレゼンテーション(パワーポイントなど)のスライド作成で困ったときに、簡単にオシャレで見やすいスライドを作る方法をご紹介します! 法則に則って作成すれば、簡単にキレイなスライドを作ることが出来ますよ!

3

【イベントレポート】UX、デザイン思考、サービスデザインのための「チームで使える共感ペルソナ™入門 」

サービスの設計をする際にペルソナを決めるのはもちろんですが、それをチームでうまく共有し活用するのは想像以上に難しいですよね。チーム内でうまく共有できず、いつの間にかペルソナが忘れられてしまっている…なんてことは少なくないのではないでしょうか。そうしたペルソナ作成の難しさを解決するヒントをさぐるため、先日、株式会社アイ・エム・ジェイ R&D室主催のイベント「UX、デザイン思考、サービスデザインのための『チームで使える共感ペルソナ™入門 』」に参加してきました!

4

別に最初から正社員じゃなくても良い〜未経験からWebデザイナーになるまで私が行ったこと〜

今年の7月からデザイナーとして働いているのですが、実は元からデザイナーだったのではなく、アルバイトとしてベーシックに入社したという経緯があります。なぜ正社員ではなく、アルバイトからスタートして、どのような経緯でデザイナーにコンバートしたのかをここにシェアして、今後未経験の業界に転職を考えている人、特にWebデザイナーへの転職を考えている人への参考になればと思います。

5

「実績や得たノウハウを発信するところまでがシゴトの報酬」 iOSエンジニア堤修一さんの仕事論に迫る| dotFes 2016 shibuya

2016年10月からサンフランシスコでFyusion社でiOSエンジニアとして活躍されている堤修一さん。今回はdotFes 2016で行われた「デザイン×ライフスタイル 制作者として海外で働くということ」というテーマのセッションで、海外で働くためのワークスタイルを語られました。

Basic Designers’ Portfolio

ferret

ferret One

phocase

留学Debut

Designer Wanted!

  • Kunihiro Okamura
  • Hikaru Kobayashi
  • You
  • Fumiya Shibusawa
  • Yuki Asamoto

この内容で送信します。よろしいですか?