empower
プロダクトマネジメントツール / 新規事業
知人と3名で立ち上げたプロジェクトで、サイドプロジェクトとしてみんなで週末に時間を取り、コツコツ作っていきました。残念ながらサービスリリース前にクローズとなってしまったのですが、プロダクトデザインやフロントエンド開発は楽しく進めることができました。
フロントエンド開発では、Next.js, GraphQL, Apollo Clientを用い、GraphQL Code Generatorを活用してFragment Collocationでの実装を進めました。
プロダクトデザインでは、ワイヤーフレームを作成しチームで議論を行い、FIXしたワイヤーフレームをベースに、UIコンポーネントを先に作っておき、最後に画面UIを作成しています。UIコンポーネントはパーツごとにAtomicデザインに則り分類しています。
Atomicデザインをフロントエンド開発にも強要してしまうと運用コストが上昇してしまうデメリットがあるため、あくまでもデザインファイルの管理上Atomicの粒度に分けて管理していました。
Wireframe
UI Design
UI Components
