数日前にアクセスした人は気づいていると思われるが、このたび弊サイトをリニューアルした。もともとミニマル志向だった外観にさらに磨きをかけ、タイポグラフィを強調したより整合的なデザイン体系に誂えた。LLMに頼めばどんなに瀟洒で豪華絢爛なWebサイトも小一時間で出来上がる時代に、あえてこのような意匠を整えたのには明確な理由がある。
それはそもそも、世の中には見てくればかりでコンテンツに乏しいWebサイトが多すぎるということだ。なにも別に上等なコンテンツがなければいけないわけではない。その主宰者ないしは組織の内実を表しめるものがあれば、読み手は十分に楽しめる。にもかかわらず、流行りのフレームワークを使っただけの片手で数えるほどしか記事がないプログラマのブログや、制作会社に丸投げしただけの上っ面だけ大層に動くコーポレートサイトが多すぎる。
R3Fで組んだアニメーテッドなサイトでも、HTMLエナジーを標榜する温故知新なサイトでも、まずはコンテンツを作らなければ話にならない。今も昔も、Webサイトでもっとも重要な要素は第一にコンテンツ、第二にコンテンツである。そこで僕は自分自身でそれを体現すべく、コンテンツが存在していなければ決して美しく存在できないデザイン、すなわち文字情報のみのデザイン体系を構築した。弊サイトはフォントの大きさ、ウェイト、階調差によってのみ構成されている。以下に詳細を述べていく。
逆相関のフォントウェイト
弊サイトはbunny.net からNoto Fontsを取得している。案外普通だな？ と思う人もいるかもしれないが、僕の知るかぎり分割ロードに対応していて、豊富なウェイトを持っている多言語フォントはこれだけだ。弊サイトの構成には複数のフォントウェイトが欠かせない。
--w-title: 300; /* 題字・記事タイトル・h2 */
--w-h3: 400; /* h3以下の小見出し */
--w-body: 400; /* 本文 */
--w-meta: 400; /* 投稿日・タグ */
--w-pager: 400; /* ページャ */
--w-footer: 400; /* フッター */
--w-strong: 600; /* 太字(本文中の強調のみ) */
ブログや記事のタイトルと大見出しには300のウェイトを使っている。本文は400、太字は600。目立つ箇所に太字を用いる通常のWebサイトとは異なり、活版印刷の文化に通じる逆相関のタイポグラフィが特徴だ。殊に文芸誌・ファッション雑誌の文脈では、大きいフォントはそれ単体で視覚的階層を有していると考えられ、そこに太字を重ねるのは二重強調となり静謐ではないとの意識がある。
弊サイトはWebサイトでありながら懐古的な読書体験――なんの気なしに買った文芸誌の片隅に載っている、風変わりだがそこそこ読ませる記事――を目指しているため、このようなデザイン体系は自己認識と一致するところであった。以前も概ね同じフォントウェイトを採用していたが、微調整を経て歴史的な裏付けを得た格好となる。
フォントの抑揚
弊サイトは本文・タグ・投稿日の主要な集合においてフォントサイズの比率が1.246、音楽比でいうところの長三度(1.25)の近似値を採用している。これはモジュラースケール理論と呼ばれるデザイン手法であり、一定の数学的比率に基づいてフォントサイズの寸法を段階的に決定する。聴覚的に心地よい比率は視覚的にも応用できるとの考え方で、有名な黄金比(1.618)に加えて短三度(1.2)、長三度(1.25)、完全四度(1.333)などが存在している。
もっとも長三度の近似値を採用したのは意図的ではなく、実装の過程で結果的にこの値に漸進していった形が実態に近い。最後の最後で当該理論の詳細を知ったが、図らずもデザイン手法上のセオリーに基づく値を得たことで設計面の秩序を手にしたと言える。今後、別の箇所で調整をする際もまずはこれらの比率から試していけば納得できる見込みが高いからだ。
たとえば、まさにこのアプローチがOGP用のレイアウト(後述)で活かされている。Webサイトより小さく表示される場合が多いOGP画像では、実サイトと同じフォントサイズだと投稿日とタグ部分の可視性が芳しくなかった。かといって記事タイトルを大きくして比率を保つと、今度は投稿日とタグ部分が目立ちすぎてしまう。
そこで記事タイトル部分を基準にブログタイトル、それから投稿日とタグの順に、長三度(1.25)ではなく完全四度(1.333)の比率で調整したところ、納得のいくバランスが得られた。このように、以前は曖昧だったフォントの抑揚に理論的根拠を導入したことで、より一層に強固な体系を獲得できた。
class Parser:
"""Tokenize and evaluate simple expressions."""
def __init__(self, source):
self.tokens = tokenize(source) # cached for repeated use
def evaluate(self):
if not self.tokens:
return None
return sum(int(t) for t in self.tokens)
また、これまでは既存のハイライトカラーを使い回していたコードブロック部分も、常体・斜体・太字と階調差のみで完全モノトーンのハイライトを実現している。あたかもコンピュータ黎明期のモノクロ印刷を思わせる様式だが、意外にもこれで8通りのパターンを持っており、他のハイライトカラーと比べても遜色ない表現力を備えている。
OGP画像の動的生成
従来はfaviconでOGP画像を代用していたが、せっかくCIも自前で用意しているのでなにかしらの文脈を持った画像を動的に生成したいと考えていた。もちろん特に派手な代物ではなく、ブログタイトル、投稿日、タグ、記事タイトルが表示できれば差し支えない。仕組みは以下の通りとなる。
まず、Hugo(弊サイトが使用している静的サイトジェネレータ)のカスタム出力フォーマットを表示させたい項目に追加し、専用のHTML(ogcard.html)を各ページに生成する。この中身は実サイトの上部分(ブログタイトル、投稿日、タグ、記事タイトル)を切り取った形をしており、基本的には本体と同じcssファイルを参照しているが、OGP画像用に各部位のフォントサイズは大きく調整されている。
次に、CIサーバ上でビルドステップが開始されるとchromiumパッケージが導入され、画像撮影用のスクリプトが起動する。スクリプトは静的サイトジェネレータでビルドされた各記事をローカル配信し、ogcard.htmlを見つけるごとに1200✕630のスクリーンショットを撮る。全ページ分の画像を撮り終えると、不要となったogcard.htmlは削除される。
万が一、スクリーンショットの撮影に失敗した場合は、あらかじめ用意した静的フォールバック画像(トップページ用のOGP画像を個別に保存しておいたもの)をコピーして処理を継続しつつ、スクリプト自体は完走させて後からエラーを報告する。最後にちょっとした小技として、生成したPNGファイルの角1ピクセルだけアルファ値を99%に落としている。これはTwitter/Xが不透明なPNGをJPEGに再エンコードして画質を劣化させる処理を防ぐための工程である。
なお、OGP用のフォントはビルド時に都度bunny.net へアクセスして読み込んでいる。実サイトと同じ方式を維持することで見た目の再現度を向上させている。一連の動的生成と引き換えにビルド時間が5分程度伸びてしまうものの、総合的には納得のいく外観を表現できたと思う。実際に見て気づいたが、OGP画像はただの情報ではなくWebサイトの意匠を予告するセルフブランディングでもある。広く衆目に晒している以上は自己演出に手間をかけて損はない。
faviconの刷新
以前はピンクの背景に三次関数と接線が交差する図案をfaviconにしていたが、Webサイトに合わせてモノトーンのよりミニマルな意匠に刷新した。具体的には、三次関数が点対称となるように調整しつつ句点を曲線の変曲点に配置している。基準の数式は中心を原点とした奇関数 $y = ax^3 + bx$。なぜか昔から見ていると心が安らぐ曲線だ。
このデザインには曲線を縁取りの内側で留めず、あえて接することで領域の極限まで線が続いているかのように印象づける狙いがある。曲線の見た目は独立した2つのパラメータで制御しており、山と谷の中心からの水平距離とそれぞれの深度をもとに設計した。
配信するfaviconは背景を透明化した上で、SVG内部に<style>と@media (prefers-color-scheme: dark)を埋め込み、線の色をライトテーマでは黒基調、ダークテーマでは白基調に切り替えている。これにより単一のSVGで良好な視認性を確保できる。SVGに対応していない環境では白背景に黒基調のフォールバック用のfaviconが表示される。
また、Androidは円形など任意の形にアイコンをマスクする仕組み(アダプティブアイコン)を持っているため、このような意匠では不本意な切り取られ方をされてしまう懸念がある。そこで、全体を縮小して四角い縁取りを円形に変えた特殊版も用意した。この画像ファイルはsite.webmanifestでpurpose: "any"/purpose: "maskable"として通常版と並置し、端末側が適切な方を選択できる。どれもWeb制作では標準的な手続きだが、個人サイトでやると迫力が出てくる。
終わりに
記憶が正しければ5、6年ぶりのリニューアルとなる。自分の場所が説明可能な形で象られているというのは、時に実用性を超えた力強さを持つ。それはコンテンツを作る際のモチベーションであったり、あるいは読む側に単なる情報以上のなにかを与えるきっかけであったりするかもしれない。インターネットは情報収集の場のみならず、依然として飽くなき自己表現の場でもあると僕は信じている。
ちなみに、フォントは下のフッターリンクからゴシックにも変えられる。サイズとウェイトはどちらも同じだが階調には微調整が加えられている。最後に切り替えた設定がLocalStorageに保存される仕組みなので好きな方を選ぶといい。ついでにバナー画像 も新しく作った。弊サイトは15年前の開設当初から特にこだわりなくリンクフリーである。