Greenstand デザインシステム

GreenstandのUXデザインボランティアとして、56か国で利用されるアプリ群のデザインに携わりました。この仕組みは、環境団体や寄付者が活動の成果を把握できるようにすると同時に、森林再生活動に参加する人々へ収入の機会を提供しています。

Greenstandのデザインチームは以前からデザインシステムの整備に取り組んでいましたが、一貫した実装と保守に必要な基盤が不足していました。その結果、エンジニアはハードコードされた値や個別の解決策に頼ることが多い状態でした。

これらの課題に対応するため、より明確なトークン構造を採用し、構造化され、アクセシブルで使いやすいデザインシステムへ再構築しました。さらに、効率的なデザイン・コード連携フローを整え、コンポーネントを実装し、導入と保守を支えるドキュメントを追加しました。

近年のAIの進歩を受け、エンジニアリングリソースへ過度に依存せず、デザインからコードへの変換とデザインシステムのドキュメント作成に必要な工数を減らせると考えました。学習コスト、費用、エコシステムの成熟度を踏まえ、Figma MCP、AI、Storybookを中心としたワークフローを現実的な方法として選びました。

まず、デザインシステムの基盤を再構築しました。アクセシビリティとシンプルさを高めながら、人にもAIにも理解・保守・拡張しやすいシステムを目指しました。

2層のトークン構造

プリミティブトークンとセマンティックトークンの2層で構成される、拡張可能なデザイントークンシステムを構築しました。

検討の過程では、コンポーネントトークン層の導入も考えました。柔軟性が高まる一方で、保守するトークン数も増えます。現在のプロダクトとチームの規模を踏まえ、複雑さを抑えるため今回は導入しませんでした。

コンポーネントトークン	利点	トレードオフ
あり	大規模な更新が容易で柔軟性が高い	抽象化と保守の負担が増える
なし	理解・保守しやすい	コンポーネント固有の調整に対する柔軟性が低い

アクセシビリティの改善

十分に暗い色が不足していたため、プライマリーボタンを含む複数の配色がWCAG AAのコントラスト基準を満たしていませんでした。個々のコンポーネントを調整するのではなく、暗い色調を追加して基盤そのものを改善し、アクセシブルな配色をつくりやすくしました。

AIが読み取りやすいコンポーネント

AI支援の実装に対応するため、値を直接指定する代わりにFigma変数を使い、Auto Layoutで構造化してコンポーネントを再構築しました。

Figma上のデザインシステムを信頼できる唯一の情報源として整備した後、限られたツールしか使えない非営利チームでも運用でき、実装工数を減らしながらシステムの進化にコードを追従させるデザイン・コード連携フローを検討しました。

コンポーネントの実装

Figma MCPとCursorを使い、主要なコンポーネントをReact Nativeで実装しました。その過程で、アニメーションやコンポーネントの挙動など、Figmaだけでは十分に表現されない詳細を追加しました。また、一般的な実装方法をもとにFigma上の構造、命名規則、プロパティも改善し、デザインと実装の差を縮めました。

実装では、デザインファイルだけでは表現しきれないインタラクションの詳細を追加しています。

コントリビューターの参加と離脱が頻繁なGreenstandでは、ドキュメントが特に重要でした。オンボーディングと長期的な保守を支えるため、網羅性と簡潔さのバランスを取りながら、デザインと実装の両方を案内するStorybookドキュメントを導入しました。

この最初のイテレーションで、Greenstandの今後のデザインシステムとデザイン・コード連携フローの基盤を整えました。プロジェクトは継続中で、次の段階ではこのバージョンをもとに、実装方針、技術的制約、今後の発展についてステークホルダーと認識をそろえます。そこで得たフィードバックを反映し、導入に向けてシステムを改善していきます。

AI支援開発が普及する以前にエンジニアとして働いていた私にとって、AIがこれまで以上にスムーズかつ迅速にデザインとコードをつなぐ様子は非常に興味深いものでした。このプロジェクトを通じて、デザインとエンジニアリングの両方の視点からデザインシステムへの理解を深めました。