Advertisement

parallaxwp_top

 

パララックス効果(英: parallax effect)をご存知ですか。別名「視差効果」とも呼ばれ、Webデザインで利用されている、エフェクトのひとつです。複数のイメージ画像のスクロールするスピードを調整することで、奥行きのある立体的な空間を生み出す、アニメーションを得意としたエフェクトとなります。

 

 

海外デザインブログTripWireMagazine.comで、パララックスエフェクトを利用した、WordPressプレミアムテーマ35個をまとめたエントリー「35+ Awesome Parallax Scrolling WordPress Themes」が公開されていたので、今回はご紹介します。

 

 

ダイナミックな動きをたのしむことができ、ビジュアル面においても魅力的なコンテンツ作成、運営を可能にしてくれる、高機能WordPressテーマ素材を利用してみてはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

動き&ビジュアルでたのしむ、パララックス系WordPressプレミアムテーマ素材まとめ

 

Minumum

不要なデザインを削ぎ落した、ミニマルスタイルのWordPressテーマ。プロフィールや製品紹介、プロジェクトなど幅広く活用できる万能デザインで、ショッピングサイト構築プラグインWooCommerceにも対応。

minimum

[button_square color=”green” url=”http://themeforest.net/item/minimum-professional-wordpress-theme/full_screen_preview/4084338″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/minimum-professional-wordpress-theme/4084338?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

CuckooTap

こちらもショッピングサイト運営に活用したい、ダーク系Webデザインを採用したWordPressテーマ素材。

cuckootap

[button_square color=”green” url=”http://themeforest.net/item/cuckootap-responsive-single-page-wordpress-theme/full_screen_preview/3512405″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/cuckootap-responsive-single-page-wordpress-theme/3512405?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

QuickStep

レスポンシブWebデザインに対応した、シンプルなアニメーションが素敵なWordPressテーマ。豊富なボタンやアラーとボックスなどのショートコードもうれしいです。

quickstep

[button_square color=”green” url=”http://themeforest.net/item/quickstep-responsive-one-page-portfolio-theme/full_screen_preview/3237426″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/quickstep-responsive-one-page-portfolio-theme/3237426?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

Ego Studio

ウィンドウ幅に応じてレイアウトが変化するレスポンシブ対応で、あらかじめ5種類のスキンから選択でき、最近ミニマルスキンが追加されています。

egostudio

[button_square color=”green” url=”http://themeforest.net/item/ego-onepage-parallax-responsive-wordpress-theme/full_screen_preview/4229464″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/ego-onepage-parallax-responsive-wordpress-theme/4229464?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

907 – Responsive WP One Page Parallax

特にヘッダーデザインに力を入れたテーマで、パララックスに加え、各種スライダー計5種類を用意しています。カスタムポストやウィジェットにも対応です。

907parallax

[button_square color=”green” url=”http://themeforest.net/item/907-responsive-wp-one-page-parallax/full_screen_preview/4087140″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/907-responsive-wp-one-page-parallax/4087140?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

SCRN

デザインだけでなく、管理画面や機能性が充実しており、フレキシブルなカスタマイズが可能な、クリエイティブな人気WordPressテーマ。

scrn

[button_square color=”green” url=”http://themeforest.net/item/scrn-responsive-single-page-portfolio/full_screen_preview/2964855″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/scrn-responsive-single-page-portfolio/2964855?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

Mercurial

何度かご紹介している人気テーマのひとつで、太字フォントに加え、鮮やかでポップな背景デザインが印象的な、シングルページ完結型テーマ。

mercurial

[button_square color=”green” url=”http://themeforest.net/item/mercurial-one-page-parallax-wordpress-theme/full_screen_preview/3505513″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/mercurial-one-page-parallax-wordpress-theme/3505513?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

Salient

レスポンシブデザイン対応で、オプション機能ツールや7種類のページレイアウトなど、サイト運営まで考え抜かれた、操作性の良さも人気の理由です。

salient

[button_square color=”green” url=”http://themeforest.net/item/salient-responsive-portfolio-blog-theme/full_screen_preview/4363266″] デモページ [/button_square]  [button_square color=”orange” url=”themeforest.net/item/salient-responsive-portfolio-blog-theme/4363266?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

Montreal

デザイン実績などを掲載するポートフォリオページが特に充実しており、6種類のデザインから選択可能。レスポンシブ対応デ、読みやすさも考慮されています。

montreal

[button_square color=”green” url=”http://themeforest.net/item/montreal-interactive-creative-wordpress-theme/full_screen_preview/3957460″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/montreal-interactive-creative-wordpress-theme/3957460?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

Status

極太タイポグラフィーが目を惹く、余白スペースを大事にした、シンプルなWordPressテーマ。無駄のないデザインは、コンテンツをより引き立たせてくれます。

status

[button_square color=”green” url=”http://themeforest.net/item/status-parallax-and-modular-theme/full_screen_preview/3869485″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/status-parallax-and-modular-theme/3869485?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

Pulsar

スタイリッシュなサンプルイメージが魅力的で、ビジュアル面にこだわったポートフォリオサイトなどにいかがでしょう。

pulsar

[button_square color=”green” url=”http://themeforest.net/item/pulsar-fully-responsive-parallax-wordpress-theme/full_screen_preview/4105206″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/pulsar-fully-responsive-parallax-wordpress-theme/4105206?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

Dreamer

オレンジ色をテーマカラーに使っており、大胆で巨大なフォント設定、スタイリッシュなテーブルデザインなど、カスタマイズを意識したWordPressテーマ素材。

dreamer

[button_square color=”green” url=”http://themeforest.net/item/minimum-professional-wordpress-theme/full_screen_preview/4084338″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/dreamer-responsive-one-page-parallax-template/3880376?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

Pen & Paper

鉛筆で手書きしたような質感を表現した、温もりを感じるシンプルなWordPressテーマ素材。

penandpaper

[button_square color=”green” url=”http://themeforest.net/item/pen-and-paper-responsive-wordpress-theme/full_screen_preview/3680756″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/pen-and-paper-responsive-wordpress-theme/3680756?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

Eleven

濃紺とサーモンピンクの組み合わせがオシャレなテンプレート素材で、コンテンツに応じた自由なレイアウトが魅力的です。

eleven

[button_square color=”green” url=”http://themeforest.net/item/eleven-wordpress-responsive-one-page-parallax/full_screen_preview/4565464″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/eleven-wordpress-responsive-one-page-parallax/4565464?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

Metabolic

ヘッダーデザインにパララックス式スライダーが採用されており、ユニークなアニメーションが多数実装されています。

metabolic

[button_square color=”green” url=”http://themeforest.net/item/metabolic-responsive-multipurpose-theme/full_screen_preview/4528842″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/metabolic-responsive-multipurpose-theme/4528842?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

Dynamo

思わずスクロールしたくなる、絶妙なアニメーションを実装した、気持ちのよいWordPressテーマ素材。ショッピングサイトの構築にもオススメしたいテンプレート。

dynamo

[button_square color=”green” url=”http://themeforest.net/item/dynamo-multipurpose-business-wordpress-theme/full_screen_preview/4481492″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/dynamo-multipurpose-business-wordpress-theme/4481492?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

Panels:

製品紹介やプレゼンテーションなどでも威力を発揮してくれそうな、パネル式コンテンツ移動がユニークなWordPressテーマ。

responsiveone

[button_square color=”green” url=”http://themeforest.net/item/panels-onepage-responsive-wp-theme/full_screen_preview/3995508″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/panels-onepage-responsive-wp-theme/3995508?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

Magnet

用途に応じて4種類のページレイアウトが用意されており、プレゼンテーションなどにも使える「カタログ」モードというレイアウトなどもありますよ。

mag

[button_square color=”green” url=”http://themeforest.net/item/magnet-creative-business-wordpress-theme/full_screen_preview/4550256″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/magnet-creative-business-wordpress-theme/4550256?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

Diablo

あらかじめ3色のテーマカラーから選択可能となっており、水平方向にスクロールする、ユニークなレイアウトを実現したWordPressテーマ。

diabolo

[button_square color=”green” url=”http://themeforest.net/item/diablo-eyecandy-minimal-responsive-wp-theme/full_screen_preview/4293221″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/diablo-eyecandy-minimal-responsive-wp-theme/4293221?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

Impress

雄大な雪山をスクロールでアニメーションさせる、シングルページ完結型レイアウトのWordPressテーマ素材。

impress

[button_square color=”green” url=”http://themeforest.net/item/impress-responsive-parallax-single-page-theme/full_screen_preview/3471527″] デモページ [/button_square]  [button_square color=”orange” url=”http://themeforest.net/item/impress-responsive-parallax-single-page-theme/3471527?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

ダイナミックなエフェクトが魅力、パララックスWebデザインまとめ(+無料プラグイン9個)

実際にパララックスエフェクトを利用したWebデザインも参考にしながら、お気に入りのテーマ素材を見つけてみてはいかがでしょう。

howtoparallax_top

 

 

参照元リンク : 35+ Awesome Parallax Scrolling WordPress Themes – TripWireMagazine.com