文書デザインの考え方を紹介する本
今年、付きまとっている @ymotongpoo が読んでると聞いて、ノンデザイナーズ・デザインブックを再読しました。プログラミングでいうところの、デザインパターンとも言うべきプラクティスが解説されています。この本自体は以前から持っていましたが、流し読みしただけで、実践したことはありません。使う機会がなかったのと、この本がパターンのカタログであると捉えていなかったからです。
再読したので、忘れないうちの実践として、このブログのデザインを変更しました。Blogger.com に最初から入っている「シンプル」というテーマをベースに、CSS だけを変えました。HTML は触っていません。
整列、近接、反復
あなたは文字揃えの扱いに慣れてきました。しかしいっそうの訓練を積むまでは、 1ページに1種類の文字揃えだけを使うようにしてください。つまりすべての文字列を、左揃えか、右揃えか、中央揃えかのどれか一つにするのです。
もとのデザインではタイトル、エントリのタイトル、本文が揃っていませんでした。そこで、これらの左端を揃えました。
右のカラムは元々揃っていたので、そのままです。
もし関連する項目がいくつかあるなら、それを近接させてグループにしましょう。直接的な関連をもたない項目は離しましょう。
ブログの論理的な構成は、以下のようになっています。
- ヘッダ
- 記事群
- 記事
- 日付
- 題名
- 本文
- セクション
- [セクションタイトル]
- 文章
これまではセクションタイトルのフォントが小さくて、セクションを認識しづらい見栄えでした。大きくすると、まとまりが見えるようになりました。
反復は、一貫性をさらに強化したものです。約物、書体、線、色など、あなたがす でに繰り返し使っている要素を見つけて、そのうちの一つを強調して反復の要素と して使えないか考えてみましょう
ブログの場合、似た構成要素が反復するつくりになっています。絵や文章を配置するのではなく、文書構造にスタイルを適用しているので、自動的に反復が適用できます。
コントラストが課題
コントラストは、染みを隠すために壁を塗るのに似たところかあります。染みの上に塗る色が周りの色とだいたい同じではだめで、正確に同じ色にするか、それが不可能なら壁全体を塗り直すしかないのです。
今回の作業ではコントラストを活用できていません。タイトルを目立たせていないため、全体的にメリハリがないのです。
広告なんかだと、読む気がなかった人に強制的に提示するので、タイトルが目立つことは重要かも知れません。このブログへの流入は、リンクか検索エンジンからのほとんどです。ブログのタイトルが目立ったから読む、という因果関係はまず成立しないでしょう。かといって本文との差がないと構造が分かりにくいものです。そんなわけで、ヘッダ部分はフォントを大きく、色を薄くしました。
そもそもブログ名が悪いのかも知れません。見栄えではなくて、コンテンツの問題なので、今回は保留。
また、色のセンスがないのでモノトーンにしていますが、本当は色を使わないほうが難しいはずです。marippe の「色彩センスのいらない配色講座」や、フルカラー新装増補版が助けになるのだと思います。
問題解決のフレームワーク
実践してみたところ、かなりマシになりました。特に整列の効果は絶大です。インデントが好きで Python を使っているのに、もっと早く気づかなかったのが不思議なくらいです。これまで、漠然と気に入らないなあ、と感じていたことに対して、体系的に問題と解決を捉えられるようになったのが最大の収穫です。
