WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

LP(ランディングページ)の作成

ランディングページ(Landing Page)とは本来、訪問者が最初に着地する(land)ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを指します。
LPでもっとも大事なのはいかに訪問者に目標となるアクションを行わせるか、です。


コンバージョン

コンバージョンとは、変換を意味する言葉です。Web マーケティングの分野に置いては、「顧客見込み」から「顧客」への変換を意味し、成約を意味する言葉で最終的な成果として使われます。主に購入・資料請求・お問い合わせ・会員登録などを コンバージョンにする場合が多いです。 コンバージョンを設定することで、Webにおける施策の効果測定が出来るようになります。
コンバージョンが起きた割合のことを コンバージョン率( CVR)といいます。コンバージョン率は、 コンバージョン数÷ 訪問数で算出することが出来ます。



ゴールの設定

ターゲットとなるユーザーにとってほしい行動を明確にします。商品購入をしてほしいのか、会員登録をしてほしいのか、お問い合わせをしてほしいのかなどです。場合によってはペルソナと呼ばれる、具体的なユーザーの人物像を想定し、その人物に向けて訴求力の高いLPを作る必要があります。


ストーリー性

「顧客見込み」から「顧客」へ変える為にはユーザーにストーリー性を持ったページを作り、ページ内でしっかりと説明をすることが大事です。


AIDAの法則

Attention:注意
まず、ユーザーの注意を引きます。問題解決をしたいユーザーに、なにそれ!と思わせることが重要です。


Interest:興味
興味を持ってくれそうな内容を書きます。詳細な説明を書いていきます。4つのポイント・3つの理由など、数を提示する事もあります。


Desire:欲求
ユーザーにとってのメリットや競合との差別化要因を伝えます。問題の解決ができる理由を示すことも有効です。


Action:行動
ユーザーが迷いなく申し込みや購買などのアクションをとれるよう、最後のひと押しをします。なぜ「今」「ここ」で買うのがいいのかを強調します。

CTA

CTAとは、Call To Action(コール トゥ アクション)の略で、「行動喚起」と訳される。 Webサイトの訪問者を具体的な行動に誘導すること。



f:id:yachin29:20180711031625p:plain



coliss.com



rdlp.jp


lp-web.com



フェリカテクニカルアカデミーwebサイト制作科の生徒募集用のランディングページの作成

ゴール

フェリカ公式サイトの見学会申し込みページへのリンクボタンをクリックしてもらう
URL:http://www.felica.info/kikin/web/web_form/index.shtml

  1. AIDAの法則に沿ったストーリー性のあるコンテンツ内容(A部分)
  2. AIDAの法則に沿ったストーリー性のあるコンテンツ内容(I部分)
  3. AIDAの法則に沿ったストーリー性のあるコンテンツ内容(D部分)
  4. AIDAの法則に沿ったストーリー性のあるコンテンツ内容(A部分)
  5. CTAの設定(クリックされ易いボタンの作り)
  6. SNS(ツイッター)ボタンの設置
  7. 公式サイトのトンマナに合わせたデザイン
  8. キービジュアル画像をsrcsetを使って最適化させる
  9. ホバーアニメーションの導入(Hover.cssを使用)
  10. jQueryを一ヶ所以上で使用(プラグイン可)
  • 画像はこちらから支給。それ以外は各自で用意する
  • テキストは公式サイトから取ってくるか、自身で作成

LPのアウトラインの一例

Attention部分のコンテンツ
  • タイトル(ロゴ画像orフェリカテクニカルアカデミーwebサイト制作科)
  • キャッチーなコピーが入ったリード文(フェリカテクニカルアカデミーwebサイト制作科、生徒募集的な文言)
  • メインビジュアルの画像
  • 見学会申し込みページへのボタン(ファーストビュー内に入れる。ボタンのデザインは他のボタンを同じに)
Interest部分

フェリカがおすすめな「3つの理由」
フェリカの特徴を具体例を出して挙げていく。

Interest部分の下
  • フェリカ公式サイトの見学会募集ページへのボタンを入れる(ボタンのデザインは他のボタンを同じに)
Desire部分
  • 他の競合他社との差別化を図る為、具体的なベネフィットを伝える。
  • 卒業生の声と作品を入れ、ユーザーに自身の未来像を想像させる。
Action部分
  • フェリカ公式サイトの見学会募集ページへのボタンを入れる(ボタンのデザインは他のボタンを同じに)
  • 実際にボタンをクリックしてもらえるように、ボタンの近くに申し込みの期限などの背中を押すテキストを入れる


ツイッターのURL
https://twitter.com/felica_harotore



生徒の作品
フェリカテクニカルアカデミーwebサイト制作科の生徒募集


Webサイト制作科|フェリカテクニカルアカデミー


フェリカテクニカルアカデミーwebサイト制作科|生徒募集


フェリカテクニカルアカデミーwebサイト制作科生徒募集