『どうも普通のサイトでは面白くないし印象に残るサイトを作りので、【パララックス】を簡単に実装できる、おすすめのWordPressテーマを教えて欲しい。』
上記のような要望にお応えする記事を用意しました。
記事を書いた私の自己紹介です。
この記事では『パララックス設定可能なおすすめのWPテンプレート(無料あり)』を紹介します。
また補足として、『WordPressテーマを変更せずにパララックスを実装する方法』も解説しています。
- 目次(クリックで移動できます)
- 【結論】簡単にパララックスが作れるおすすめのWordPressテーマ8選
- WPテーマを変更しないパララックスの作り方【JSライブラリを使う】
- まとめ:やはりパララックスの実装は専用WordPressテーマが楽です
パララックスを使えるWordPressサイトが欲しい方は、流し読みで十分ですので最後まで目を通してみてください。
【結論】簡単にパララックスが作れるおすすめのWordPressテーマ8選
以下の8つになります。
テーマ名 | 特徴 | デモサイト確認 |
---|---|---|
OOPS! | LP専用テーマ | 無料でデモを確認 |
MAJESTIC+ | ミニマルデザイン | 無料でデモを確認 |
NOEL | パララックススライダー | 無料でデモを確認 |
MONOMANIA | ミニマルデザイン | 無料でデモを確認 |
Amore | 店舗サイト向け | 無料でデモを確認 |
Grazioso | フラットデザイン | 無料でデモを確認 |
Shapely | 無料の海外テーマ | 無料でデモを確認 |
OnePaze | 無料の海外テーマ |
上記のようなパララックスデザインを設定できるWordPressテンプレートを使用すれば、おしゃれなパララックスを楽に確実に実装可能です。
各々を深掘りします。
パララックス可能なランディングページ専用WPテーマ OOPS!

デザインと機能性に優れた究極とも言えるランディングページ専用のWordPressテンプレート「OOPS!(ウップス)」。
適度なアニメーションによるファーストビューでの演出や、パララックス効果によってユーザーのスクロールにリズムを生み出し、最下部の行動喚起へとスムーズに誘導するLPを制作できます。
また最大の特徴はABテストが行えるCTA機能でしょう。
単なるペライチで作りっぱなしのLPで良いという方にはそんなにお勧めできませんが、きちんとテストしながら本気でコンバージョン率の高いランディングページを育てていきたい方は「OOPS!」をチェックすると吉だと思います。
パララックス可能なミニマルデザインWPテーマ MAJESTIC+

おしゃれなパララックスを簡単に実装できるミニマルデザインのビジネスサイト向けWordPressテーマ「MAJESTIC+(マジェスティックプラス)」。
Appleの公式サイトみたいなファーストビューが作成可能な、動画も設置可能なインパクト大のフルスクリーンヘッダーが特徴的です。
またフォントにこだわられており、詳細も設定可能となっています。
そのため、訪問者を惹きつけ文章が読みやすいビジネスサイトを簡単に作成可能です。
スマホでも綺麗なパララックススライダーが可能 NOEL

美容系サイトに適したWordPressテーマ「NOEL(ノエル)」。
トップページのヘッダーに設置可能な、パララックススライダーが特徴的です。
※スマホでも綺麗に表示されます
機能面としては、美容系のサイトに必要となる「施術内容」「クリニック案内」「スタッフ」ページ用のカスタム投稿が実装されているのが特徴。
パララックス可能なミニマルデザインWPテーマ MONOMANIA

ミニマルデザインが印象的なパララックスを簡単に実装できる商品紹介サイト向けWordPressテーマ「MONOMANIA(モノマニア)」。
先に紹介したMAJESTIC+と同様、フォントにこだわられており、訪問者を惹きつけ文章が読みやすい商品紹介サイトを作成可能となっています。
店舗サイトに最適!おしゃれなパララックス Amore

レストランや店舗集客に最適なパララックス仕様のWordPressテーマ「Amore(アモーレ)」。
6つのブロックごとに画像や見出し文、本文などの項目を埋めていくだけで美しいスクロールエフェクトを実装したサイトを完成させることができます。
アニメーションテキストの配色や装飾も自由に変更でき、細部まで美しいデザインに仕上げることが可能です。
アニメーションも映える1カラムWPテーマ Grazioso

レスポンシブCSS3フレームワークが組み込まれており、1カラムフラットデザインの海外風Webサイトを簡単に実現可能なWordPressテーマ「Grazioso(グラツィオーソ)」。
リッチなアニメーションを設定できることが特徴です。
また、動画(MP4ファイル)をパララックス背景に設定することも可能となっています。
パララックスが設定できる無料の海外WPテーマ Shapely

Colorlibというデザイン団体がフリーで配布しているWordPressテーマ「Shapely(シェィプリィ)」。
TwitterBootstrap(CSSフレームワーク)を搭載しているレスポンシブWebデザインのテンプレートです。
豊富なカスタマイズ設定とウィジェット機能が特徴であり、ランディングページ向けなっています。
パララックス設定可能な無料のWP公式テーマ OnePaze

WordPress公式テーマとして無料配布されているシンプルなテンプレート「OnePaze(ワンペイズ)」。
ブログページは、2カラム・3カラムも設定可能です。
適度なアニメーションも心地よい仕様となっています。
OnePazeのデモサイトを確認
WPテーマを変更しないパララックスの作り方【JSライブラリを使う】
一方「現在使用しているWPテーマを変更することなくパララックスデザインを取り入れたい」場合には、jQueryプラグイン等のJavascriptライブラリを使用することが近道だと思います。
具体的には、以下2つのようなJSです。
- シンプルなパララックスjQueryプラグイン parallax.js
- Javascriptパララックスアニメーション ScrollMagic
ただ、jQueryを適用してオプションパラメータを記述したり、プラグイン適用な必要な属性をHTML上に付記する(現在のテーマファイルをカスタマイズする)必要があるため、先に紹介したパララックス対応のWPテーマを利用するよりも難易度が上がるでしょう。
また、お使いのテーマによってはプラグインの衝突などによって不具合が発生することもありますのでご注意ください。
シンプルなパララックスjQueryプラグイン parallax.js

シンプル設計のパララックス実装jQueryプラグイン「parallax.js(パララックスジェーエス)」。
一般的なjQueryプラグインの設置コードおよび、data属性とclass名を付与する程度で簡単に実装できます。
Javascriptパララックスアニメーション ScrollMagic

スクロールに連動したアニメーション効果を実装できるJavascriptライブラリ「ScrollMagic(スクロールマジック)」。
シンプルなjQueryプラグインと比べ、設定にコーディングの技量が必要となりますが、背景パララックス以外にも様々な効果を付与することができます。
まとめ:やはりパララックスの実装は専用WordPressテーマが楽です
パララックスデザインをWordPressサイトに実装に関する情報をご紹介しました。
結論ですが、やはり下記のような専用のWordPressテンプレートを使用することが、楽で確実にパララックスを実装できオススメです。
テーマ名 | 特徴 | デモサイト確認 |
---|---|---|
OOPS! | LP専用テーマ | 無料でデモを確認 |
MAJESTIC+ | ミニマルデザイン | 無料でデモを確認 |
NOEL | パララックススライダー | 無料でデモを確認 |
MONOMANIA | ミニマルデザイン | 無料でデモを確認 |
Amore | 店舗サイト向け | 無料でデモを確認 |
Grazioso | フラットデザイン | 無料でデモを確認 |
Shapely | 無料の海外テーマ | 無料でデモを確認 |
OnePaze | 無料の海外テーマ |
ただし「現在使用しているWPテーマを変更することなくパララックスデザインを取り入れたい」場合には、Javascriptライブラリを使用するのが一般的という感じになります。
超多機能でSEOに強い!ブロガー・アフィリエイターを虜にするWPテーマDIVER
国内最速のサイト表示スピード!最新技術が詰め込まれたWPテーマTHE THOR
ぬるぬるスクロールしちゃうとこが気になったけど、
記事の内容が求めているもの(コメントありなのが嬉しい)だったので、大変参考になりました!良い記事でした!thx!