今は 2026 年。自分のブログを初めて作ろうとした頃から、どうやら 13 年ほど経ったらしい。
そしてまた、我慢できずに自分のブログを作り直した。
名前は ImI。
ImI が何なのか、そしてなぜ二つの i がどちらも大文字なのかは、中国語の流行語「何意味（nani-imi）」みたいに、意味がないのかもしれない。
あるいは、AI の創造力が爆発しているこの時代に、自分のための意味を少し残しておきたかったのかもしれない。
Hmm…… Astro
技術選定は、全体としてはとてもシンプルだった。
僕はかなり早い時期にブログを Astro へ移していたし、友人の Astro ブログテーマ作りを手伝ったこともある。Astro については多少理解しているつもりだったので、今回のリビルドも当然 Astro……なのか？
最終的な答えは Yes 🙂↕️
ただ、一時期は Waku を土台にして作ろうともしていた。ついでに Waku へ PR まで出した。
理由は単純だ。React 開発者として、自分のサイトや記事の中に、もう少し面白いコンポーネントや要素を置きたかった。React のエコシステムにも慣れている。
Base UI が好きだ。もっと正確に言うなら COSS が好きなのだと思う。どちらも React 向けのコンポーネントライブラリしか出していない。
Astro でも React コンポーネントはもちろん使える。でも自分のプロジェクトだからこそ、技術選定にも少し優雅さがほしかった。
そしてその構成は、自分にはまだ重すぎた。
Waku はまだ成熟しているとは言いにくく、特に SSR まわりは現在のバージョン番号からもその雰囲気が伝わる。さらに痛かったのは Content Collection がないこと。
代替品は多いが、完成度と更新の活発さで見ると、Astro のファーストパーティサポートはやはり強すぎる。ここで Fuma Nama の Fumadocs MDX も一応触れておきたい。かなり良い。
結局、Waku 上であれこれ触って疲れ果て、最後は Astro の腕の中へ戻った。
十分に軽く、十分に慣れていて、コンテンツ中心だけれどたまに変なコンポーネントも入れたい個人サイトにはちょうどいい。
色、フォント、そして CJK
自分では Design Engineer を名乗っているので、このサイトにもできるだけ品味が出るように、かなり気を使った。
もちろん、品味というものは危険でもある。
頭の中では「かなり上品なアイデアがある」と思っていても、出来上がると無料テンプレートのダーク版みたいになることがある。
少しだけ魔法を
Vesper を見つけてから、その Palette が大好きになり、日常で使うほとんどのプログラムに取り入れていた。
だからこのサイトのダークテーマでも、自然とそれを参考にした。
大きな余白、基本的なコンテンツ階層、そして装飾としてだけ現れるアクセントカラー。これらもかなりの部分で Vesper から影響を受けている。
ライトテーマのインスピレーションは、僕をその世界へ引き込んだ作品『ゼロの使い魔』のルイズのピンク髪から来ている。
ついでに言うと、今の Avatar も AI で魔改造したルイズだ。原作の神韻は少し失われたけれど、かなり気に入っている。
買える、買いたい、でも買えない
Aperçu、どうしてこんなに綺麗なの 😭
でも価格もあまりに美しくない！（単体ウェイトで $60、全部買うと $768。しかも Webfont の価格はまだ別。）
仕方なく次善を探した結果、Hanken Grotesk が自分の好みに合っていて、しかも無料だった。最高。
Monospace には Calling Code を選んだ。とても好きだ。読み心地がかなり良くて、一時は本文フォントにしたいと思ったほどで、そのためにライセンスも購入した。
CJK フォントについては、第一候補が MiSans だった。
僕は米粉ではないし、Mijia 以外の Xiaomi 関連製品を買ったこともない。それでもこのフォントには良い印象が残っている。
こういう選択は、ときどき「適当にフォントを選んだだけ」に見える。でも中国語サイトにとって、フォントは読書体験の底触りをほとんど決めてしまう。
英語の組版は成熟したフォント、スペーシング、改行経験に頼れる部分が多い。一方で中国語は、Web のデフォルト値に引っ張られるとすぐ崩れる。特に中英混在では、少し油断するとページが詰まり、ばらばらになる。
だからフォントには少し余計に時間をかけたい。
まあ、優柔不断なんです
CJK フォントの話をすると、このサイトの i18n 方案にも自然につながる。
完璧ではない。むしろ少しひどいと言ってもいい。
URL に /zh のような prefix や suffix を入れるのがとても嫌いなので、このサイトはブラウザの既定言語を読んで表示言語を自動調整する。
すると問題がいくつも出てくる。
まず sitemap には安定して一つの言語のリンクしか載せられない。次に OG 画像、canonical URL、RSS など、機械向けのものも、言語パスがない状態では完全に明快にはしづらい。
僕のブログ記事はほとんど中国語で書いているので、やはり中国語を主要言語として扱っている。
さらに面白いのは、サイトを作るときに UI 文言の多くを先に英語で書き、そのあと中国語へ戻して翻訳したことだ。そのせいで、一部の中国語は妙に晦渋に読める。
これは特色だと自分を慰め、少しずつ自分をだまして受け入れた。
今のところ、このサイトは中日英の三言語だけをサポートしている。僕が扱える三つの言語でもある。日本語はまだ勉強中……
三つの言語は同じルートと同じコンテンツ構造を共有しつつ、フォント、改行、文言ではそれぞれの処理を残している。
最も正しい i18n 方案とは限らないが、少なくとも自分が維持したいと思える方案だ。
自分を満足させよう
僕はかなり長く RSS を使っている。そのおかげで、多くの優れたデザインを見ることができた。
純粋な敬意から、厚かましくも多くの巨匠たちのアイデアを借りた。
まず Emil Kowalski。最初に彼を知ったのは Sonner からだった。これは後に shadcn/ui に入った、とても優雅な toast コンポーネントだ。彼の Animations on Web も素晴らしいコースだ。
このブログの全体的な視覚は、かなりの部分で彼の個人サイトから影響を受けている。
次に Josh Comeau。React、CSS、アニメーションを中心に、価値ある記事をたくさん書いているフロントエンドの専門家だ。彼もこのサイトにいろいろな小さな仕掛けを入れるきっかけになった。
僕は彼のブログの忠実な読者で、今年は正式に Whimsical Animations のコースも購入した。
Rauno Freiberg は巨匠だ。僕の中では、彼はデザインとエンジニアリングの境界を超えている。
このブログのレイアウトは、最初はほとんど彼の Web Interface Guidelines を土台にして作った。改良していくうちに、だんだん原型は見えにくくなったけれど。
Jakub Krehel の優雅な個人サイトにも、多くのインスピレーションをもらった。
ああ、この記事を書きながらまた彼のサイトを訪れたら、また新しいアイデアが湧いてきた。これは本当に「that’s good work」に値する。
自分のブログを進めている途中で、Jace の portfolio が X のタイムラインに流れてきた。
精密すぎた。
それも大きな刺激と動機になった。このサイトの underline が丸みのあるスタイルなのも、彼からの影響だ。
もしかすると、もう気づいているかもしれない。このブログのスクロールバーはブラウザの標準スタイルを継承していない。
そう、ずっとカスタムスクロールバーを作りたいと思っていた。螺莉莉 の記事「一根上流滚动条的诞生」は読む価値がとてもある。
彼のサイトから模倣して、自分のバージョンを復刻した。比べるとそこまで上流ではないかもしれないが、下流には落ちないでほしい。
優雅、かわいい、そして……細部！
サイトを「まあまあ良い」から「満足した」へ押し上げるのは、多くの場合、大きな機能ではない。
説明しづらく、紙の上では少し割に合わないような、小さな細部だ。
たとえば MiSans と Hanken Grotesk の字重は揃っていない。同じ font-weight でも、MiSans は Hanken Grotesk より視覚的に少し太く見える。
幸い、どちらにも可変フォントがある。最も直接的な方法は font-variation-settings で調整することだ。
しかしこの方法は Safari では 効かない。
新時代の IE か。
仕方なく、いくつかの静的ウェイトを手動で生成し、CJK の視覚的な重さをページ上で使う 400、500、600 にマッピングし直した。
ほかにも、記事の reveal アニメーション、フッターの wanderer 文言、デザインシステムページの小さなおもちゃ、Avatar の preload、コードブロックテーマ、画像ギャラリー、そしてこのサイトにある、必要ではないように見えるけれど僕が作りたかったもの全部。
それらは履歴書には書きにくい。
でも、僕はそれらがあることを知っている。
ImI、そしてさようなら
自分が作ったものが、粗い状態から少しずつ完成へ近づいていく様子を見るのが好きだ。
創造の楽しさ。たぶんそれが、僕が Web 開発者になった理由だと思う。
でも Design Engineer という title には、まだ遠い気がしている。
まずは地に足をつけて、少しずつ作っていこう。
ここまで読んでくれてありがとう。
もし僕のこのブログを再現したいなら、デザインシステムページ を見てみるといいかもしれない。より具体的な細部はそこに置いてある。
