(image by 写真AC)

最近、インターネット広告を打ち出している企業が増えてきています。そこで重要になるのが、インターネット広告や、検索エンジンの検索結果からのリンク先となるランディングページ。ランディングページが最適化されていないと、せっかく広告を見て来てくれたユーザーもすぐに戻ってしまいます。とは言え、「最適化されたランディングページってどんなもの? 」と悩んでしまう方も多いのではないでしょうか。そこで、今日はランディングページの作り方から、レイアウト例までをまとめてみました。

用語解説

ランディングページ周りの用語を解説してくれているサイトです。どこから手をつけたらいいかわからないという場合は、まず用語から固めていきましょう。

IT用語辞典 e-words

ランディングページについてだけではなく、IT用語全般を網羅しているので何かと便利だと思います。

IT用語辞典 BINARY

説明文中の語句にもリンクが貼ってあり、気になった語句はすぐに調べられるという点で優れています。ITの用語をどんどん覚えていきたい初心者の方におススメです。

LPOとは 「ランディングページ最適化」 エルピーオー: - IT用語辞典バイナリ

LPOとは、Webページの中でもユーザーが最初に到達するWebページ(ランディングページ)を最適化することにより、ユーザーを誘導したいページへ向かわせることである。LPOは特に検索エンジンを経由して訪問したユーザーを目的の情報へと向かわせるために行われる。検索エンジンからのユーザーは、始めに見たペー

www.sophia-it.com

ALLEYOOP BLOG坊主社長のWebマーケティングブログ

用語だけでなく、その背景や重要性などの解説もあり、丁寧です。

ランディングページの作り方

大まかな意味や構造がわかったところで、実際にランディングページを作っていきましょう。ここではコーディングというよりも、その前段階の「計画書」としての作り方について説明していきます。

KAIROS MARKETING 初心者でも大丈夫!売れるランディングページの作り方

ヒットするランディングページの作り方を中心にセクションを細かく区切って解説してくれています。

初心者でも大丈夫!売れるランディングページの作り方

ランディングページは、見込み顧客(リード)情報の獲得に大きな役割を演じる。ランディングページの善し悪しが、あなたのビジネスの売上げを大きく左右する。自社のサイト外から訪問者を誘導し、一番最初に表示されるWebページがランディングページだ。訪問者は、ランディングページが自分に必要の無い情報であると判断すれば、直ちに立ち去る。ただ立ち去るだけなら大きな問題ではないが、検索サイトに…

blog.kairosmarketing.net

ランディングページの作り方、7つの超重要ポイント

コンバージョン率をアップさせるためのコンテンツの書き方に特化した内容になっています。

ランディングページの作り方、7つの超重要ポイント。 | Web集客の開花塾

ランディングページ(LP)の作り方を、超重要ポイント7つに絞って説明します。対象読者は、これからLPを作成する方です。初心者だけでなく、制作会社さんが読んでも役立つでしょう。作り方だけでなく、コンバージョン率をアップさせる点も、詳説したからです。1回読んで分からなければ、繰り返し読んでください。それだけの価値ある内容になっています。 ランディングページの構成。 まず最初に、ランディングページの構成について、左図を使って説明します。ランディングページの構成は、大きく7つのブロックに分かれます。 キャッチコピー。 お客さんの関心事を、ズバリ指摘します。関心事とは、対象ユーザーが抱える、悩みや課題です。このパートは、メインコピー(1行)とサブコピー(2行)、写真の3つの部分で構成されます。 共感部。 なぜ多くの人が関心を持つのか? お客さんの気持ちに寄り添いながら、言葉で解きほぐします。お客さんの気持ちを代弁し、「そうそう、そうなのよ」と思ってもらうように書きます。商品の特性によって、長め(5行~7行)に作るときもあれば、短く(1行)済ませる場合もあります。これはケースバイケースの判断です。 商品(オファー)の提示。 ページで購入してほしい商品や、請求してほしいオファーを説明します。商品(オファー)の写真を使い、どんな商品(オファー)なのか、イメージしやすいように作ります。※ これ以降の「商品」は、商品またはオファーを意味します。ランディングページは、商品販売の場合と、オファー請求の場合があります。両方を併記すると読みにくいので、商品で統一するとご理解ください。 ベネフィット。 商品を購入した後、お客さんにどんな良いことがあるのか、分かりやすく説明します。お客さんは商品を求めていません。商品を購入することによって、自分が今より、良い状態になることを、求めています。その良い状態を、丁寧に説明します。※ この良い状態のことを、ベネフィットと言います。ベネフィットは、商品説明と違います。よく分からない方は、「ベネフィットとは何か?」を読んでください。分かりやすく説明しています。 お客様の声。

web60.co.jp

モバイル用ランディングページの基本

モバイル向けのランディングページに関する解説をしています。スマホの普及が著しい今、モバイル向けページの開発を進めることはマストですね。

売れるランディングページの作り方(ワイヤーフレーム要素)

情報量が多いので、基礎から始めたい人はこれでだいぶ網羅できますし、にわか知識な人のおさらいにもぴったりです。

ランディングページでコンバージョンを劇的にアップするための7つのポイント (1)

SEO対策での外部施策について説明いたします。ページランクとSEOの関連性、発リンクとSEOについての関連性についてご紹介。

markestyle.com

ZAPPA ランディングページのフレームはこうやって作ればいい。テンプレート付

一文が短く、読みやすいのが特徴です。テンプレートもあるので、実際にこれを参考にしながらランディングページを作ってみると良い練習になるかもしれません。

ランディングページのフレームはこうやって作ればいい。テンプレート付

WEBディレクターが実践したランディングページの作り方を、実例を元にご紹介。配置例(テンプレート)も掲載中。

www.zerone.jp

ランディングページで平均4,2%の成約率を出すために行っている32の手順

「32の手順」と書いてあるだけあって、本当に詳細に記載されています。これだけで1冊の本になりそうな分量です。

ランディングページで平均4,2%の成約率を出すために行っている27の手順

平均で4,2%、業界別では、賃貸業で18,27%、美容で15,72%、健康食品で14,21%、建築業で13,64%、整骨院で7,13%を記録したランディングページを作るために行っている全ての手順をご紹介します。

bazubu.com

LPデザインに関して〜作成のセオリーとコツ〜 - SlideShare

スライドにまとめてあるので、端的に理解するには良いかもしれません。

EMBED:http://www.slideshare.net/noriji822/lp-22078085

###Webディレクター必見!ランディングページの生死をわける11のチェックリスト

全て作り終わった後に参照するチェックリストです。

ランディングページ制作の生死をわける11のチェックリスト

何百本ランディングページを構築した熟練の経験者であろうとも、1回で完璧なものができることは決してありません。今回は、弊社のディレクターが「ランディングページの構成作成後」「ランディングページのデザイン完了後」「ランディングページのコーディング完了後」にそれぞれ行っているチェック内容を公開します。

lpo.gaprise.com

ランディングページまとめサイト集

実例を見て勉強するのも良いかもしれません。以下では、数多くあるランディングページのまとめサイトを集めてみました。

ランディングページ集めました

国内のランディングページを集めたサイトです。

ランディングページ集めました。

コンバージョン率の高いランディングページを作る事は、WEBデザイナーの使命。ランディングページを作るWEBデザイナーのためのランディングページリンク集です。

lp-web.com

ランディングページデータベース(LandingPage Database)

業務内容のジャンル別に探すことができます。

ランディングページ(LP)のデザインまとめサイト - ランディングページ(LP)データベース(Landing Page Database)

ランディングページのデザインを集めたサイトです。ランディングページのデザインで煮詰まっている方、ぜひ一度サイトをご覧下さい!

www.lp-db.com

いつか真似したい!ユーザーの心をつかんで離さないランディングページ100選[海外スタートアップ編]

日本ではあまり見かけない海外ならではのレイアウトが参考になります。海外進出の際にどうぞ。

いつか真似したい!ユーザーの心をつかんで離さないランディングページ100選[海外スタートアップ編] | Find Job ! Startup

スタートアップにとってランディングページのデザインは生命線。サービスとユーザーをつなぐ最初の接点です。今回はランディングページの美しい海外のスタートアップをまとめました。Webサイトとしてデザインが優れているものはもちろんのこと、サービス、アプリを実際に使ってみたくなるようなものを取り上げています。 ランディングページをシャワーのように浴びてデザインの勘所を押さえましょう。怒濤のランディングページ100選です。それではどうぞ! 1.Pocket http://getpocket.com/ 「あとで読む」系サービスのPocketです。Read it Raterというサービスを覚えてらっしゃる方も多いと思いますが、それが改名して再スタートしたものです。利用シーンがイメージしやすいランディングページですね。 2.Spotify https://www.spotify.com/ 現在日本からはサインアップできませんが、スウェーデン発・定額制の音楽ストリーミング配信サービスです。動画がグリグリ動きます! 3.Find Dishes http://www.foodspotting.com/ 食べ物写真の共有サービスです。位置情報サービスをオンにしている端末から閲覧すると、いまいる地域が大きくマップ表示されるようになっています。 4.Blue http://partlyblue.com/ シンプルな天気アプリです。こちらも動画風に動きます。必要最低限の情報だけが得られるこのアプリの特徴と同じく、シンプルなページ構成です。 5.Geckoboard http://www.geckoboard.com/ クラウドサービスのデータを集約してダッシュボード表示するアプリです。アプリの特徴でもある「ザッと見渡せる雰囲気」がファーストビューで確かめられる良いデザイン。 6.Couple http://couple.me/ カップル専用SNSです。二人で寄り添う楽しそうな姿が印象的です……。スクロールするとパララックスエフェクト(視差効果)でアプリの説明が現れます。 7.Spendee http://www.spendeeapp.com/ お小遣い帳アプリです。こちらもパララックスを利用していますが、アプリ操作を疑似体験できる仕組みになっています。スクロールしてみましょう 8.Mapkin http://mapkin.co/ パーソナライズ・マップアプリです。アプリ内で使用された色のみを使って構成された、統一感のあるデザインですね! 9.Square https://squareup.com 5/23に日本版の提供がはじまったばかり、Twitterの創業者であるジャック・ドーシーが作ったモバイル決済サービスです。日本版とランディングページを比較してみてもおもしろいです。日本と海外、それぞれに響くランディングページの違いが浮き彫りになり、大変参考になります。 10.coffely http://www.coffely.com/ コーヒーメーカーを遠隔操作できるアプリです。このアプリのウリである美しいUIが伝わりやすいよう、ページデザインも統一されています。 11.Hike http://get.hike.in/ 友達と簡単なステータス(一言メッセージ)をやりとりするアプリです。スクロールでアプリの説明が読めます。 12.Gengo http://gengo.com 翻訳サービスのランディングページ。もともと日本で生まれたスタートアップです。並んだ顔が目を惹きます。 ...

www.find-job.net

おわりに

コンテンツやレイアウトなどは自分の感覚だけで作っていくのは難しいですよね。この記事を参考にされて、素敵なランディングページを作ってみてください。