Webのトレンドを盛り込んだ見応えのあるWordPressテーマを集めてみました。見栄えのするテーマはデザインやアニメーションの参考にもなりますね。どれもレスポンシブ対応。PCでご覧の方はブラウザサイズを変えて変化を確認してみましょう!レスポンシブなWordPressテーマをあつめてみたレスポンシブデザインが話題になって久しいですね。レスポンシブやRetina対応はWordPressテーマでもホットなキーワードです。ワンソースでレスポンシブがベストな選択かどうかは案件によりけりでしょうが、トレンドはしっかり抑えておきたいところ。今回あえて有料のものばかりをチョイス。WordPressテーマを探すとき、ついつい無料のやつばっかり探しがちなんですが、こうやって有料のテーマを見るとさすがに見応えありますね。Themeシャープなアニメーションと美しいレイアウトが目を引く、ファッショナブルなテーマ。アパレル系のサイトなんかに良さそうです。キービジュアルをスライドさせたときの円形メニューのはけ方も気持ちいい。Theme長ーいシングルページでパララックス、というのももちろんポイントですが、使われてるフォントのバランス感も絶妙。モノトーン+オレンジの絞り込んだカラーで、文字のジャンプ率やレイアウトで魅せていくやり方は真似したいところ。Themeモノクロベースの、ニュースペーパーのようなデザイン。モノクロもWebデザイントレンドのひとつですね。抑えたカラーと整然としたレイアウトが、知的な雰囲気を出しています。テキストメインの情報系サイトなんかにいいんじゃないでしょうか。ThemeTwitterのBootstrapフレームワーク上に構築されたテーマ。シングルページでパララックス、美しいデモページという見栄えもさることながら、ドラッグ&ドロップでスピーディにページが作れちゃったりっていう使いやすさも魅力のようです。ダウンロード上位の人気テーマです。Themeトップページの横幅いっぱいの動画がインパクト大。(いや、このおじさんがってことじゃなく。)動画が動きながらのパララックスってあまり見かけないので、とても印象的です。(スマホサイズだとパララックスしないようになってます)チュートリアル動画やカスタマイズのしやすさもあって、8000近いダウンロード数です。Themeこちらも動画とパララックスの組み合わせの、シングルページのテーマ。スクロールしていくと、いろんなところがアニメーションしながら表示されていきます。Themeフルスクリーンが印象的な、写真を見せるのに適したテーマ。アルバムには自動的に写真にウォーターマークをつける機能も。Theme画像をタイル状に並べる「Masonry」のほか、細長い短冊状に並べる「Vertical」や「Horizontal」などのスタイルが選べ、いずれもグリッドを活かしたレイアウトが美しいテーマ。画像メインのサイトやポートフォリオなんかに良さそうです。マウスオーバーのアニメーションも気持ちいい。Projects」や「Portfolio」などのページが用意された、ポートフォリオに適したテーマ。ポートフォリオページはマウスオーバーするとサムネイルがぺろりとめくれたり、ちょっとした仕掛けが楽しい。Themeワンページで、メニューを選択するとページ全体が横にスライドするパターンのテーマ。中彩度色の色使いが素敵な、モダンなカラーリングです。いう、色相差が大きいのにシックにまとめる色使いは、日本のWebサイトではあまり見かけませんね。ThemeBootstrapのフレームワークで構築されたモダンでクリーンな印象のテーマ。シンプルなフラットデザインですが、一見単色に見える背景もよく見るとざらっとした質感のテクスチャを使っていたり、控えめなストライプやシャドウをうまく使っていたりするのは、取り入れたい小ワザです。まとめいかがでしたでしょうか?こうやって見てみると、フルスクリーンで写真を使って、キャッチコピーや見出しをセンター揃え、というのが多くなってる印象です。デバイスサイズがいろいろになって、センタリングのレイアウトがいろんなデバイスに対応しやすい、っていうのがあるのかもしれません。Webフォントが当たり前になっているのも海外ならでは。日本語ももっとWebフォントが使いやすくなるといいですよね。覗いてみるだけでもずいぶん刺激になりました。いずれも$50前後で、思ったより安いんですねー。自作のテーマを販売する、なんていうのもアリかもしれませんね。この記事を読んだ人はこんな記事も読んでいます定義リスト[dl]のdt/ddを横並びにする方法[Mac]スマホから手軽に製作中のWEBサイトを確認する方法Fireworksから複数テキストを一瞬で抽出!コーディング効率化コマンドを作ってみました見ながら覚えよう!positionプロパティ「absolute」と「relative」についてのお話CSSの【float】についてちょっと本気出して説明してみた。CSSの【float】についてちょっと本気出して説明してみた。しこのブログはWebコンテンツ総合製作の「ふたっぱ!」が運営しています。