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

カレンダーDate: | カテゴリーCategory:おしゃれな日本語WordPressテーマ・Webデザインギャラリー
※景品表示法に基づく表記:本記事には商品の広告が含まれています

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

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

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

SEO検定1級およびwebクリエイター能力認定試験上級合格者のWordPressテーマ専門家『塩川 武士(しおかわ たけし)』の自己紹介 SEO検定1級およびwebクリエイター能力認定試験上級合格者のWordPressテーマ専門家『塩川 武士(しおかわ たけし)』の自己紹介

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

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

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

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

以下の7つになります。

簡単にパララックスが作れるおすすめのWordPressテーマ5選
テーマ名 特徴 デモサイト確認
DROP 最高峰のLP向け 無料でデモを確認
HORIZON 横スクロール対応 無料でデモを確認
OOPS! LP専用テーマ 無料でデモを確認
NOEL パララックススライダー 無料でデモを確認
Shapely 無料の海外テーマ 無料でデモを確認

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

それぞれを深掘りします。

パララックスOK!最高峰のLPを作れるかっこいいWPテーマ DROP

DROP(ドロップ)

ランディングページ型のトップページサイト用のWordPressテンプレートとして国内最高峰と言える「DROP(ドロップ)」。

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

パララックスはもちろん、高機能なグラフ・チャートも使えるのでセールス力の高いページを作れます。

その他の特徴は以下のとおり。

  • 洗練されたレビュー・インタビューページを簡単に作成できる
  • 固定ページでセールスランディングページを簡単に構築可能
  • 洗練されたパララックスやフェードアニメーションを隅々まで搭載
  • 緻みつに計算されたスマホデザイン、スムーズなアニメーション

スタイリッシュで売上もUPできるパララックスサイトを作りたい方にこそ、このDROPの無料デモサイトを確認いただくことを切実にオススメします。

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

国内初!横スクロール型のパララックスサイトが作れる HORIZON

HORIZON(ホライゾン)

日本一デザインが美しいテーマラインナップを提供するTCDが、とうとう横スクロール型のサイト専用のテーマを開発。それが「HORIZON(ホライゾン)」です。

横に動くパララックスは、ストーリー性の表現のしやすさが段違いです。なので、簡単に心に響く事業概要や沿革を表現することができます。

特徴は次のとおり。

  • トップページ作成は5タイプのコンテンツを組み合わせるのみ
  • 横・縦スクロールを、ページの役割によって自動的に振り分け
  • 調和のとれた美しいアニメーション・パララックスを簡単実装
  • 簡単ランディングページ作成!横・縦スクロールどちらも可能
  • スマホデザインは自然な縦スクロールで美しいエフェクトもあり

繰り返しになりますが、日本初の横スクロール対応テンプレートになります。興味のある方は無料デモサイトを確認ください。

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

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

OOPS!(ウップス)

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

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

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

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

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

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

NOEL(ノエル)

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

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

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

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

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

Shapely(シェィプリィ)

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

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

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

Shapelyのデモサイトを確認

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テーマ5選
テーマ名 特徴 デモサイト確認
DROP 最高峰のLP向け 無料でデモを確認
HORIZON 横スクロール対応 無料でデモを確認
OOPS! LP専用テーマ 無料でデモを確認
NOEL パララックススライダー 無料でデモを確認
Shapely 無料の海外テーマ 無料でデモを確認

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

Tags

Trackbacks & Comments

Trackback URL for this post:

Trackback(s)

Comment(s)

  1. Takuya Matsuda より:

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


Leave a Reply

flight