2026/09/15 23:40
CSS ゼン・ガーデンの夢、ついにリリースされる
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
Firefox.com は、現代のネイティブ CSS を使用して成功裏に再構築されました。これは、ウェブプラットフォームがついに 20 年間にわたりプリプロセッサからの移行を完了したことを示しています。本プロジェクトは、カスタムプロパティ、グリッド、フレックスボックスにより、コンパイルなしでブラウザ内で堅牢なデザインを実現できることを実証しています。再構築されたサイトには 70 以上のコンポーネントと 25 のテンプレートが含まれており、これらは非エンジニアによるコンテンツの組み立てのために Wagtail コンポーネントとして実装されています。これらの機能はすべての現代ブラウザで一貫して動作し、19 のロケールにわたる最小限のスタイルシートの活用により、レガシーシステムへのアクセシビリティも維持しています。PostCSS はパフォーマンス向上のためインポートを内联するみに使用され、ソースコードがそのままブラウザの言語として残るようにしています。ブラウザ機能における 20 年間のギャップを跨ぎながら、この取り組みは過去の一貫性のない実装に対して設計し直すことで対応しました。ユーザーは最適化された配信とサーバー処理の削減により高速なサイトを享受します。企業にとっては、プリプロセッサの複雑性を排除することでワークフローが合理化され、デザイン上の意思決定が直接生産環境に反映されます。業界にはアクセシビリティとクロスブラウザの信頼性を維持しながら迅速な革新を実現する基準が確立され、チームが純粋な CSS もしくはフレームワークを使用し、翻訳ステップなしで素早く進歩できる未来を示唆しています。
本文
Mozilla と Lincol Loop の連携で Firefox.com を再構築：プリプロセッサー不使用のネイティブ CSS で描いた「ゼン・ガーデン」の夢
Mozilla と Lincol Loop のチームと協力し、プリプロセッサーを一切使用せず、現代的なネイティブ CSS で Firefox.com を再構築しました。本記事では、この取り組みが今日のデザインシステムにとって何を意味するか解説します。
昔からの夢と、その現実とのギャップ
2008 年、大学卒業間際の私は「CSS ゼン・ガーデン」というデイブ・シーア氏のプロジェクトに出会いました。HTML ファイル 1 つで CSS のみを使い、異なる見た目へとリスタイルできる様子をみたことが、「清く、再利用可能であり、コンテンツから完全に分離されたデザイン」という夢への一瞥となりました。
しかし、実際にクライアントワークを手掛けるようになると、その夢は崩れ去りました。
- 当時の技術的制約: CSS 変数が存在せず、フルファイidelity なデザイン表現が不可能。
- ** workaround の必要性**: サーバーサイド処理や画像、テーブルベースのレイアウト、数え切れないハックに頼らざるを得なかった。
- クロスブラウザ対応の困難: ブラウザごとにレンダリング結果が異なり、単一のデザインを全ブラウザで動作させるのに多大な労力を要した。
理論的には可能だった「ゼン・ガーデン」と実運用の世界には大きなギャップがありましたが、その埋め合わせに 20 年以上もの歳月がかかりました（その大半は過去数年間に集中）。
モダンなネイティブ CSS がもたらした変化
その間、以下の技術進歩が実現しました。
- カスタムプロパティ: ブラウザが理解する変数が誕生し、デザインの一貫性が確保された。
- グリッドとフレックスボックス: メディア制約に抗わない柔軟なレイアウトが可能になった。
これにより、今ではそれら機能に対してではなく、「その上において」デザインすることができるようになりました。
Firefox.com 再構築の成果
Mozilla と Lincol Loop チームが協力して達成した主な成果は以下の通りです。
技術的アプローチ
- プリプロセッサー不使用: SASS や LESS などを一切使わず、純粋なネイティブ CSS でシステム全体を構築。
- 設計と実装の統合: カスタムプロパティを設計ファイルから直接出力し、ハックなしで一度だけ記述したネイティブ CSS があらゆる現代ブラウザで動作。
- レガシー対応: 最小限のブランド用スタイルシートを用い、レガシーブラウザでも基本的かつアクセシブルなブランド表現を実現。
システム構築と運用効果
- デザインシステムの完成:
- 70 以上のコンポーネントと 25 ページテンプレートからなるシステムを構築。
- 全要素を Wagtail コンポーネントとして実装。
- 作業フローの改善: エンジニアの支援なしにコンテンツチームがページを組み立てられる体制へ。
- 多言語対応: 現在、19 のローカライゼーションをサポート中。
重要な補足：ビルドステップについて
本格的な運用環境では PostCSS を導入しましたが、それは単一かつ限定的な目的のためです。
/* 目的：@import 宣言のインライン化 */
- 理由: ネイティブの
はいくつかのブラウザで性能特性が悪いため、構造的純潔さよりも実用性が優先されました。@import - コードの本質: 作成された CSS コード自体はあくまで単純なネイティブな CSSです。ビルドステップに依存せずとも有効かつ意味を持ちます。
- ビルドプロセスの役割: ブラウザが逐次取得する必要があったファイルを「平坦化（フラット化）」するだけの処理です。
この区別を認識することが重要です。「ビルドステップを必要としない」と言われるプロジェクトにおいても、書式付けられたソースコードがブラウザが理解できる言語か、それともコンパイルされるまでの方言なのかを見極める必要があります。
なぜこれが意味を持ちたのか
「ゼン・ガーデンの夢」がようやく本格的な運用環境で実現できたことに感慨深く思っています。ウェブ標準をリードする Mozilla との協業は特に意義深いです。
- Firefox.com の特殊性: ブラウザそのものをテーマにしたサイトであり、プラットフォーム構築に 20 年以上をかけて議論してきた組織によるもの。
- 検証の適切さ: プラットフォームが本当に準備ができているかを検証するには、より適切な場所はありません。
はい、準備はできています。
この職人芸を形作った方々への恩恵を背負っています：
- ニコル・サリヴァン
- レイチェル・アンドリュー
- ジェン・シモンズ
- クリス・コイヤー
- ケースイ・ケリー（Mozilla プロジェクトに紹介してくださった人物）
- エリック・マイヤー氏（郷土のヒーロー）
彼らの仕事は、私たちの世代に CSS を**「システム」として捉える**ように考えさせました。
一貫する主題：チームのためのデザインシステム
すべての私の仕事に通じるテーマは以下の点です。
純粋な CSS、Tailwind、あるいは shadcn/ui といった構成要素が何であれ、「チームが迅速に進めつつ一貫性を保てるデザインシステム」の実現。
ツール自体は数年ごとに変化しますが、変わらない価値観は：
- **「正しいことも簡単になる」**という信念。
- デザイナーの意思決定が工程を三回も翻訳されることなく、生産現場に直接届くこと。
もしあなたのチームがフロントエンド基盤を見直す段階にあるなら、ぜひご連絡ください。