ランディングページ制作テクニック

「通販サイトのLPを作ろう①」お題・ターゲット・バナー・商品を確認して構成を考えよう

  • LP
  • Webデザイン
  • デザインの考え方

このレッスンではお題に沿ってPhotoshopを使ってランディングページを作成していきます。最初はお題やターゲット等の確認をします。今回の題材はバナー制作テクニックの「通販サイトのバナーを作ろう(前半)」と「通販サイトのバナーを作ろう(後半)」にあるお題やターゲットを扱います。また今回作成するページの構成についても確認していきましょう。

公開日:2019/09/25最終更新日:2021/01/28

1.お題を確認しよう

お題はこちらです。

「無農薬野菜の配達サービスでお試しキャンペーンを実施するので、そのキャンペーンの登録を促すランディングページを作成してください」

また、このランディングページはバナー制作テクニックの「通販サイトのバナーを作ろう」で作成した以下のバナーから遷移することとします。

2.ターゲットを確認しよう

では次はターゲットを確認しましょう。これはバナーレッスンと同様のターゲットとします。


バナーと同様のターゲットでない場合、見当違いなランディングページになってしまう可能性があり、キャンペーンの登録に繋がらなくなってしまいます。

3.バナーを確認しよう

制作するランディングページの遷移元であるバナーを確認しましょう。

ランディングページを作る際はバナーの印象(色・フォント・素材)が同じになるように意識してみましょう。意識することによりバナーからランディングページへの自然な繋がりを作ることができます。

4.商品について確認しよう

商品の仕様は以下のようなものとします。

・「お試しパック」という商品名
・期間限定の価格で送料込で¥5,000
・野菜は9種類、また子供用のレシピが特典として含まれる

次のレッスンでは構成について考えていきましょう。
 

5.ランディングページを構成する要素を知ろう

今回は以下のような構成でランディングページを作っていきます。
各要素について説明します。

キャッチコピー

キャッチコピーはターゲットに響く言葉を選びましょう。バナーにある言葉やバナーを作成する際に出したキーワードを盛り込むのも良いでしょう。
バナーを作成する際に出したキーワードについてはこちら

ビジュアル

商品の写真を載せる場所です。商品が魅力的に見えるよう写真を選ぶ必要があります。

アクション

キャンペーンに申し込むアクションをするための要素です。申し込みへ進むリンクを貼ったボタンを設置するところです。また、アクションに繋がるプラス要素を盛り込む場所としても使います。
アクションはページ内に複数設置します。ランディングページを見た人が欲しいと思ったタイミングですぐ申し込みができるようにするためです。乱用は見た人に単調さやしつこさを与えてしまうので、区切りの良いタイミングでアクションを入れると良いでしょう。

導入・ベネフィット

ターゲットが商品について知るきっかけを作るところです。
また「ベネフィット」とは、商品を購入したことによって受けられる体験を意味します。商品のメリットをどのように体験できるかを示すことでターゲットに商品をアピールします。

商品説明

商品の具体的な説明をするところです。商品の仕様や商品画像など、詳細について記載しましょう。

お客様の声

商品を利用した方の声を載せるところです。見た人が実際にキャンペーンを利用するとどんな体験ができるのかを伝えることができます。

よくあるご質問

これまでの説明で疑問や不安を解消できていない場合に使うところです。実際にこれまでよくお問い合わせを頂いている内容がある場合は、その内容を記載するのも良いでしょう。疑問や不安を取り除くことで、購入への一歩に繋げます。

6.ファーストビューを意識しよう

構成画像にありますピンクの領域は「ファーストビュー」と呼ばれるエリアです。これは、ブラウザでランディングページを開いた時に最初に表示される領域を示しています。この中にキャッチコピー・ビジュアル・アクションの要素を入れることでスクロールすることなく申し込みへと進むことができます。これらの要素は必ずファーストビューに入れるようにしましょう。

見た人の心理の流れを意識し、構成や流れを作ることでランディングページへの離脱を防ぎ、魅力的な商品であることをアピールすることに繋がります。

次は具体的なビジュアルを作成するフェーズに入ります。

理解度チェック





ランディングページ制作テクニック

ランディングページ制作初級



このレッスンの著者