連載：AIエージェントチームと編み上げるデジタルクラフト共同開発記③

2026年6月13日 18:08

第３回：同じHTMLなのに、京都にもイスタンブールにもなるCSS設計

画面の骨格は、何も変えていない。
HTMLも、コンポーネントも、同じまま。それなのに、京都の静けさは、イスタンブールのきらめきに変わる。
和紙のような淡い背景。杉の木目のような直線。ゆっくり呼吸するようなアニメーション。
それらをCSSだけで差し替えると、同じ画面がまったく別の場所に見えてくる。
第3回では、FTF Flowで試した「CSSマテリアルオーバーライド」という考え方を紹介します。テーマ切り替えを、単なる色替えではなく、空気の設計として扱うための実装です。

同じHTMLなのに、別の都市に見える

今回は、同じHTMLなのにCSSを切り替えるだけで、京都の静けさとイスタンブールのきらめき、二つの異なる都市の雰囲気を再現するテーマ切り替えについて掘り下げていきます。

変えているのは骨格ではなく「素材」

CSSマテリアルオーバーライドとは、HTMLの構造を変えずに、CSS側の素材表現だけを差し替える設計です。
一般的なテーマ切り替えでは、主に色やフォントを変えます。でもFTF Flowでは、背景の質感、木目、タイル、影、アニメーションの速度までをテーマの一部として扱いました。
つまり切り替えているのは、配色ではありません。画面の「手触り」です。
テーマ切り替えで本当に変えるべきなのは、色ではなく、読者が画面から受け取る空気なのかもしれません。

京都テーマ：余白、和紙、ゆっくりした時間

京都のテーマでは、余白を活かしたミニマムな表現と、和紙のような淡いテクスチャ、そしてゆっくりと流れるようなアニメーションを特徴としています。これは、伝統的な日本の美意識である「侘び寂び」をデジタル空間で表現する試みです。

イスタンブールテーマ：タイル、幾何学、弾む時間

対照的にイスタンブールのテーマでは、イズニック・タイルのような幾何学模様と鮮やかな色彩、精度高く弾むようなアニメーションを採用しました。東西文化が交錯する都市のエネルギーを表現しています。

CSSマテリアルオーバーライドの考え方

この設計では、CSS変数（カスタムプロパティ）を駆使し、HTMLのルート要素にテーマクラスを付与するだけで、関連するすべての「素材」プロパティが一括で切り替わるように設計されています。これにより、メンテナンス性を高めつつ、複雑なテーマ変更も容易に実現できます。この設計の利点は、デザインの一貫性を保ちながら、多様な表現を可能にすることです。画像リクエストを減らしやすいという利点もあります。

実装：ルートクラスを切り替えるだけ

ここから少しだけ、実装の話に入ります。とはいえ、JavaScriptがやっていることは複雑ではありません。
役割はひとつだけ。 <html> 要素につけるテーマクラスを、theme-kyoto から theme-istanbul に切り替えることです。
CSS側では、各テーマクラス（例: .theme-kyoto, .theme-istanbul）の下でカスタムプロパティの値を定義し、これを各コンポーネントが参照することで、テーマが切り替わると同時にデザインが適用されます。

色だけでなく、時間もテーマになる

私たちは、テーマ切り替えを単なる視覚的な変化に留めず、時間軸、つまりアニメーションの速度やタイミングにも適用しました。例えば、京都テーマではゆったりとしたトランジションを、イスタンブールテーマではより速くダイナミックな動きを採用することで、それぞれの都市が持つ時間の感覚を表現しています。HTMLは骨格で、CSSは素材。そしてアニメーションは、その場所に流れる時間です。

この設計で守れるもの

この設計は、デザイナーの意図を尊重しつつ、開発者が効率的に作業を進めることを可能にします。デザインシステムにおけるトークンの活用は、デザインと開発の間のギャップを埋め、プロジェクト全体の品質と生産性を向上させる上で非常に重要です。

次回予告

今回やっていることは、派手な分岐ではありません。 HTMLの骨格を守り、CSSで素材を差し替え、時間の流れまでテーマに含める。
その積み重ねだけで、同じ画面は別の都市の空気をまとい始めます。
テーマ切り替えは、色を変える機能ではなく、体験の温度を変える設計なのだと思います。
次回は、このCSS変数を人の手で管理し続けないために、Figma Tokensからコードへどう同期するかを扱います。デザイナーの意図を、どうすれば実装にこぼさず渡せるのか。そこが次のテーマです。

前回は、この切り替えを支える土台として、Tailwind CSS v4を使った二層構造トークン設計を紹介しました。今回の記事で「なぜCSS変数が効いてくるのか」が気になった方は、第2回から読むと設計の流れがつながります。

この連載「AIエージェントチームと編み上げるデジタルクラフト：FTF Flow共同開発記」は、FTF Flow開発チームがお届けしています。