menu

縦長レイアウトはもう古い?スクロールエフェクトを活用したWebサイト

ディレクター心得

CSS3やHTML5によってWebサイトには以前にも増して多くの情報量を盛り込めるようになってきています。HTML5のvideoタグなどを上手く利用すれば、ページの表示速度をキープしたまま動画を埋め込むことができるようにもなりました。

ただページの情報量が増えると、レイアウトが縦長になりがちです。たとえ一定水準以上の表示速度が確保されていても、単調なスクロールはユーザーにストレスを与えますし、ディスプレイの小さいスマートフォンなら通り過ごしたりしてしまったりして、なかなか目的の情報にたどり着けないといったケースもあるのではないでしょうか。

そうしたなかここ2~3年で注目を集めいているのが、スクロールエフェクトという手法。その特徴と効果について、スイス国際航空の事例とあわせてご紹介します。

スクロールエフェクトとは

スクロールエフェクトとは、ユーザーのスクロールにあわせて画像、アイコン、サムネイル、テキストといった要素が、斜めや横、奥行き方向が動くWebデザインのこと。フラットデザインやタイルデザインとあわせて最近のトレンドの1つになっています。

スクロールエフェクトはユーザーに新鮮な驚きやスタイリッシュな印象を与えられるだけでなく、動きの強弱やスピードを工夫することによって、制作者側の意図に沿ってコンテンツを見せることも可能です。そうした効果を上手く利用しているのが、スイス国際航空のプロモーションサイトです。

アルプスの雲の中から現れるコンテンツ

スイス国際航空

上のスイス国際航空のプロモーションサイトには、ナビゲーションもサイトマップもありません。あるのは雪深いアルプスの山々の背景のみ。そこからスクロールしていくと、視点が上空に上がり、雲のなかから従業員やコクピットを紹介する動画や、企業理念、エンジニアの想いを伝えるコンテンツが現れます。

スクロールを進めるとコンテンツは画面手前側にフェードアウトし、次のコンテンツが登場するため、どこまでスクロールを進めても画面に表示されるのは1つのコンテンツのみ。クリック率までは分かりませんが、ユーザーにコンテンツを視認させるうえで高い効果があるのは間違いないでしょう。

また、風で雲がなびく様子も緻密に再現され、実際にアルプス上空を飛んでいるような感覚を味わるのも、航空会社のプロモーションサイトならではの工夫かもしれません。

小野 良勝

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

「ベニスアップデート」によって大きく変わったSEO

ブランドを浸透させるには社内から。インナーブランディングについて

関連記事

  1. ユーザーを後押し&安心感を与えるクロージング。LPの「ストーリー…

    ユーザーの願望に対する解決策だけでなく、その先にあるプラスアルファの価値を示し、裏付けや背景をあわせ…

  2. 手軽に作ってWebサイトにアクセントを。無料のGif画像作成サー…

    複数の静止画を組み合わせてコマ送りで表示することによって、画像に動きをつけることができるGif。We…

  3. Webデザインの初稿チェックで押さえておきたいポイント

    Webページの制作・修正のやりとりのなかでもとりわけ重要なのが、デザイナーから最初に提出されてきた初…

  4. 不正アクセスや脆弱性・バックアップ対策も。セキュリティ対策プラグ…

    デザインの自由度が高く、プラグインによって豊富な機能を拡張できるWordPressは世界中のWebサ…

  5. あらためて整理しておきたい、Webサイトにおける「色」の効果

    ECサイトの制作プラットフォームを提供しているShopifyのリサーチ結果によれば、ユーザーの購買は…

  6. SNSの拡散(バズ)を視覚化。今すぐ役立てたい効果測定ツール3選…

    オウンドメディアとならんで、Webマーケティングの重要な要素の1つがSNSの活用です。「SNSを使っ…

  7. 競合サイトの調査に活用できるGoogleの3つの機能

    大手調査会社ニールセンが2015年12月に発表したリサーチ結果によれば、日本におけるインターネット利…

  8. Webサイトの完成度を高める、バナー&各種パーツのギャラリーサイ…

    広告やランディングページでユーザーの興味・関心を引き立てるバナーはもちろん、アイコンやタブをはじめと…

PICKUP

PAGE TOP