menu

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

ディレクター心得

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

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

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

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

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

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

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

スイス国際航空

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

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

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

小野 良勝 代表取締役

投稿一覧

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

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

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

関連記事

  1. ランディングページに特化したギャラリーサイト4選

    Webデザインを見る目を養い、日々変化するトレンドへの理解を深めるのに非常に役立つギャラリーサイト。…

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

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

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

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

  4. プレゼンや打ち合わせに活用したい、無料モックアップ作成ツール3選…

    ワイヤーフレームと同様に情報共有やプレゼンテーションの精度を高めてくれるのがモックアップです。クライ…

  5. Webコンテンツの印象を大きく変えるタイポグラフィの4原則

    フォントを効果的に使うにはタイポグラフィ(書体の配置や構成といった表現)も大切です。デザインやレイア…

  6. Webデザインを見極める目を養う、高品質のギャラリーサイト4選

    フラットデザインやマテリアルデザインなど、次々と新しい概念が生まれるWebデザインの世界。プロのWe…

  7. WordPressの初期設定で最低限押さえておきたい2つのポイン…

    レンタルサーバーとドメイン、FTPクライアントを準備し、インストールするだけで手軽に利用できるWor…

  8. アイコンもセットで、レスポンシブデザインにも対応。CSSフレーム…

    WordPressと同じくWebサイト制作の生産性アップに役立てたいのが、CSSフレームワークです。…

PICKUP

PAGE TOP