パララックス効果が秀逸なWebサイト&作り方まとめ

パララックスの作り方とサイトまとめ

今更感がこの上ないですが「パララックス」をうまく取り入れたWebサイトをまとめて紹介します。パララックスは、5年くらい前からWebデザインのトレンドとしてなんだかんだで取り上げられ続けていますね。2017 Design Trendsでもピックアップされています。
この記事の後半では作り方も解説しています。参考にしてみてくださいませ。

1. パララックスとは?

パララックス(parallax)は英語で「視差」という意味があります。ざっくりというと「部分ごとに動くスピードや、動く方向に差をつける」というイメージです。Webデザインでは、スクロール効果としてパララックスがよく取り入れられます。

緑の部分と、背後の黒の部分で動くスピードが違うことが分かるかと思います。このように差をつけることで、奥行き感を出したり、目を引くようなデザインにすることができる…というわけです。

パララックスの例

実際に以下のサンプルでスクロールしてみると、イメージがつかめるのではないかと思います。

See the Pen Parallax Scrolling by Amir (@amirsaleem) on CodePen.

2. パララックスをうまく取り入れたWebサイトまとめ

ここからはパララックス効果の取り入れ方が秀逸なWebサイトをまとめて紹介します。

MELANIE.F

Fafa 23

おしゃれなデザインのスリッパを作っている会社のWebサイトです。スクロールしたときには絶妙な浮遊感があります。アニメーションで常にふわふわと動いているSVG画像の幾何学模様や、タイポグラフィの挿し込み方も秀逸。

UBER EATS

Kitchens of Uber Eats

UBERのフード配達サービスのWebサイトです。影とパララックスを組み合わせることで、奥行きがかなり感じられるデザインになっています。モノクロ+緑の配色もとても印象的。

Porsche Volution

Fdafa 3

ポルシェ車の歴史をうまく表現したWEBデザインです。はじめは古い型式の車が表示されており、スクロールすると次々と新しい年代の車へと移り変わっていきます。パララックスエフェクトにより、車の移り変わりが自然なものになっています。これぞパララックスのお手本のような取り入れ方。

vestfrost

Dfafa 1

冷蔵庫メーカーのWebサイトです。至るところにパララックスエフェクトが仕掛けられており、スクロールすると次々と新しい要素が登場してきます。やや忙しい気もしますが、インパクトのある完成度の高いWebデザインだと思います。

A-dam

Fdafa

男性用下着メーカーのWebサイトです。デスクトップ表示の場合のみパララックスエフェクトがかかり、モバイル表示の場合にはエフェクトは適用されないようになっています。
スマホやタブレットなどで指で操作しているときにパララックスが使われていると、結構ストレスになることもありますからね(思ったように進まない…!みたいな)。

Urban Walks

Fafafa 4

ニューヨークでの観光をツアーのように細かく提案してくれるアプリのランディングページです。パララックス効果以外のアニメーションや表現もユニークで参考になります。

Ernest

Fafa 24

人工知能がチャット形式でお金の管理のサポートをしてくれるサービス「Ernest」にWebサイトです。派手なパララックスエフェクトを取り入れたインパクトのあるWebデザインになっています。
秀逸なのが、ただレスポンシブ対応しているだけでなく、モバイル表示でもインパクトのあるアニメーション表現を保っている点。よく出来ています。

FIREWATCH

Fada

知る人ぞ知る名作ミステリーゲーム「FIREWATCH」の公式サイトです。日本語対応は未だにしていないものの、海外ではそこそこ人気があるようです。ヘッダーでパララックスが取り入れられており、山のシルエットでタイトル部分が隠れるようなデザインになっています。このくらいの効果であれば、工夫すればCSSだけでもできそうな気もします。

HOT BOX

Fafda 2

透明感があり美しいWebデザインです。少し余韻を残すようなスクロールエフェクトもさることながら、グラデーションの変化がとても綺麗で目を引きます。
コードを見てみましたが、たくさんのグラデーションで塗られた層を重ねて、スクロールに応じて透明度を切り替えているようですね。

Every Last Drop

Fdafa 4

英国で開設された「水を大切にしよう」というコンセプトのページです。スクロールすると「日常生活のどんな場面で、どれほどの水が使われているのか」が次々と表示されていきます。動画の代わりにスクロールアニメーションで表現するというのは、今後も至るところで見られそうですね。

MADWELL

Fafa 26

ブルックリンのWeb制作会社のコーポレートサイトです。島々がふわふわと動いており、見ているだけで楽しくなります。ファンタジー感のある素敵なデザインですね。

Nasa Prospect

Fadfa 7

NASAとサウスダコタ大学の学生が協力して制作したストーリー調のWebサイトです。スクロールすると、宇宙の中を進むかのように背景の星や風景がスライドし、中心の宇宙飛行士の動きも切り替わっていきます。ページ全体を通して1つの物語になっているというユニークで秀逸なサイトです。

THE SURVIVAL KIT

Dfafa 2

スクロールにより、箱のフタが開く…というヘッダーの表現が秀逸です。やっていることは画像を2つ(箱とフタの画像)重ねて、フタの画像だけスクロールで動かすというシンプルな表現なのですが、かなりインパクトがあります。さすがクリエイティブスタジオの制作したWebサイトです。

Lenno Slides

Fadfa 8

パララックスと影による奥行き表現が素晴らしいWebデザインです。まるで現実世界を見ているかのような奥行き感。エフェクトも派手すぎず適度。非常に洗練されています。

Maison POULÉ

パリで屋台のように鶏肉料理を移動販売しているお店のWebサイトです。スクロールに合わせて、屋台トラックがファンタジーの世界を進んでいきます。ちゃんとレスポンシブ対応もしています。
個人経営(?)でここまで本格的なサイトを作る必要はあるのか…と思ってしまうほどの完成度の高さ。一度目を通す価値ありです。

GOLDA

Fafa 29

アラブ首長国連邦のアイスメーカーの公式サイトです。背景の埋め込み写真や、アイスの写真、ヘッダーなどにスクロールパララックスが仕掛けられています(見やすさを重視するためか、モバイル表示だと無効になっています)。

Raoul Gaillard

Fafa 22

21才(当時)のフランス人デザイナーが、インターン先を探すための制作したというポートフォリオサイトです。スクロールしたときのふわっと消えるような動きが秀逸。ゴリゴリのJavascriptで作られているようです。
なお、モバイルで見るとパララックスエフェクトの無いデザインが表示されるので注意。

EGWINECO

Fadfa 9

缶ワインというユニークな商品を扱っているメーカーのWebサイトです。缶の背後にスライドインするようなパララックスエフェクトにより、より一層「缶がそこに置いてある感」が出ています。

Interior Design by Decade

Faga

「1950年〜のインテリアデザインのトレンドを振り返ろう」というコンセプトのWebサイトです。スクロールすると、中心から広がるように次の年代のインテリアが表示されます。やっぱり歴史を振り返る系サイトにはパララックスは効果的。

Flip Scipio

Fadfa 17

ギター職人の個人サイトです。派手さはありませんが、複数の要素を少しずつ違うスピードで上に移動させるシンプルなパララックスが心地よいです。ただし、イントロの動画が長め(スキップはできますが)。

Webflow

Dfadfa 2

直感的な操作でおしゃれなWebサイトが作れるサービス「Webflow」のランディングページです。重なりや奥行きの表現が秀逸です。モバイル表示にもうまく最適化されています。

Vermont

Daga

欧州を中心に展開されているファッションブランドのコーポレートサイトです。スクロールアニメーションだけでなく、配色から、レイアウト、シャドウの取り入れ方まで、隅々まで秀逸です。

LEXUS LS

Fadga 1

レクサスの最高級車LSのブランドページサイトです。スクロールに伴い、タイヤが転がったりします。数年前に開設されたものですが、未だに先進感があります。優先度が操作性<ブランドイメージのときには、パララックスは効果的。

3. パララックスサイトの作り方(CSSサンプル)

ではパララックス効果はどうように実装すれば良いのでしょうか。今回はHTMLとCSSだけの簡単なサンプルを紹介したいと思います。

See the Pen dzodWN by saruwakakun (@saruwakakun) on CodePen.

W3Schoolsの解説を参考に作ったものすごく簡単なサンプルです。

HTML
<div class="parallax"><h2>HUNGRY?</h2></div>

<div class="contents">
  This is Example.
</div>

<div class="parallax"></div>
CSS
@import url('https://fonts.googleapis.com/css?family=Quicksand');

body,html {
    height: 100%;
    margin: 0 auto;
    font-family: Quicksand;
    letter-spacing:2px;
}
/*ここまでパララックスとは関係のない設定*/

/*固定された画像*/
.parallax {
    position: relative;
    background-image: url('https://saruwakakun.com/wp-content/uploads/2017/07/img.jpg');
    height: 100%; 
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/*タイトル*/
.parallax h2 {
    color:#fff;
    font-size: 80px;
    text-align: center;
    position: fixed;
    width :100%;
    top: 20%;
}

/*スクロールするボックス*/
.contents {
    position: relative;
    z-index: 1;
    height:500px;
    background: #555;
    font-size:60px;
    background: #f89174;
    padding: 100px 20px;
    text-align :center;
    }

何をやっているかというと、表示されるブラウザの高さを100%として、高さ100%の要素(.parallax)を配置します。この要素の背景には、画像を固定で埋め込んでいます(background-attachment: fixed) 。
そして、スクロールすると、高さ100%の下に配置されていた要素(.contents)が上がってきます。その後には再度、.parallaxを配置しています。

その他の作り方

とはいえ、これはあまりにも簡単な例ですね。本格的なパララックススクロールを実装したい場合には、以下の記事を参考にすると良いでしょう。

jQueryで

参考
【jQuery】パララックスデザインの作り方
by Nedia What’s up

スクロール値を取得して、要素ごとにスクロールスピードを調整するという方法です。

JSライブラリで

参考
簡単!パララックスサイトの作り方
by エンジニアをリングする

SkrollrというJSライブラリを使ったパララックスの実装方法です。こちらも比較的簡単に実装できます。

CSSだけで

参考
CSSだけで動くパララックス
by eyemovic

CSSだけで上で紹介した例よりも、それっぽいことをやる方法です。transform: translateZ(~)perspectiveプロパティを使って要素ごとのスクロールスピードが変わったように見せるというテクニックです。僕も試してみましたが、確かにできました。が何かと融通が効かず調整もしづらい…という印象です。ここまでやるなら素直にJavascriptでやった方が良いような気もします。

パララックス効果の取り入れどころ

以下個人的な意見です。読みやすさが何より大事になるWebメディアやブログで派手なパララックスデザインを取り入れると、目を引くメリット以上に、ユーザービリティを損なうリスクの方が大きくなってしまうのではないかと思います。
一方で、ブランドサイトやプロモーション用のサイトでは洗練されたイメージや、インパクトを出すためにパララックスを取り入れるのは有効かと思います。
使いどころは選ぶ必要がありますね。

同じカテゴリーの記事
同じカテゴリーの記事一覧
リファレンス
サルワカ