ep.190『アイコン・フォント・デザインシステム — デザインと歩んだエンジニアの7年』

@potato4d が、今回の収録をもって UIT INSIDE を卒業する @spring_raining と一緒に、エンジニアとしてデザイン領域に関わってきた7年間の仕事を振り返りました。

エピソード8頃から約7年にわたり出演してきた @spring_raining は、今回が出演最終回です。UIT INSIDE 自体はこれからも続きますので、引き続きよろしくお願いします！

デザイン×エンジニアの仕事を振り返る

社内アイコン管理システム「Laicon」

• 社内で使用するアイコンを様々な形式で提供するシステム。入社してすぐから開発
• 当時広く使われていた Font Awesome の API・使い心地をベースに設計
• アイコンを npm パッケージとして利用できるようにするパイプラインの構築
• 開発者観点でアイコンをレビューするためのシステムづくり。のちに Figma API と連携する形へ転換

LINE Seed JP と Google Fonts

• コーポレートフォント LINE Seed JP を Google Fonts に登録する作業を担当
• GitHub でのフォントの OSS 公開や、Google Fonts が求めるルールへの適合対応など
• 詳しくは ep.187『LINE Seed が Google Fonts に登録されるまで』で

デザインシステム「toly」の開発

• プロダクト開発で作っていたコンポーネント集を、新しいデザインシステム toly として再構築。約3年取り組んだ仕事
• Web Components を採用し、Lit でコンポーネントを開発。ラッパーとして React / Vue コンポーネントを提供
• ステート管理には UI ライブラリに依存しない Zag.js を採用（初期に使っていた Haunted は廃止）
• コンポーネントの粒度がアクセシビリティ要件で決まるケースと、利用側が求める自由度をどう両立するか
• CSS Variable でレイアウトを外部から規定する設計。CSS Grid Layout / Subgrid の発展が追い風に

エンジニアとしてデザインに関わって得たもの

• 手を動かしてデザインを作るのではなく、開発者だからこそできる関わり方がある
• Figma 上のデザインからデザイナーの意図を汲み取り、拡張性を予測してコンポーネントとして再解釈する面白さ
• 「いい」と感じる理由の言語化の難しさ。WCAG などドキュメントが整備されたアクセシビリティは根拠を示しやすい
• ライブラリを作る側と使う側の断絶をなくす。ライブラリ開発者にとっては DX こそが UX

デザインシステムと生成 AI

• Agentic Coding 時代、オーダーメイドのデザインシステムはガードレールとして機能する
• CSS Variable や Grid 領域の命名を通じて、開発者にも AI にも「意図」を伝えられる

関連リンク

• ep.187『LINE Seed が Google Fonts に登録されるまで』: https://uit-inside.linecorp.com/episode/187
• 新しいデザインシステム「toly」が達成すること（Tech-Verse 2025）: https://tech-verse.lycorp.co.jp/2025/ja/session/1208/
• LINE Seed: https://seed.line.me/
• Lit: https://lit.dev/
• Zag.js: https://zagjs.com/
• React Aria: https://react-spectrum.adobe.com/react-aria/
• WCAG 2.2: https://www.w3.org/TR/WCAG22/

---

採用について

• LINEヤフー新卒採用
• LINEヤフー中途採用

使用素材・クレジット

• BGM&SE
  • 魔王魂
  • 騒音のない世界
  • OtoLogic