デザインシステムを作りました

Ateam Finergy - Qiita Advent Calendar 2024の記事になります。

はじめに

エイチームフィナジーでは「ナビナビ保険」といった保険比較・FPに無料相談できる総合保険サイトの開発・運用を行っています。

この開発を進めるにあたり、企画・提案からリリースまでの時間を短縮・最適化していこう！という動きがあり、この度デザインシステムを開発することになりました。

本記事では、このデザインシステム開発に携わったエンジニアの視点で、プロセスを詳しく解説していきます。

ナビナビ保険のフロントエンド事情

ナビナビ保険は2020年1月にオープンして以来、フロントエンドに関してはその当初から2024年時点で変わっておらず、Ruby on RailsのERBがメインであり、部分的にReactコンポーネントをクライアントでレンダリングしております。

静的コンテンツで問題ない場合にはERBまたはViewComponentで提供し、動的なユーザーインタラクションが必要な場合にReactコンポーネントを使用してます。

また、リリース当初からCSSフレームワークはTailwindCSSを使っております。その選定経緯についてはこちらをご確認ください。

デザインシステムの開発背景

デザインシステムは、デザインに関するあらゆる情報を体系化・構造化したものです。具体的な以下のような要素で構成されています。

• デザインガイドライン
• スタイルガイドライン
• コンポーネントライブラリ・パターンライブラリ
• デザインアセットを管理するツールやワークフロー

デザインシステムが構築された際に得られる効果として、以下の2つを掲げてました。

• 意思決定・開発プロセスのスピード改善
• ブランド原則を成果物に反映しやすくなる

こうした恩恵を得るべく、デザインシステムの構成要素であるコンポーネントライブラリとスタイルガイドのうちカラーシステムについて開発を進めていきました。

開発期間やチームの構成

• 開発期間: 2024年2月〜2024年7月
• チーム構成
  • 3名
    • エンジニア
    • 開発寄りのデザイナー
    • グラフィック寄りのデザイナー

デザインシステムの技術スタック

技術スタックについては、主に開発寄りのデザイナーが選定していただきました。

• デザイントークン
  • Figmaとの連携を考慮
• Style Dictionary
  • デザイントークンからCSS Variablesを出力
• Tailwind CSS
  • ナビナビ保険で利用しているCSSフレームワーク
• shadcn/ui
  • Tailwind CSSの設定を基づいたコンポーネント群を生成
  • 生成されるコンポーネントは主にradix-uiに基づく
• Storybook
  • コンポーネントのドキュメント化
• tsup
  • TypeScript用バンドラ
• Artifact Registory
  • パッケージレジストリ

開発の流れ

• 1. デザイントークンの作成・連携
  • Figmaとの連携などを意識しつつ進行
• 2. CSS Variablesの生成
  • Style Dictionaryを使ってデザイントークンからトークン（CSS Variables）を生成
  • Tailwind CSS v4を考慮
• 3. Tailwind CSSへの統合
  • tailwind.config.tsへトークンを参照
• 4. コンポーネント生成
  • shadcn/uiでTailwind CSSの設定を参照し、コンポーネントたちを生成
  • 生成したコンポーネントを独自にカスタマイズ
• 5. ビルド & パッケージング
  • tsup等でビルド & パッケージング
  • Artifact Registoryに公開
• 6. 公開したパッケージをインストールして利用

開発段階で気をつけたこと

チーム全体でのコードレビューを徹底しました。

特に、デザインシステム開発に関わっていないメンバーにもレビューに参加してもらうことで、早い段階からどのように作られていくのかを認知してもらいました。運用された際、保守・メンテナンスをできる体制を期待しました。

また、Google CloudのArtifact Registry認証には工夫が必要でしたが、オープンソースツールの利用や独自スクリプトを作成することで問題に対処しました。

特筆すると、パッケージをインストールする際、Artifact Registry に対して認証する必要があります。GoogleCloudではnpmパッケージマネージャー用にgoogle-artifactregistry-authを公開していますが、我々はyarn/berryを使っており、別の方法でアクセストークンを取得する必要がありました。
ライブラリ上のコードを読んでいただき、nodeの標準ライブラリのみでアクセストークンを~/.yarnrc.ymlに出力するスクリプトを書いていただきました。

使用例

2024年12月時点では、保険の比較ページへの導線にて今回構築したコンポーネントライブラリが使用されております。スペースやタブ、矢印キーを使って項目を変更できます。

今後の展望

• パターン化
  • コンポーネントライブラリを使っていきながら習熟度を上げる
  • 再利用可能なコンポーネントの集合（パターン）を見つけ出す
  • 見た目は同じだが、ロジックが違う際の対応基準を決める
• ERBでの運用
  • ERB側でコンポーネントライブラリを使いたい際にどうするかを検討する

デザインシステムを核に、より一層の開発効率とデザインの一貫性を確保するべく、少しずつ習熟度を上げていこうと思っております。

まとめ

効率の向上とブランド整合性を目的に、コンポーネントライブラリや新技術の導入を進めました。これからもナビナビ保険のプロダクトを発展させていくべく、尽力していきます。