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

関連記事

  1. Web関連

    映画のWebプロモーションを調べてみた!(1)

    どうも!自分勝手の好き勝手をモットーに記事を書いていくと決めた コンサ…

  2. Web関連

    Web制作会社でなくとも知っておきたい。ECサイト構築の前に考えておくべきこと

    一言でWeb制作と言っても、作るサイトによって手順もノウハウも変わって…

  3. Web関連

    業務を効率化できるサービス 第2回

    こんにちは、システムエンジニアの小森です今回は業務を効率化するために使…

  4. Web関連

    【Web アプリ制作】スマホアプリ×ホームページ

    昨年10月、幕張で行われましたWeb&マーケティングEXPO【…

  5. Web関連

    ホームページ制作費用の落し穴

    こんにちは「ウェブビジネスストラテジーオフィサー」の藤田です。。。嘘で…

  6. Web関連

    「今夜、星を見に行こう。」

    こんにちは。山羊座の真野です。(って書くと聖闘●星矢の登場人物みたいで…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    Web制作会社でなくとも知っておきたい。ECサイト構築の前に考えておくべきこと
  2. Web関連

    地方移住×ローカルWEBメディア
  3. AI関連

    【人工知能(AI)×災害対策】AIで洪水・防災対策を進める
  4. Web関連

    リモートワークで働く際に知っておきたい6個のポイント
  5. Web関連

    アクセスログ解析が苦手な人に朗報!?簡単に解析&改善が出来てしまうサービスを紹介…
PAGE TOP