• 2008/08/29 スポンサーサイト ... []
• 2006/04/18 テンプレート改造中 (その6) ... [Blog.テンプレート]
• 2006/03/12 “普通のサイト”っぽいブログ化計画 ... [Blog.テンプレート]
• 2006/03/10 ブログの見やすさを考える (その2) ... [Blog.テンプレート]
• 2006/03/09 目次ができた！ ... [Blog.テンプレート]
• 2006/02/28 今後の課題 ... [Blog.テンプレート]

このタイトルで記事を書くのは約二ヶ月ぶりなのですが、その間も、実はコツコツと (コソコソと？) テンプレートの改良作業を続けていたのでした。

まず、ブラウザの設定で文字サイズを変更できるようになりました。 これ、以前から Firefox や Opera では可能だったんですが、Internet Explorer だけはどうやっても文字サイズを変えられなかったんです。 理由は、フォントサイズを px (ピクセル) 単位で絶対指定していたせいです。 これを相対サイズ指定に変更したので、Internet Explorer の 「表示」→「文字のサイズ」 で文字サイズを変えられるようになりました。

二つ目の改良点は、時計の追加です。 画面上部、メニューバーの右端にデジタル時計が付きました。 目的は、もっぱら自分の夜更かし防止用なのですが、はたしてこんなモンで所期の目的が達成できるものやらどうやら ..... やや不安が残ります。

一方、上記の改良を加えた結果、Internet Explorer で文字サイズを 「中」 以外にするとレイアウトが乱れるようになってしまいました。 これは今回追加した時計が表示されてる部分で特に顕著です。 また、文字サイズを 「最大」 にすると、右側のメニューが画面下部に落っこっちゃいます。 文字サイズを変更してもレイアウトが乱れないようにするのは不可能ではないのですが、少々時間を要するため、これはまた例によって 「将来の課題」 ということでご勘弁下さいませ。

管理人・でん助 拝

WEB デザイナーの あばれ牛 さんが、ブログを普通のサイトっぽくする計画 とやらを始めたらしい。 普通のサイトっぽいブログというのがどんなブログなのかは元記事を読んでもらうのがベストだろうと思うので、ここでその 「計画」 の詳細を記すことは避けておくが、筆者はこの計画に大いに触発された。 主体性がないと言うのか、他人のアイディアに影響されやすいのである(^^;) でも、トップページをカッコ良く作り込むというのは、筆者自身も前からやりたいと思っていたことなのだ。 嘘じゃないぞ！(笑)

実を言うと、筆者は以前からブログを一冊の本のような構成にしたいと思っていた (これも嘘じゃないんだからー！)。 本には表紙が必要である。 だが、ブログにはこの表紙に当たるものがない。 トップページにアクセスすると、そこにはもう本の中身に相当する 「記事 (エントリー)」 がずらずら〜っと羅列されている。 ここんとこが筆者にはなんか気持ち悪いのだ。

しかしブログのトップページを本の表紙のようにするためには、いくつかの問題をクリアする必要がある。 まず第一に、本の表紙のようなカッコいいデザインのページをどうやって作るのかという問題。 自慢じゃないが、筆者はその手のセンスやグラフィックス関係のテクニックを持っていない。 となれば頼みの綱はロイヤリティーフリーの素材集だ。 それで今日はアキバに行って、素材集を片っ端から見て回った。 だが、どうにもイメージに合うものがない。 イメージがヨーロッパの風景なので、こりゃもうヨーロッパまで取材旅行にでも行くしかないような感じである。 誰か旅費を恵んで下さい(^^;)

もうひとつの問題は、トップページにアクセスしてきたユーザを、その先どこにどう誘導するかという問題である。 たとえトップページの見た目はブログっぽくなくしても、普通のブログに慣れた読者をまごつかせるような構成にはしたくない。 カテゴリーから選んでもらうか、新着記事一覧に誘導するか、はたまたカレンダーを用意しておくことにしようか .... これを全部というのはダメだ。 カテゴリーと新着記事の一覧、それにカレンダーまでをトップページに並べたのでは、今のトップページとあまり変わらなくなってしまう。 それじゃ本の表紙みたいにすっきりカッコよくならないので、最初の目的に反してしまう。 何か妙案は .... う〜ん、今のところは思いつかないなぁ。 ぶつぶつ ...

できることなら あばれ牛 さんの先を越して計画を実現させたいのだが、この二つの問題が解決しないと、それもちょっと無理っぽい。 まあ相手 (?) はプロの WEB デザイナーなのだから、そのプロと張り合おうってのがそもそも無理な話だという説もある(^^;) 何かいいアイディアを思いつくまで、当分はこのままチョビチョビとやって行くことにしよう。

さて、FC2ブログランキングに登録してたった8日で1位をGetしたと大喜びしている あばれ牛 さん(笑) のブログにつけたコメント で 「このテーマ (筆者注: ブログの見やすさというテーマ) についてお互いにトラバで繋いで記事を書いていくってのも面白そう」 という話が出まして、でん助としても 「そりゃ面白そうだ」 ってんで、早速のらせていただくことにしました♪ あばれ牛さんの元記事 では、文字の大きさ、そして文字の色 (前景色) と背景色とのコントラストについて検討されていましたので、今回は 「行」 について考えてみたいと思います。 ポイントは二つ。 行の長さと行間スペースです。

まずは例を二つ見ていただきたいと思います。 どちらも夏目漱石の 『吾輩は猫である』 の冒頭部分です。 まずは 【例1】 を、続いて 【例2】 をご覧下さい。

いかがでしょうか？ どちらも文字サイズは 11.5 ポイントで同じですし、文字色と背景色も同じです。 文字サイズにしろ色のコントラストにしろ、そう読みにくいものではないはずなのですが、【例1】 は 【例2】 に比べてずいぶん読みにくいと感じた方が多かったのではないでしょうか。

これら二つの例の違いは一目瞭然ですよね。 一行の長さ、そして行間スペース (行と行との間にあるすき間の高さ) が違っています。 【例1】 では一行が画面の幅いっぱいに広がっていて、行と行との間にスペースはまったくありません。 一方、【例2】 では行の長さを約 40 字程度に抑え、かつ、行間スペースとして一行の高さの約 80% 程度のすき間を設けています。 これだけで文章の読みやすさがこれほど違ってくるわけです。

それでは、一行が長すぎたり行間スペースが十分でなかったりするレイアウトがなぜ読みにくさに繋がるのでしょう。 どうやらこれは心理学的な、あるいは生理学的な理由によるようです。 横書きの文章を読む場合、視線は行の左端から右端へと移動して行きます。 そして、やがて行の右端に達すると、今度は次の行、つまり、ひとつ下の行の左端へジャンプしなければなりません。 このとき一行が長ければ長いほど、視線が右端から左端へ戻るときの距離が大きくなります。 そして、そのとき行間マージンが十分ないと、目が .... と言うか、本来は「脳が」ですね、 脳が「次の行」を見つけるのにちょっとだけ苦労することになるのです。

それは読んでいる人が意識できるほどの苦労ではないのですが、無意識のレベルで脳が感じるこの小さな苦労は、 読む人が次から次へと行をたどっていく度に積み重なっていき、結局は読み手にも 「なんか読みにくいなあ」 とか 「これ読んでるとなんだか疲れるなあ」 という形になって意識されるようになります。

お手元に横書きで版組みされた雑誌か何かがあったら、ここでちょっとそのレイアウトを眺めてみて下さい。 その雑誌の記事レイアウトは二段組が三段組になってはいないでしょうか。 そして、一行に含まれる文字数はせいぜい 20 文字程度で、行と行との間には少なくとも一行の高さの半分程度の空白がありはしませんか？ これらは全て上に書いたような 「次の行頭を探すための脳の疲れ」 を軽減させるためのレイアウトです。 残念ながら、このような文書レイアウトに関する技術では、今でも印刷物の方が WEB ページより優れている場合がほとんどです。 数日前に書いた記事、「ブログで自滅する人々」 の中で紹介した デジタルARENA のページレイアウトも、引用部分以外の本文記事レイアウトは行間スペースがゼロなので、あまり読みやすいとは言えません。 一方、同じ日経 BP の著作物でも、紙を媒体として出版されている雑誌にはこのような読みにくいレイアウトになっているものはありません。

ブログの場合、既存のテンプレートを利用する方が大半だろうと思いますので、行の長さにしろ行間のスペースにしろ、自分で自由にコントロールするのは難しい場合もあるかと思います。 でも、だからこそテンプレートを選ぶとき、色使いや画像のイメージだけでなく、文書のレイアウトが読者にとって読みやすいものになっているかどうかというポイントもチェックしてもらえればと思います。

ででんがでん♪ でん助です .... って、う〜、今日は我ながらなんかノリが変だ(汗)

え〜っと、なんとかカテゴリー別目次の自動生成に成功しました。 例によって JavaScript が有効になってないと機能しませんが ....

照明機能のときと同様に、タイトル画像の下、最新記事のちょい上あたりにあるメニューバーの中に 「ToC」 というメニュー項目があります。 これが目次 (Table of Contents で ToC でごじゃります) へのリンクです。 こいつを Click! してやると、カテゴリー別に分類された記事一覧、すなわち目次が表示される .... はずです(^^;)

一応、Windows XP SP2 上で動作している Internet Explorer 6、FireFox 1.5.0.1、Netscpe 7.1、および Opera 8.52 で動作確認しています。 MacOS は .... Apple 社製品を所有してないのでテストできません(涙) Safari は苦しいかも、です。 あと、IE でも 5.5 より前のバージョンだとかなり不安です。 5.5 でもなんか変になるかも(汗)

ON/OFF 可能な証明を設置したこのブログのテンプレートに関し、niwayoshi さんからコメントを頂いた。 考えさせられる点が .... いや、今後の課題として意に留めておくべき点が少なくないので、「コメントへのコメント」 としてではなく、あらたに記事を書くことにした。

まず、照明 ON のとき背景に表示される画像が蛇のように見えるという点。 この変更は比較的容易である。 単に画像を変えればいいだけなので。 また、照明の ON/OFF をユーザに委ねたのと同じように、背景画像もいくつかの中からユーザが選択可能なようにするということだってできる。 要は時間と手間だけの問題である。

次に横幅の話。 こっちは少々やっかいである。

まず、横幅が前より広くなったのではないかという点に関してだが、答は “Yes and No” である。 まず 「No」 というのは、記事などが並んでいる左カラムと、メニューが並んでいる右カラムとを合わせた幅は変わっていないので 「No」。 しかし、照明機能追加後のページでは、これら左右両カラムの外側に光芒の画像を配置している。 そのため、ページ全体の横幅は確かに変わっているので、答は 「Yes」 でもある。

そして niwayoshi さんの PC では、このブログの記事やメニュー部分を画面の中心に持ってくると左右の照明部分が画面の外側にはみ出して見えなくなってしまい、これでは意味がないということなのだが、確かにそれではせっかくの照明機能も無意味であることは間違いない。 いったい何が悪かったのか、問題の本質はどこにあるのかがポイントである。

答は明々白々で、このブログのテンプレートが 「リキッドデザイン」 になっていないのが原因なのだ。 リキッドデザインとはどんなデザインかというと、ユーザが使っている PC の画面サイズやブラウザウィンドウの大きさによらず、かつ、それらが変更されたり、文字サイズなどが変わったときにもレイアウトが崩れないようなウェブページデザインのことを言う。 リキッドデザインについては Web屋のネタ帳 というサイトに 『横幅を固定するな！ − 後悔しないためのWebデザイン』 という記事があり、これなどが参考になるかと思う。 あるいは Web Create Station の記事 などもいいかもしれない。

いずれにしても、自分の書いたウェブページを人様に見てもらいたい、読んでもらいたいという気持ちが強く、そのためにユーザの利便性を重視するウェブページ作者であれば、まず第一に自分の作るウェブページをリキッドデザインに準じたものにするであろう。 しかも、それはちょっと慣れてコツさえつかめば、そう難しいことではない。 では、なぜ私のページはリキッドデザインになっていないのか。