ナンバー・ナイン

約3年ぶりにこのウェブサイトをリデザインした。Gitの履歴が整理されていないうえ記憶も定かではないが、おそらく9代目のテーマのはず。書体選定やタイポグラフィとグリッドの設計、文書構造などについて解説してみたい。

本文書体は筑紫明朝のLBで、キャプションや小見出しは筑紫ゴシック。明朝体は横画が細いため、書体によってはスクリーンでかすれて読みづらくなってしまうことがある。とくにスマホやタブレットではサブピクセル・レンダリングの特性上、その傾向がより顕著だ。しかしこの筑紫明朝のLBというスタイルは全体的にストロークが太めにデザインされていることもあり、スクリーンにおいても可読性が高いと考え、本文書体として採用した。

本文の文字サイズは17.067px、行送り32pxで、これがページを構成するグリッドの基本単位となっている。各要素の文字サイズは本文を中心に調和数列を構成するよう設計していて、タイトルは本文の5 / 3、中見出しは5 / 4、小見出しとキャプション、フッターなどは5 / 6とした。

これら文字サイズと行送りを決定するにあたっては、まず本文の行送りを32pxとするところから出発している。これは現在のウェブ・デザインにおいて標準的な本文サイズである15pxから18px程度のテクストが読みやすく、かつ垂直方向のグリッドを構築するうえで取り扱いやすい数値として選択した。文字サイズはピクセル単位よりもプロポーションを重視し、行送りの8 / 15とした。その結果が17.067pxという数値である。

これらのサイズはすべてルート要素に対する相対値として指定している。幅の狭い画面ではルートの文字サイズをデフォルトの15 / 16に設定し、全体がひとまわり小さいスケールで表示されるようにした。

行長は最大36字。本文ブロックは左寄せで、6字分のマージン。CSSグリッドを使って、幅がつねに本文サイズの整数倍になるようにしている。段落先頭は2字下げ、ただし先行する段落がなければ字下げなし。リストや引用ブロック、コード・ブロックは全体を2字下げ。body要素上下のマージン8pxをデフォルトのまま残しているのは、Mosaicブラウザーから続く伝統に敬意をはらってのこと――というのはあとから考えた理屈だけれど、半分本気でもある。

ブログ個別ページではtitle要素にサイト名を入れず、記事タイトルのみとした。article要素も廃し、bodyがそのまま記事のルートであるという、シンプルな構成になった。記事をサイトの中の個別ページとするのではなく、それぞれが独立したウェブページであると捉えなおそうと考えた結果である。

画面上端にはサイト名と記事の公開日を小さく配置している。これらの要素はブック・デザインでいうところの柱とノンブルとして捉え、本文に付随してその属性を示すものとして扱っている。書体は本文の等幅書体としても使っているLucasFontsのTheSansMono Condensedで、オールドスタイルの数字がノンブルにふさわしいと考えて採用した。

このあたりの文書構造を再考するにあたっては、Hail2uの「雑記記事からarticle要素を削除」や、ゆうへいの「yuheiy.com-v6」といった記事、およびそれらサイトのソースコードも参考にさせてもらった。

いわゆるダーク・モードにも対応した。明るいテーマでは#ffffffの背景に#1c1d1fのテクスト、暗いテーマでは背景を#1c1d1f、テクストを#dfe1e2としている。暖色系の組み合わせも試してみたものの、最終的には一般的なブラウザーやOSの色味に合わせ、ブルー寄りのグレースケールに落ちついた。

ファビコンも新たにSVGで作り、ボディと同様に色が反転するようにしてみた。

今回のデザインは「自分がブログを読むならこういうデザインで読みたい」という考えを、かなりストレートにそのまま形にしたものと言える。その点ではなかなか満足している。一方でより個人サイトらしいサイトにしたいという狙いもあり、たとえばソーシャル・メディア関連のメタ要素を削除したのもその一環なのだけれど、そのあたりはまた別の機会にあらためて書きたい。