Zenn
マイベスト テックブログPublicationへの投稿
🚀

タイトなスケジュールのプロジェクトでのデザインシステムの恩恵と迷いどころ

ymdman
2024/08/30に公開
デザインシステム
idea

こんにちは！
マイベストでフロントエンドエンジニアをしているyamadaです！

マイベストテックブログ連載：「みんなでお買い物サポートクラブ」リリースまでの開発の裏側の7日目を担当します。

はじめに

最近、弊社のサービスに「みんなでお買い物サポートクラブ」という新しい機能が追加されました。
この機能は、ユーザーにも弊社にも大きな価値を提供する重要なアップデートでしたが、開発チームに与えられたスケジュールは非常にタイトで全ての工程を迅速に進める必要がありました。

デザインシステムの活用は、フロントエンド開発における一貫性の維持やスピードアップに大きく役立ちました。しかし、その恩恵を受ける一方で少々の迷いどころが生じました。
本記事では、この経験を通じてデザインシステムがタイトなスケジュールの中でどのように役立ったのか、そしてどのような迷いどころが生じたのかを簡単にまとめました。

デザインシステムの恩恵

デザインシステムのおかげで、既存のUIコンポーネントを使い回せることが開発のスピードアップに繋がりました。通常なら新たにコンポーネントをゼロから作成する必要があるところを、デザインシステムに従って再利用できるコンポーネントを活用することで、迅速に実装を進めることができました。
例えば、ボタンやフォーム、カードレイアウトなどの共通要素を迅速に組み込むことができたのは大きな利点でした。

ページ枠組みの迅速な構築と調整

特にレイアウトコンポーネント[1]が大いに役立っており、これらのコンポーネントを使い回すことでページ全体の枠組みを短時間で構築し工数を大幅に削減できました。
結果として無駄な作業を省き効率的にプロジェクトを進めることができました。加えて、迅速なレイアウト調整が可能となり、必要な変更や追加要素に対してもスムーズに対応することができました。

具体例: ボリュームのあるクチコミ投稿画面の静的部分は半日程で実装できている

クチコミ投稿画面

デザイナーとのコミュニケーション

デザインシステムのおかげでFigmaを使ったデザイナーと開発者のコミュニケーションが一層スムーズになっていると実感しています。共通のデザイン基盤があることで意図のズレが減り、変更や追加も迅速に反映できました。これにより、タイトなスケジュールでも一貫性を保ちながらプロジェクトを進めることができました。

デザイントークン

さらに、弊社のデザインシステムはデザイントークンを利用しているので色やフォントサイズ、スペーシングといったスタイルの属性が一元管理されています。
これにより各ページやコンポーネントでの一貫性が保たれ、プロジェクト全体のビジュアルが統一されるとともに、デザインのばらつきを防ぐことができました。
デザイントークンにより変更があった場合にもスタイルの調整が迅速かつ効率的に行えるため開発のスムーズさがさらに向上しました。

今回の迷いどころ

しかし、タイトなスケジュールの新機能開発でデザインシステムを利用しても全てがスムーズに進むわけではなく、以下の迷いどころがありました。

コンポーネント化の判断

既存コンポーネントを使い回せることが利点ではあるものの、既存コンポーネントを組み合わせた新しいUIを全てコンポーネント化するべきかどうかの判断には悩まされました。全てをコンポーネント化するとFigmaと同期を取っているデザイナーの負担が増えるだけでなく、コンポーネントの管理も煩雑になります。特に新しいコンポーネントを追加する際には適切な命名が求められるため、さらに時間と労力を要することとなります。

今回の対応

  • 既存のコンポーネントを使い一旦ページにベタ書きし、後からリファクタリングする事に
  • 実装の都合上でコンポーネントに切り出したいものはプライベートコンポーネント[2]として扱うように

コンポーネント修正か新規作成か？

「みんなでお買い物サポートクラブ」で追加されたUIには、既存のコンポーネントと似てるけど微妙に機能が異なり、そのまま使用できないものもありました。このような状況ではコンポーネントを修正するか新たに作成するかの判断が難しくなります。
修正を加える場合、既存機能や依存関係に影響を与えるリスクがある一方で、新規作成には追加の開発と管理の負担が伴います。限られた時間内でどちらがより効率的かを慎重に考える必要がありました。

今回の対応

  • リファクタリング前提で新規作成を選択
  • 同じようなコンポーネントが増えてしまうという問題はありましたが、他への影響を考える事から解放されたので実装スピードは高まりました

まとめ

迷いどころは少々あったものの、デザインシステムはタイトなスケジュールの中で大いに助けになっており、フロントエンドの静的箇所の実装については工数を大幅に削減できたと実感しています。
（ページ単位で見積もって最大でも半日程度で実装できており、大抵のものは1〜3時間くらいで実装できてます）

デザインシステムを活用することで開発スピードの向上と一貫性の確保が実現しましたが、その利点を最大限に活かすためにはプロジェクトの要件や制約に応じた適切な柔軟性も同時に考慮する必要があると感じました。

脚注

  1. 弊社のレイアウトコンポーネントはこちらで紹介しています ↩︎

  2. 弊社オリジナルの考え方で、そのページまたはコンポーネントからしか呼び出さないコンポーネントをプライベートコンポーネントと呼びます ↩︎

マイベスト テックブログ
マイベスト テックブログPublication

株式会社マイベストのテックブログです！ 採用情報はこちら > notion.so/mybestcom/mybest-information-for-Engineers-8beadd9c91ef4dc2b21171d48a4b0c49

Discussion