Web関連

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

0

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

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

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

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

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

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

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

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

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

 

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

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

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

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

    

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

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

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

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

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

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

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

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

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

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

関連するサービス

ホームページ制作

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

0

ワイヤーフレームを作る前に気を付けたい5つのこと前のページ

今からでも遅くない!ECサイトについて学ぶ ~ショッピングカート編~次のページ

ピックアップ記事

  1. AIに求められているものは、実は意外な物だった
  2. 新型コロナウイルスで日本の働き方改革が起こる
  3. 新しい販売形態であるDtoCについて考えてみる
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. Web関連

    Webサイトと未来をつなぐ「VR」

    PS4といえば、去年SONYから発表された「PlayStation V…

  2. Web関連

    営業担当者必見!MAツールを使って時短&顧客育成!

    あなたは効率よくお仕事が出来ていますか?「実は時間が短縮できる…

  3. Web関連

    業種別に採用サイトの違いをまとめてみた

    2016年度の就職活動もはじまり、新しい採用サイトを公開する企業も増え…

  4. Web関連

    広告費をムダにしないために学ぶべき3つのこと

    今回は、費用対効果の高いネット広告について全3回に…

  5. Web関連

    時間を忘れて楽しめる!無料診断サイトまとめ

    エブリディSNSライフマンこと、歌川です!先日Twitterで友人が誕…

  6. Web関連

    人工知能(AI)がユーザーの気持ちを考えてWEB集客率向上!?

    昨今、WEBマーケティングを行う企業が増えていますが、人が行うのはコス…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    気づけないWEBサイトの欠点をAIが分析・提案!
  2. Web関連

    「一度だけ客」をリピーターに変身させる方法(3)
  3. Web関連

    動画コンテンツ。成功の秘訣はストーリーとシナリオにある
  4. Web関連

    あなたの日本語、間違ってる!実はおかしい文章表現
  5. Web関連

    Web制作会社が教えるデータドリブンマーケティングを成功に導く方法
PAGE TOP