peep デザインシステム

デザインシステム構築

2021年まで、デザインの構築にはSketch + Abstractを活用していましたが、チームの規模が拡大する中で新たな課題が浮かび上がりました。

主な課題は以下の通りです。

1. UIデザインの確認までの工程が煩雑化していること

2. Abstractでのバージョン管理では、施策ごとのチケットが増加するにつれ、コンフリクト解消に多くの工数を割かざるを得なくなっていること

3. Sketchのシンボルの整理が追いつかない状況が生じていること

これらの課題に対処するため、全てのデザインデータをFigmaに移行し、効果的なデザインシステムを構築しました。

構築ポイント

1. カラーパレット、デザインパーツ、ツール、アイコン、そしてページ毎のレイアウトなど、デザインの基本要素をTeam Libraryに統合し、コンポーネントとして管理します。これにより、一貫性のあるデザインを確保し、効率的な作業プロセスを実現しました。

2. 各チケットごとに新しいデザインファイルを作成し、リリース後に変更を本番環境にマージする手法を採用します。これにより、本番とデザインの一貫性を確保し、コンフリクトを防ぎながら迅速なデザイン変更を実現しました。

3. 各機能に対応するページを分割し、画面遷移や表示パターンを明確に設計します。これにより、ユーザーエクスペリエンスを最適化しやすくし、プロジェクト全体の可読性を向上しました。

外観モード切り替え対応

これまでアプリケーションではダークモードが唯一の表示オプションでしたが、ユーザーの好みに合わせた柔軟な選択肢が不足していました。この課題に対し、私はユーザーエクスペリエンスの向上を目指し、ライトモードへの切り替えが可能な仕組みを導入しました。最初には各UIパーツをダークモードからライトモードへと変換する際の色を慎重に検討し、FigmaのLocal Variable機能を活用してシームレスな切り替えが可能なデザインを構築しました。

コントラスト比の調整には苦労しましたが、ユーザビリティを損なわずに、洗練されたデザインを実現しました。この変更により、ユーザーは自身の好みに合わせてアプリケーションの外観をカスタマイズでき、より快適な利用が可能となりました。

構築ポイント

1. Figmaの「Local Variable」機能の活用
   Figmaの「Local Variable」機能を積極的に利用し、各UIパーツのダークモードからライトモードへの変換時における色の調整やデザインの変更を柔軟かつ効率的に行いました。これにより、一元的な変更が容易となり、シームレスな切り替えが可能なデザインを実現しました。

2. iOS / Android 開発者との連携
   ライトモードへの切り替え機能の導入にあたり、iOSおよびAndroidの開発者と密接な連携を行いました。プロジェクトの技術的な側面や要件に合わせて実装を調整し、ユーザーエクスペリエンスの一貫性を確保しました。開発者との円滑なコミュニケーションにより、効果的な機能統合が実現しました。

管理画面改修

peepのリリース以来、アプリの管理画面では機能が追加され、管理の使い勝手が悪化していました。そのため、PMとエンジニア、作家やプロデューサーと協力して、機能的でかつ編集しやすい新しい管理画面を設計・デザインしました。