Background

制作背景

制作会社からインハウスデザイナーへサイト制作と運用は引き継がれており、その際に簡易的なデザインガイドラインが用意されておりました。

サイトはすでに40ページ以上に増えており、今後は複数のデザイナーやエンジニアがサイトの制作や更新に関わることに加えて、今後アプリの制作も予定しておりました。そこでWeb側のUIを整理をしておけば、アプリにも展開しやすいと考え、今のタイミングでデザインシステム構築の提案を行いました。

Problem

何を解決すべきか

ページを確認していくと、いくつかの問題があることわかりました。

• 見た目に加えて、状態や挙動にも差異があること
• 私だけでなくもう一人UIに関わるデザイナーとエンジニアが3人いたため、複数人で作業しても同じパーツを選んで使える状態にすることが必要
• 対象が40ページ以上で、単純に整理をすると作業量が多い

Process & Solution

どう解決していったのか

1. 既存のUIパーツの洗い出しと共通化

実際のサイトである40ページ以上を一つずつ確認しながら、高さや余白、角丸、hoverなど差異がある類似のパーツを洗い出しました。その中で、それらを比較し、差異を調整して、共通化しました。その共通化したパーツはFigmaでコンポーネント化し、色やサイズ、ステート、アイコンの有無などをVariantsで切り替えられるようにセット化しました。

同じ用途だが、微妙に差異があるものについては、視認性や使いやすさを考慮しながら統一化を図りました。

また作業量が多かったので、締め切りを分けてやることのフェーズ化も行いました。

2. 基本カラーやフォントなどのルール整理と不足要素の追加

メインカラーやフォントはすでに簡易デザインガイドに定義されていたため、それらを引き継ぎながら、既存ページで使用されていたカラーやフォントサイズなどを確認し、ルールとして整理しました。

また、UIを共通化していく中で既存のルールだけでは不足していたフォントやカラーについては、他のデザイナーと検討しながら用途ごとに追加しました。

3. Atomic Designを用いた整理・体系化

整理するにあたり、他のデザイナーからAtomic Designを使うアイディアが出てたことから、1と2で整理したパーツやカラー・フォントなどのガイドラインを、Atoms / Molecules / Organisms / Templates / Pagesの5つの階層に分類しました。

4. エンジニアと連携し命名規則の設計

Figmaと実装側でコンポーネントの名称を揃えるため、私の方でエンジニアに命名規則を提案し、意見を出してもらいながら調整を重ねました。

5. Figma Libraryを活用したTemplate / Pageへの展開

整理とコンポーネント化したパーツをFigma LibraryにPublishし、Template/Pageにもそのパーツを入れ込み、元コンポーネントの変更があっても、各画面へ反映できる構成にいたしました。

Results

結果と振り返り

数値で表せる結果は残していませんが、エンジニアからは混在していたUIが整理されたことで「見やすく、わかりやすくなった」とコメントをいただきました。

しかしそのあとアプリ制作を経験したことで、Figmaのコンポーネントシステムへの理解が深まりました。当時より効率の良い設計方法がわかりましたが、Web側のデザインシステムまで再度落とし込むことができなかったのが、振り返ってみて心残りとしてあります。