WEBサイト制作の勉強

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

LPの作成・実践編

Webサイト制作

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

ゴール

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

ポイント

ユーザーの注意を引くようなコンテンツ内容がファーストビューに入っているか。
「オススメする3つの理由」が具体的に説明されているか
ユーザーにとってのメリットや競合との差別化要因を伝えられているか
ページ下部にユーザーがクリックし易いボタンが設置されているか
ページの各所にCATボタンが設置されているか
公式サイトに合わせたデザインになっているか
SNS(ツイッター)へのリンクが設置してあるか
キービジュアル画像にsrcsetが設定されているか
ホバーアニメーションを導入しているか
jQueryを１箇所以上で使用しているか（プラグイン可）

LPのアウトライン例

Attention部分のコンテンツ

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

Interest部分

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

Interest部分の下

フェリカ公式サイトの見学会募集ページへのボタンを入れる

Desire部分

他の競合他社との差別化を図る為、具体的なベネフィットを伝える。
卒業生の声と作品を入れ、ユーザーに自身の未来像を想像させる。

Action部分

フェリカ公式サイトの見学会募集ページへのボタンを入れる（ボタンのデザインは他のボタンを同じに）
実際にボタンをクリックしてもらえるように、ボタンの近くに申し込みの期限などの背中を押すテキストを入れる

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

参考サイト
www.felica.info

作例
http://ciel.starfree.jp/web-works/test-05/

http://doors1011.starfree.jp/Yukiko.Sato_test05/index.html

http://hk1115.starfree.jp/test-05/index.html

http://bntncayo05.starfree.jp/lp-test/

http://kdportfolio5.starfree.jp/test05/