BLOG
ブログ

2021.11.24

成果につながるランディングページの制作工程 総集編

こんにちは。WEBチームのO倉です。
前回まで計4回にわたり解説させていただきました、「成果につながるランディングページ(以下LP)の制作工程」はいかがだったでしょうか。
今回は総集編として1つにまとめ、より踏み込んだ内容を追記していきたいと思います。

はじめに

LPの制作工程における4つの流れ

LPの制作は基本的に、「戦略設計」「情報設計」「デザイン」「コーディング」の4つの流れに沿って行われます。

LPの目的

LPを訪れたユーザーに商品の購入や問い合わせなどといった行動を起こしてもらうことです。
その目的を達成するために、一つ一つの工程を大切にしながら作業を進めていきます。

 

戦略設計のポイント

戦略設計では、目的を達成するためにどのようなLPが必要なのかを掘り下げて考えていき、LPの方向性を決めていきます。売り出したい商品・サービスを、どのようなユーザーに訴求し、どのような行動を起こしてもらうのかを具体的に考えていきます。

入口の設計

WEB広告からどのようなユーザーを流入させるかという「入口の設計」を固めるために、以下のことを掘り下げていきましょう。
・どのようなユーザーが訪れるか(年齢・性別・職業・収入・趣味・家族構成など…)
・想定ユーザーの検索キーワードは何か
・ユーザーに何を伝えるか…etc.

出口の設計

WEB広告から流入してきたユーザーにどのような行動を起こさせたいのかという「出口の設計」を固めるために、以下のことを掘り下げていきましょう。
・ユーザーにどのような行動をおこしてもらうか(コンバージョン)
・コンバージョンの内容は適切か(体験申し込み/初回50パーセントOFFで購入など)

競合他社を調査・分析

まずは売り出したい商品・サービスが同じLPを検索して、競合を複数ピックアップしていきます。
そして、競合他社のLPで打ち出しているキャンペーンや、訴求ポイント、コンバージョン、各社がどのようなことをどのような方法で伝えようとしているか分析します。
ユーザー目線で競合他社と自社を比較すれば、自社の商品・サービスの立ち位置や、伝えるべき魅力・特長が見えてくるはずです。この段階では見た目のデザインをチェックするより、どんなコンテンツがあるかに注目することが重要です。

戦略設計の工程では、入口の設計・出口の設計・競合LPのコンテンツ把握という3つの視点で、LPの方向性を考えていきましょう。
この時、「どのような人に、何を訴求し、どういった行動をしてほしいか」を常に意識することが重要です。

 

情報設計のポイント

情報設計は、LPを作る上で必要な情報を、戦略設計で決めたLPの方向性に沿って整理していく工程です。

全体の流れを設計する

まずは想定したユーザーに、何を訴求して、どのような流れ・コンテンツで魅力を伝え、最終的にどのような行動をとってもらうか(コンバージョン)、全体の流れを設計します。
・どのような商品・サービスか
・誰のための商品・サービスか
・競合との違いは何か
・使用・利用するとユーザーにどのようなメリットがあるか
・価格…etc.
上記の情報を洗い出したら、情報を伝える順番を考え、並べていきましょう。
LPは何を訴求するかも大事ですが、どのような順番でどのような見せ方をするかがとても重要です。プレゼンテーションに似ていますね。

具体的にテキスト化する

全体の流れを設計したら、次はLPに必要なコンテンツを、より具体的に細部を詰めていきます。
それぞれのコンテンツごとに詳細な見出し・本文などをテキストで書き出していきます。


レイアウトを考える

テキストの内容まで詰めることができたら、そのテキストを元にレイアウトを考えていきましょう。
どこに、何を、どのように配置するかをまとめた「設計図」をつくっていきます。この作業は一般的に、「ワイヤーフレームの設計」といわれています。
テキスト以外にも、写真やイラスト、グラフ、リンクボタンなどの要素も配置していきます。

その他にもユーザーが実際に入力するフォームのレイアウトも決めていきましょう。
フォームの項目は、コンバージョンの内容に合った必要最低限の項目数である必要があります。
「名前/電話番号/メールアドレス/生年月日/住所/アンケート」を入力するフォームと、「名前/電話番号/メールアドレス」だけの入力するフォームでは、ユーザーの心理的負担の大きさに差があり、コンバージョン率にも少なからず影響するでしょう。

 

情報設計は、まずは大まかな流れを設計してから細部のテキストを詰めていき、より伝わりやすいレイアウトを考えていく工程です。
情報設計において重要なことは、ユーザー目線になって考えられているかどうかです。どのような順番で商品・サービスの魅力を伝えれば、ユーザーが欲しい情報に到達でき、結果コンバージョンに至ることができるのかを考えていきましょう。

 

デザインのポイント

デザイン全体の方針を固める

戦略設計で掘り下げた想定ユーザーの年齢・性別・ニーズや売り出したい商品・サービスの特徴などの訴求ポイントに最適なザインを制作することが重要です。
・デザインのトーンやマナー
・レイアウトの工夫
・色彩・フォントの設計
・ファーストビューの訴求力
・パーツや写真のイメージ…etc.
以上のことを考え、方向性を決めましょう。

 

ファーストビューでユーザーの心を掴む

ファーストビューはLPのです。しかしながら、ファーストビューですぐにLPを離れてしまうユーザの割合(直帰率)は70%以上と言われています。
ユーザは自分が求めている内容かどうかをファーストビューで判断するため、ファーストビューでいかにユーザーの心を掴み、さらに読み進めたいと思ってもらえるかが重要になります。

・メリットと整合性を訴求したコピー
商品・サービスを利用することでどんなメリットがあるのかを明確に訴求します。

・商品・サービスの魅力をイメージさせるビジュアル
写真やイラスト、カラーやフォント等の要素を組み合わせて、商品やサービスのイメージを作り上げます。

・大きく目立つコンバージョンボタン
LPのゴールである予約や申し込みへ導くためのコンバージョンボタンは、大きく目立つ必要があります。

ユーザーが初めてファーストビューを見る時に、どのような印象を抱いてもらえると効果的かを想像しながらデザインしましょう。

 

検証を重ねる

デザイン作成において、作業の合間にデザインを何度も見直しましょう。
・ターゲットに合ったテイストか
・ファーストビューに訴求力があるか
・情報がストレスなく読めるか
・ボタンなどの操作・導線に問題がないか
・飽きさせないレイアウトか…etc.
以上のことを、ユーザー目線での検証を行うことが重要です。
その際、LPを初めて見るユーザーの気持ちになって検証してみると、デザインしているときには気づかなかった問題点がみつかるものです。何度も検証していくうちに、コンテンツやデザインについて明確な意図を説明できるようになり、説得力のあるデザインになっていくでしょう。

 

コーディングのポイント

コーディングは、デザインをブラウザ上で忠実に再現し、機能させるための最後の工程です。
WEBサイトはHTML、CSS,JavaScriptといったコードと画像や音声ファイルで構成されております。WEBサイトの本文や画像配置などの構造をつかさどるHTML、WEBサイトの見た目を整えるCSS、WEBサイトに動きをくわえるJavaScriptを使用して、デザインを実際に形にしていく重要な作業です。

 

表示速度の速さを優先する

LPのコーディングで最も重要なのが、表示速度のコントロールです。
表示速度はコンバージョンを左右する要素でもあります。
LPを訪れるユーザーのほとんどは、元々訪れる予定のなかった人たちです。そのようなユーザーがページの読み込みを20秒も30秒も待ってはくれません。
情報をすばやく届けられているかを優先してコーディングを行いましょう。

具体的な改善策
・画像ファイルの容量を落とす(画質が粗くならないように注意)
・ソースコードの容量を軽くする(無駄なコードを極限まで削る、起動のタイミングを指定する

 

ユーザー目線での動作確認

基本的な動作上の不具合がないか、ブラウザやデバイスごとにレイアウト崩れがないかの確認はもちろんのこと、ユーザー目線で使いやすいLPかどうかを意識することが重要です。
コンバージョン寸前のメールフォーム入力の動作確認は特に念入りに。入力完了後にユーザーへ完了メールが送信されているか、管理者に通知メールが届いているか、入力項目が最善かなど、実際にテスト入力し体感しながら改善していくことが重要です。

運用改善のしやすさを考えてコーディングする

LPは一度公開したら終わりではなく、コンバージョン率を上げるため何度も検証と改善を重ねていくものです。
LPのコーディングは、のちのち編集する時にわかりやすいものになっていることが重要です。

具体的な方法
・コメントを利用してコードをカテゴリごとに整理
・コードを見やすく整形
無駄のない美しいコードを書くことで、運用改善がスムーズになるほか、サイトの軽量化にもつながるため表示速度も早くなります。

 

まとめ

様々な専門性を問われるLP制作

たったの1ページに戦略と情報、表現と技術を凝縮するLP。
LPの制作工程では、マーケティング力・クリエイティブ力・コーディングの技術力など様々な専門性が問われます。
プランニングAでは、LP制作を複数名で行っており、専門的な知識・技術を持ったプロがそれぞれの工程を担当しております。
また、LPを作って終わりではなく、WEB広告の運用・解析・改善を繰り返しながらLPを育てていくということに重点を置いています。
小手先のテクニックだけでは効果につながるLPを作ることはできません。

LP制作をお考えの方へ
プランニングAでは、企業が売りたい商品・サービスを理解することはもちろんのこと、ユーザーの性格や行動などを分析し、共感を得るためのコピーやビジュアル、全体のシナリオや構成を考えてLPを作成しております。
また、Googleアナリティクスを用いて客観的なデータ数値分析を行い、次につなげるためのLP改善案をご提案しておりますので、安心して運用もおまかせください!
相談・お見積もりは無料です。詳しくはこちらから!

CONTACT

下記のフォームに必要事項を記入してください。※お問い合わせの際には個人情報保護方針のご確認をお願い致します。

会社名
お名前必須
ご住所
郵便番号
都道府県
市区町村
町名番地等
建物名
お電話番号必須
- -
メールアドレス必須
お問い合わせ内容必須
メッセージ