デザイン

WordPress.com公式ブログで紹介された秀逸なデザインと機能のテーマ27選


ニューヨークタイムズのブログ「NY Times Blogs」やSCEA公式のプレイステーションブログ「PlayStation.Blog」でも採用されているオープンソースで無料利用可能なブログ/CMSソフト「WordPress」の魅力として、豊富なデザインが揃った各種テーマの存在と、それらを簡単に切り替えることでブログの雰囲気をガラッと変えることができるという点がありますが、あまりにも数が多すぎてどれを使えばいいのか選ぶだけでも一苦労。

そこで参考になるのが、スパムコメントやトラックバックを止めるプラグイン「Akismet」で有名なAutomatticが運営しているブログサービス「WordPress.com」公式ブログで紹介されている各種テーマです。

百聞は一見にしかず、実際にどういう秀逸なデザインのテーマがあるのか、実際に選んでみた一覧は以下から。
Blog - WordPress.com
http://en.blog.wordpress.com/category/themes/

◆1.Beach

解説:http://en.blog.wordpress.com/2011/01/18/new-theme-beach/
デモ:http://beachdemo.wordpress.com/
ダウンロード:間もなく提供予定開始らしい
・5種類の投稿フォーマットに対応
・ヘッダーメニューが2種類
Typekit利用可能

◆2.Clean Home





解説:http://en.blog.wordpress.com/2011/01/14/new-theme-clean-home/
デモ:http://cleanhomedemo.wordpress.com/
ダウンロード:http://wordpress.org/extend/themes/clean-home
・複数のカラーパターンあり
・背景とヘッダー画像はカスタマイズ可能(ヘッダーは横900×縦200ピクセル)
・右サイドバー以外にヘッダーにもウィジェットエリアあり
・メインカラムの幅は590ピクセル、サイドバーの幅は250ピクセル

◆3.Toolbox


解説:http://en.blog.wordpress.com/2010/12/10/new-theme-toolbox/
デモ:http://toolboxdemo.wordpress.com/
ダウンロード:http://wordpress.org/extend/themes/toolbox
・カスタムCSSでいくらでもいじくれるようになっている(サンプルはこれ:http://svn.automattic.com/wpcom-themes/toolbox/bonus/sample.css
・HTML5の「article」「header」「nav」属性に対応

◆4.P2


解説ムービー:


解説:http://p2theme.com/
デモその1:http://wp-themes.com/p2/
デモその2:http://p2demo.wordpress.com/
ダウンロード:http://wordpress.org/extend/themes/p2
・複数人で同時に更新することを前提にしている
・Twitterっぽい感じでコントロールパネルにログインせずエントリーをリアルタイムにガンガン投稿できる
・各投稿への返信も簡単にできる
・投稿した内容はTwitterと違ってあとから編集可能
・YouTubeのムービーを投稿する際には[YouTube=(ここのYouTubeのアドレス)]という感じで投稿すれば自動的に埋め込まれる
・ショートカットキーが設定されており「c」で新規投稿、「j」で次の投稿やコメント、「k」で前の投稿やコメント、「r」で返信、「e」で編集、「o」でコメントの表示/非表示の切り替え、「t」でトップに戻る、「esc」でキャンセル
・各投稿にはパーマリンクが付くのでリンクも可能
・新規投稿の背景は黄色にハイライトされ、見ている最中にコメントが追加されると自動的に教えてくれる

◆5.Pilcrow




解説:http://en.blog.wordpress.com/2010/11/22/new-theme-pilcrow/
デモ:http://pilcrowdemo.wordpress.com/
ダウンロード:http://wordpress.org/extend/themes/pilcrow
・6種類のレイアウトから選ぶことが可能
・ライト/ダーク/レッド/ブラウンの4つのカラー
・背景とヘッダー画像はカスタマイズ可能

◆6.zBench



解説:http://en.blog.wordpress.com/2010/10/27/new-theme-zbench/
ダウンロード:http://wordpress.org/extend/themes/zbench
デモ:http://zbenchdemo.wordpress.com/
・配色と背景とヘッダー画像はカスタマイズ可能
・レイアウトは5種類から選択
・WP-PageNavi/WP Page Numbers/WP-PostViews/wp-utf8-excerpt/Related Posts of Simple Tags/WP-RecentCommentsの各プラグインの動作を最初からテーマ自体に組み込んでいるためこれらのプラグインが不要
・コメントはスレッド方式で表示される

◆7.Elegant Grunge



解説:http://en.blog.wordpress.com/2010/10/25/new-theme-elegant-grunge/
デモ:http://elegantgrungedemo.wordpress.com/
ダウンロード:http://wordpress.org/extend/themes/elegant-grunge
・フッター部分にウィジェットの配置が可能
・サイドバーメニューを無くした横幅全開のテンプレートあり
・4種類のレイアウトから選択可能

◆8.Spectrum



解説:http://en.blog.wordpress.com/2010/10/13/new-theme-spectrum/
デモ:http://spectrumdemo.wordpress.com/
ダウンロード:http://wordpress.org/extend/themes/spectrum
・メニュー、背景、ヘッダー画像はカスタマイズ可能
・メニューはドロップダウン方式でヘッダーに配置可能

◆9.Fusion




解説:http://en.blog.wordpress.com/2010/09/21/new-theme-fusion/
デモ:http://fusiondemo.wordpress.com/
ダウンロード:http://wordpress.org/extend/themes/fusion
・メニュー、背景、ヘッダー画像はカスタマイズ可能
・フッター部分にウィジェットの配置が可能
・4種類のレイアウトから選択可能
・サイドバーメニューを無くした横幅全開のテンプレートあり
・横幅全開や文字の大きさは閲覧者側でも設定可能

◆10.Oulipo



解説:http://en.blog.wordpress.com/2010/08/16/new-theme-oulipo/
デモ:http://oulipodemo.wordpress.com/
ダウンロード:http://wordpress.org/extend/themes/oulipo
・左メニューは固定されており、ページを下にスクロールさせても定位置から動かない方式
・ライトとダークの2種類のカラーが最初から用意されている
・メニュー、背景、ヘッダー画像はカスタマイズ可能

◆11.Coraline




解説:http://en.blog.wordpress.com/2010/08/09/new-theme-coraline/
デモ:http://coralinedemo.wordpress.com/
ダウンロード:http://wordpress.org/extend/themes/coraline
・5種類のレイアウトから選択可能
・ウィジェットの配置エリアが7つもある
・ダークカラーバージョンあり
・メニュー、背景、ヘッダー画像はカスタマイズ可能
・元になっているテーマがWordPress3.x系統のデフォルトテーマ「Twenty Ten」であるため、デフォルトテーマを前提にした全機能が動作する

◆12.Modularity Lite



解説:http://en.blog.wordpress.com/2010/06/24/new-theme-modularity-lite/
デモ:http://modularitylitedemo.wordpress.com/
ダウンロード:http://wordpress.org/extend/themes/modularity-lite
・横950ピクセル×縦425ピクセルの大きな画像をトップページにスライドショーとして表示可能
・スライドショー部分にはメッセージの設定が可能
・メニュー、背景、ヘッダー画像はカスタマイズ可能

◆13.Koi






解説:http://en.blog.wordpress.com/2010/06/22/new-theme-koi/
デモ:http://themify.me/demo/themes/koi/
ダウンロード:http://themify.me/themes/koi
・メニュー、背景、ヘッダー画像はカスタマイズ可能
・フッター部分は3カラムのウィジェットエリアになっている
・コメントはスレッド方式

◆14.Wu Wei





解説:http://en.blog.wordpress.com/2010/06/14/new-theme-wu-wei/
デモ:http://wuweidemo.wordpress.com/
ダウンロード:http://wordpress.org/extend/themes/wu-wei
・1カラムに絞ったデザイン
・メニュー、背景、ヘッダー画像はカスタマイズ可能
・フッター部分は3カラムのウィジェットエリアになっている
・ダークカラーバージョンあり

◆15.Andrea




解説:http://en.blog.wordpress.com/2010/06/09/new-theme-andrea/
デモその1:http://andreademo.wordpress.com/
デモその2:http://wp-themes.com/andrea/
ダウンロード:http://wordpress.org/extend/themes/andrea
・横幅900ピクセルの固定モードと横幅1280ピクセルの可変モードがある
・メニュー、背景、ヘッダー画像はカスタマイズ可能

◆16.Greyzed




解説:http://en.blog.wordpress.com/2010/06/03/new-theme-greyzed/
デモ:http://greyzeddemo.wordpress.com/
ダウンロード:http://wordpress.org/extend/themes/greyzed
・少しダーティーなイメージ
・ヘッダー上部のドロップダウンメニューは自在にカスタム可能
・フッター部分は3カラムのウィジェットエリアになっている

◆17.Paperpunch





解説:http://en.blog.wordpress.com/2010/05/26/new-theme-paperpunch/
デモ:http://paperpunchdemo.wordpress.com/
ダウンロード:http://wordpress.org/extend/themes/paperpunch
・フッター部分は4カラムのウィジェットエリアになっている
・背景画像の変更が可能
・Typekitフォントの利用もできる

◆18.Notepad




解説:http://en.blog.wordpress.com/2010/05/21/new-theme-notepad/
デモ:http://www.ndesign-studio.com/demo/wordpress/
ダウンロード:http://wordpress.org/extend/themes/notepad-theme
・iPhoneの「メモ」アプリにインスパイアされたデザイン
・Twitter/Facebook/Flickr/RSSのアドレスを登録するとそのアイコンがヘッダーに表示される
・カスタマイズ可能なドロップダウンメニュー

◆19.Enterprise




解説:http://en.blog.wordpress.com/2010/05/13/new-theme-enterprise/
デモ:http://www.studiopress.com/demo/enterprise.html
ダウンロード:http://www.studiopress.com/themes/enterprise(wordpress.comではまだ無料で提供されているようだがダウンロード版は現時点では有料になっている)
・2段階のドロップダウンメニューがカスタマイズ可能で、2段階目はさらに10個まで登録可能
・フッター部分は3カラムのウィジェットエリア
・背景、ヘッダー画像はカスタマイズ可能

◆20.Bueno


解説:http://en.blog.wordpress.com/2010/05/06/new-theme-bueno/
デモ:http://demo.woothemes.com/bueno/
ダウンロード:http://www.woothemes.com/2009/11/bueno/
・メニュー、背景、ヘッダー画像はカスタマイズ可能
・7種類の配色が選択可能
・「.po」ファイルが同梱されているのでローカライズが可能
・バナー広告をマネジメントする仕組みあり
・Google Analyticsのコードを簡単に貼ることが可能
・サムネイル画像を自動的に生成
・サイドバー無しで横幅全開のページのテンプレートあり
・サイトマップやアーカイブページのテンプレートも同梱

◆21.Vostok




解説:http://en.blog.wordpress.com/2010/05/04/new-theme-vostok/
デモその1:http://vostoktheme.com/white/
デモその2:http://vostoktheme.com/black/
ダウンロード:http://www.vostoktheme.com/
・1カラムに絞ったデザイン
・フッター部分は2カラムのウィジェットエリアになっている
・メニュー、背景、ヘッダー画像はカスタマイズ可能

◆22.Structure





解説:http://en.blog.wordpress.com/2010/04/27/new-theme-structure/
デモ:http://organicthemes.com/demo/structure-white/
ダウンロード:http://www.organicthemes.com/themes/structure-theme/(有料版もあり)
・注目記事をトップページのド真ん中に表示
・TwitterとFacebookのURLを登録したアイコンの表示が可能
・2カラムや3カラムデザインに変更も可能
・メニュー、背景、ヘッダー画像はカスタマイズ可能
・ダークカラーバージョンあり

◆23.Under The Influence





解説:http://en.blog.wordpress.com/2010/04/20/new-theme-under-the-influence/
デモ:http://undertheinfluencedemo.wordpress.com/
ダウンロード:http://wordpress.org/extend/themes/under-the-influence
・高機能なカラー設定
・別タイプのヘッダーが選択可能
・フッター部分は4カラムのウィジェットエリアになっている

◆24.Inuit Types





解説:http://en.blog.wordpress.com/2010/04/15/new-theme-inuit-types/
デモ:http://bizzthemes.com/demo/inuitypes/
ダウンロード:http://bizzartic.com/2010/03/31/inuit-types-bizzd-up/(「Starter Download」というのが無料版)
・注目記事機能
・ドロップダウンメニュー
・フロントページにウィジェットエリアあり
・6種類の配色パターンから選択可能
・サイドバーは左右を選択可能

◆25.Neutra


解説:http://en.blog.wordpress.com/2010/03/25/new-theme-neutra/
デモその1:http://www.artmov.com/dev/live/neutra/
デモその2:http://neutrademo.wordpress.com/
ダウンロード:http://wordpress.org/extend/themes/neutra
・ドロップダウンメニュー
・エントリー直下にメタデータのアイコン表示
・とにかくシンプルなデザイン勝負

◆26.Duotone




解説:http://en.blog.wordpress.com/2009/12/24/new-theme-duotone/
デモ:http://duotonedemo.wordpress.com/
ダウンロード:http://wordpress.org/extend/themes/duotone
・フォトブログに絞ったデザイン
・基本的に1エントリーに1枚写真を貼って更新するスタイル
・背景色は自動的に選択される(色を固定することも可能)
・EXIF情報の表示機能あり

◆27.monochrome



解説:http://en.blog.wordpress.com/2010/01/19/new-theme-monochrome/
デモ:http://www.mono-lab.net/demo1/
ダウンロード:http://www.mono-lab.net/download-html#monochrome
・ヘッダー部分や日付表示のデザインがかなりユニーク
・上部メニューはドロップダウン形式で第3階層まで修正して使うことが可能
・検索の下に折りたたみ式タグリスト
・右下にトップに戻るリンクを常に表示
・日本語でも崩れないようにCSS修正済み

こうやってざーっと振り返って見ると、昔はデザイン勝負でオプション項目の少ないテーマがメインだったのが、段々と複雑化していき、各項目を細かくカスタマイズすることで自分の個性を出せるようなテーマに移行しているのがわかります(番号が1に近いほど新しく、番号が増えれば増えるほど昔のテーマです)。

この記事のタイトルとURLをコピーする

・関連記事
フリーのWordPress用テーマがPSDファイル付きでたくさん配布されている「WordPress Theme Designer」 - GIGAZINE

iPhoneなどのスマートフォンに最適化されたWordPressテーマ「iPhonsta」などを配布するサイト「WPSHOWER」 - GIGAZINE

WordPressの有料テーマを販売した4ヶ月の売上グラフなどの記録を公開中 - GIGAZINE

WordPress3.0正式版リリース、その新機能をざっくりと解説 - GIGAZINE

最強の呼び声高いブログ用対スパムプラグイン「Akismet」 - GIGAZINE

無料で商用利用可の有料サイトテンプレートファイルを「ThemeForest」からダウンロードする方法 - GIGAZINE

ベーシック認証環境下でWordPressの予約投稿の失敗、Flashアップローダー動作不能、XML-RPCからの画像アップロード失敗をまとめて解決する方法 - GIGAZINE

in デザイン, Posted by darkhorse

You can read the machine translated English article here.