LPの作成・実践編
フェリカテクニカルアカデミーwebサイト制作科の生徒募集用のランディングページの作成
コンバージョン
フェリカ公式サイトの見学会申し込みページへのリンクボタンをクリックしてもらう
URL:http://www.felica.info/kikin/web/web_form/index.shtml
LPのアウトライン(あくまでも一例)
Attention部分のコンテンツ
Interest部分の下
- フェリカ公式サイトの見学会募集ページへのボタンを入れる
Desire部分
- 他の競合他社との差別化を図る為、具体的なベネフィットを伝える。
- 卒業生の声と作品を入れ、ユーザーに自身の未来像を想像させる。
Action部分
- フェリカ公式サイトの見学会募集ページへのボタンを入れる（ボタンのデザインは他のボタンを同じに）
- 実際にボタンをクリックしてもらえるように、ボタンの近くに申し込みの期限などの背中を押すテキストを入れる
ツイッターのURL
https://twitter.com/felica_harotore
参考サイト
note.mu
LP(ランディングページ)の作成
ランディングページ（Landing Page）とは本来、訪問者が最初に着地する（land）ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを指します。
LPでもっとも大事なのはいかに訪問者に目標となるアクションを行わせるか、です。
コンバージョン
コンバージョンとは、変換を意味する言葉です。Web マーケティングの分野に置いては、「顧客見込み」から「顧客」への変換を意味し、成約を意味する言葉で最終的な成果として使われます。主に購入・資料請求・お問い合わせ・会員登録などを コンバージョンにする場合が多いです。 コンバージョンを設定することで、Webにおける施策の効果測定が出来るようになります。
コンバージョンが起きた割合のことを コンバージョン率（ CVR）といいます。コンバージョン率は、 コンバージョン数÷ 訪問数で算出することが出来ます。
ゴールの設定
ターゲットとなるユーザーにとってほしい行動を明確にします。商品購入をしてほしいのか、会員登録をしてほしいのか、お問い合わせをしてほしいのかなどです。場合によってはペルソナと呼ばれる、具体的なユーザーの人物像を想定し、その人物に向けて訴求力の高いLPを作る必要があります。
ストーリー性
「顧客見込み」から「顧客」へ変える為にはユーザーにストーリー性を持ったページを作り、ページ内でしっかりと説明をすることが大事です。
AIDAの法則
Attention：注意
まず、ユーザーの注意を引きます。問題解決をしたいユーザーに、なにそれ！と思わせることが重要です。
Interest：興味
興味を持ってくれそうな内容を書きます。詳細な説明を書いていきます。4つのポイント・3つの理由など、数を提示する事もあります。
Desire：欲求
ユーザーにとってのメリットや競合との差別化要因を伝えます。問題の解決ができる理由を示すことも有効です。
Action：行動
ユーザーが迷いなく申し込みや購買などのアクションをとれるよう、最後のひと押しをします。なぜ「今」「ここ」で買うのがいいのかを強調します。
CTA
CTAとは、Call To Action(コール トゥ アクション)の略で、「行動喚起」と訳される。 Webサイトの訪問者を具体的な行動に誘導すること。
インターネット広告について
Web広告とは、「インターネットの媒体上に掲載される広告」のことです。
広告枠を持つWebサイトや検索エンジンの検索結果ページ、メール、SNSなど、あらゆる媒体に掲載され、web広告やオンライン広告、デジタル広告と呼ばれることもあります。
上の記事にあるように2020年のインターネット広告費はマスメディア4媒体（テレビ、ラジオ、新聞、雑誌）とほぼ同じです。マスメディア4媒体の広告費は6年連続で減少していますが、インターネット広告費は年々増加しています。
インターネット広告の種類
ディスプレイ広告（ターゲット広告）
ディスプレイ広告とは、年齢や性別、地域、過去のWebサイト閲覧履歴などでターゲティングを行うことで、まだ自社のサービスや商品を知らない潜在層に適したWeb広告だと言えます。
リスティング広告
リスティング広告とは、ユーザーがGoogleやYahoo!といった検索エンジンを使用して検索した際に表示されるページに、検索キーワードに応じて表示されるWeb広告です。ユーザーが広告をクリックして初めて料金が発生するクリック課金型であることも大きな特徴です。
純広告・バナー広告
純広告とは、特定のWebサイトの広告枠を買い取って掲載するWeb広告のことです。テキストや画像、動画での広告表示が可能で、バナー広告と呼ばれることもあります。
動画広告
動画広告とは、動画コンテンツを配信するWeb広告です。テキストや画像と比較して伝えられる情報量が多く、目を引きやすいため、効果の出やすい広告として多くの企業が取り組んでいます。特にYouTubeの動画に差し込まれるCMのような15秒程度の短い「TrueView広告」は今非常に需要が高くなっています。
バナーサイズについて
pushStateとajaxを使ってSEOに強い無限スクロールページを作成する
SEOに適した無限スクロールの導入
FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール（英: Infinite Scrolling）ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富なギャラリー的なサイトではよく見かけます。
しかし、よく見られるjQueryを使ったシンプルな無限スクロールはコンテンツをすべて１つのHTMLファイル上に記述しておいて、スクロールするたびに「display:block」と「display:none」を使って表示させていく、というものです。人が見る分にはこの形でも良いでしょうが、Googlebot に対してとなると話が変わってきます。
ご自身のサイトのニュース フィードやピンボードで、ユーザーの利便性を考えて無限スクロール（英語）を使用している方もいらっしゃるでしょう。しかし、Googlebot に対してとなると話が変わってきます。無限スクロールでは、クローラーがユーザーの行動（スクロールやボタンを押してさらにアイテムを読み込むなど）を常にエミュレートできるとは限らないため、フィードやギャラリー内のすべてのアイテムにアクセスできないことがあります。クローラーがアクセスできないコンテンツは、検索結果に表示されることもないでしょう。
無限スクロール ページからリンクされている個別のアイテムを検索エンジンがクロールできるようにするには、無限スクロールを分割した一連のページ群を生成するようにしましょう。
Google ウェブマスター向け公式ブログ [JA] : 検索エンジンとの相性を考慮した無限スクロールのベストプラクティス
pushStateによるブラウザの履歴の更新
pushStateとは？
pushStateとは、HTML5でサポートされるAPIです。
ページを遷移せずHTML（の一部）を変えた場合でもブラウザに履歴を残し、また一意のURLを割り当てることが可能です。
HTMLの中身が変わってもAjaxはページを遷移しないのでURLが同じままです（#以下が入れ替わるだけで一意のURLとして処理しない）。
ブラウザの戻るボタンを押しても前のコンテンツを再び表示させることはできません。本当に前のページに戻ってしまいます。なのでGoogleは、クロール・インデックスできるように特殊な仕様をサポートしてくれたわけです。しかしpushStateを使えば、Ajaxで変化させたそれぞれのコンテンツに対してユニークなURLを割り当てられるのです。
つまり検索エンジンにとってクロール・インデックスしやすくなります。
JavaScriptが切れている状態でも手動でページ遷移出来るような設定も取り入れ、検索エンジンとの相性を考慮した無限スクロールにカスタマイズしましょう。
さらに簡易的なリダイレクト機能を使って、下層ページから入った時にトップページに戻るよう設定しましょう。
<meta http-equiv="refresh" content="0;URL='index.html'" />
以上の内容を踏まえて、今回は検索エンジンが処理しやすい無限スクロールを作っていきましょう。
今回のポイント
今回の注意点
- パスは全てルートパス
- トップページに「トップに戻るボタン」を設置
- footerは最後のページに設置
※特にページのタイトルの最適化は非常に大事です。通常の無限スクロールは1枚のhtmlファイルに無数のコンテンツが記述されていますが、今回のようにhtmlファイルを細分化する事で、コンテンツに応じたより細かいタイトルやURLの設定が可能になります。
API
APIとは「Application Programming Interface（アプリケーション・プログラミング・インターフェイス）」の略語であり、「ある1つの機能に特化したプログラムで共有可能なもの」や「ソフトウェアの機能を共有する仕組み」のことです。よく使う機能がAPIとして用意されていれば、わざわざ一からプログラムを組む必要はありません。必要に応じてAPIを利用し、効率的に開発を進められます。
SPA(Single Page Application)
ブラウザによるページ遷移を行うことなく、単一のWebページでコンテンツの切り替えを行うことで、ユーザーのUXが向上します。JavaScriptフレームワーク（Angular、Vue.js、Reactなど）で作成される事が多いです。
<script> $('#container').cleverInfiniteScroll({ contentsWrapperSelector: '#container', contentSelector: '.wrapper', nextSelector: '#next', }); </script>
デモページ
felica29.starfree.jp
Javascriptによるリダイレクト
Javascriptによるリダイレクトの方法もあるので、試してみましょう。
setTimeout("redirect()", 0); function redirect(){ location.href='../index.html'; }
面接について考える
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>これだけは呼んでおけ！厳選6冊</title> <link rel="stylesheet" href="/infini-2021-09/css/style.css"> </head> <body><script type="text/javascript" src="https://ad.netowl.jp/js/star-php.js"></script> <div id="container"> <div class="wrapper"> <h1>これだけは呼んでおけ！厳選6冊</h1> <p class="lead">歴史大河小説から近未来SF作品まで網羅した、厳選6冊を紹介</p> <p class="main-img"><img src="/infini-2021-09/img/main.jpg" alt=""></p> </div><!-- /.wrapper --> <a href="/infini-2021-09/book1/" id="next">次のページへ</a> <p id="to-top"><a href="#"><img src="/infini-2021-09/img/chevron-up-solid.svg" alt=""></a></p> </div><!-- /#container --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="/infini-2021-09/js/jquery.clever-infinite-scroll.js"></script> <script> $('#container').cleverInfiniteScroll({ contentsWrapperSelector: '#container', contentSelector: '.wrapper', nextSelector: '#next' }); //スムーススクロール $('#to-top>a').on('click',function(){ $('html,body').animate({scrollTop:0},200); }); </script> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="refresh" content="0;URL='/infini-2021-09/'" /> <title>新・平家物語</title> <link rel="stylesheet" href="/infini-2021-09/css/style.css"> </head> <body><script type="text/javascript" src="https://ad.netowl.jp/js/star-php.js"></script> <div id="container"> <div class="wrapper"> <h2>新・平家物語</h2> <div class="contents"> <p class="photo"><img src="/infini-2021-09/img/01b.jpg" alt=""></p> <p class="txt">『新・平家物語』は、吉川英治の歴史小説の大作。1950年から1957年まで「週刊朝日」に連載された。現行版は吉川英治歴史時代文庫全16巻。<br> 題材は『平家物語』だけでなく、『保元物語』『平治物語』『義経記』『玉葉』など複数の古典をベースにしながら、より一貫した長いスパンで源平両氏や奥州藤原氏、公家などの盛衰を描いた長編作品。</p> </div> </div><!-- /.wrapper --> <a href="/infini-2021-09/book2/" id="next">次のページへ</a> </div><!-- /#container --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="/infini-2021-09/js/jquery.clever-infinite-scroll.js"></script> <script> $('#container').cleverInfiniteScroll({ contentsWrapperSelector: '#container', contentSelector: '.wrapper', nextSelector: '#next' }); </script> </body> </html>
CSS Scroll Snap
以前はjavascript等で制御していたスクロールスナップも現在ではcssのみで簡単に実装出来ます。またflexやvw、vhを使う事でレスポンシブにも簡単に対応出来ます。
慣性スクロール
慣性スクロールとは、主にマルチタッチインターフェースで採用されている機能で、画面を素早くスクロールさせた際、指を画面から離しても急には止まらず、慣性が作用しているようにスクロールがある程度維持される機能のことである。 慣性スクロールが機能することで、スクロール操作の繰り返しが連続的な動作になる。
Y方向にスクロールスナップ
See the Pen
scroll-snap-y by yachin29 (@yachin29)
on CodePen.
スクロールの方向とスナップの種類
scroll-snap-type: y mandatory;
ある程度スナップしたら、次のコンテンツに自動でスナップさせる場合は「mandatory」
コンテンツ中間地点にいる場合はその位置で停止するのが「 proximity」
親要素に指定します
子要素の停止位置
scroll-snap-align:start;
「start」 エリアの開始位置
「end 」エリアの終わりの位置
「center 」親要素の中央で位置します
子要素のスキップ
scroll-snap-stop:normal;
スクロール速度が早い場合にアイテムをいくつか飛ばしてしまう事があります。その時に、
「normal」いくつかスキップしてしまう（デフォルト）
「always」１つ１つ止まるようになる
scroll-padding
scroll-paddingはショートハンドのプロパティで、paddingと同様に上下左右にスクロールのパディングを親要素に定義します。
scroll-margin
子要素間の余白を使いたい時に指定します。
Canvasでパーティクルを表現する
Canvasとは
Canvasとは、ブラウザ上に図を描くために策定された仕様です。
これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashやJavaアプレットが使われてきました。
Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。
Canvasは、もともとはAppleが発祥で、当初、Mac OSでおなじみのDashboardで使われた技術仕様です。その後、Apple、Mozilla Foundation、Opera Softwareといったブラウザベンダが立ち上げたWHATWGという団体にて策定作業が行われていた「Web Applications」と呼ばれる規格に採用されました。
See the Pen
Particle & Mouse stalker by yachin29 (@yachin29)
on CodePen.
htaccessを使った動的配信
「.htaccessファイル」を使った動的配信
動的な配信 | 検索セントラル | Google Developers
スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、サーバ側で自動振り分けする方法をやってみます。
まずは「.htaccessファイル」を作成します。この際、ローカルサイドで「.htaccessファイル」を作成すると、不可視ファイルの設定などで問題が起こりやすいので、一旦「htaccess.txtファイル」として作成し、サーバー側にアップロードしたのちに、「.htaccessファイル」にリネームする方法でやってみます。
今回の自動振り分けは
- ウェブサーバが「Apache」
- 設定ファイル「.htaccess」の設置が許可されている
- mod_rewriteモジュールが利用可能
の条件が必要です。
.htaccessの記述内容
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile) [NC] RewriteCond %{QUERY_STRING} !mode=pc RewriteRule ^$ /cat/sp/ [R,L] Header set Vary User-Agent </IfModule>
まずはmod_rewriteモジュールが有効な時のみに処理するように分岐させます。
<IfModule mod_rewrite.c> </IfModule>
次にmod_rewriteモジュールを起動させます。
RewriteEngine On
次にRewriteCondを使って、どういう条件でリダイレクトの処理をするかを指定します。
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
HTTP_USER_AGENT」は、アクセス端末の種類を示します。
最後にある [NC] という記述は、「大文字・小文字を区別しない」という意味の指示です実際にユーザエージェント名に含まれる文字列が「android」でも「ANDROID」でも、同じだとみなされます。 つまり、"A-Z" と "a-z" は区別しない。
RewriteCond %{QUERY_STRING} !mode=pc
URLの末尾に「?mode=pc」という文字列が付いていた場合には、スマートフォン用ページに移動させない(リダイレクトしない)ようにする記述です。なお、「mode=pc」という文字列は何でも構いません。「pc-site」や「show-pc-edition」など、何でも好きな文字列を指定できます。
4行目
RewriteRule ^$ /cat/sp/ [R,L]
RewriteRuleを使うことで、指定した規則に沿ってURLを書き換えられます。ここでは、リダイレクトするために利用しています。フラグとして、[R,L] を指定しています。「R」は「リダイレクトする」という意味で、ここでは必ず必要です。「L」は書き換え規則の最終行であることを示しています(これ以降のRewriteRuleは無視されます。ここでは省略しても問題ありません)。
今回の場合は、この .htaccessファイルを設置した場所が http://www.example.com/pc/ だとすると、
スマートフォンでアクセスすると http://www.example.com/pc/sp/ へ移動。
スマートフォン以外でアクセスすると http://www.example.com/pc/ のまま。
スマートフォンでアクセスしても、URLが http://www.example.com/pc/?mode=pc であれば移動しない。
自分のドメインでトップページを表示させたい場合（http://www.example.com）
4行目を以下のように直し、トップページ（PC用のindex.html）と同じ階層にアップロードする。
RewriteRule ^$ /sp/ [R,L]
スマートフォンでアクセスすると http://www.example.com/sp/ へ移動。
スマートフォン以外でアクセスすると http://www.example.com/ のまま。
スマートフォンでアクセスしても、URLが http://www.example.com/?mode=pc であれば移動しない
スマートフォンサイト用データの「index.htmlファイル」のhead内に貼り付ける
rel=”canonicalという属性を使用して、ページの評価やインデックスはデスクトップ用URLに統一するための正規化処理をしましょう。そうすることでミラーサイトのような重複コンテンツ扱いになることを防ぎます。
<link rel="canonical" href="http://○○○○○.com/pc/">
次にPCサイト用データの「index.htmlファイル」のhead内に貼り付ける
rel=”alternate”という属性を使用して、Googlebotにスマートフォン用ページが別で存在することを伝える処理をします。そうするとスマートフォン向けの代替コンテンツがGooglebotに認識され、スマートフォン用ページが別で存在することを伝えることができます。
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://○○○○○.com/cat/sp/">
最後にスマートフォンサイト用の「index.htmlファイル」に「PC版を表示」などのボタンを作り、「.htaccessファイル」が有効になっていても、スマートフォンでPCのデータを表示出来るようにしましょう。
<a href="http://○○○○○/pc/?mode=pc">PC版を表示</a>
