パララックスデザイン│東京のWeb制作会社のスマホサイト関連コラム

Columnコラム

スマートフォンサイト

スマートフォンサイトにおけるパララックスデザイン

スマートフォンサイトにおけるパララックスデザイン

2015/09/15
このエントリーをはてなブックマークに追加

こんにちは。
育児に家事に大忙しのディレクター、望月です。

パララックスの表現手法は、インパクトがあってユーザーを引き込む効果があります。
PCサイトでのダイナミックな構図も魅力的ですが、スマートフォンでも、同じような視差効果を出すことによって、他サイトとひと味違った演出をすることが出来ます。

今回は、スマートフォンにおけるパララックスデザインについて、解説していこうと思います。

スマートフォンならではのパララックス効果

スマホの傾きに合わせて動くパララックス

パララックスというと、画面の上から下へ、オブジェクトが時間差で動いていくというイメージが強いですが「視差効果」という演出は、それだけではありません。

スマートフォンには、ジャイロセンサーが搭載されており、その情報を使った、スマートフォンならではのパララックス効果を演出することが出来ます。

例えば、parallax.js というjQueryライブラリを使用することで、スマートフォンの傾きを利用した奥行きのある表現が可能になります。

parallax.js
http://matthew.wagerfield.com/parallax/

paramotiduki_2015090501.jpg

スマートフォンの傾きに合わせて、手前のオブジェクトと背景が連動して動きます。

海外のサイトですが、このような例もあります。

Atlantis World's Fair
http://lostworldsfairs.com/atlantis/

paramotiduki_2015090502.jpg

こちらは、画面をスクロールしていくと、エレベーターに入った人が、深海へどんどん降りていくというものです。PCサイトでよくあるような、複数の写真を、少しずつずらしながらスライドしていくものではないのですが、これもひとつの視差効果になると思います。「楽しくて、おもわずスクロールしたくなる」というUXを生み出し、つい最後まで見てしまいます。

paramotiduki_2015090503.pngparamotiduki_2015090504.pngparamotiduki_2015090505.png

PCサイトでは、よくあるパララックスの動きを表現しているのですが、スマートフォン版の場合は、画面が横に展開していきます。SNSのキーワードを利用して、東京タワーに関連したつぶやきを、ストーリー性を感じる背景に合わせてスクロール表示していきます。世界観の表現がとても上手だと思います。

スマートフォンサイトで、パララックスデザインを行う意味

ここまで、いくつかのスマートフォン版パララックスデザインのサイトを紹介してきました。

色々と見て感じたこととしては、スマートフォンサイトでパララックス効果を出すには、慎重に検討する必要があるという点です。

スマートフォン/タブレットでは、複雑なプログラムやブラウザに負担のかかるような凝ったグラフィックは、かえってユーザーに使いづらさを感じさせてしまいます。

私も過去に、PCサイトと同じような効果をスマートフォンサイトで行おうとして、失敗した経験があります。
スマートフォンとPCの環境の違いや、ユーザーの利用シーンを考えると、パララックスデザインはあくまでサイト全体の演出の一部としてにとどめた方が、無難かもしれません。

表現手法としては面白く、実際にユーザーを引き込む力はあるので、例えばキャンペーンサイトや、製品/サービスのブランディングとして独立したコンテンツを展開するなど、見極めを間違えずに適用すれば、十分な効果を発揮できると思います。

サイトの目的やユーザーニーズを見極め、効果的なパララックスを使いましょう。

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ホームページ制作

スマートフォンサイト制作

text_totop