Liner Note

少し本気でブログのデザインを考えまして、デザインし直してみました、パッチワークでアレコレ変えるよりかは自分でスキンを作るの方が結果的には近い道だろうと思って、やっていたら5日掛かりの仕事になってしまいました（構想を含めれば数ヶ月くらい）

ご覧の通り、シンプルな1ペインデザインです。これについてはあとでまた別に記事を立ててお話しします。

で、この記事ではリデザインの課程をざっくりと画像で振り返ってみようと思います。

イメージスケッチ

始めに、なにはともあれどういうサイトにしたいか画像編集ソフトで適当に描きます。サイトを実際に作った人なら分かるかと思いますが、ここが一番楽しいんですよね

最初に考えたのはこういう2ペインデザイン、この頃はまだサイト名すら決まってません(^_^;)

ただ、このデザインは実際作成段階にはいると、急にやる気を無くしてしまいました。スケッチとしてはアリでも、実際に実行に移せるデザインというのは正直そんなにないんですね。

で、次に考えたのがこういうもの、2ペイン自体に飽きたのか1ペインになってます。割とオーソドックスなデザインだと思います。

これを発展させたのがこのサンプルで最終版、つまり現在のサイトのスケッチです。

このデザインは個人的に一晩寝て起きても見飽きなかったので、実行段階に移すことになりました。

ワイヤフレームに落とす

でもって、これをXHTML+CSSのワイヤーフレームに落としこみます。

まぁ、こういうのは別に公開する訳じゃないので適当にやっても大丈夫なんだけど（ホワイトボードやスケッチブックでもOK）、骨格はしっかり書いておかないと、後でウンウンうなって結局時間の無駄遣いになります。

あと勘の鋭い方はお気づきかもしれませんが、クラス名はゆうさんの我的春秋: 論理構造を文脈に読み換えながら class 名を考えるを参考にしてみました。

スキンを黙々と作成する

で、ここからはソフトをエディタに変えて、こつこつWordPressのスキン作り。といっても、1からやると大変なので、私はSandbox テーマをベースに全てを改造していくことにしました。

で、ここらへんは画像で語りようがないんで言葉になりますが、スキンを作る上でブログって案外、必要な要素が少ないので（最新記事、単体記事、カテゴリ別・時系列の過去記事、コメント・トラックバック部分くらいか）思ったより作業に時間はかからなかったんですけど、単純な分だけどう工夫してみせるかが問われるところですね。

今回もサイトに必要な要素を「プロフィール」「本文」「最新記事一覧」「過去記事一覧」の4つに絞って、別々に管理することにしました。巷ではこれらを組み合わせて2ペインで出すのが主流なのですが、今回はそういうデザインはしませんでした（しつこいようですが、この理由はまた後で）

ナビゲーション部分と実際の記事表示部分はモジュール化して、いろんなファイルで使い回す（include命令で組み込む）ことにしていますので、管理は思ったより楽チンです。

スキン作成にあたっては、デザインをどうコードに落とすか¹ が重要、というかそれが全てなので、WordPress内部で使われているユーザー関数などをある程度わかっておく必要があります。

といっても、わからない関数や欲しい関数があれば、Wptags.comで検索するか、全文GREP検索すればだいたい片が付きます。

CSS書きと表示確認の繰り返し

XHTML部分が終わったらCSSによるデザインに進みます。

まず大枠のフレーム部分をデザインしたら、順にヘッダ→ナビゲーション→記事本文→コメント・トラックバック→フッタ→その他とデザインを進めていきます。

多少デザインの幅は狭まっても、ユーザビリティを考慮し、特定解像度に偏らないサイトにした方がいいだろうということで、今回はリキッドデザインにすることに。

両端のブロックにドロップシャドウを付けようとするとどうしてもdiv要素を2つ付けないといけないので、XHTML的にはちょっぴりアレなのですが、リキッドデザインでは妥協も必要です（妥協ばかりだと後々の保守が面倒になるコードになってしまいますが）

それと、細かい部分でデザインに迷ったら、とりあえずホワイトボードになんか書いてみることにしています。これはコメントの部分について書いたスケッチです。

Mozilla Firefoxで一通り当初のスケッチ通りのデザインができたら、他のブラウザでの表示確認に移ります。ちなみに、私は以下のUserAgentの順番で表示確認→CSS書きをしてます。

1. Mozilla Firefox
2. プリンタ（印刷用CSS）
3. Opera
4. Safari
5. Internet Explorer 6.0
6. Internet Explorer 7.0
7. Another HTML Lint

ええ、つまり、このリストにないブラウザは動作確認をしていないと言うことです。

ところでTwitterでも愚痴りましたが、IE6で初めて作成したページを開くときほど恐ろしい瞬間はありませんよ、一瞬でやる気を失いますから。

以上で今回のリデザインプロセスはおしまい。スキンはまた別記事にて、説明付きで公開する予定です。

Popularity: 3% [?]

1. 例えば検索画面で検索語にマッチした件数をどう表示するかなど[戻る]

キーワード：

• このサイトについて
• ウェブデザイン
• 情報の設計