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

関連記事

  1. Web関連

    360度見れる動画?!新しい動画時代の始まり!

    皆さんはYoutubeを見たことはありますか?スマートフォンが普及し…

  2. Web関連

    動画コンテンツにユーザーが求めるのは「ストーリーと客観性」だった

    いきなりですが、御社はホームページに動画コンテンツを取り入れようと考え…

  3. Web関連

    ウェアラブルで健康管理

    健康管理といえば、メディアの情報からセルフチェックをしたり病院で検査を…

  4. Web関連

    クラウドビジネスの動向。世の中のサービスちょっとだけ調べてみました。

    こんにちは、コンサルの横山です。会社の掃除をすることが多くなってきまし…

  5. Web関連

    アフターコロナの今がチャンス。D2C戦略で顧客獲得

    D2CについてD2Cとは「Direct to Consumer」の…

  6. Web関連

    【実録】SFA/CRMのシステム置き換えに関して考えたこと

    こんにちは、システムエンジニアの小森です今回は社内システムの置き換えに…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    マーケティング大成功!人気アニメ作品はなぜ「人気」となったのか?
  2. Web関連

    Web制作なら見積もりをもらおう
  3. Web関連

    ぶっちゃけ、iPhoneとXperiaどっちが良いの?
  4. AI関連

    顧客体験を「個客」体験へと向上させる人工知能(AI)
  5. Web関連

    空腹注意! 飲食業界に関わって学んだこと!
PAGE TOP