スクロールエフェクトが楽しすぎて最後まで見てしまうWebサイト14選



スクロールエフェクトが楽しすぎて最後まで見てしまうWebサイト14選


シングルページを盛り上げるデザイン手法として有名な「スクロールエフェクト」。マウス・ホイールをクルクルすると気持ちよく画面が切り替わり、多くのユーザーを最終ラインまで導いてくれます。情報提供者にとって、伝えたい情報をユーザーにきちんと届けられるということは、webサイト効果が最大限に活かせることにつながってきます。

見ていると「うっとり」「ふむふむ」「なるほど」と思えるようなスクロールエフェクト・サイトをご紹介したいと思います。

目次
  1. スクロールエフェクトとは
  2. webデザイン初心者必見!参考になるスクロールエフェクト・サイト14選
  3. SCROLLEFFECTS
  4. SONYBEMOVED
  5. SWISS(スイス航空)
  6. マリオカート
  7. NASAの宇宙紹介
  8. クールデザイン「Feed」
  9. レッドブル
  10. 爽快「シーブリーズ」
  11. 芸術家黒田賢
  12. lixus
  13. Nicon
  14. 日産NOTE
  15. YAMAHA50ccコミュータークラブ
  16. KathArt
  17. ちょっとスクロールエフェクトを試したくなったら
  18. まとめ

image

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

マウスをスクロールし量をコントロールして、Webサイトに奥行きや遠近感を表現する手法です。

webデザイン初心者必見!参考になるスクロールエフェクト・サイト14選

SCROLLEFFECTS

scrolleffectsSCROLLEFFECTS

SCROLLEFFECTSは、Adobe社のAdobeMuseCCの解説用サイトになります。AdobeMuseを使うとこんなことができますよ、と紹介しているのですが、スクロールエフェクトの基本的な機能を確認することができます。

スクロールエフェクト初心者、webデザイナーなら一度は見ておきたいサイトになります。ちなみに「SCROLLEFFECTS」のソースコードはこちら

SONYBEMOVED

sonySONYBEMOVED

SWISS(スイス航空)

スイスエアーSWISS(スイス航空)

スイスの国営航空会社として運営されていたスイス航空。公式サイト

マリオカート

マリオカートマリオカート

Nintendoの代表作「マリオカート」。暑い日も寒い日も友達と死闘を繰り広げていたころを思い出す方も多いことでしょう。こちらのサイトではマリオカートWillの紹介から始まって、マリオカートの歴史などを分かり易く紹介しています。

マリオカートらしい流れるようなデザインは、ステキです。スマホには対応していないのでPCやタブレットが対象となっています。

NASAの宇宙紹介

prospectNASAの宇宙紹介

NASAがもっと多くの人に、宇宙に興味を持ってもらおう、と思って作成したプロジェクトの「Prospect」。スクロールダウンしていくと映像や音楽が変わり、まるで絵巻物を読んでいるような気分になります。

気になって最後までスクロールしちゃいますね。スマホにもエフェクト対応していますが、PC表示に比べると動きにギコチナさを感じます。サイトのコードはGitHub上で公開されています。NASAProspectソースコード(GitHub)

クールデザイン「Feed」

feedmusicFeed

2016年までに180兆円から300兆円規模になるといわれるデジタル経済。そんな成長産業の中でも個人データを活用してビジネスに結び付けようとしている「Feed」。

イントロ部分はまるで映画のような演出で、次にどんな内容が表示されるのか気になってスルスルとスクローリングしてしまうCOOLなサイトです。

レッドブル

レッドブルレッドブル

エナジードリンクとしてホットな「RedBull」。新しくボトルタイプが発売されて、そのPRサイトがユニークです。画面を左右に2分割していて、スクロールを進めていくといろいろな“あけるしめる動画”が紹介され、最後に“あけるしめるレッドブル”が紹介されています。スマホ画面では動画紹介レイアウトの上に缶レイアウトが重なっていて、凝ったデザインであることが伺えます。

爽快「シーブリーズ」

シーブリーズ爽快「シーブリーズ」

「シーブリーズ」と聞くと甘酸っぱい青春時代を思い出すのは、私だけでしょうか。シーブリーズを展開する資生堂は、2010年ごろからシーブリーズの販売低調ぶりに悩み、Re・ポジショニング(方向転換)を実行しました。

これまで海やアウトドアのイメージが強かったシーブリーズ製品を「日常的なデオドラント製品」へとイメージを転換し、特に部活動で忙しい中高生をターゲットにしました。それを代表するサイトがこちらです。

資生堂の戦略はヒットし、売上は低迷期の8倍になったといわれています。スマホでも閲覧可能になっていますが、PCに比べると見にくいです。

芸術家黒田賢

黒田 賢芸術家黒田賢

個人の経歴から作品、受賞履歴、問合せ先までをシンプルに分かりわすく表現しているサイトになります。スマホ画面でも見やすいレイアウト構成になっています。

lixus

2_1

http://www.lixus.co.jp/#!/

マウスをスクロールしながらスムーズに下へと流れているようできちんと読ませたいところでは時間を取るように演出されています。

Nicon

2_2

http://shop.nikon-image.com/nikon1/nikon1aw1/

奥行きを上手に使ったWebサイトになっています。商品をメインで視野からあまり動かすことなく背景でその商品の機能の説明を表現しています。

日産NOTE

2_4

http://www2.nissan.co.jp/SP/NOTE/SPECIAL/

スクロールをしながら動画を見ている感覚や移動しているように見えるものが多い中、こちらのサイトはまるでパタパタ漫画を見ているような感じです。

YAMAHA50ccコミュータークラブ

2_6

YAMAHAの50ccコミュータークラブのサイトです。http://www.yamaha-motor.co.jp/mc/life/cc/2013/

KathArt

2_7

「KathArt」はデンマークのデザイン会社のWebサイトです。http://tour.kathart.dk/

ちょっとスクロールエフェクトを試したくなったら

photo:wow.jsfilemynameismatthieu.com/WOW/


シンプルなスクロールエフェクト・コード

codyhouse.co-gem-page-scroll-effectshttp://codyhouse.co/gem/page-scroll-effects/


背景画像がペラペラ変わるスクロールエフェクト・コード

ihatetomatoes.nethttps://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/


ワンちゃんがたまらなくカワイイスクロールエフェクト・コード

wow.jsfilehttp://mynameismatthieu.com/WOW/


WordPressのスクロールエフェクト・FREEテンプレート

parallax-wordpress-theme-freehttp://accesspressthemes.com/accesspress-parallax/

まとめ

いかがでしたでしょうか?元々はシンプルなシングルページもスクロールエフェクトを取り入れることによって、とっても凝った・見ごたえのあるサイトになっていることがわかります。

実際にスクロールエフェクトをwebサイトに取り入れようと思うとJavaScriptやCSS、HTMLなどの知識が必要になってきます。

初めのうちは上記の「ちょっとスクロールエフェクトを試したくなったら」で紹介しているようなサンプルコードから試してみることをお勧めします。上記で紹介している以外にもjQuery紹介サイト(例:Dzinepix

image

関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp