これだけは押さえたい！ランディングページ作成の工程別チェックポイント

ホームページ制作の過程において、ランディングページを作成する目的は、コンバージョンの獲得。ランディングページはすぐに立ち上げられると思われがちですが、いざ作りはじめると、考えるポイントは多数ありますよね。

開発の工程ごとにチェックするポイントは多々あり、それらの一部が抜けているだけで、コンバージョンを逃してしまうこともあります。ランディングページ開発において、押さえておきたいチェックポイントをまとめました。

ランディングページの開発工程と基本的な構成

ランディングページの開発は、「戦略」「ワイヤーフレーム」「デザイン」「コーディング」「運用・改善」５つの工程から成り立ちます。

また、ランディングページは基本的に下記のような7つの内容で構成されています。

・ヘッダー画像

ユーザーの関心を見抜いて、訴求します。メインコピー（１行）とサブコピー（２行）、イメージ写真で構成されます。一番重要なファーストビューの部分です。

・共感

お客様の共感を喚起します。悩みや不安を具体的に並べましょう。

・サービスの提示

商品や請求してほしいオファーについて、説明します。写真があると分かりやすくなります。

・ベネフィット

その商品を購入することによるベネフィットを説明します。具体的に例をあげ、写真やイメージ図を使用すると効果的です。

・実績と事例

お客様のレビュー・実績データ・メディア掲載などの導入実績を紹介。説得力や信ぴょう性を高めます。顔写真や実名も効果的です。また、競合との違いについて説明をして、お客様が安価な方に流れるのを阻止しましょう。

・アクション

商品の購入を目的とするなら申し込みボタン、問い合わせを目的とするなら、電話番号を目立つように記載します。入力フォームの項目は最小限にしてアクション率の低下を防ぎましょう。

戦略設定のチェックポイント３つ

戦略を決定する上で、下記の内容を考えておく必要があります。

１．競合他社のランディングページの訴求内容を把握

２．ターゲットの決定

属性・志向・ニーズ・商品に関する理解度等、ターゲットを具体的に考えるほど、どうコンバージョンしてコミュニケーションをとるかを考えやすくなります。誰にでも訴求できる内容だと、強くは響かない可能性もあるため、ターゲットを具体的に絞り、どう訴求してコンバージョンにつなげるかを考えましょう。

３．コンバージョンの定義を決定

問い合わせ・資料請求・購入など、コンバージョンの定義を定めましょう。

ワイヤーフレームのチェックポイント５つ

良いランディングページはページ構成が優れています。設定した戦略に合わせて、全体のストーリーや細部の情報を考えましょう。また、写真やデータなどの素材を選択し、ユーザーが入力するフォームの項目など仕様も決定します。この段階で詳細まで決めておくと、次のデザインの段階での修正・変更を少なくできます。

１．キャッチコピーは有効か

ユーザーのニーズや志向をとらえて、自社の強みや魅力を訴求。

２．誰にでも分かりやすく、シンプルに伝えたいことが伝わるか

機能については専門用語などを使用せず、ユーザー目線でのメリットを。

３．必要なコンテンツが配置されているか

４．必要素材を検討・選定しているか

写真・事例・データなどの数値を収集します。特に数値のデータをエビデンスとして掲載すると、分かりやすくメリットが伝わります。例えば、満足度○％、合格率○％、創業○年等。ただし、競合がそれを上回るデータを掲載している可能性があるため、競合調査も行いましょう。

５．エントリーフォームの仕様は固まっているか

また、ワイヤーフレームや戦略に基づくシナリオを文章にするときには、キーワードは文頭に置き、1文は1メッセージで短くしましょう。また、専門用語は使用せず、本文については結論から書くことが大切です。

デザインのチェックポイント８つ

戦略やワイヤーフレームの設計が固まったら、デザインの方向性の決定、各パーツの作成に進みます。特にファーストビューとなるヘッダー部分のデザインは、全体のトーン・マナーを決める重要なポイント。

１．デザインのトーン・マナーは定まっているか

２．色彩設計はできているか

３．飽きさせないレイアウト設計となっているか

４．フォントは適切であるか

５．メインビジュアルは訴求力のあるデザインになっているか

何を伝えたいかを決定し、その訴求が明確に伝わるビジュアルに。

６．各パーツの作りこみはしっかりと行えているか（アイコン・イラスト等）

７．写真素材の切り取り・加工はきれいに行われているか

８．ファーストビューは適切であるか

この部分で勝負は決まると言われています。余計なものを置かずに、訴求をアピール。また、ファーストビューの左側は、最も目立つポイントです。ファーストビューの途中でコンテンツが切れるように設計して、スクロールをしてもらいましょう。また画像を入れることにより、離脱率を低くしましょう。

コーディングのチェックポイント７つ

各コンテンツをデバイスやブラウザごとに、使いやすさや不具合が無いかを検証しながら制作しましょう。チェックポイントの多い工程です。

１．ユーザーの目線の動きに対して適切な動的表現が設計できているか

２．コンバージョンにつながるナビゲーションが設定されているか

何度もページにアクセスしているユーザーのコンバージョンを妨げることのないよう、コンバージョン導線はファーストビューに目立つように配置。また色味は背景と異なるものにします。

３．表示速度は適切であるか

４．各種デバイス・ブラウザで表示がされるか

５．運用のためのタグの設置がされているか

６．ユーザーが迷わないフォームとなっているか

７．フォームがランディングページを設置するサーバー内で動作するか

運用のチェックポイント３つ
はじめからコンバージョン率が高いランディングページを作れる人は、多くありません。テストや改善をしながら、コンバージョン率が高いページにしていくのが基本。特に、ユーザーが離脱しがちなヘッドコピーの部分は、何度もテストを繰り返しましょう。

ランディングページ導入後、一定期間が経過したら、分析・解析ツールから、改善のヒントを得るようにします。コンテンツやデザインなど、手を入れる必要のあるところは、変更しながら運用していきましょう。

１．運用・改善のための分析ツールを導入できているか

２．ランディングページが最新の状態に更新されているか

３．ランディングページのコンテンツ・各パーツのデザインなどの要素を分解して検証してテストをしているか

おわりに
ホームページ制作の中でも、ランディングページの作成は、考えることが膨大。段階ごとにチェックポイントをまとめておき、実行をしていくことで、効果のあるランディングページを長く使用できます。時間と労力をかけて、要点を押さえたランディングページを作成することが、コンバージョンの獲得へとつながります。

また、一度ランディングページを作成してしまって、運用しながら改善を繰り返していくことも大切。時間がかかっても一つずつ要点をクリアして、改善をしながらより良いものにしていきましょう。ポイントを押さえ、手間と労力をかけることが、有益なランディングページには不可欠となのです。

今人気のランディングページでホームページ制作！