パララックスサイトとは?作り方や参考例、テンプレート、jQueryプラグインまとめ


「パララックスサイト」という言葉をご存知ですか?パララックスサイトとは、パララックス効果を取り入れたWebサイトを指します。今回は、パララックスサイトとは何か、メリットやデメリットはどんなことがあるか、そして、WordPressテンプレートやjQueryプラグイン等を使った、パララックスサイトの作り方をご紹介します。

パララックスサイトとは

パララックスサイトとは、パララックス(視差)の効果を適用したサイトのことです。パララックスとは、ページをスクロールする際、手前と奥とでスクロールの速度に差をつけることで、奥行きや立体感を表現するものを指します。

ちなみに、スクロールに合わせてパララックスなどの演出がある1ページのサイトのことを「高級ペライチ」と言います。

【参考】高級ペライチって?参考にしたいおしゃれで面白い高級ペライチ40選!

メリット

パララックスサイトのメリットとしては、以下の3点が挙げられます。

ストーリー性を出しやすい

パララックスサイトを使うことで、ストーリーを印象的に伝えることができます。

大切な箇所を強調できる

強調したい部分にエフェクトを効かせることで、ピンポイントで目立たせることができます。

ユーザーの興味を惹ける

パララックスによる演出がある分、通常のサイトよりもユーザーを惹き込みやすいです。

デメリット

パララックスサイトのデメリットとしては、以下の2点が挙げられます。

読み込みが遅くなりやすい

ブラウザや機種対応のため分岐が増え、サイトの読み込みが遅くなってしまいやすいです。読み込みが遅いとユーザーに不快な思いをさせてしまうのに加え、SEOの観点からもサイトが評価されづらくなってしまいます。

ブラウザチェックに時間を要する

パララックスサイトの場合、ブラウザチェックに普通のページ以上に多くの時間をかける必要があります。あまりシェアの高くないブラウザには対応しないようにするなどといった工夫が必要です。

パララックスサイトのデザイン参考例まとめ

パララックスサイトとはどんなものなのか、また、パララックスサイトをデザインする際に参考になる例を5つご紹介します。もっと多くの例を見てみたい方は、以下の記事をチェックしてみてください。

【参考】高級ペライチって?参考にしたいおしゃれで面白い高級ペライチ40選!

La Totalite(ラ・トータリテ)

La Totaliteのサイト

アパレルブランド、La Totaliteのサイト。可愛らしいテイストのパララックスサイトです。

【URL】 La Totaliteのサイトはこちら

Tío Luchín

Tío Luchínのサイト

スクロールに合わせて、文字や食材、カトラリーなどが登場します。黒い背景に食材が際立ち、とても美味しそうに見えます。

【URL】 Tío Luchínのサイトはこちら

Hiromi Sekiguchi

Hiromi Sekiguchiのサイト

ウェディングフォトグラファー、関口洋美さんのサイトです。美しい写真が印象的です。

【URL】 Hiromi Sekiguchiのサイトはこちら

株式会社 山陽

株式会社 山陽のサイト

革製品を製造販売する株式会社山陽のコーポレートサイトです。色とりどりのレザーを背景に、文字や写真が出てきます。

【URL】 株式会社 山陽のサイトはこちら

CRISP SALAD WORKS

CRISP SALAD WORKSのサイト

恵比寿や麻布十番などにあるサラダ専門店、CRISP SALAD WORKSのサイトです。スクロールに合わせて文字や写真が登場します。サイトのトップに挿入されたフルスクリーンの動画が印象的です。

【URL】 CRISP SALAD WORKSのサイトはこちら

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

パララックスサイトの作り方として、(1)WordPressテンプレートを使う、(2)jQueryプラグインを使う、(3)ホームページ作成サービスを使うという3つの方法をご紹介していきます。

WordPressテンプレートを使う

テンプレートは有料のものが多いですが、無料のものもあります。

Studio – One Page Theme

Studio – One Page Themeのサイト

【特徴】 無料/レスポンシブ/シングルページ(ペライチ)
【URL】 Studio – One Page Themeのデモページはこちら / ダウンロードページはこちら

Impress

Impressのサイト

【特徴】 有料/レスポンシブ/シングルページ/豊富なショートコード
【価格】 39ドル(レギュラーライセンス)〜
【URL】 Impressのデモページはこちら / ダウンロードページはこちら

ポートフォリオに適したテンプレートです。

STARTER

STARTERのサイト

【特徴】 無料/レスポンシブ/シングルページ
【URL】 STARTERのデモページはこちら / ダウンロードページはこちら

シンプルで扱いやすいデザインです。

Rythm

Rythmのサイト

【特徴】 有料/レスポンシブ/シングルページ
【価格】 39ドル〜
【URL】 Rythmのデモページはこちら / ダウンロードページはこちら

Bootstrap Parallax

Bootstrap Parallaxのサイト

【特徴】 無料/レスポンシブ
【URL】 Bootstrap Parallaxのデモページはこちら / ダウンロードページはこちら

操作画面がシンプルでわかりやすいです。

SCRN

SCRNのサイト

【特徴】 有料/レスポンシブ/シングルページ/豊富なショートコード/動画挿入可/ソーシャルアイコン有り/
【価格】 39ドル(レギュラーライセンス)〜
【URL】 SCRNのデモページはこちら / ダウンロードページはこちら

SCRNは、ポートフォリオに最適なテンプレートです。ブログ機能もあります。また、動画を挿入することもできます。

Dellow

Dellowのサイト

【特徴】 無料/レスポンシブ/SEO
【URL】 Dellowのデモページはこちら / ダウンロードページはこちら

OneEngine

OneEngineのサイト

【特徴】 無料/レスポンシブ/動画挿入可
【URL】 OneEngineのデモページはこちら / ダウンロードページはこちら

無料とは思えないハイクオリティなテンプレートです。いくつかのデザインの中から好みのものを選ぶことができます。

SimpleKey

SimpleKeyのサイト

【特徴】 有料/レスポンシブ/シングルページ
【価格】 39ドル〜
【URL】 SimpleKeyのデモページはこちら / ダウンロードページはこちら

SimpleKeyは、自由にカスタマイズ可能なWordPressテンプレートです。ポートフォリオやビジネスウェブサイト、ブログなどとして活用できます。

CUCKOOTAP

CUCKOOTAPのサイト

【特徴】 有料/レスポンシブ/SEO/動画挿入可/EC
【価格】 44ドル(レギュラーライセンス)〜
【URL】 CUCKOOTAPのデモページはこちら / ダウンロードページはこちら

CUCKOOTAPは、シングルページとして、マルチページとして、そしてECページとしても使うことができるWordPressテンプレートです。黒ベースのCUCKOOTAP Darkと、白ベースのCUCKOOTAP Lightの2種類があります。

また、動画フレンドリーで、どこでも好きな位置に動画を入れることができるのも嬉しいポイントです。

jQueryプラグインを使う

次に、パララックスサイトを作成できるjQueryプラグインをご紹介します。

Nikebetterworld Parallax Effect

Nikebetterworld Parallax Effectのサイト

【URL】 Nikebetterworld Parallax Effectのデモページはこちら / ダウンロードページはこちら

NIKEのパララックスサイトと同じようなデザインを実装できるjQueryプラグインです。

skrollr

skrollrのサイト

【URL】 skrollrのデモページはこちら / ダウンロードページはこちら

スクロールに合わせて、縦に横に回転と、様々なダイナミックな動きをするプラグインです。

SUPER SCROLL ORAMA

SUPER SCROLL ORAMAのサイト

【URL】 SUPER SCROLL ORAMAのデモ・ダウンロードページはこちら

Parallax-JS

Parallax-JSのサイト

【URL】 Parallax-JSのデモページはこちら / ダウンロードページはこちら

Simple Parallax Scroll

Simple Parallax Scrollのサイト

【URL】 Simple Parallax Scrollのデモページはこちら / ダウンロードページはこちら

Cool Kitten

Cool Kittenのサイト

【URL】 Cool Kittenのデモページはこちら / ダウンロードページはこちら

レスポンシブデザインのプラグインです。

jarallax

jarallaxのサイト

【URL】 jarallaxのデモページはこちら / ダウンロードページはこちら

Scrolly – Simple jQuery Parallax Plugin

Scrolly – Simple jQuery Parallax Pluginのサイト

【URL】 Scrolly – Simple jQuery Parallax Pluginのデモページはこちら / ダウンロードページはこちら

シンプルで、簡単に操作できるプラグインです。

Create a Parallax Scrolling Website Using Stellar.js

Create a Parallax Scrolling Website Using Stellar.jsのサイト

【URL】 Create a Parallax Scrolling Website Using Stellar.jsのデモページはこちら

Parallax.js

Parallax.jsのサイト

【URL】 Parallax.jsのデモページはこちら / ダウンロードページはこちら

カーソルの動きに合わせて、全てのパーツが連動して動きます。

jQuery Parallax

jQuery Parallaxのサイト

【URL】 jQuery Parallaxのデモページ(縦)はこちら /
デモページ(横)はこちら / ダウンロードページはこちら

縦にスクロールするタイプと、横にスクロールするタイプがあります。

StarScroll

StarScrollのサイト

【URL】 StarScrollのデモページはこちら / ダウンロードページはこちら

Manualをクリックすると、スクロールできるようになります。スクロールに合わせて背景の星が動きます。

ホームページ作成サービスを使う

次に、パララックスサイトを作成できるホームページ作成サービスをご紹介します。

Wix

Wixのサイト

【特徴】 無料/レスポンシブ/会員登録必要/簡単
【URL】 Wixで作成したページはこちら / Wixのサイトはこちら

Wixは、全世界で8,600万人以上のユーザー数を誇るホームページ作成サービスです。

Wixでは、ページの背景かストリップ(画面幅のボックス)にパララックス効果を適用することができます。ワンクリックで設定できるので、あまり時間をかけずにパララックスサイトを作りたい方にはおすすめです。

パララックスサイトを作ってみよう!

パララックスサイトのメリット、デメリットを踏まえた上で、ご興味のある方はぜひパララックスサイトの作成にチャレンジしてみてください。テンプレートを使うのかjQueryプラグインを使うのか、自分に合った作り方を見つけてみてくださいね。

高級ペライチって?参考にしたいおしゃれで面白い高級ペライチ40選!

無料でホームページを作れる「ペライチ」

誰でも簡単にホームページ作成を!「ペライチ」

HTMLやCSSでお悩みなら簡単ホームページ作成サービス「ペライチ」におまかせください。
特別な知識は必要ありません。好みのテンプレートを選ぶだけで誰でも簡単にホームページを作ることが出来ます。
誰でも簡単にホームページ作成を!「ペライチ」

ホームページ大学編集長/フリーライター ウェブデザインや動物、美容、ダイエット等幅広いジャンルの記事を手掛ける。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. Because it can be set with one click, it is recommended for those who want to create a parallax site without taking too much time.