menu

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

ディレクター心得

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

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

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

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

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

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

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

スイス国際航空

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

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

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

小野 良勝 代表取締役

投稿一覧

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

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

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

関連記事

  1. WordPressのメリットを活かす、アクセス解析プラグイン5選…

    Webサイトの運営に必須となるアクセス解析。ページ作成やコンテンツ更新が手軽にできるWordPres…

  2. WordPressの効果を最大化する、レンタルサーバー選びのポイ…

    WordPressを利用するうえで最低限必要となるのが、「Apache」と「MYSQL」の両方に対応…

  3. 画像編集をクラウド化して業務効率UP。無料オンライン画像編集ツー…

    コンテンツマーケティングがWebマーケティングの主流となり、Webサイトのあらゆる面に高いクオリティ…

  4. 【Webサイト運営者必見】よく分からないKGI/KPIを優しく解…

    Webサイトでは「明確な目標」を持つのが難しく、それ故に目標もなくWebサイトを制作したりリニューア…

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

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

  6. コンテンツの品質管理に役立つ無料の文章チェックツール3選

    ライターや外部の制作会社から納品されてきたコンテンツの品質管理もWebディレクターの大切な仕事の1つ…

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

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

  8. スクロールエフェクトを実装できる、おすすめjQueryプラグイン…

    画面のスクロールにあわせて写真やサムネイル、テキストを自由に動かすことができるスクロールエフェクト。…

PICKUP

PAGE TOP