Sparkle Design

コンポーネントライフサイクル

コンポーネントライフサイクル カバー

Sparkleでは新しいコンポーネントが誕生してから最終的に削除されるまでのプロセスを定義しています。

各コンポーネントはそのライフサイクルの各フェーズにおいて、特定の基準を満たす必要があります。このドキュメントではコンポーネントの追加から削除までの流れと、それぞれのフェーズでの重要なポイントを紹介します。

コンポーネントを追加する前に

コンポーネントはアプリケーションの開発を効率化し、一貫したよい体験をユーザーへ提供することを目的としたアセットの一つです。

コンポーネントをSparkle UIへ追加する際には以下の観点を考慮します。

  • 同一または極めて近似したコンポーネントが3回以上繰り返して使われていること
  • 複数のアプリケーションで汎用的に使用できること
  • 既にSparkle UIに近似したコンポーネントが追加されていないこと

これらのポイントが満たされていないと、メンテナンスコストの向上、コンポーネントの検索性の低下などが発生し、プロダクト品質や開発生産性の低下へと直結します。

ライフサイクルのフェーズ

1. ドラフトフェーズ

このフェーズにおけるコンポーネントライフサイクルDraft

ディスカバリーフェーズでは、新しいコンポーネントの調査、探索、検証を実施します。

デザイナーやエンジニアが集まり、提供価値や必要性、実現可能性についての調査、検討を行います。具体的な要素を構築する前に以下の達成基準を満たしているかについて確認します。

また、必要に応じてプロトタイプやモックアップを作成し、詳細なイメージをチームに共有します。

達成基準

  • プラットフォームの原則に即していること
  • コンポーネント自身がドメイン知識を持っていないこと
    • 全ての環境での利用を促進するために、個別のアプリケーション独自のドメインやロジック、振る舞いを持ったコンポーネントは直接ライブラリに含めません。
    • ドメインを持つ要素をデザインシステムに加える場合は複数のアプリケーションで使用できるように、事前に抽象化を行います。
  • コンポーネントの目的とユースケース、作成理由、既存コンポーネントでは代替できない理由が明文化されていること
  • コンポーネントガイドラインが用意されていること
    • この時点では画像が未挿入のWIP状態で問題ありません。
  • コンポーネントを採用することがSparkleチームで合意できていること

2. プレビューフェーズ

このフェーズにおけるコンポーネントライフサイクルPreview

デリバリーフェーズではアセットのデザインや実装、ドキュメントの執筆を行います。このフェーズでの主な目的は高品質で一貫性のあるコンポーネントを構築することです。

達成基準

  • デザインライブラリ、ドキュメントの構築が完了していること
  • アクセシビリティが確保されていること
  • 構築する各要素がそれぞれの構築指針に沿って設計され、メンバーによるレビューが完了していること

コンポーネントの詳細な構築方針や作業指針は以下のガイドラインをご確認ください。

コンポーネント構築指針

3. ローンチフェーズ

このフェーズにおけるコンポーネントライフサイクルStable , Deprecated

デリバリーフェーズにてコンポーネントが完成したらチームメンバーに周知し、正式にSparkle UIに組み込みます。このフェーズの目的はコンポーネントを公開、周知し、全員が新しいコンポーネントを活用できるようにすることです。

作業手順

  1. 公開作業
    • デザインライブラリ、ドキュメントを最新の環境に反映し、実際に使用可能な状態へ変更します
    • アップデートした項目を最適なステータスに変更します
  2. リリースノートの記述
    • コンポーネントの変更点や新機能を記載したリリースノートを執筆します
  3. メンバーへの共有
    • 追加・公開したコンポーネントに関する情報をデザイナー、エンジニア、QAをはじめとするコミュニティメンバーへ共有します

コンポーネントライフサイクル

Draft: 検証版

  • 検証段階のコンポーネント
  • ディスカバリーフェーズにて、チーム内での議論や評価が行われている状態

Preview: プレビュー版

  • 開発中のコンポーネント
  • デリバリーフェーズにて、チーム内でのテストや最終調整が行われている状態

Stable: 安定版

  • ローンチが完了し、正式に利用可能なコンポーネント
  • ドキュメントとデザインがすべて揃っている状態

Deprecated: 非推奨

  • 将来的に削除が予定されているコンポーネント
  • 使用すると警告が表示される他、代替案が提示されている状態

Removed: 削除済み

  • 既に削除され、利用できないコンポーネント
小さな気づきや違和感があればお気軽に教えてください。
フィードバック
Chat illustration