Type SafeなCSSで実現する 統一感のあるスタイリング

Type SafeなCSSで実現する 統一感のあるスタイリング 2026.06.12 TSKaigi2026〜アフターパーティー〜 ⻑⾕川 駿 1

⾃⼰紹介 長谷川 駿（Hasegawa Hayato） ウェルスナビ株式会社 サービス機能開発チーム / フロントエンドエンジニア ウェルスナビでは ● 2026年2月中途入社 ● ロボアドバイザーのリアーキテクトを進めています ひとこと ● 人生初登壇で緊張しています。 お手柔らかに お願いいたします …！ © WealthNavi Inc. All Rights Reserved. 2

プロダクト紹介 全⾃動の資産運⽤サービス ウェルスナビ 「⻑期‧積⽴‧分散」でリターンの最⼤化をめざす 1万円から運⽤できる 全⾃動でおまかせできる リスクを抑えて運⽤できる NISAも⾃動で活⽤できる ※画面はイメージです © WealthNavi Inc. All Rights Reserved. 3

これからのウェルスナビ 個⼈向け ⾦融プラットフォーム お客さまそれぞれのお⾦の悩みを総合的にサポート お客様のお⾦に関するデータを取得 様々なリスクを総合的に診断 中⽴的な⽴場から総合的にアドバイス 定期的にリスクと商品を⾒直し ※現時点では構想段階で未提供。将来的に提供する可能性があるサービス領域 © WealthNavi Inc. All Rights Reserved. 4

1. リアーキテクトに向けてスタイリングどうするか 2. 現状の課題を洗い出す 3. Type SafeなCSSライブラリを選定 4. Type Safeで何が嬉しいか 5. まとめ 5

1. リアーキテクトに向けてスタイリングどうするか © WealthNavi Inc. All Rights Reserved. 6

Web側のロボアドバイザーをリアーキテクトする ● Thymeleaf ● SCSS（node-sass） ● jQuery © WealthNavi Inc. All Rights Reserved. → 疎結合化 7

技術選定など⾊々進めていく中でスタイリングを どうするか考えた © WealthNavi Inc. All Rights Reserved. 8

2. 現状の課題を洗い出す © WealthNavi Inc. All Rights Reserved. 9

先に課題を洗い出し、何を⽬指すか 課題 ⽬指すこと ● デザイントークンが定義されてて も、使われてたり使われてなかった ● すでに定義されているデザイントー クンは指定させたい り ○ 忘れられてるか、存在に気付いて いない可能性 ● スタイリングを誰でもミスなく容易 ● CSS記述ミスがそのまま放置 ○ スタイルが崩れてないからセーフ 扱いされてそう ○ 記述ミスは型エラーで気付ける仕 組みを⽤意 ○ CSS本来の書き⽅からはなるべく 逸脱しないようにしたい © WealthNavi Inc. All Rights Reserved. に 10

Type SafeなCSSで解決できるのではないか🤔 © WealthNavi Inc. All Rights Reserved. 11

3. Type SafeなCSSライブラリを選定 © WealthNavi Inc. All Rights Reserved. 12

Vanilla Extract 良さそう ● CSS記述ミスは型エラーで気付ける ○ 補完も効くので記述ミスを減らせる ● CSS本来の書き⽅から⼤きな乖離がない ● 社内でも採⽤しているプロダクトがある ● おいしそう でもデザイントークン指定忘れはどう解決しよう🤔 © WealthNavi Inc. All Rights Reserved. 13

レビューで解決？ ● フロントエンド専任で⽬視チェック？ ○ ● ⽬指すはスタイリングを誰でもミスなく容易に AIレビューによって指摘することも可能？ ○ 開発中に気付けるなら早い⽅が良い © WealthNavi Inc. All Rights Reserved. 14

Panda CSS 良さそう ● CSS記述ミスは型エラーで気付ける ○ 補完も効くので記述ミスを減らせる ● CSS 本来の書き⽅から⼤きな乖離がない ● デザイントークン指定忘れは型エラーで 教えてくれる ● かわいい © WealthNavi Inc. All Rights Reserved. 15

4. Type SafeなCSSは何が嬉しいか © WealthNavi Inc. All Rights Reserved. 16

記述ミスは型エラーで気付くことが可能 © WealthNavi Inc. All Rights Reserved. 17

記述ミスは型エラーで気付くことが可能 © WealthNavi Inc. All Rights Reserved. 18

panda.config.ts configファイルでデザイン トークンを定義 © WealthNavi Inc. All Rights Reserved. 19

型エラーで教えてくれる！ © WealthNavi Inc. All Rights Reserved. 20

定義されてないデザイントー クンは型エラーにならない © WealthNavi Inc. All Rights Reserved. 21

© WealthNavi Inc. All Rights Reserved. 22

公式が提供しているリンターもある https://github.com/chakra-ui/eslint-plugin-panda/ © WealthNavi Inc. All Rights Reserved. 23

• https://github.com/chakra-ui/eslint-plugin-panda/

5. まとめ © WealthNavi Inc. All Rights Reserved. 24

まとめ ● Type SafeなCSSライブラリを⽤いることで型の恩恵が得られ、統⼀ 感のあるスタイリングが実現出来そう ● UIの統⼀感の実現にも寄与出来そう ● 仕組み（型システム）のおかげで、記述ミスや考慮漏れが少ないス タイリング環境が作れそう 実装に落とし込んだ具体的な結果については、 テックブログで発信出来たらと思います！ © WealthNavi Inc. All Rights Reserved. 25

重要な注意事項 ● 本資料は、断定的判断を提供するものではなく、情報を提供することのみを⽬的としており、いかなる種類の商 品も勧誘するものではありません。最終的な決定は、お客様⾃⾝で判断するものとし、当社はこれに⼀切関与せ ず、また、⼀切の責任を負いません。 ● 本資料には将来の出来事に関する予想が含まれている場合がありますが、それらは予想であり、また、本資料の 内容の正確性、信頼性、完全性、適時性等を⼀切保証するものではありません。本資料に基づいて被ったいかな る損害についても、当社は⼀切の責任を負いません。また、当社は、新しい情報や将来の出来事その他の情報に ついて、更新⼜は訂正する義務を負いません。 ● 本資料を利⽤することによりお客様に⽣じた直接的損害、間接的損害、派⽣的損害その他いかなる損害について も、当社は⼀切の責任を負いません。 商号等：ウェルスナビ株式会社 金融商品取引業者 関東財務局長（金商） 第2884号 加入協会：日本証券業協会、一般社団法人資産運用業協会 © WealthNavi Inc. All Rights Reserved.

ご清聴ありがとうございました © WealthNavi Inc. All Rights Reserved. 27