Web関連

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

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

パララックスの表現手法は、インパクトがあってユーザーを引き込む効果があります。
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の環境の違いや、ユーザーの利用シーンを考えると、パララックスデザインはあくまでサイト全体の演出の一部としてにとどめた方が、無難かもしれません。

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

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

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

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

関連するサービス

ホームページ制作

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

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    デバイスでもっと快適にイラストライフを目指す!!

    皆さま、デジタルイラストを描く際にどのソフトを使っていますか?イラ…

  2. Web関連

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

    こんにちは。ティファナ内でオタク代表を名乗っている真野です。今季もそろ…

  3. Web関連

    セキュリティ対策はクラウドストレージでも必須!!

    データの保存や共有などにとても便利なクラウドストレージ。中でも無料で使…

  4. Web関連

    シームレス化が進む!1つのWordPressで複数のサイトを更新する方法とは?

    ネット活用のシームレス化を考えるに辺り、運用者側も同一の管理画面を利用…

  5. Web関連

    ホームページ制作会社が教えるインフォグラフィックの基礎、ピクトグラムの作り方

    デザイナーに限らず、インフォグラフィック好き!という方、多いのではない…

  6. AI関連

    WEB接客と親和性の高そうなサービスを考えてみた

    2015年は"WEB接客"サービス元年と呼ばれていますが、WEB接客と…

おすすめ記事

最近の記事

  1. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  2. 約1年間のウィズコロナ生活で大きく変わったもの
  3. スマートストアにより、小売業は激変する
  4. 【化粧品業界×最新技術】AIが化粧品のアドバイザーに!?
  5. AI技術の普及により移動も安全に

アーカイブ

  1. Web関連

    E-Sportsは日本で普及するのか
  2. Web関連

    毎日見たくなるオウンドメディアサイトとは?
  3. Web関連

    web担当者必読!注目のLINE@ 企業のビジネス活用まとめ
  4. Web関連

    今、最も人気のあるプログラム言語は何か。
  5. Web関連

    ポルシェ好きのオッサンが今後の自動車業界に関して考えてみた
PAGE TOP