趣味Web 小説 2005-09-01

テンプレコン感想の補足解説・2

今回は daniel さんのテンプレートについて。

私は感想集で daniel さんの作品については厳しい評価をしているのですが、じつはこれ、何となく気安かったのでそう書いたという面があります。bisco さんの作品にもちょっとだけアドバイスをしたりしたのですが、実力が高そうな方に対して私が適当に誉めるのも気持ち悪いという感覚があったんですね。ほとんどのテンプレートを誉めている中に厳しいコメントがあると、よっぽどひどいのかと思われたかもしれませんが、そんなことはありません。

さて、私の苦言は、「デザインの磨き上げが足りない」という点に尽きていました。アイデアも技術も申し分なく、他にいいたいことはとくにないのですが、「具体的に例えばどこをどうしたら、完成度が高まるのか」について、いくつか参考になりそうなことを書きたいと思います。ただ、ここしばらくの間に相当あれこれ手が加えられていて、既にかなりカッコよくなっているんですよね。なので、じつはそれほどいいたいことは多くありません。

落ち着いた色調でまとめられた完成度の高いシリーズ。このシリーズ、配色を改善されましたよね? 余白のバランスも非常にいい。ちょっと迷いが見られるのが、各記事の見出し周りでしょうか。

ash と asgard で見出し回りの余白バランスが異なっていますが、縦方向の余白の処理では ash の方が実用的でしょうね。記事と記事との間をきっちり分けたいのであれば、見出しの上に余白を作るよりも、記事の下端に余白を設定する方がうまくいく場合が多いようです。一方、見出しの左端に■マークについては、正直どちらでもいいような気がします。ただ、ash のように微妙に大きな余白だけを設定するのは、少し間が抜けた感じがします。■を入れるか、余白を少し小さくすることで、バランスがとれます。

唯一の難点は、文字サイズを変更すると画面右上で問題が生じること。position で配置する際にも em を使えますので、文字サイズに追従して検索フォームの位置を調整するようにするか、あるいは文字サイズを固定してしまう方がよいという考え方もありえます。IE で文字を「最小」に指定すると読めなくなってしまいますので。

ash 系の幅固定版。色違い(cv シリーズ)が予想以上に素晴らしい出来で、これほどていねいな色指定ができるなら、odin シリーズも、もう少し……。

惜しいのは、幅固定なのでヘッダー部の弱点がより強調されてしまっていること。どんな文字列が並ぶかにもよるのでしょうが、ブログタイトルと「Archive, Category, etc.」がぶつかってしまう。文字サイズを小さくしても検索フォームと重なるわけで、余白の設定や検索フォームの配置など、まだ改善の余地がありそうです。

個性的で楽しいアイデアを無理なくまとめ上げたことは賞賛に値します。パッと見て、すぐにこれがレンタルブログサービスを利用して構築されているウェブサイトだとは気付かないデザインなんて、そうそうあるものではありません。紫に挑戦されたことも素晴らしい。アイデアとしては思いついても、結局、うまくまとまらなくて放棄することになりがち。薄い紫ではなくて濃い紫ですから貴重です。

odin シリーズには3種類ありますが、私がひとつ選ぶなら odin_c です。これが最も完成度が高い。odin と odin_v シリーズが ash 系と比較して明らかに完成度に劣るのは、色数が少ないからです。……なんて書くと混乱されるかもしれませんね。じつは、趣味レベルの配色の考え方は2段階で考えていけばよいのです。まず「白系統の地色に紫のテーマ色を組み合わせる」といった大雑把な計画を立てます。この時点では色数を絞るのが趣味のウェブデザインの定石。次に、実際に色を指定していくわけですが、今度は中間色を積極的に用いていくのがポイントなのです。

odin_c は、地色とテーマ色をきちんと配置した上で、2つの中間色を使っていますよね。全体の背景色の薄いグレー、そして中央の大きな塊の左右端に配された線の色。いずれも微妙に紫系統に見えるのがうまい。もし背景とか左右端の線に青とか赤とかを用いてしまったら、たいへんなのです。全体の色数が増えてしまい、収拾がつかなくなりやすい。あるいは、濃い紫のような「テーマ色に沿ってはいるけれど目立つ色」を使ってしまうことも、多くの困難を招きます。

画面を落ち着いた配色できちんとまとめ上げていくためには、目立たせたいところを目立つ配色にするだけではダメで、目立たせたくないところを地味な配色にすることも必要なのです。だからといって背景色だけでは手駒が足りない。全体的な色数自体を増やすと、色味だけでは主張の強さを判断しづらくなってしまう。調整の苦労が倍加する。こう考えていくと、当然、背景色とテーマ色の中間の色を活用することが必要だとわかってきます。

では odin のどこに中間色を用いればよいのか? 例えば、ヘッダーの下端、フッターの上端にグレーの border を入れてみてください。たった 1px でさえ、デザインが変化しますよ。そして、リンクの色を少しだけグレー寄りに変えてみてください。テーマ色の紫と同じ色にはしない。たったそれだけで、パリパリとした融通の利かない雰囲気や硬さがとれていくものです。

odin_v はカッコよさげな感じなのですが、惜しむらくは表紙において 1024×768 の画面ではスクロールしないとフッタが出てこない。幅固定にしてヘッダとフッタの存在価値を減じている odin_c ではあまり気にならないのですが、odin_v でフッタが1画面内に登場しないのは勿体無いですね。レイアウトのバランスが頭でっかちに見えてしまう。まずサイト名をもう少し小さくできないか。そして5つセルを並べたテーブルの高さをもう少し低くできないか。デザインを上手に圧縮していけば、odin と遜色のないコンパクトなレイアウトも実現できそうなのだが……。

面白いアイデアを、きちんと実体化させたという意味で素晴らしいテンプレートだと思います。デザインもたしかに破綻なくまとまっていますし、悪くはないのです。ただ、私ならもっと色々と手を加えますね。だって、せっかくここまで形を作ったわけですから。もちろん、アイデアをわかりやすく表現することに注力し、人目を引くような装飾は利用者のカスタマイズに任せるというのであれば、それも立派な見識でしょう。

さて、私がこのテンプレートのデザインを見て、一番気になるのは「あまりにも何も無さ過ぎて寂しい」ことです。中心部分の領域は大きさ固定ですよね。であれば、画像を使って装飾することを考えるのが定石だと思うのです。せっかく文字情報を絞り込んだのに、ゴテゴテと装飾するのは変だと思われるかもしれませんけれども、必ずしも重たくしなくてもいいわけです。シンプルな影付の画像を用いて立体感を出す(中央の四角を浮き上がらせるかへこませるか……)だけで全然違います。

あるいは、odin について申し上げた配色の問題は、float にも当てはまります。影をつけて立体感を出す、というアイデアは「中央の四角とグレーの背景の間に中間色で緩衝地帯を設ける」と説明できます。であれば画像ではなく border で同じようなことをしてもいいわけですよね。そしてまた、使っている色が全ておとなしいので、焦点がぼんやりとしている感じです。ピンク色のイラストの部分、ことによるとインパクトのある絵に交換した方がいいかもしれません。

以上です。

Information

注意書き