menu

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

ディレクター心得

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

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

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

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

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

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

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

スイス国際航空

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

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

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

小野 良勝 代表取締役

投稿一覧

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

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

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

関連記事

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

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

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

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

  3. メンバーへの共有もより簡単に。ワイヤーフレーム作成ツール3選

    クライアントを含め複数のメンバーが携わるWebサイト制作において、情報共有やプロジェクトの進行に大き…

  4. ランディングページの成功事例その2「TECH:CAMP」

    ベテランのWebディレクターでも頭を悩ませることの多いランディングページ制作。用途・目的に沿ったペー…

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

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

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

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

  7. オウンドメディアを成功させるために、Webディレクターがやってお…

    ブログなどの情報発信を続けることによって見込客を獲得し、ブランディングに成果をもたらすオウンドメディ…

  8. ユーザーの7割が直帰する?ファーストビューの効果的な改善その1

    Webサイトで最も大切な要素の1つが、訪問したユーザーが最初に目にするファーストビューです。あるWe…

PICKUP

PAGE TOP