Waviaei Design ver.2

IE対策でちょっとてこずりましたが、なんとか完成。以前のデザインは「0.5くらい」って言ってましたが、あれはもうver.1にします（笑）。それで今回は「Waviaei Design ver.2」とします。一応サブタイトルは「Midori」。そのまんまやんけっ！、と突っ込まれてもおかしくないくらい、なんのひねりもありません。

今回のデザイン、レイアウト、そして色に関するインスピレーションのネタなどを少し書いてみようと思います。

デザインのインスピレーション

Waviaei Design ver.1を作成した時、シンプルだけど「和」を感じさせるデザインを目指しました。けれども、出来上がったデザインは「和」っぽい部品をゴテゴテと並べただけに成ってしまった、と今は思ってます。レイアウトはシンプルに出来ましたが、バランスが悪いと言うかなんと言うか、要は自分が下手だっただけですけどね。ちなみに最近、ああいう東洋の墨っぽい画像をデジタル（パソコン）で作るのは非常に難しいと知りました。デザイナーの技量もあるけど、そういうソフトウェアを開発するのは技術的に難しいらしい。

少し話しがそれましたが、今回「和」を感じさせるデザインのインスピレーションと成ったのが、以前にも書いたCSS Reboot 2006で目に留まったBureauBlumenbergとkogakure.deです。全体的にはシンプルで綺麗なグッド・デザインですが、ロゴやバックグラウンド画像などに「和」を感じる。それらをさりげなく、ワンポイント的に使う事で全体的に「和」っぽい雰囲気をかもし出している。（と個人的にはおもうのですが、どうでしょうか？）

事実、両サイトとも日本にインスピレーションを得、それを目指したデザインにしたとそれぞれコメントしてくれました。

そこでまずベースとなるデザインには一切「和」を入れませんでした。ロゴとかワンポイント画像で「和」の雰囲気を作ろうと…　でもやはり難しいですね。ご覧のとおりそれらしき画像はまだ入れていません。BureauBlumenbergのYoram氏はロゴ・デザインを日本の家紋風にしたそうで、「自分の家紋を使ってみては？」と言われて、「それは良い考えだ！」と思い色々スケッチしてるんですが、もう一つしっくりきません。一応いまは仮と言う事で「Neverwinter」と言うフォント（URL忘れた:oops:）でサイト名をそのままロゴとして使っています。あっ、でもこのフォント自体は気に入ってますよ。RPGのPCゲームでは最高傑作の１つ、「Neverwinter Nights」のパッケージフォントですが、古い時代のはねつきペン（？）で書かれた感じは最高です。

さりげなく使うワンポイント画像についても、追い追い探します。最近WordPress用（まだベータ）も作られた、Typo用のテーマ「Origami」は参考になりますね。

レイアウトのインスピレーション

前回はシンプルにと思い、wrapperで全体を囲み、中央に揃えて、左にサイドバーにしてました。でも使っているうちに、記事の情報（日付、タグ、カテゴリ、などなど）は左か右にまとめて表示した方が便利だなぁと感じてきました。それから、記事を個別に表示させた時にサイドバーに最近のコメントやカテゴリのリスト、月別のリストもいらない。記事とは関係ないし、邪魔になるだけ。そこで、以前使っていたHemingwayのテーマを再度見直し、Ordered Listあたりも参考にして今のレイアウトになりました。

アクセス解析を見ているとほとんどの方が1024×768以上の解像度だったので、思い切って横幅をワイドにとりました。具体的には、960pxにしてあります。なぜこんな中途半端な数字かと言うと、960は3でも4でも割り切れるのです。

• 960/3 = 320
• 960/4 = 240

ちょうどグリッド・デザイン・システムを取り入れようとおもっていたので「おっこれはちょうど良い」と思ったわけです。その時はまだ記事の個別表示ページ以外は３分割にしようか、４分割にしようかと迷っていたのもあります。最終的にはほとんど３分割になったのですが。

色のインスピレーション

デザインのインスピレーションでも上げたBureauBlumenbergですが、もう１つ気づかされたことがあります。それは色です。具体的には赤色なんですが、彩度が落としてあります。日本の色と言うのは彩度が強くないそうで、それは自然界の色と共通する特徴だとか。そのような色をさがしていたところ、目に留まったのがこのＣＭです。あの緑に惹かれました。小雪さんが着ている着物の色とのコントラストも。

壁紙がダウンロードできたので、画像から色パレットを作成してくれるオンラインのサービス、Color Palette Generatorを使って幾つかのパレットを作成。そこからひっぱってきた色でサイト全体を作成しました。今回初めて知ったのですが、緑色と言うのはウェブ上では非常に使いにくい色だそうで、事実コントラストを十分付けられる文字色を探すのに苦労しました。背景が彩度を落とした緑色は、最適な文字色が白色か、それに近い色に限られてしまうのです。特に通常の文字を白系色とすると、リンクをどうするかが問題で、使用している黄土色っぽい色は実際にColor Palette Generatorからはじき出された数値よりもわざと彩度を上げています。

ワンポイント画像ではうまくいきませんでしたが、色についてはそこそこ思い通りになった気がします。ちなみに記事本文の部分は、やはり白地に黒の方が見やすいと思うので、そうしてます。

どうでしょうか？問題点なんかも指摘して頂くと嬉しいです。