今回の「おでげーと」リニューアルにあたってSandbox をベースにデザインをしてみました。
配布されているテーマファイルをthemes フォルダに入れるだけで様々なデザインを楽しめるのがWordPress の醍醐味ではあるのですが、できることなら世界に一つしかない自分のサイトなのだから、自らデザインしてもっとWordPress を楽しんで欲しいと思います。
その一助になることを願って、今回のリニューアルにあたって僕が行ったテーマ作成の流れをまとめてみました。
（WordPress と銘打ってはいますが、通常のサイトデザイン/作成の流れとしてみてもらってもいいかもしれません。）
1.テーマのイメージスケッチを書く
サイトでもっとも訴えたいのは何か、どういうサイトにしたいのか、（クライアントから依頼されたサイトであれば）クライアントのイメージはどのようか、というようなことを考えながらイメージスケッチを描きます。思うままにがりがり書きます。
ニュース系サイトなら情報が詰まって見えるようにとか、学校のサイトなら白基調の明るいサイトで。黒ベースにすると裏サイトになっちゃいます。
この段階でいくつものステキなデザインが沸き、いくつも消えていきます。
個人サイトのデザインであれば、この段階は自分の好きなデザインでいいわけです。絵の得意な人は絵を、写真の得意な人は写真を、猫の好きな人は猫をフィーチャーしてデザインできるでしょう。
僕の好きなものはなんだろう？他のサイトと自分のサイトを分け隔てられるものは？そう、ドット絵しかない。こんな風に考えながら決めていきます。
2.イメージスケッチを用いてデザインを画像化
1で描いたイメージスケッチをファイル化（画像化）します。PhotoshopとかFireworksとか使い慣れた画像ファイル作成ツールを使えばいいと思います。ぼくはドット絵なのでペイントでもできちゃいます。
画像化するにあたって、上の写真にもあるようにある程度のフレームワークを考えておきます。横幅は何ピクセルにするのか、サイドバーは何ピクセルなのか、といったところですね。
一昔前は800×600のディスプレイ環境でも見られるよう、800px以下（もしくはリキッド）でデザインするのが当たり前とされていましたが、最近は1000px近い横幅を持つサイトも増えてきました。ケータイもWVGA+(854pxとか)の時代ですしね。
こちらのページに大手のサイトの幅が何pxか調べたものが掲載されているので参考にしてみるとよいでしょう。
今webサイトは幅何pxで製作されているのか | Liquid Paper Clips
この後のコーディング作業の中でもいろいろアイディアが沸いたり、技術的にハードルが高すぎて諦めたりするところも出てくると思うので、完璧な最終形を作らず、大体にしています。
次回は、これをスライスして、コーディング作業に入ります。
このブログで関連すると思われる他の投稿
ちょうどやろうとしてたとこ！
＞猫の好きな人は猫をフィーチャーしてデザインできる
ブログ中を埋め尽くすミロちゃんの姿を想像して、思わず(*´Д`)ハァハァしてしまいました(*´Д`)
私もSandboxでミロちゃんオリジナルテーマを目指してみたのですが、難関過ぎたので、結局別のテーマのCSSを弄ったり、ヘッダー画像を作ったりしてごまかしてしまいました（；´Д｀）
＞いつきさん
Sandboxいじってみると、いろんな工夫が施してあるので、いろんなアイディアを実現できるテーマだと思いますよー。
みんなも最後まで完成させられるような手引書にできるようがんばりますｗ
わかりやすいです。参考になりました!
配布されているテーマファイルをthemes フォルダに入れるだけで様々なデザインを楽しめるのがWordPress の醍醐味ではあるのですが、できることなら世界に一つしかない自分のサイトなのだから、自らデザインしてもっとWordPress を楽しんで欲しいと思います。
Sandboxベースのテーマカスタマイズ
デザインのあたりから解説している/sandbox
wordpressテーマの作り方
これ参考
見てるぅ＞ おで流（俺流）WordPress テーマの作り方（１） – Odysseygate.com – http://bit.ly/1mt6tI
ピンバック: WorldPressとCMS « TAKI's NOTE
@fluffymeow wordpress使うと一瞬でブログシステム作った気になるっしょ？まずはテンプレート（デザイン）のカスタマイズをしてみましょう！http://www.odysseygate.com/archives/856
WPのテーマ作り。http://bit.ly/3Bq8w6とhttp://bit.ly/xHIpで概略をつかむ。
WPのテーマ作り。http://bit.ly/3Bq8w6 とhttp://bit.ly/xHIpで概略をつかむ。
WPのテーマ作り。http://bit.ly/3Bq8w6 とhttp://bit.ly/xHIp で概略をつかむ。
テーマ／テンプレート作成
おで流（俺流）WordPress テーマの作り方（１）
おで流(俺流)WordPress テーマの作り方(1) | Odysseygate.com http://bit.ly/bv1Ivo
世界に一つしかない自分のサイトなのだから、自らデザインしてもっとWordPress を楽しんで欲しいと思います。その一助になることを願って、今回のリニューアルにあたって僕が行ったテーマ作成の流れをまとめてみました。