jQueryエフェクトを使ってランディングページを効果的に演出する!?

動きを効果的につけると滞在時間が長くなる

動きのあるランディングページは見る人の興味を広げるものです。JavaScriptの使い方によっては、単なるflash画像の連続的な動きであったり動画のみを貼り付けたページは、動作が遅いことなどが原因でせっかくの訪問者を興ざめさせてしまい離れていってしまう要因の1つとなり、目新しさも伝えにくいものとなります。カスタマーは知りたい情報を入手しながら、動きを持たせた展開が斬新で目を引くサイトには、滞在時間も長くなります。以下は、jQueryエフェクトをランディングページに取り入れることにより、紹介したい内容を一層効果的に表現できる例の紹介です。

ランディングページによく使用されているいくつかの例

集客のあるランディングページに取り入れられているjQueryエフェクトには、画像ループ表示、スクロール位置に応じて画像スライドで表示させる、またはページトップに戻る表示、カルーセルパネル(HTMLごとスライダーで動かす)、スクロールに追従しながらナビゲーション表示、パララックス効果(ページ全体に奥行きがあるように見せる)などがよく使われています。その他では、動画風にコンテンツを表現することもjQueryエフェクトで可能です。初期設定の方とこれらのいくつかの方法について解説していきます。

jQueryエフェクトを使用する準備

jQueryエフェクトを初期設定する場合にjQueryのバージョンは1.7.2使用の場合です。htmlに記述するJavaScriptは任意の箇所から必要なコードをダウンロードし読み込ませる作業のみで、中の記述は触りません。大抵の場合コード記述は、手作業で行わず既存で用意してある必要部分をコピーペーストすることが主流となっています。jQuery(1.7.2)、jQuery easing、jQuery inview、jQuery carouFredSel、これらの名称ごとに読み込みを行います。

画像ループ表示スライダーとフェードインアウト

画像ループ表示の見せ方の1つでスライダーを使う方法は、画像を右から左に流す表示をすることで、構成を保ちながらすっきりと見せることが出来る上、効果的な賑わいの演出が伝わります。もう1つの画像ループ表示にフェードイン/アウトがあります。複数の画像を均等な配列で同一の位置で出現や消滅を繰り返します。画像が消えることによりもう1度見たいという期待感を持たせることに効果的です。ランディングページによっては、シンプルにまとめることが圧迫感を与えず自然ですが、複数の組合せや、画像切り替えのタイミングを工夫すると一層豊かな表現となりそうです。

スクロールの位置に応じて画像がスライド表示される

どのサイトでも「トップへ戻る」の表示は当たり前になり、ジャンプすることができます。縦長に続くランディングページでは、より深く内容を読み進めてもらえるように、ユーザーが「もう1度戻ってじっくり見たい」と思った時点で、邪魔しない程度のさりげない表示として添えるのがポイントとなります。スクリプト上の記述では、スクロールが規定の深さまで動いたら表示、それより浅い時には出さないという処理が適切です。配置は好みで設定することができます。スライド要素である記述の「#sugo .head h2」を絶対位置にしておきましょう。

HTML全体が動かすことが出来る

カルーセルパネルはリンクも含め、HTML要素まるごとスライドさせることができるプラグインです。企業の事例紹介やポートフォリオなどボリュームが大きくなってしまいがちです。それらの部分は、是非見て欲しい部分であるため素通りしてほしくはありません。カルーセルパネルを使えば、それらの問題は解決し、スッキリと収納した状態となります。マガジン感覚で軽快に閲覧が行えます。ユーザーが見たい部分を探し目的箇所へ到達するためにストレスを溜めないで使用できます。このようにjQueryエフェクトを使用するとランディングページの見栄えだけでなく、使い勝手が良くなることも実感できます。

カテゴリー:未分類

この記事を書いた人

水野 直

水野 直株式会社ZERO

1985年、東京都中野区生まれ。
某WEBマーケティング会社にて営業と兼務でリスティング運用やSEOの実務を経験。 現在は某企業の小売業の経営コンサルタントをする傍ら、 LPO・SEOを中心としたWEBマーケティング会社取締役として従事。 普段の業務は現場教育やコンサルティングのお手伝いのほか、記事執筆やセミナーなど。