webサイト制作の勉強|2019年3月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。

第5回実技試験:LPの作成

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

ゴール

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

  • 画像はこちらから支給。それ以外は各自で用意する
  • テキストは公式サイトから取ってくるか、自身で作成
  • カンプ・ワイヤーは各自の判断で作成
  • 提出日は8月16日金曜日の20:55分まで

採点基準

  1. AIDAの法則に沿ったストーリー性のあるコンテンツ内容(A部分)
  2. AIDAの法則に沿ったストーリー性のあるコンテンツ内容(I部分)
  3. AIDAの法則に沿ったストーリー性のあるコンテンツ内容(D部分)
  4. AIDAの法則に沿ったストーリー性のあるコンテンツ内容(A部分)
  5. CTAの設定(クリックされ易いボタンの作り)
  6. SNS(ツイッター)ボタンの設置
  7. 公式サイトのトンマナに合わせたデザイン
  8. キービジュアル画像をsrcsetを使って最適化させる
  9. ホバーアニメーションの導入(Hover.cssを使用)
  10. jQueryを一ヶ所以上で使用(プラグイン可)
  11. 可能であればレスポンシブ対応

LPのアウトライン

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

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

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


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


felica-web.hatenablog.jp


note.mu