図解でわかるクリエイティブとマーケティング

【実績1億の筆者が解説】売れるランディングページの作り方とデザインのコツ【構成とライティング】

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

あわ丸

ランディングページを作りたい!おしゃれで売れるページを作るコツが知りたい!

そんな方に向けて、効果的なランディングページの制作方法をわかりやすく図解します。

こんにちは!umuco(@umuco_digital )です。

過去5年間でトータル100サイト以上のランディングページを作成してきました。総売上1億以上の実績があります。

この記事で得られること

・ランディングページの構成やデザインのポイント

・販売や申し込みにつながる文章構成と書き方

・ローコストなランディングページを自分でつくる方法

それでは詳しく解説していきます。

記事の信頼性

詳しいプロフィール Twitter @umuco_digital

ランディングページとは?ペライチってなに?

ランディングページとは、商品やサービスの販売、キャンペーンやメルマガへの申し込みのためなど1ページで構成される長いWebページです。

1枚のページでできているため「ペライチ」と呼ばれたり、LPと表記されることもあります。

ランディングページの目的

LPの作り方

・売り上げを上げる

・申し込み数を増やす

・キャンペーンのPR

・リストと呼ばれるメールアドレスなど顧客情報を集める

メリットとデメリット

メリット:収益化させやすい、コンテンツに特化したPRができる、ユーザーに対してダイレクトな訴求ができる

デメリット:読まれる工夫が難しい、あやしくなりがち、LP閲覧までの導線設計が必要

ランディングページとホームページの違い

ランディングページとホームページは目的が異なるため、サイト全体の構成や文章などが大幅に変わります

ランディングページ

目的:マネタイズ、申し込み

構成:購入や申し込みボタン以外に、他のページに流れないように1ページで構成されている。

書き方:セールスライティング、コピーライティング、SEOライティング

ホームページ

目的:公式の情報、信頼性、ブランド

構成:情報を整理した複数ページで構成されている。

書き方:ブランドにマッチした読みやすい文章、SEOライティング

売れるページづくりに必要なブランディングとは

最後のパートで解説しますが、売り上げや申し込みなどにつながるページを作るためには、LPまでの集客導線が重要になります。

導線設計において大事な3つのポイント

LPブランディング

・対象ユーザーにマッチした表現や売り方のLPをつくる

・コンテンツのポジションを明確化する

・SNS、ブログ、HP、LPの統一感と目的の整理

対象ユーザーのニーズや悩み、生活習慣や価値観についてリサーチします。

リサーチの方法はこちら

【図解】Webマーケティング講座無料【図解】マーケティングのリサーチでSEO×ユーザー満足度の高いコンテンツをつくる方法【やさしいWebマーケティング講座④】

情報やサービスが溢れかえるなかで、商品のクオリティや価格の適正だけで勝負することは困難な時代。

さまざまな市場が成熟している現代の日本では、ユーザーのアイデンティティとブランドの価値やデザイン(世界観、センス、価値観、理念など)がマッチしていることが選ばれる秘訣です。

つく蔵

成熟期である現代では、クオリティとブランドの確立が求められるよ!
ブランディングせずに生き残るのはむずかしい時代ね!

うむ子

ブランディングやターゲティングの詳しい方法はこちらの記事で解説していますので参考にしてください。

セルフブランディングの5ステップ【ブランディングとは?】個人のための5つのブランド戦略!わかりやすく解説【やさしいWebマーケティング⑥】

ランディングページの構成/ページ内導線設計

ここからは具体的にランディングページの設計に入っていきます。

コンテンツによって多少変わりますが基本的な構成を解説していきます。

LPの基本テンプレート

ランディングページの構成

ランディングページの構成は大きく分けてヘッド・ボディ・クロージングでできています。

その中にデザイン要素、写真や画像、購入ボタンなどが組み込まれています。

構成のポイント

・ユーザーの興味が徐々に大きくなっていくようなプロセスをつくる

・ユーザーにとって理解しやすい順番で情報(文章、画像)を構成する

ヘッドの目的

興味を引いて、内容を読み進めるように促すことです。

ユーザーは一目見て自分に必要かどうか、自分のスタイルに合っているかを判断します。

第一印象でページを読み進めるかどうかを決めるため、デザインのクオリティや意図も重要です。

ヘッドの要素

・デザインとタイトル

・キャッチコピー

・リード(導入の文章) など

ボディの目的

ボディのパートでは、商品やサービスへの興味や必要性が高まっていくように設計します。

ユーザーの疑問や不安を解消できる要素を増やし、購買意欲を育てていきます。

ボディの要素

・ベネフィットを明確に解説する文章(ユーザーにとっての利益や満足感)

・コンテンツの信頼性を担保する文章やデータ(実績、研究データなど)

・プロフィールやつくり手のメッセージ(自己開示とストーリー)

・箇条書きのチェック項目(自分に該当するのかを確認するためのもの)

・第三者評価(推薦、体験談、レビュー) など

クロージングの目的

クロージングのパートでは、オファーと呼ばれる具体的な制約条件を提案していきます。

ユーザーが購入や申し込みを決意しやすいように後押しするための要素を取り入れます。

クロージングの要素

・価格と購入方法(金額、支払方法、受け取り方法など)

・特典情報(期間限定割引、セット販売特典)

・購入・申し込みのボタン(リンク)

・返金保証 など

次のパートで、構成を元にした具体的な書き方のポイントを解説していきます。

LPのためのセールスライティング

ランディングページに使う文章は、ユーザーの行動を促すセールスライティングの手法で書きます。

ヘッド、ボディ、クロージングの具体的な書き方、ベネフィットの一例などはこちらの記事で詳しく解説していますのでご覧ください。

セールスライティング【図解】売上実績9桁!心を動かすセールスライティングの書き方(テンプレート)【やさしいWebマーケティング講座⑧】

成約率の高いランディングページは以下の3つを考慮して制作されています。

ベネフィット・心理学・ターゲティング

ベネフィット=ユーザーにとっての利益(ユーザー目線で考える)

セールスライティングを行う上で最も重要な要素が、ユーザーにとって得られるものや満足感を伝えることです。

そのためにはユーザーが求めていることをしっかりリサーチすることが重要です。

リサーチの方法はこちらの記事で解説しています。

【図解】Webマーケティング講座無料【図解】マーケティングのリサーチでSEO×ユーザー満足度の高いコンテンツをつくる方法【やさしいWebマーケティング講座④】

心理学=行動を促す心理的アプローチ

商品購入や申し込みまで進んでもらうためには、ユーザーの行動を起こすトリガーを考える必要があります。

ユーザーは「興味がない・読まない・買わない」という前提で、どうやって心を掴み行動までつなげるかを設計する必要があります。

ベネフィットの提示はもちろん、クロージングにはマーケティング心理学の理解も重要です。

こちらの記事ですぐに使える10のマーケティング心理学を解説していますのでチェックしてみてください。

マーケティング心理学【図解】マーケティング心理学とは?効果から逆引き×実践例10選【やさしいWebマーケティング講座⑦】

ターゲティング

ターゲティングとはユーザーのニーズや市場を分類して、その中でコンテンツを届けたい対象のポジションを明確にすることです。

ターゲティングのためにまず行うことは環境分析です。社会の流れや分野の傾向などの外部環境と、コンテンツの独自性や自分の強み弱みなどの内部環境を洗い出します。

こちらの記事で詳しく解説していますので取り組んでみてください。

セルフブランディングの5ステップ【ブランディングとは?】個人のための5つのブランド戦略!わかりやすく解説【やさしいWebマーケティング⑥】

Word Pressでランディングページをつくる方法

ワードプレスのインストール

【図解】2020初心者のためのWordPressブログの始め方

ランディングページをつくるのに低コストでカスタマイズ性に優れているサイト作成ツール、ワードプレスがおすすめです。

ワードプレスは世界で最も人気があるサイト作成ツールです。(世界中の全サイトの1/3がワードプレスで作成されています)

HP、ブログ、オウンドメディア、ランディングページ、ショッピングサイトなど様々なサイトをつくることができます。

つく蔵

ワードプレス自体は無料で使用でるので、サーバー(1000円〜/月)とドメイン(無料〜1000円程度)でスタートできるよ!

ワードプレスとは?サーバー、ドメインってなに?というかたはまずこちらの記事をご覧ください。

WordPressブログ始めかた【図解だから簡単】2020年版WordPressブログの始め方をわかりやすく解説【初心者】

5分でワードプレスのサイト設計スタートできる方法はこちらで解説しています。

エックスサーバーWordPress始めかたクイックスタート【5分で完了】WordPressブログをエックスサーバーで簡単に始める方法

テンプレート(テーマ)のインストール

ワードプレスのインストールが済んだら、ランディングページに適したテンプレートを選びます。

ワードプレスのテンプレートのことを「テーマ」と言います。

テーマによってデザインのテンプレートが変わるだけでなく、サイト設計やカスタマイズに関わる機能も様々です。

WordPressテーマ

無料のテーマもありますが、ランディングページの場合は収益化を目的とするためSEOに強くカスタマイズ機能が豊富な有料テーマを選ぶことをおすすめします。

LPに最適なワードプレステーマをこちらの記事で紹介しています。

WordPressホームページテーマ【ブランド力UPが5倍上がる】クオリティの高いWordPressテーマ5選

テーマをワードプレスにインストールする

WordPressでHPをつくる方法

選んだテーマをワードプレスの管理画面からインストールします。

 

つく蔵

むずかししそう!と思った方でも大丈夫。5分ほどでインストールできるよ!

こちらの記事でステップごとに、画像を用いてわかりやすく解説していますので進めてみてください。

WordPressテーマインストール方法【2分で完了】WordPressのテーマを設定(インストール)する方法をわかりやすく解説

大まかな枠組みをつくる

テーマをインストールできたら、サイト全体の大まかな構成を作っていきます。

ランディングページの構成のパートで解説した、ヘッド、ボディ、クロージングで必要な要素を記載するエリアを作っていきます。

実際の操作(構成変更、画像の配置、文章の配置)方法は、テーマによって異なります。

有料テーマの場合は、それぞれカスタマイズを詳しく解説したサイトが用意されているので確認して進めていきましょう。

(購入時のページにリンク、もしくは「テーマ名 初期設定」「テーマ名 操作方法」などのキーワードで検索すると見つかります。)

文章と画像を配置する

構成にあわせて実際に文字や画像を入力していきます。

あまり文章が多すぎるとユーザーが読み疲れて離脱率が上がるので、デザインや画像とのバランスを考えて調整しましょう。

文章配置のポイント

・スマホで表示したときに、文章だけで埋まってしまわないように工夫する。

・見やすい文字のサイズと色にする。

・箇条書き、飾り枠、下線などで酔いやすさを工夫する。

こちらの記事も参考にしてみてください。

SEO/モバイルフレンドリー【SEO】モバイルフレンドリーとは?SEOで評価を上げるスマホで見やすいサイト設計

画像配置のポイント

・内容や目的とマッチした画像をえらぶ。

・画質がよく、全体の統一感がある画像をえらぶ。

・文字の分量とのバランスを考える。

画像選びは第一印象を左右します。

情報が多く、市場が成熟している現代ではデザインやイメージのクオリティが低いものは内容を見る前に弾かれます。

アイキャッチ画像選び3つのポイント

画像はなるべくクオリティが高く、人とかぶりにくい有料素材がおすすめです。

【厳選】ホントに使える!ブログ用おしゃれな画像フリー素材&有料素材サイト【初心者が失敗しない】ブログ読者が増えるおしゃれな画像フリー素材&有料素材サイト

おしゃれで訴求力のあるLPのデザインのポイント

LPデザインのツボ

ランディングページの目的は販売や申し込みにつなげることですので、対象ユーザーのニーズ、価値観、スタイルに馴染みやすいデザインを心がけることが重要です。

・対象となるユーザー層の特性や好み

・生活スタイルや経済レベル

・つくりたいブランドイメージにマッチしたもの

デザインを考えるという観点で今一度、対象者のリサーチやターゲティング、ブランディングの戦略を入念に行いましょう。

セルフブランディングの5ステップ【ブランディングとは?】個人のための5つのブランド戦略!わかりやすく解説【やさしいWebマーケティング⑥】

こちらの記事で画像選びのポイントやデザインの観点などを解説していますのであわせてご覧ください。

おしゃれなアイキャッチ画像の作り方【画像50枚で解説】おしゃれなアイキャッチのつくり方!デザインと画像選びのコツ センスの磨きかた【図解】センスを磨く方法!3つのコツをわかりやすく解説【はじめてのデザイン】

つく蔵

サンプルとして沢山のLPを見ることもおすすめだよ!

デジタルリテラシーを意識

近年、デジタルリテラシーや情報の格差が拡大しつつあります。

情報やデジタルに慣れている対象者にはミニマルなデザインで物語る必要がありますし、慣れていない対象者には徹底的なわかりやすさと情報量が必要になります。

デジタルリテラシーは、年齢、エリア、職種、生活スタイル、興味などで大きく変わるため入念なターゲティングを行なってからデザインを考えましょう

デザインスキルを身につける方法

デザインを取り入れるには3つの方法があります。

デザインを独学で身につける・デザインを学校で学ぶ・デザイナーに依頼する

デザインを独学で身につける

個人的に運営するランディングページのデザインであれば、Photoshopの基本スキルを独学で身につけるだけでもある程度のクオリティのものを作ることができます。

こちらの記事でPhotoshopでできることと、独学にオススメの本を紹介しています。

Photoshopとは?独学1週間で簡単にできる10のこと【初心者でも簡単】Photoshopとは?独学1週間で簡単にできる10のこと

つく蔵

最も低コストなうえに、知識やスキルなどの資産を蓄積できるのが独学だよ!

デザインをスクールで学んでみる

デザインを学んでみたい!という方はこちらのスクールがおすすめです。

デザインスクール
デザインスクール デジタルハリウッド

 

「Webデザイン専攻」はパーツデザインだけでなく、サイトを設計するための基本的なWEB知識を学ぶことができるので仕事に生かしたい人にはおすすめです。

無料で個別説明会を開催しているので、興味がある方は上記リンクからデジタルハリウッドのサイトでチェックしてみてください。

本格的に学んで、デザインの仕事もやってみたい!という人におすすめね。

うむ子

デザインを依頼する場合

自分でデザインを行わない場合は、ヘッダーデザインとボディパートなどで使用する画像選びなどをプロに依頼しましょう。

デザインだけ外注する場合の注意点です。

デザイナーによってマーケティングの知識がある人とない人に分かれます。

マーケティングの知識があっても自らマーケティングを行なったことがない場合も多いため、選ぶ際に確認しましょう。

デザイナーを選ぶポイント

・マーケティングの知識と経験が多い人(実績を確認)

・ポートフォリオや作例を見てつくりたいLPイメージを再現できそうな人

・考え方が合いそうな人(どんなことに重きを置いてデザインしているかを確認)

・レスポンスが早く、提案ができる人

・単価が安すぎない人

デザイナーを探せるサイト

Craudiaクラウディア


ココナラ

つく蔵

急ぎならデザイナーに依頼するのがいいね!スキルや知識の資産は増えないから、ゆくゆくは独学を考えるのもおすすめだよ。

関連記事

Photoshopとは?独学1週間で簡単にできる10のこと【初心者でも簡単】Photoshopとは?独学1週間で簡単にできる10のこと

LPへの集客導線をつくろう

ランディングページを完成しても、サイトにたどり着くまでの導線ができていなければ誰にも見てもらうことができません。

SNS、Youtube、ブログ、広告などからランディングページへと、ユーザーがたどり着くように流れをつくります。

コンテンツマーケティング

ユーザーの興味関心と商品やサービスをつなぎ、徐々にファン化する仕組みをつくるコンテンツマーケティングでLPへの流入を増やしましょう。

コンテンツマーケティング

興味関心とユーザー心理のゆるやかな変化を設計します。

ファン化のプロセス

1 きっかけ(目に留まる)

2 興味をもつ(知りたい欲求)

3 自分ごと化(必要性を感じる)

4 購入(手に入れたい欲求)

5 リピート(継続とファン化)

ランディングページは2→3のプロセスで見ることになります。

LPへの流入を増やすには1、2のステップを強化する必要があります。

詳しい方法はこちらの記事で解説していますのでご覧ください。

Webマーケティング 方法【図解】コンテンツマーケティングとは?Web集客のための戦略【やさしいWebマーケティング講座③】

以上、ランディングページのつくり方についての解説でした。

クオリティよりもまずは作ってみることが大事ですので、ぜひトライしてみてください。

この記事がお役に立てたら嬉しいです。