更新日: 2017年05月22日
公開日: 2015年07月28日

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

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

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

スクロールエフェクトとは
webデザイン初心者必見！参考になるスクロールエフェクト・サイト14選
SCROLLEFFECTS
SONYBEMOVED
SWISS（スイス航空）
マリオカート
NASAの宇宙紹介
クールデザイン「Feed」
レッドブル
爽快「シーブリーズ」
芸術家黒田賢
lixus
Nicon
日産NOTE
YAMAHA50ccコミュータークラブ
KathArt
ちょっとスクロールエフェクトを試したくなったら
まとめ

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

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

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

SCROLLEFFECTS

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

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

SONYBEMOVED

SWISS（スイス航空）

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

マリオカート

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

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

NASAの宇宙紹介

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

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

クールデザイン「Feed」

Feed

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

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

レッドブル

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