• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2013/11/29
書いた人:
funeppa!
カテゴリ:
Web制作   デザイン
39,702 views

フラットデザイン、シングルページ、フルスクリーン、パララックス、Retina対応… Webのトレンドを盛り込んだ見応えのあるWordPressテーマを集めてみました。 見栄えのするテーマはデザインやアニメーションの参考にもなりますね。 もちろんどれもレスポンシブ対応。PCでご覧の方はブラウザサイズを変えて変化を確認してみましょう!

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

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

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

GE Trends

DeTrend

GE Trends- Responsive Voting WordPress Theme

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

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

Dreamer

Dreamer

Dreamer – Photo & Video Parallax WordPress Theme

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

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

Realnews

RealNews

Realnews – Stylish and Responsive Magazine Theme

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

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

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

OneUp

OneUp

OneUp – One Page Parallax Retina WordPress Theme

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

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

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

Salient

Salient

Salient – Responsive Multi-Purpose Theme

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

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

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

Raw

Raw

RAW – One & Multi Page Multi-Purpose Theme

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

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

Chroma

Chroma

Chroma – A Responsive Photography Theme

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

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

Other

Other

Other – Creative Photography WordPress Theme

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

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

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

Rush

Rush

Rush – Multipurpose Creative Responsive Website

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

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

Wilder

Wilder

Wilder – Flat One Page Responsive WordPress Theme

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

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

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

Concept 1

Consept1

Concept 1 – Modern and Creative WordPress Theme

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

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

まとめ

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

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

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

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

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

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

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


この記事を読んだ人はこんな記事も読んでいます