2020年版テーマ

このサイトでは現在、2020年の春頃にデザインしたスタイルを採用している。近ぢか新しいテーマに差し替える予定なので、今さらではあるけれど、この2020年版デザインの意図などを(思い出せる範囲で)書いておこうと思う。

まず、すべてのテクストは同じ書体、同じ文字サイズ、同じ行送りにするというルールを設定している。書体は筑紫ゴシックのRとB、文字サイズは16pxで、行送りは28px。見出しやキャプションなど、ふつうなら異なる書体や文字サイズを使う要素でも、余白や行揃えなどを工夫することで表現した。これはうまくいっている部分もそうでない部分もあり、たとえば見出しの階層構造なんかはややわかりづらくなってしまったかもしれない。

なぜこんな制限を課すのかといえば、それはこのサイトをウェブ・デザインの実験や修練の場として捉えているためである。とはいえ読みやすさを考慮しないわけではもちろんなく、制限の中でいかに読みやすさを実現するかを意識している(少なくともそのつもり)。

本文の行長は最大36字。本文ブロックは左寄せで、6字分のマージンを持たせている。中央ではなく左寄せの配置にしているのは、ブラウザーのエッジをデザインの要素として取り込むことで、段落や引用ブロックなどの字下げをより際立たせたいという意図がある。

段落の切れ目は空行ではなく字下げで表現している。見出しや図版の直後など、先行する段落がなければ字下げはせず、段落が連続する場合の2つめ以降の先頭行を2字下げるというルールである。下げ幅を1字ではなく2字としているのは、行末が不揃いになりがちだったり、始め括弧類の行頭天つきが実現できなかったりするウェブにおいて、1字下げでは段落の境界として弱いと考えたため。中国語の組版にならったというのもある。

縦方向のグリッドはすべて行送り28pxの整数倍で構成。ヘッダーとタイトルの間やタイトルと本文の間、本文とフッターの間などの余白は、行送りにフィボナッチ数(1、2、3、5……)をかけたものになっている。

フッターの先頭には本文との区切りとして中点(・)を置いた。こういう部分にボーダーや画像ではなく約物を使うのが個人的な好み。ブログをデザインしていると、「記事本文はここで終わりですよ」ということを示すのが意外と難しくて、いつもけっこう悩んでしまう。


ちなみにこういうデザインにしようと思ったのは、たしか印刷博物館の「世界のブックデザイン」展でなんかの本を見て触発されたからだった気がする。