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

「エステサロンのサイトのLPを作ろう①」 お題・ターゲット・バナー・サービスを確認して構成を考えよう

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

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

公開日:2020/01/22最終更新日:2020/01/22

1.お題を確認しよう

お題はこちらです。
「エステサロンの初回体験キャンペーンの申し込みに繋がるランディングページを作ってください」
また、このランディングページはバナー制作テクニックの「エステサロンのサイトのバナーを作ろう」で作成した以下のバナーから遷移することとします。

2.エステサロンの背景を確認しよう

では次はエステサロンの背景を確認しましょう。


背景を知ることで、どうランディングページでどう商品をアピールするかに繋がります。

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

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


バナーと同樣のターゲットであることは、バナーとランディングページの繋がりをより強めることができるので、こちらも意識して作っていきましょう。

4.バナーを確認しよう

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

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

5.サービスについて確認しよう

サービスの仕様は以下のようなものとします。

・商品名「水着ボディダイエット」、初回は4,000円
・3種類の施術が含まれる
・短期間でダイエット効果を実感できる

次は構成について考えていきましょう。

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

このレッスンではお題に沿ってPhotoshopを使ってランディングページを作成していきます。前回のレッスンではお題やターゲット等を確認しました。次はランディングページの構成を考えていきます。

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

キャッチコピー

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

ビジュアル

イメージの写真を載せる場所です。商品の利用中・利用後の自分像、叶えたい自分像などを想起させるビジュアルが良いでしょう。

アクション

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

導入・ベネフィット

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

商品の説明

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

お客様の声

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

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

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

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

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

理解度チェック





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

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



このレッスンの著者