ウィルゲートでTACT SEOを開発している水口です。 TACT SEOはサービス開始から7年が経過するプロダクトです。 今回は、TACT SEOの新しいUIを実現するため、サービス開始当初からほとんど更新されてなかった、フロントエンド開発の仕組みを見直し、デザインシステムの導入する取り組みについてご紹介いたします。
デザインシステム導入前に抱えていた課題
1. デザインに統一感がない
TACT SEO では日々、新しい機能や画面を追加しています。しかし、明確なデザイン指針がないため、新しい画面ごとに不揃いで統一感のないUIが生まれてしまいました。統一感のないUIは、ユーザーの信頼性を損なう恐れがあります。
2. デザインレビュー観点が不明瞭
デザインに指針がないため、フィードバックが個人の主観に依存し、デザインが一貫性を欠くことがありました。
3. ゼロからのデザイン制作とコーディング作業が発生してしまう
ページ共通で使える、CSSクラスや、コンポーネントがないため、デザイン制作とコーディングをゼロから行う必要がありました。
4. 保守性が低いCSS
これまでの担当者によって継ぎ足しで追加され、体系化されていないCSSにより、保守性が悪化し、開発効率も著しく低下していました。
これらの課題により、フロントエンド開発の生産性が低下し、デザイン制作およびフロントエンド開発へのモチベーションも低下していました。新しいUIを実現するにあたり、個人の頑張りだけでなく、組織全体での仕組み作りが必要だと考え、デザインシステム導入に向けた取り組みを開始しました。
今回の取り組み前後の状況
取り組み前
- デザインシステムの基礎となるデザイン群が存在している
- デザインシステムを導入するための仕組みが整っていなかった
取り組み後
- デザインシステムの基礎となるデザイン群が存在している
- デザインシステムを導入する仕組みが少し整備された
- デザインシステムを新規開発に導入できた
デザインシステムとは
デザインシステムの概要を簡単に説明します。
参考：デザインシステムとは？作り方やデザインガイドラインとの違いまで分かりやすく解説！ | 株式会社ニジボックス
デザインシステムの定義
- 目的：効率的でまとまりのあるプロダクト開発・運用
- 誰によって：チームまたは組織
- 用意するもの：ビジュアルスタイルやコンポーネント、その他懸念事項がツールとしてまとめられた一式
デザインシステムの構成要素
- 上位概念である基本原則
ブランドの方針、デザインの方針、トーン＆マナーなど - スタイルガイド
色、タイポグラフィ、アイコン、余白など - コンポーネントライブラリ
UIパーツのビジュアル（ボタン、ナビゲーションなど）、UIパーツを実装するためのコード
今回の取り組み内容
新UI・基本概念の理解とドキュメントの作成
既存のデザイン資料から、UI制作において全員が守るべき指針を抽出し、それを誰にでもわかりやすい形でドキュメント化しました。TACT SEOは分析ツールであるため、データビジュアライゼーションの原則を遵守することを基本方針としました。また、UI要素の強調表現やグループ化に関するルールも設定しました。
スタイルガイドの取説の作成
スタイルガイドにおいて順守するべき、優先順序を設定しました。
- スタイルガイド
- 共通要素 1を守る
- 各ページ 1&2を守る
また、守れない状況が発生した際はチームに相談し、変更等を協議するなどの方針についても設定しました。
クラス設計＆Sass導入
クラス設計として、ディレクトリ構成、クラス命名、スタイル定義についてルール化しました。 それらのルールをより守りやすくするために、Sassを導入しました。 尚、これらを導入する際、他プロダクトでのフロントエンド構成が大変役に立ちました。
Storybook導入
Storybookとは、UIカタログのことで、UIコンポーネントを手軽にプレビューすることができます。 Storybookの導入により、機能開発とUI開発を分離することが可能となり、開発効率が向上しました。 また、UIコンポーネントの挙動や使用方法を文書化でき、開発チーム内での共有も容易になりました。
ライブラリのパッケージ管理、アップデート
TACT SEOでは、サービス開始以降、ライブラリ等の管理があまり進んでいませんでしたが、これを改善するための取り組みも進めました。
取り組み前の課題に対する効果
1. デザインに統一感がない
デザインシステムにより、体系化されたデザインを導入することができ、新規で開発した画面には統一感が生まれました。
2. デザインレビュー観点が不明瞭
デザインシステムを基準としたレビューが可能になり、個人の主観に依存したフィードバックが減少しました。
3. ゼロからのデザイン制作とコーディング作業が発生してしまう
共通で利用できるCSSクラスやコンポーネントを整備したことにより、画面ごとのコーディング量を80%以上削減できました。
シンプルな機能であれば、デザイン制作なしで作ることができるようになりました。
4. 保守性が低いCSS
クラス設計とSass導入により、保守性を向上させることができました。
その他の効果
デザインの統一感が高まり、UIが整ったことで、フロントエンド開発担当者のみならず、他の開発メンバーの意欲も高まりました。 その結果、最大の問題であったモチベーション低下も解消されました。 また、新しいUIは事業部門からも好評で、さらなるモチベーション向上につながりました。
最後に
今回のデザインシステム導入の取り組みについてご紹介しましたが、デザインシステムは単に導入するだけではなく、それを維持し、守っていくことがとても大切です。
デザインシステムについての共有: プロダクト開発に携わる全ての人が理解し、守れるようチームでサポートすることが必要です。
守れない場合の相談: UIによってはデザインシステムを守ることが難しい場合もあります。その場合、デザインシステム自体に変更が必要かもしれません。安易にデザインシステムから逸脱するのではなく、チームで協議を行うことが重要です。
上記を守りながら、今後もフロントエンド開発の改善に努めて参りたいと思います。 少しでもご参考になれば幸いです。
