menu

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

ディレクター心得

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

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

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

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

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

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

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

スイス国際航空

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

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

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

小野 良勝 代表取締役

投稿一覧

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

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

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

関連記事

  1. 一筋縄では行かないLPOの成功の法則とは?LPの「ストーリー化」…

    Webディレクターが携わることの多い業務の1つがランディングページの最適化(LPO)です。いくら広告…

  2. マイクロコンバージョンによってWebサイトを評価する際の2つのポ…

    Webサイトや広告のランディングページを改善する手法として最近注目を集めているマイクロコンバージョン…

  3. Web運用を委託した方がいい企業5つの特徴!!と、1つの注意点

    Webサイト運用って何かと手間がかかるので、出来れば制作会社に委託したいと考えている企画担当の方が多…

  4. WordPressの表示速度をアップさせるプラグイン5選

    アクセス解析やセキュリティなど豊富な機能が提供されているWordPressのプラグイン。使い方によっ…

  5. 「まだ東京で消耗してるの?」に学ぶ、オウンドメディア成功の秘訣

    オウンドメディアの重要性が指摘されるなか、注目を集めているのが管理人・イケダハヤト氏によるWebサイ…

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

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

  7. ツールを使って効率的に配色。カラーパレットのWebサービス4選

    ベテランのWebデザイナーでも頭を悩ますことの多いWebサイトの配色。256種類のカラーコードによる…

  8. Webページの統一感がUP。クリック率改善も期待できるグリッドデ…

    既存のWebサイトの一部をリニューアルしたり、コンテンツを追加したりする場合、課題になってくるのがそ…

PICKUP

PAGE TOP