おで流（俺流）WordPress テーマの作り方（１）

今回の「おでげーと」リニューアルにあたってSandbox をベースにデザインをしてみました。

配布されているテーマファイルをthemes フォルダに入れるだけで様々なデザインを楽しめるのがWordPress の醍醐味ではあるのですが、できることなら世界に一つしかない自分のサイトなのだから、自らデザインしてもっとWordPress を楽しんで欲しいと思います。

その一助になることを願って、今回のリニューアルにあたって僕が行ったテーマ作成の流れをまとめてみました。

（WordPress と銘打ってはいますが、通常のサイトデザイン/作成の流れとしてみてもらってもいいかもしれません。）

1.テーマのイメージスケッチを書く

サイトでもっとも訴えたいのは何か、どういうサイトにしたいのか、（クライアントから依頼されたサイトであれば）クライアントのイメージはどのようか、というようなことを考えながらイメージスケッチを描きます。思うままにがりがり書きます。

ニュース系サイトなら情報が詰まって見えるようにとか、学校のサイトなら白基調の明るいサイトで。黒ベースにすると裏サイトになっちゃいます。

この段階でいくつものステキなデザインが沸き、いくつも消えていきます。

個人サイトのデザインであれば、この段階は自分の好きなデザインでいいわけです。絵の得意な人は絵を、写真の得意な人は写真を、猫の好きな人は猫をフィーチャーしてデザインできるでしょう。

僕の好きなものはなんだろう？他のサイトと自分のサイトを分け隔てられるものは？そう、ドット絵しかない。こんな風に考えながら決めていきます。

2.イメージスケッチを用いてデザインを画像化

1で描いたイメージスケッチをファイル化（画像化）します。PhotoshopとかFireworksとか使い慣れた画像ファイル作成ツールを使えばいいと思います。ぼくはドット絵なのでペイントでもできちゃいます。

画像化するにあたって、上の写真にもあるようにある程度のフレームワークを考えておきます。横幅は何ピクセルにするのか、サイドバーは何ピクセルなのか、といったところですね。

一昔前は800×600のディスプレイ環境でも見られるよう、800px以下（もしくはリキッド）でデザインするのが当たり前とされていましたが、最近は1000px近い横幅を持つサイトも増えてきました。ケータイもWVGA+(854pxとか)の時代ですしね。

こちらのページに大手のサイトの幅が何pxか調べたものが掲載されているので参考にしてみるとよいでしょう。
今webサイトは幅何pxで製作されているのか | Liquid Paper Clips

この後のコーディング作業の中でもいろいろアイディアが沸いたり、技術的にハードルが高すぎて諦めたりするところも出てくると思うので、完璧な最終形を作らず、大体にしています。

次回は、これをスライスして、コーディング作業に入ります。

このブログで関連すると思われる他の投稿

• おで流WordPressテーマの作り方（2）
• WordCamp 公式サイトに使った7個のプラグインとテーマ
• おで流WordPressテーマの作り方（3）
• Re: あなたのブログは何ブログ？ 2009
• WordBench 川崎勉強会 レポート