Date： | 
Category：パララックスWPテーマ8選
数年前から様々なシーンで活用され続けているパララックスデザイン。
海外での1カラムサイトの流行に伴って日本でも1カラムサイトが増えている状況において、パララックスを取り入れてみたい方もいらっしゃると思います。
今回はパララックスの基本的な作り方、パララックス設定可能なWordPressテーマそして専用のjQueryプラグインを紹介したいと思います。
- 目次：パララックスがおしゃれな日本語WordPressテーマ8選
-
パララックスデザインのWordPressサイトの作り方
-
パララックスサイトを作るなら専用テーマの利用が楽！
-
有料のパララックスレスポンシブ日本語Wordpressテーマ
-
無料のパララックスレスポンシブWordpressテーマ
-
jQueryプラグインでWordPressテーマをパララックスに！
-
まとめ
パララックスデザインのWordPressサイトの作り方
パララックス実装の基本的な考え方は、CSSでpositionの位置を指定したりJavascriptでスクロール位置の値を取得し値によってエフェクトをかけることです。
そしてWordPressサイトにおけるパララックスの具体的な作り方には、以下3つの手段が挙げられます。
- 自力でCSSやJavascriptを記述し実装する。
- パララックスが設定できるWPテンプレートを利用する。
- パララックス用のjQueryプラグインを組み込む。
まず「1.自力でCSSやJavascriptを記述し実装する方法」は「コピペでCSS書くこともあります」レベルだと少々難しい内容であり、別記事で詳しく解説したいと思います。
そして本記事では「2.WordPressテンプレートを使用する方法（専用の日本語WordPressテーマ8選）」を主題とし、代替案として「3.jQueryプラグインを利用する方法（専用のjQueryプラグイン）」についても触れていきます。
パララックスサイトを作るなら専用テーマの利用が楽！
パララックスデザインを設定できるWordPressテンプレートを使用すれば、楽で確実におしゃれなパララックスを実装できます。
ただし「現在使用しているWPテーマをパララックスにしたい」という方には不向きです。
一方、テーマを変更しても構わない（もしくはこれからサイトを作る）という方には超オススメ。理由は前述のとおり楽で確実に実装可能だからです。
以下にパララックス設定可能な、人気のWPテンプレートを紹介します。
有料のパララックスレスポンシブ日本語Wordpressテーマ
パララックスが設定可能なプロ仕様のワードプレステンプレートを厳選しました。
スマホやタブレットからのアクセスもバッチリなレスポンシブWebデザインであり、使いやすい国産タイプ（完全日本語対応）のラインナップ！
ランディングページやコーポレートサイト、店舗プロモートサイトに最適です。
パララックス可能なランディングページ専用WPテーマ OOPS!
【人気 No.1】
デザインと機能性に優れた究極とも言えるランディングページ専用のWordPressテンプレート「OOPS!（ウップス）」。
適度なアニメーションによるファーストビューでの演出や、パララックス効果によってユーザーのスクロールにリズムを生み出し、最下部の行動喚起へとスムーズに誘導するLPを制作できます。
また最大の特徴はABテストが行えるCTA機能でしょう。
単なるペライチで作りっぱなしのLPで良いという方にはそんなにお勧めできませんが、きちんとテストしながら本気でコンバージョン率の高いランディングページを育てていきたい方は「OOPS!」をチェックすると吉だと思います。
店舗サイトに最適！おしゃれなパララックス Amore
【人気 No.2】
レストランや店舗集客に最適なパララックス仕様のWordPressテーマ「Amore（アモーレ）」。
6つのブロックごとに画像や見出し文、本文などの項目を埋めていくだけで美しいスクロールエフェクトを実装したサイトを完成させることができます。
アニメーションテキストの配色や装飾も自由に変更でき、細部まで美しいデザインに仕上げることが可能です。
アニメーションも映える1カラムWPテーマ Grazioso
【人気 No.3】
レスポンシブCSS3フレームワークが組み込まれており、1カラムフラットデザインの海外風Webサイトを簡単に実現可能なWordPressテーマ「Grazioso（グラツィオーソ）」。
リッチなアニメーションを設定できることが特徴です。
また、動画（MP4ファイル）をパララックス背景に設定することも可能となっています。
リッチなコーポレートサイト向けWPテーマ Agent
企業イメージをスタイリッシュにアップさせるコーポレートサイト向けのWordPressテンプレート「Agent（エージェント）」。
設定項目を埋めていくだけ求人ページや社員紹介ページを作成できるといった企業サイト向けの機能が充実しています。
もちろんパララックスも簡単に実装でき、スタイリッシュでかっこいいデザインとなっています。
無料のパララックスレスポンシブWordpressテーマ
一方、海外のWordPressテーマに目を向けると、無料でも十分に高機能なパララックス対応のテンプレートが提供されています。
そこで評判の良いものを、下記のとおり4つ厳選しました。
パララックスが設定できる無料の海外WPテーマ Shapely
Colorlibというデザイン団体がフリーで配布しているWordPressテーマ「Shapely（シェィプリィ）」。
TwitterBootstrap(CSSフレームワーク）を搭載しているレスポンシブWebデザインのテンプレートです。
豊富なカスタマイズ設定とウィジェット機能が特徴であり、ランディングページ向けなっています。
パララックス可能な日本語の無料WP公式テーマ ZerifLite
WordPress公式サイト（日本語）にて無料配布されている1カラムテンプレート「Zerif Lite（ゼリフライト）」。
CSSフレームワークBootstrapによるレスポンシブWebデザイン、シンプルなミニマルデザインが特徴です。
もちろんパララックス背景も設定可能となっています。
動画背景も可能な無料のパララックスWP公式テーマ Onetone
WordPress公式テーマとして無料配布されているメインビジュアル強調型テンプレート「Onetone（ワントーン）」。
画像背景をパララックスデザインに設定したり、背景動画も設定可能となっています。
コーポレートサイトや商品プロモートサイトにピッタリです。
パララックス設定可能な無料のWP公式テーマ OnePaze
WordPress公式テーマとして無料配布されているシンプルなテンプレート「OnePaze（ワンペイズ）」。
ブログページは、2カラム・3カラムも設定可能です。
適度なアニメーションも心地よい仕様となっています。
jQueryプラグインでWordPressテーマをパララックスに！
一方「現在使用しているWPテーマを変更することなくパララックスデザインを取り入れたい」場合には、jQueryプラグイン(または専用のJavascriptライブラリ)を使用することが近道といえます。
jQueryを適用してオプションパラメータを記述したり、プラグイン適用な必要な属性をHTML上に付記する（現在のテーマファイルをカスタマイズする）必要があるため、先に紹介したパララックス対応のWPテーマを利用するよりも難易度が上がるでしょう。
以下にオススメのパララックスjQueryプラグインを3つ紹介します。
※お使いのテーマによってはプラグインの衝突などによって不具合が発生することもありますのでご注意ください。
シンプルなパララックスjQueryプラグイン parallax.js
シンプル設計のパララックス実装jQueryプラグイン「parallax.js（パララックスジェーエス）」。
一般的なjQueryプラグインの設置コードおよび、data属性とclass名を付与する程度で簡単に実装できます。
背景パララックスjQuery parallax-background.js
こちらもシンプル設計である、背景パララックス専用のjQueryプラグイン「parallax-background.js（パララックスバックグラウンドジェーエス）」。
背景画像を縦方向のみならず、オプション設定によってスクロールに合わせて横方向に移動させることも可能です。
JSパララックスアニメーション ScrollMagic
スクロールに連動したアニメーション効果を実装できるJavascriptライブラリ「ScrollMagic（スクロールマジック）」。
シンプルなjQueryプラグインと比べ、設定にコーディングの技量が必要となりますが、背景パララックス以外にも様々な効果を付与することができます。
まとめ
パララックスデザインをWordPressサイトに実装に関する情報をご紹介しました。
専用のWordPressテンプレートを使用すれば、楽で確実にパララックスを実装できます。
※専用テーマの紹介はこちら。
ただし「現在使用しているWPテーマを変更することなくパララックスデザインを取り入れたい」場合には、jQueryプラグインを使用するのが一般的と言えるでしょう。
個性派のあなたに捧ぐ！最新技術で魅せる1カラムWordPressテーマGrazioso。
【完全保存版2018Ver.】コーポレートサイト制作用WPテンプレートランキング。
人気の無料メール講座を、ご利用ください。
- 【プロ直伝】制作前に必ず行う2つのこととは？
- 【重要】収益サイト制作者が取るべき手段は何か？
- 【発表】魅せるデザインのラインナップはこちらです。
- 【無料】必ず入れておくべき、フリープラグイン８選！
- 【一瞬】瞬時にサイトの印象を引き立てる方法。
- 【3.5倍】こうして成約率が急上昇しました。
- 【注意】なぜ記事を増やしてもアクセスが伸びないのか？
※下記のフォームからメール講座に ご登録いただけます。
スポンサード リンク
ぬるぬるスクロールしちゃうとこが気になったけど、
記事の内容が求めているもの（コメントありなのが嬉しい）だったので、大変参考になりました！良い記事でした！thx!