レスポンシブでアニメーションも美しいWordPressテーマ11選

funeppa! — Fri, 29 Nov 2013 11:00:33 +0000

レスポンシブなWordPressテーマをあつめてみた

レスポンシブデザインが話題になって久しいですね。
レスポンシブやRetina対応はWordPressテーマでもホットなキーワードです。
ワンソースでレスポンシブがベストな選択かどうかは案件によりけりでしょうが、トレンドはしっかり抑えておきたいところ。
今回あえて有料のものばかりをチョイス。WordPressテーマを探すとき、ついつい無料のやつばっかり探しがちなんですが、こうやって有料のテーマを見るとさすがに見応えありますね。

GE Trends

GE Trends- Responsive Voting WordPress Theme

シャープなアニメーションと美しいレイアウトが目を引く、ファッショナブルなテーマ。アパレル系のサイトなんかに良さそうです。

キービジュアルをスライドさせたときの円形メニューのはけ方も気持ちいい。

Dreamer

Dreamer – Photo & Video Parallax WordPress Theme

長ーいシングルページでパララックス、というのももちろんポイントですが、使われてるフォントのバランス感も絶妙。

モノトーン＋オレンジの絞り込んだカラーで、文字のジャンプ率やレイアウトで魅せていくやり方は真似したいところ。

Realnews

Realnews – Stylish and Responsive Magazine Theme

モノクロベースの、ニュースペーパーのようなデザイン。モノクロもWebデザイントレンドのひとつですね。

抑えたカラーと整然としたレイアウトが、知的な雰囲気を出しています。テキストメインの情報系サイトなんかにいいんじゃないでしょうか。

テキストが横にスクロールするやつも、こんなデザインだと株式速報みたいでNEWSな感じがするなーｗ

OneUp

OneUp – One Page Parallax Retina WordPress Theme

TwitterのBootstrapフレームワーク上に構築されたテーマ。

シングルページでパララックス、美しいデモページという見栄えもさることながら、ドラッグ＆ドロップでスピーディにページが作れちゃったりっていう使いやすさも魅力のようです。

ダウンロード上位の人気テーマです。

Salient

Salient – Responsive Multi-Purpose Theme

トップページの横幅いっぱいの動画がインパクト大。（いや、このおじさんがってことじゃなく。）

動画が動きながらのパララックスってあまり見かけないので、とても印象的です。（スマホサイズだとパララックスしないようになってます）

チュートリアル動画やカスタマイズのしやすさもあって、8000近いダウンロード数です。

Raw

RAW – One & Multi Page Multi-Purpose Theme

こちらも動画とパララックスの組み合わせの、シングルページのテーマ。

スクロールしていくと、いろんなところがアニメーションしながら表示されていきます。仕事が細かいな―。

Chroma

Chroma – A Responsive Photography Theme

フルスクリーンが印象的な、写真を見せるのに適したテーマ。

アルバムには自動的に写真にウォーターマークをつける機能も。

Other

Other – Creative Photography WordPress Theme

画像をタイル状に並べる「Masonry」のほか、細長い短冊状に並べる「Vertical」や「Horizontal」などのスタイルが選べ、いずれもグリッドを活かしたレイアウトが美しいテーマ。

画像メインのサイトやポートフォリオなんかに良さそうです。

マウスオーバーのアニメーションも気持ちいい。

Rush

Rush – Multipurpose Creative Responsive Website

「Recent Projects」や「Portfolio」などのページが用意された、ポートフォリオに適したテーマ。

ポートフォリオページはマウスオーバーするとサムネイルがぺろりとめくれたり、ちょっとした仕掛けが楽しい。

Wilder

Wilder – Flat One Page Responsive WordPress Theme

ワンページで、メニューを選択するとページ全体が横にスライドするパターンのテーマ。

中彩度色の色使いが素敵な、モダンなカラーリングです。

こういう、色相差が大きいのにシックにまとめる色使いは、日本のWebサイトではあまり見かけませんね。参考になります。

Concept 1

Concept 1 – Modern and Creative WordPress Theme

Bootstrapのフレームワークで構築されたモダンでクリーンな印象のテーマ。

シンプルなフラットデザインですが、一見単色に見える背景もよく見るとざらっとした質感のテクスチャを使っていたり、控えめなストライプやシャドウをうまく使っていたりするのは、取り入れたい小ワザです。

まとめ

いかがでしたでしょうか？

こうやって見てみると、フルスクリーンで写真を使って、キャッチコピーや見出しをセンター揃え、というのが多くなってる印象です。

デバイスサイズがいろいろになって、センタリングのレイアウトがいろんなデバイスに対応しやすい、っていうのがあるのかもしれません。

Webフォントが当たり前になっているのも海外ならでは。日本語ももっとWebフォントが使いやすくなるといいですよね。

今回ご紹介したテーマはいずれも themeforest で購入可能ですが、 themeforest を覗いてみるだけでもずいぶん刺激になりました。

いずれも＄50前後で、思ったより安いんですねー。

がんばって themeforest で自作のテーマを販売する、なんていうのもアリかもしれませんね。

もういい加減飽きてるかもしれないけどパララックスサイト集めてみた

katoppa! — Mon, 18 Feb 2013 07:00:00 +0000

もうみんな飽きた？まだ大丈夫？

どうも。katoppa!です。

パララックスサイト、流行っていますねー。ん？ご存知ないですか？ご存知ない方のために調べましたよ、パララックス！

パララックスサイトとは

パララックス【parallax】
視差(しさ)。
-パララックス【parallax】の意味 – 国語辞書 – goo辞書より引用

視差らしいですよ視差。
…で、視差ってつまりどういうことなんだぜ？

し‐さ【視差】
１目と対象物との相対的位置の移動または差違による、網膜上の結像の位置の変化。対象物に対して、両眼の視線の挟む角度で表される、両眼視差によって対象物の遠近を知覚する。
-しさ【視差】の意味 – 国語辞書 – goo辞書より引用

平たく言うと、スクロールなどの移動により、遠近を感じるサイトってことですかね。なるほど、よくわかりました。いや、最初からわかってましたけどね。漠然としかわかってなかった、なんてことは、まるでないです。

パララックスサイト、紹介します

では、早速ご紹介しましょう。私が思わず唸ったサイトたちです！どうぞ！（いや、私は虫けらのような人間です、調子にのってすみません）なるべく他で紹介されてなさそうなのを選んだつもりですが、もしとっくにご存知だったらすみません。謝ってばかりですみません。

高まる抗菌力のヒミツ｜HYGIA(ハイジア)｜ライオン株式会社

世界のNintendoから、オーストラリアのマリオカート公式サイト

横スクロールのサイトです。キャラクターが立体的に見える、不思議！
Mario Kart Wii Experience

これ、日本人が作ったらしいっすよ

かっけぇえええ！
superChemical｜versionD

まとめ

いかがでしたか？とってもパララックスでしたね！
まだまだこれからもパララックスサイトは増えていきそうです。
だいぶ目が肥えてきたところで、そろそろ作る側に回ってみるのもいいかもしれませんね！
作ったら教えてください。ではまた！

たねっぱ！ » パララックスサイト