works:deztec.jp
ブロガー・徳保隆夫さんの「趣味のWebデザイン」をはじめとするサイトのテーマ「green」を制作しました。< /p>
徳保さんは十年近く前から更新を続けている、息の長いブロガーの一人です。AmazonでWeb制作の技術書・ゲームのレビューも多数投稿しています。
はてなブックマークを利用している方だと、子どもの悪事が明らかになったときの対処とか、お父さんとお母さんにドラゴンクエスト9を遊んでもらっての肯定的なレビューを書いた人、というとわかるかもしれません。
欠点を指摘される
五年以上前の話になりますが、FC2ブログで「テンプレートデザインコンテスト」というのがありました。
当時FC2ブログに注目していた徳保さんは、アマチュア向けにWeb制作のアドバイスもしていた関係で、コンテストの全作品レビューを担当しています。
ご本人は覚えてないと思いますが（笑）
そのときの私の作品に対する徳保さんの感想がこれです。
- webbingstudioさんのテンプレートはソースがきれいだし、レイアウトのアイデアもいい。技量もある。配色の調整がうまくなれば鬼に金棒なのですが。
- アイデアは面白い。たしかにしゃきっとした印象はあります。だから成功といってもよいのですが、配色と余白の設定は再考の余地あり。調整不足の印象。
「色のセンスが悪い＋作り込みが足りない」は、当時の私がいちばん気にしていたことです。
趣味で制作をしていると、欠点を指摘されることはなかなかありません。それをできるだけ改善しようと努力するきっかけになったということで、徳保さんには感謝しています。
既存テーマを補う
「相変わらず私自身は「think」がいちばん好きなんだけれども」と仰っている徳保さんが、テーマを外注された理由を考えた結果、やはり「自分とは別の視点で作られた、見た目重視のテーマ」を要望されているのだろうと思いました。
時折閲覧している立場から、これまでのテーマには
- 幅可変テーマは高解像度だと読みにくい
- Vista以降の標準フォント「メイリオ」に対応していない
- 一日分の区切りがつきにくい
という欠点を感じていました。
なので、徳保さんにお伺いした「参考にしてほしいサイト」を元に、これまでのテーマに不足している要素を補うデザインとしました。
余白を大目に取り、ヘッダをコンパクトに抑えたので、スマートフォンでも読みやすいと思います。
当初は室内をテーマにしたラフも描いていたのですが、ブログのファビコンにも使われていて、アーカイブをイメージさせる「恐竜」に意味を持たせたいと思い、今のデザインになっています。
HTMLの制限
通常のCMSでは、本文は平文か、ウィジウィグやWikiによる自動生成HTMLで書かれます。なので対応するCSSもその範疇になります。
それに対し徳保さんは、膨大な情報を扱うためにたくさんのHTML要素を駆使します。
「blockquoteの三重入れ子」とか
「dl>dd>ul>li>blockquote>ol>li>p」とか。
可読性が落ちないよう、できるだけ多くのパターンに対応したつもりです。
また、昔のコンテンツはCMS化されていないので、本文を白く抜くためのdiv要素を加えることができませんでした。
この辺りは見た目とブラウザ間の安定性を重視するということで、文字色を反転する対応で了承をいただきました。
そんなこんなでいろいろと手を入れましたが、今回のお仕事はサイトの一部で行ったパフォーマンスに過ぎません。
コンテンツを訪れる人のうち、数パーセントでも
「お、このテーマ自分向きかも。自分はこれで読もう」
と感じていただければ幸いです。