楽々パララックスが作れるWordPressテーマ8選【無料あり】

『どうも普通のサイトでは面白くないし印象に残るサイトを作りので、【パララックス】を簡単に実装できる、おすすめのWordPressテーマを教えて欲しい。』

上記のような要望にお応えする記事を用意しました。

記事を書いた私の自己紹介です。

WordPressテーマ専門家『Takeshi Shiokawa』の自己紹介 WordPressテーマ専門家『Takeshi Shiokawa』の自己紹介

この記事では『パララックス設定可能なおすすめのWPテンプレート(無料あり)』を紹介します。

また補足として、『WordPressテーマを変更せずにパララックスを実装する方法』も解説しています。

パララックスを使えるWordPressサイトが欲しい方は、流し読みで十分ですので最後まで目を通してみてください。

【結論】簡単にパララックスが作れるおすすめのWordPressテーマ8選

以下の8つになります。

簡単にパララックスが作れるおすすめのWordPressテーマ8選
テーマ名 特徴 デモサイト確認
OOPS! LP専用テーマ 無料でデモを確認
MAJESTIC+ ミニマルデザイン 無料でデモを確認
NOEL パララックススライダー 無料でデモを確認
MONOMANIA ミニマルデザイン 無料でデモを確認
Amore 店舗サイト向け 無料でデモを確認
Grazioso フラットデザイン 無料でデモを確認
Shapely 無料の海外テーマ 無料でデモを確認
OnePaze 無料の海外テーマ 無料でデモを確認

上記のようなパララックスデザインを設定できるWordPressテンプレートを使用すれば、おしゃれなパララックスを楽に確実に実装可能です。

各々を深掘りします。

パララックス可能なランディングページ専用WPテーマ OOPS!

OOPS!(ウップス)

デザインと機能性に優れた究極とも言えるランディングページ専用のWordPressテンプレート「OOPS!(ウップス)」。

適度なアニメーションによるファーストビューでの演出や、パララックス効果によってユーザーのスクロールにリズムを生み出し、最下部の行動喚起へとスムーズに誘導するLPを制作できます。

また最大の特徴はABテストが行えるCTA機能でしょう。

単なるペライチで作りっぱなしのLPで良いという方にはそんなにお勧めできませんが、きちんとテストしながら本気でコンバージョン率の高いランディングページを育てていきたい方は「OOPS!」をチェックすると吉だと思います。

無料でOOPS!のデモサイトを確認

パララックス可能なミニマルデザインWPテーマ MAJESTIC+

MAJESTIC+(マジェスティックプラス)

おしゃれなパララックスを簡単に実装できるミニマルデザインのビジネスサイト向けWordPressテーマ「MAJESTIC+(マジェスティックプラス)」。

Appleの公式サイトみたいなファーストビューが作成可能な、動画も設置可能なインパクト大のフルスクリーンヘッダーが特徴的です。

またフォントにこだわられており、詳細も設定可能となっています。

そのため、訪問者を惹きつけ文章が読みやすいビジネスサイトを簡単に作成可能です。

無料でMAJESTIC+のデモサイトを確認

スマホでも綺麗なパララックススライダーが可能 NOEL

NOEL(ノエル)

美容系サイトに適したWordPressテーマ「NOEL(ノエル)」。

トップページのヘッダーに設置可能な、パララックススライダーが特徴的です。
※スマホでも綺麗に表示されます

機能面としては、美容系のサイトに必要となる「施術内容」「クリニック案内」「スタッフ」ページ用のカスタム投稿が実装されているのが特徴。

無料でNOELのデモサイトを確認

パララックス可能なミニマルデザインWPテーマ MONOMANIA

MONOMANIA(モノマニア)

ミニマルデザインが印象的なパララックスを簡単に実装できる商品紹介サイト向けWordPressテーマ「MONOMANIA(モノマニア)」。

先に紹介したMAJESTIC+と同様、フォントにこだわられており、訪問者を惹きつけ文章が読みやすい商品紹介サイトを作成可能となっています。

無料でMONOMANIAのデモサイトを確認

店舗サイトに最適!おしゃれなパララックス Amore

Amore(アモーレ)

レストランや店舗集客に最適なパララックス仕様のWordPressテーマ「Amore(アモーレ)」。

6つのブロックごとに画像や見出し文、本文などの項目を埋めていくだけで美しいスクロールエフェクトを実装したサイトを完成させることができます。

アニメーションテキストの配色や装飾も自由に変更でき、細部まで美しいデザインに仕上げることが可能です。

無料でAmoreのデモサイトを確認

アニメーションも映える1カラムWPテーマ Grazioso

Grazioso(グラツィオーソ)

レスポンシブCSS3フレームワークが組み込まれており、1カラムフラットデザインの海外風Webサイトを簡単に実現可能なWordPressテーマ「Grazioso(グラツィオーソ)」。

リッチなアニメーションを設定できることが特徴です。

また、動画(MP4ファイル)をパララックス背景に設定することも可能となっています。

無料でGraziosoのデモサイトを確認

パララックスが設定できる無料の海外WPテーマ Shapely

Shapely(シェィプリィ)

Colorlibというデザイン団体がフリーで配布しているWordPressテーマ「Shapely(シェィプリィ)」。

TwitterBootstrap(CSSフレームワーク)を搭載しているレスポンシブWebデザインのテンプレートです。

豊富なカスタマイズ設定とウィジェット機能が特徴であり、ランディングページ向けなっています。

Shapelyのデモサイトを確認

パララックス設定可能な無料のWP公式テーマ OnePaze

OnePaze(ワンペイズ)

WordPress公式テーマとして無料配布されているシンプルなテンプレート「OnePaze(ワンペイズ)」。

ブログページは、2カラム・3カラムも設定可能です。

適度なアニメーションも心地よい仕様となっています。

OnePazeのデモサイトを確認

WPテーマを変更しないパララックスの作り方【JSライブラリを使う】

一方「現在使用しているWPテーマを変更することなくパララックスデザインを取り入れたい」場合には、jQueryプラグイン等のJavascriptライブラリを使用することが近道だと思います。

具体的には、以下2つのようなJSです。

  • シンプルなパララックスjQueryプラグイン parallax.js
  • Javascriptパララックスアニメーション ScrollMagic

ただ、jQueryを適用してオプションパラメータを記述したり、プラグイン適用な必要な属性をHTML上に付記する(現在のテーマファイルをカスタマイズする)必要があるため、先に紹介したパララックス対応のWPテーマを利用するよりも難易度が上がるでしょう。

また、お使いのテーマによってはプラグインの衝突などによって不具合が発生することもありますのでご注意ください。

シンプルなパララックスjQueryプラグイン parallax.js

parallaxjs(パララックスジェーエス)

シンプル設計のパララックス実装jQueryプラグイン「parallax.js(パララックスジェーエス)」。

一般的なjQueryプラグインの設置コードおよび、data属性とclass名を付与する程度で簡単に実装できます。

parallax.jsの詳細 はこちら

Javascriptパララックスアニメーション ScrollMagic

ScrollMagic(スクロールマジック)

スクロールに連動したアニメーション効果を実装できるJavascriptライブラリ「ScrollMagic(スクロールマジック)」。

シンプルなjQueryプラグインと比べ、設定にコーディングの技量が必要となりますが、背景パララックス以外にも様々な効果を付与することができます。

ScrollMagicの詳細 はこちら

まとめ:やはりパララックスの実装は専用WordPressテーマが楽です

パララックスデザインをWordPressサイトに実装に関する情報をご紹介しました。

結論ですが、やはり下記のような専用のWordPressテンプレートを使用することが、楽で確実にパララックスを実装できオススメです。

簡単にパララックスが作れるおすすめのWordPressテーマ8選
テーマ名 特徴 デモサイト確認
OOPS! LP専用テーマ 無料でデモを確認
MAJESTIC+ ミニマルデザイン 無料でデモを確認
NOEL パララックススライダー 無料でデモを確認
MONOMANIA ミニマルデザイン 無料でデモを確認
Amore 店舗サイト向け 無料でデモを確認
Grazioso フラットデザイン 無料でデモを確認
Shapely 無料の海外テーマ 無料でデモを確認
OnePaze 無料の海外テーマ 無料でデモを確認

ただし「現在使用しているWPテーマを変更することなくパララックスデザインを取り入れたい」場合には、Javascriptライブラリを使用するのが一般的という感じになります。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする

Tags

Trackbacks & Comments

Trackback URL for this post:

Trackback(s)

Comment(s)

  1. Takuya Matsuda より:

    ぬるぬるスクロールしちゃうとこが気になったけど、
    記事の内容が求めているもの(コメントありなのが嬉しい)だったので、大変参考になりました!良い記事でした!thx!


Leave a Reply

flight