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

公開日: : 最終更新日:2014/03/06 ランディングページ

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

僕は仕事柄、LPの骨組み(フレーム)を引くことが多々あり今までたくさんのLP作成に携わってきました。

デザインを行うこともありますが、ほとんが「原稿を含むフレーム構成」の部分を担当しています。

LPはいくらデザインがよくても伝えたいことがちんぷんかんぷんだとまったく意味がありません・・・。
(いくらかっこ良くても売れないものは売れないという意味です。)

ということで、今までの経験から最も効率的でユーザーに響くLPフレームの作り方、考え方をご紹介したいと思います。

国内外のパララックスサイト事例は「パララックスサイトを徹底比較!国内外の厳選24サイト」にてご紹介中なのでご興味のある方はあわせてどうぞ。

僕がLP構成のコツをいかにしてつかんだか?

LPノウハウを伝授してくれた師匠

ある一人の「お師匠」の存在です。
このお師匠さん、今までに健康食品系のLP製作を現場で長い間やっておられて、今は独立し、LPノウハウやEC運営のアドバイスなどコンサル業務をメインでやっておられます。

この方と数回お会いして、色々と考え方なんぞをご指南いただきました。

お師匠とは最初に会い、お打ち合わせをした初回でLPに関する具体的な手ほどきはほぼ終了。

密度の濃い打ち合わせで、打ち合わせ後には不思議なもので「もしかして自分でもLPがつくれちゃう?」そんな気持ちにさせられたことを今も覚えています。

あとから思い返すと、人に要点を分かりやすく伝えるという点ではLPも会議も同じ。
お師匠は「伝達スキルの達人」だったんだなぁとこの記事を書きながら思い出しました・・・。

はてさて、前置きが長くなっちゃいましたがこれからが本題です。
と内容に入りたいところですが、その前に今回ご紹介するLP骨組みの作り方について注意していただきたい事があります。

LPと言っても、様々なジャンル、形態が存在します。
今回題材とするLPは健食業界などで多い「説明商材」がベースとなっています。

※既に認知度がある商品のPRなどにも、内容を代替して利用することが可能ですのでご安心を。

説明商材とは?
例えば「ダイエットチョコレート」という商品があったとします。
商品名を聞く(見ると)なんとなく「痩せられるチョコレート?」というイメージは湧きますが具体的に説明を受けないとなぜ痩せるの?どうやって作ってるの?など購入までは至りませんよね?

そのように商材のことを説明商材と呼んでいます。

では「説明商材」についてはご理解いただけたかと思いますので、具体的内容へ移ります。

STEP1「LPに必要な要素」と「ブロック構成」の考え方

具体的内容の手始めとして、LPを構成するにあたって必要な要素をご紹介します。
大きく分けて「商品の背景」「商品の内容」「サービス」の3つに分別されます。

あなたが紹介したい商材に当てはまる部分があれば、内容を想像しながらご覧ください。

商品背景

・産地
→どこで採れたもの?

・材料
→原材料はなにをつかってるの?

・生産者
→誰が作ったものなの?

・生産期間
→どれだけの期間で開発されたの?

・歴史
→商品の歴史は?

・実績
→過去シリーズなどどれだけ売れたの?

・利用者
→どういう人が利用してるの?

商品内容

・例を表示
→商品を具体的に説明する際、何か例にとって説明ができること

・比較
→競合商品などとの比較データを提示する

・実証
→研究などで効果や機能などが証明、実証されている

・数字
→実証結果の効果の具体的数値を提示する

・優位性
→どこがどれだけ優れちゃってるの?特許、エビデンスなどがあればなおよし

・権威
→TV,メディアでの紹介や著名人、関係者、医者などの推薦

・安全性
→生産過程や保存体制、検査基準などの提示

・成分
→具体的な成分がわかれば、内容ともたらす効果などを提示

・商品誘導
→商品ページへの誘導

サービス

・価格設定
→他社との比較

・送料
→送料無料できれば◎

・返金保証
→あればなおよし

・会員サービス
→会員になるとお得な何かがある

・配送スピード
→最短2日で配送など

※項目は上記以外にもお客様にとって有益なものであれば、どんどん追加してください。

ざっと書くとこんな感じになると思います。

今、あなたが売ろう(紹介しよう)としている商品に
あてはめてどんな内容が思い浮かぶか想像してみてください。

ほとんどの項目がパッと思い浮かべばあとはそれぞれの項目を「ブロック」として並べていく。
それだけでLPの骨組みは完成します。

そして「ブロック」という考え方、これも実は結構重要で、ターゲットや商品に応じて並び替えを行うことでよりコンバージョンを高める!なんてことにも使えます。

STEP2「LPのブロック配置」

今回は先ほどの「ダイエットチョコレート」を例にご説明してみますね。

完全ダミーで僕が勝手に作った内容ですのでその点踏まえてご覧下さい・・・。

まずは、STEP1の内容をテキストで埋めます↓↓↓
※内容は架空のもの
——————————————
■商品背景

・産地
→どこで採れたもの?
“カカオの産地で知られる”カカオマス村

・材料
→原材料はなにをつかってるの?
“最近TVなどで注目されている”ダイエットカカオ

・生産者
→誰が作ったものなの?
カカオマス村の山本さん(仮称)

・生産期間
→どれだけの期間で開発されたの?
ダイエットカカオが発見された後、ミルクに溶かして毎日飲んでいた山本さんがみるみる痩せていった。
それから2年間をかけて商品化を実現。

・歴史
→商品の歴史は?
まだなし

・実績
→過去シリーズなどどれだけ売れたの?
新シリーズなのでなし

・利用者
→どういう人が利用してるの?
チョコレート大好き!でも痩せたい!という女性に利用してもらいたい。

■商品内容

・例を表示
→商品を具体的に説明する際、何か例にとって説明ができること。ミルクに溶かして飲むという点で、ココアっぽいイメージ。飲料な点がポイント。

・比較
→競合商品などとの比較データを提示する
A社 ダイエットケーキと比較→固形物なので飲料よりも痩せにくい
B社 ダイエットマスカットと比較→水分が多く太りにくいが空腹になりやすい

・実証
→研究などで効果や機能などが証明、実証されている
マウス実験にて、ダイエットチョコ(ミルク溶かし)を飲んで走ったマウス、ミルク飲みを摂取して走ったマウスを2週間検証し、体重が減っていることを実証。
さらにダイエットチョコに含まれるカカオには脂肪を燃焼しやすくする効果があることが
○○大学医学博士のチョコ山茂太郎先生により実証された。

・数字
→実証結果の効果の具体的数値を提示する
実験により、ダイエットチョコを摂取して運動すると脂肪燃焼効率が約30%UPすることが判明

・優位性
→どこがどれだけ優れちゃってるの?特許、エビデンスなどがあればなおよし
運動前に飲むことで、スムーズに脂肪燃焼が可能。しかも成分○○が含まれるため、空腹になりにくい!
両方を満たしている商品は現在販売されていない。

・権威
→TV,メディアでの紹介や著名人、関係者、医者などの推薦
お昼のワイドショーにて数回放送済み。

・安全性
→生産過程や保存体制、検査基準などの提示
自然豊か北の大地「北海道」の○○町にて生産。
生産、商品はチョコシェルターにて適温3度にて保存。
お客様にはクール便にて最適温度をキープしたままお届けいたします。

・成分
→具体的な成分がわかれば、内容ともたらす効果などを提示
ダイエットチョコに含まれるカカオ成分「チョコラビター」には通常のカカオよりも脂肪を燃焼しやすくする「ヤセルッチ成分」が豊富に含まれその効果が実証されている。

・商品誘導
→商品ページへの誘導
価格設定 競合A社と同列価格かつ、セット販売につき
今なら1ヶ月分をプラスでサービス中。

——————————————

という感じです。
内容が架空なので突っ込みどころが多い点はご容赦ください(・o・)

商材によっては、なかなか項目が埋まらない・・・っていうことも多々あると思いますがLPは「いかに商品をよく見せて、お客様に理解して頂いた上で購入してもらうか」が需要なので多少の(時にはたっぷりとした)”盛り”が必要です。

もちろん、嘘はいけませんので許容範囲内での盛りでおねがいしますね(・ω<)

原稿をブロックとして配置する

では原稿の準備ができたので、実際にブロックの配置をしてみます。
こんな感じでブロック配置をしていきます。

※レイアウトしながら思いつきで入れた部分もあるので、原稿内容と前後している点もあります。
※実際僕がブロック配置する時も”あくまで原稿はベース”として考え、レイアウトする際のスペースやブロックの組み合わせなどに応じて端折ったり追加したりしてます。

ランディングページのサンプル

商品をお客様に説明する際の流れ的なものが掴んでいただけるかと思いますが、いかがでしょうか?

論理的に順を追って読みやすいブロック構成を心がけるのが肝!

STEP3「LPブロックをレイアウトする際のポイント」

ファーストビューには重要ポイントを入れ込む!

ブロックごとの区切りはなるべくはっきり。文字間、ブロック間はなるべくゆとりを持ってレイアウトする。

見出しと、テキストの区別をはっきりつける!

背景ボックスやアンダーラインなどをつかって装飾のパターンを決めよう!

商品誘導はくどくなり過ぎないように適度にブロック区切りなどに配置。

なんとなくイメージできてきましたか?
ここまで頭に入れて、LPのフレーム製作に取り組めば、
胸を張ってデザイナーさんにトスをあげることができるでしょう!

兼任されている方はがんばってください(T_T)

まだまだだなぁと感じても、何度も繰り返していれば
そのうちコツがつかめてくるはずです。

ここまで書いた僕がいうのも何ですが、
ライティングの技術はここまでの内容を理解してもなかなかカンタンに上達するものではありません。

多くのブログやLPを見て、うまい表現はどんどん真似て、
吸収していくようにしましょう!

ではまた!

関連記事

すぐに反応があった!ランディングページ3つの調整内容

すぐに反応があった!ランディングページ3つの調整内容

最近はもっぱらECサイトのランディングページ調整の案件が多く、 調整した結果、成果が予想以

記事を読む

パララックスサイトを徹底比較!国内外の厳選24サイト

パララックスサイトを徹底比較!国内外の厳選24サイト

パララックスとは・・・。 視差(しさ)2つの地点の動きの違い(スピードや距離など)によって、視覚的

記事を読む

養毛剤ランディングページ比較

「養毛剤」のランディングページ比較!厳選11サイト。これで(毛)もう困らない

タイトルしょーもなくてすみません。 でも、こういうの一回やってみたかったんです。ほんとすみ

記事を読む

グリーンスムージー
飲んべえ必見!二日酔いに効果的なグリーンスムージーレシピをご紹介

最近、お酒が弱くなったのか?二日酔いで苦しむのことが多くなりました

パズドラ タマプラ
パズドラ魔法石を無料(最短3日)で確実に入手する方法(完全版)

ソーシャルゲームの先駆けとなり爆発的人気を誇るガンホーのパズド

iTuneギフトコードの使い方
iTuneギフトコードの使い方

お友達からもらったり、ポイントサイトで交換したり・・・何かと便

モンスト「ハーレーX」
モンストでオススメな「リセマラ」当たりキャラはコレだ!

モンスターを引っ張って敵にぶつける新感覚ゲーム「モンスターストライ

モンストのオーブ無料獲得法
モンストのオーブを安全に無料・無課金で手に入れる方法

大人気モンスターストライクのガチャを回すために必要な「オーブ」を無

→もっと見る

PAGE TOP ↑