個人サイトは、クライアントが自分で、締め切りが「楽しくなったら終わり」である唯一のプロジェクトだ。それが喜びでもあり罠でもある。「そのセリフ体で十分」と言ってくれるプロダクトマネージャーはいない。午前一時に、ダッシュと引用符の間隔がまだ少し違う気がする、という感覚だけがある。
このバージョンの前に三回作り直した。今回のは、謝らずに人に見せられる最初のものだ。
まず制約
私が関わった良いプロジェクトは、誰かが尊重すると決めた制約から始まっている。このサイトの制約はこうだ。
- 段はひとつ、34rem。約 544 ピクセル、一行 62 から 68 文字。
- 書体は二つと等幅がひとつ。例外なし。
- テンプレートなし、テーマなし、サイトビルダーなし。すべての矩形は意図的。
- 静的 HTML、JavaScript の予算はおよそ 100KB、ファーストビューに画像なし。
- アクセントカラーはひとつ。意味が残るくらい控えめに。
制約は制限ではない。一万の決定を先に済ませて、本当に大事な一つに注意を払うための方法だ。
タイポグラフィがほとんどの仕事をする
書くためのサイトでは、インターフェースは文字そのものだ。ほかのほとんどは測定だ。
本文はセリフ体、1.0625rem、行間 1.78。段は 34rem。この幅で行が長く感じられず、ノートパソコンで段が細くも見えない。見出しは字間を少し詰め、メタ情報は緩めてサンセリフにする。日付や読了時間は文章ではなくラベルだからだ。
.prose {
font-family: var(--font-serif);
font-size: 1.0625rem;
line-height: 1.78;
hanging-punctuation: first last;
}最後の一行は見た目より働く。ぶら下げ約物は、行頭の引用符や行末のカンマを段の外に吊るす。文字を内側に押し込まないので、段落の左端はきれいな垂直線として読める。対応しているブラウザはまだ一部だ。対応していないブラウザは普通に描画する。これ以上ないほど良いプログレッシブエンハンスメントの定義だろう。
区切り線にも不合理なほど時間を使った。インク十パーセントのヘアライン。十八ではない。十八では、隔てるべき文字と競争してしまう。
パフォーマンス予算はデザインの決定
速さは、デザインが終わったあとにやってくるエンジニアリングの問題ではない。そのものの感触の一部であり、訪問者が最初に体験することだ。
自分に課したルール。クライアントサイドフレームワークなし、第三者フォントなし、最初の描画を阻む分析スクリプトなし、説明する文字より大きい画像なし。サイト全体は HTML と少しの CSS にコンパイルされ、テーマ切り替えと読書進捗バーのために数十行の JavaScript が付く。
読書進捗バーはページ上部の 2 ピクセルのアクセントカラーで、スクロール位置に応じて伸びる。要素ひとつ、プロパティひとつ、十数行。ページ上で唯一省略できない動きであり、私が守るために戦う唯一の装飾だ。
ダークモードはライトモードの反転ではない。ライトは暖かい紙とインク、ダークは常緑色と柔らかなオフホワイト。暗い背景に純白の文字を置くと震えるからだ。アクセントは各テーマで選び直す必要がある。トークンはそれを可能にする。
なぜ六言語か
サイトは英語、中国語、日本語、スペイン語、フランス語、ドイツ語で書かれている。成長戦略ではない。誰に読んでほしいか、だ。上海の家族、東京の友人、時差をまたいで積み重ねてきたクライアントと協働者。
別の言語で書くことは翻訳ではない。同じ考えに対する、より下手な書き手による、別の直感での二度目の試みだ。英語で書き、中国語で新しい文章として書き直し、日本語でもう一度やる。良くなる文もあれば、失われる文もある。まだその言語になっていない記事には、静かな注記を添える。あるふりをするより、正直なほうがいい。
このサイトは何のためか
リード獲得のためでも、個人ブランドのためでもない。何かを丁寧に考えたいときに訪れる庭であり、手でものを作り続けるための口実だ。
自分が所有するサイトのいちばん良いところは、公の場で不完全でいられることだ。火曜日に段の幅を変えていい。少し間違っている一文を、まだ信じているから残していい。誰もそれをレビューには出さない。
サイトはまた変わる。自分で作るというのは、そういうことだ。
34rem は出発点であって法律ではない。一行およそ 62 文字で目は楽になる。50 を切ると途切れ途切れに感じ、80 を超えると次の行に戻ることが小さな決断になる。今日ひとつだけ数を決めるなら、これだ。