WordPressを利用したWebサイトが増えていますね。(Photoshop VIPもそのひとつです。)
カスタマイズを比較的簡単にできるだけでなく、毎日の更新をスムーズに行うことができる便利さが人気の秘密かもしれません。
海外デザインブログInstantShiftで、実際にWordPressを使ってデザインされたWebサイトを70個まとめたエントリー「70+ Fresh WordPress Site Designs for Inspiration」が公開されていたので、今回はご紹介します。
他にはないオリジナリティーを追求したWebデザインが多くまとめられているので、今後のデザイン制作の参考にしてみてはいかがでしょう。
詳細は以下から。
WordPressを利用したWebサイトデザインまとめ
背景全体にレイアウトされたイメージ写真がインパクトのあるブログ形式のWebサイトデザイン、立体的なリボンで作成されたメニューバーがかわいいです。
アメリカ、ニュージャージー州のデザイナーさんのポートフォリオサイト。
ヘッダー部分に幅いっぱいにスクロールするスライダー、制作実績にソート機能を利用しています。
ウィンドウ幅に応じて横幅が伸縮するユニークなレイアウト、こちらもヘッダー部分にスライダープラグインが実装されています。
フランス語のサイトですが、紙テクスチャを利用した背景デザインと太字スタイルのフォントの組み合わせがナイス。
フランスにあるレストランのホームページデザイン、ウィンドウ幅に応じて背景画像が拡大縮小されるようになっています。
デザイナーポートフォリオのひとつで、初めて訪れたひとにも分かりやすいシンプルな作りが魅力的。
落ち着いた色使いの緑色をアクセントカラーとしたWebデザイン、ダイナミックなスライダーをヘッダー部分にレイアウト。
アート性の強い背景デザインを利用したWebデザイン、それぞれのコンテンツをサムネイルギャラリー風に並べたグリッドレイアウト。
サングラスを中心に扱っているショッピングサイト、ポップなデザインとタイポグラフィーが購買意欲を沸かせてくれます。
こちらも背景にイメージ画像を取り入れたWebデザイン、ロゴの配色を基調にデザインされています。
グリッドに合わせてサムネイル画像をレイアウトしたすっきりとしたダーク系ポートフォリオサイト、ふわっとしたエフェクトがオシャレです。
水平方向にスクロールするパララックス(視差効果)エフェクトを利用したWebサイトデザイン。
ヘッダー部分にでかでかとしたタイポグラフィーを利用したWebデザインで、利用されている配色が綺麗だったのでメモとして。
グリッドレイアウトを利用したすっきりとしたブログ形式のWebサイト、余白スペースをたっぷり取ること見やすさを改善しています。
4分割されたグリッドにデザインイメージを並べただけなのですが、まとまったエレガントな印象を与えてくれます。
ウィンドウ幅に応じてレイアウトが変更するリキッドタイプで組まれたWebサイトデザイン。
こちらもグリッドレイアウトを利用したWebデザインのひとつで、配色に一目惚れしたのでこちらもメモとしてエントリー。
手書きされたようなやさしいスケッチデザインをそのままヘッダー部分に利用したWebデザイン、オリジナリティーを演出可能。
アメリカはサウスカロライナにあるデザインスタジオの公式ホームページ。タイポグラフィーを利用したシンプルなブログがかっこいいです。
一度紹介したような気もしますが、ユニークなデザインパーツを並べて作成されたWebサイト、コンテンツに応じて切り替わるフッターデザインがかわいすぎます、。
無料ダウンロード可能なWordPressテーマまとめ
WordPressが普及している背景には、多くのテーマデザインを世界中のデザイナーが公開していることもあるのではないでしょうか。
そのなかでも無料でダウンロードすることができる高品質なWordPressテンプレートを一緒にまとめています。
WordPressでショッピングサイトを運営したいという方にオススメしたい高品質テンプレート。買い物かごや会計などもすべて実装されているという恐ろしいほど便利でオシャレ。
[button_square color=”blue” url=”http://themes.dapurpixel.com/velvet/”] デモページ [/button_square] [button_square color=”green” url=”http://media.smashingmagazine.com/wp-content/uploads/2011/06/velvetsky-Wordpress-Theme.zip”] ダウンロード [/button_square]
イメージ写真などを投稿するギャラリー風WordPressテンプレート、シンプルなレイアウトとオシャレな配色が魅力的です。
[button_square color=”blue” url=”http://wpshower.com/demo/?theme=imbalance2″] デモページ [/button_square] [button_square color=”green” url=”http://wpshower.com/imbalance2.zip”] ダウンロード [/button_square]
自分だけのポートフォリオサイトを作成するときに活用したいダーク系WordPressテンプレート、こちらもグリッドを使ってきれいに整列されています。
[button_square color=”blue” url=”http://wpshower.com/demo/?theme=portfolium”] デモページ [/button_square] [button_square color=”green” url=”http://wpshower.com/portfolium.zip”] ダウンロード [/button_square]
ヘッダー部分にスライダーが実装された企業用サイトなどにも活用できるWordPressテンプレート。
[button_square color=”blue” url=”http://yourinspirationweb.com/tf/beauty/”] デモページ [/button_square] [button_square color=”green” url=”http://www.freeminimalwordpresstheme.com/downloads/beauty.zip”] ダウンロード [/button_square]
ブログ形式のレイアウトデザインをお探しの方におすすめしたいオシャレWordPressテンプレート、色使いもとてもきれいですよ。
[button_square color=”blue” url=”http://demo.woothemes.com/bueno/”] デモページ [/button_square] [button_square color=”green” url=”http://blogof.francescomugnai.com/2011/06/12-best-free-wordpress-themes-of-2011-so-far/”] ダウンロード [/button_square]
こちらもブログ形式のテンプレートデザインのひとつ、ヘッダー部分にスライダー、ページをスクロールすると自動的に新しい記事を読み込んでくれるなど高品質なWordPressテーマとなっています。
[button_square color=”blue” url=”http://sight.wpshower.com/”] デモページ [/button_square] [button_square color=”green” url=”http://www.smashingmagazine.com/2010/11/24/sight-free-wordpress-3-0-1-ready-theme-for-magazines-and-blogs/”] ダウンロード [/button_square]
写真を中心に投稿したいときに利用したいシンプルなWordPressテンプレート、夏休みの旅日記などにいかがでしょう。
[button_square color=”blue” url=”http://demo.wordspop.com/bigsquare/”] デモページ [/button_square] [button_square color=”green” url=”http://downloads.wordspop.com/big-square-1.1.zip”] ダウンロード [/button_square]
iPhoneがレイアウトされたユニークなテンプレート、アプリ販売などにもよさそうですね。
[button_square color=”blue” url=”http://templatic.com/demos/?theme=comingsoon”] デモページ [/button_square] [button_square color=”green” url=”http://templatic.com/wp-content/plugins/download-monitor/download.php?id=ComingSoon+theme”] ダウンロード [/button_square]
ちょっとしたボタン操作のみで直感的にレイアウトを作成することができるユニークなサービス。詳細はかちびとさんの「レイアウトや配色等をインタラクティブに設定できるWordPressテーマを作る為のフレームワーク・PressWorkちょっとやばい」を参考にするとよいですよ。
[button_square color=”green” url=”http://presswork.me/”] ダウンロード [/button_square]
[参照元 : 70+ Fresh WordPress Site Designs for Inspiration – InstantShift]
[参照元 : Best Free WordPress Themes for Summer 2011 – Splashnology]