「jQuery（ジェイクエリー）」をLPやHPに効果的に生かすには

目次

1. jQueryとはどのようなものなのか？
2. jQueryをLPで有効活用するには
3. コーポレートサイトやスマホでも活躍
4. 押し出したいポイントを違和感なく動かす

jQueryとはどのようなものなのか？

ウェブをデザインしていく上で必要な要素はいくつかありますが、少し動きをつけたいときなどに活躍してくれるのが「jQuery（ジェイクエリー）」です。

jQueryは、「JavaScript（ジャバスクリプト）」と呼ばれるブラウザ上で動くプログラムのライブラリのひとつで、それをより簡単にプログラマーとかコーダーとかでもない人が扱えるようしたもの。

使い方は簡単で、jQueryはオープンソースのライブラリなので、公式サイトからダウンロードし、使いたい部分を抜粋して必要に応じて数字をいじれば、動きや速さを変えたりできます。
多少の知識は必要にはなりますが、JavaScriptコードを書けないような人でも扱えるというメリットがあります。

では、jQueryをLPやHPにどのように用いれば効果的に運用できるかを、具体例と共にお話ししていきたいと思います。

jQueryをLPで有効活用するには

jQueryは本当にすごく簡単に使えますし、JavaScriptでアニメを動かしたり、いろいろ動作をさせるのはウェブの特性だと思いますから、できれば積極的に取り入れていくほうがいいのではと考えています。

今ではいろいろなサイトで使われていることも多く、スマホでもPCと同じように表示でき、スマホ向けサイトでよく見かける「≡」をタップしてメニューが出てくるといった動きもそうなので、皆さんも知らないうちに目にしていることはあるかもしれません。

LPという分野での活用方法としては、たとえば実績を多数お持ちの企業は多いと思いますし、できる限り多くの実績を載せたいという意向があるのは自然なこと

しかし、実績の掲載量が増えてしまうことでLPの縦幅が延びてしまい、結果としてページの最後までスクロールしてもらえないというケースも目立ちます。

そういう場合はjQueryを活用し、実績をひとつずつ円を描くように立体的にスライドさせて表示させるという使い方も可能です。

ほかにも特定の場所までスクロールしたらギミックが出現したりなどといった仕掛けもできるため、そのブロックでのポイントが自然と目に入ってくるようになり、いかに大事かをユーザーに強調する効果も期待できます。

コーポレートサイトやスマホでも活躍

jQueryの動作パターンはできないことを探すほうが難しいというレベルで、多様な動きを再現できるので、業種に合わせた動かせ方ということも実現できると思います。

コーポレートサイトではトップページに画像を使っている企業は多いと思いますが、メインビジュアルを複数見せたいというときに自動でスライドさせられますし、押し出したいキャッチコピーが複数ある場合も、同様に可能です。

動作スピードも自在に変更できますから、見るユーザーに合わせて、ご年配の方が多いようなサイトであればゆっくり、若い人が多いなら早くなど、ターゲット層に合わせたスピード感というニーズにも応えられます。

また、PCに比べて横幅が限られてくるスマホやタブレットとも相性がよく、スマホ向けページは文字サイズを大きくしなければいけない場合がありますが横幅が限られているため、どうしても縦に積んでしまいがち。
そうであれば、ページをたたんであげるというギミックもjQueryの手法のひとつとしてあります。

押し出したいポイントを違和感なく動かす

jQueryの便利さはわかっていただけましたでしょうか。

最大の利点は、人は自然と動いているものに自然と視線が行くと思うので、目立たせたい部分に動きを出してあげることで、動いていないときは目立っていないのですが、動かすことで目立たせることができるということ。

より際立たせつつ、全体的なテイストで、目立たせるときに色を変えたり不自然に文字が大きくなっていることが多いですが、そういうことをせず、違和感が出ないように目立たせ、目を向けさせる効果に期待できます。

また、スペースを使わず効果的に、立体感を持ってよりシャープにユーザーに提示できるという点も見逃せません。

jQueryの導入方法はいたって簡単なので、ウェブでしかできない動きを有効に使ってユーザーへのアピールを向上させてみるのはいかがでしょうか。

もちろん、それでも難しいという方は、気軽に当社までご相談ください。