おで流(俺流)WordPress テーマの作り方(1)

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

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

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

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

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

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

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

沸いては消えていくイメージたち

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

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

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

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

1で書いたイメージスケッチ

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

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

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

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

 最終形の8割くらいを画像化

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

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

3 thoughts on “おで流(俺流)WordPress テーマの作り方(1)

  1. >猫の好きな人は猫をフィーチャーしてデザインできる

    ブログ中を埋め尽くすミロちゃんの姿を想像して、思わず(*´Д`)ハァハァしてしまいました(*´Д`)

    私もSandboxでミロちゃんオリジナルテーマを目指してみたのですが、難関過ぎたので、結局別のテーマのCSSを弄ったり、ヘッダー画像を作ったりしてごまかしてしまいました(;´Д`)

  2. >いつきさん
    Sandboxいじってみると、いろんな工夫が施してあるので、いろんなアイディアを実現できるテーマだと思いますよー。

    みんなも最後まで完成させられるような手引書にできるようがんばりますw

  3. ピンバック: WorldPressとCMS « TAKI's NOTE

フォームは コメントしてほしそうに こちらを見ている……!

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください