Storybookにてアニメーション実装時のコミュニケーションを効率化する

ツール導入前の課題

UIアニメーションの実装における関係者間のコミュニケーションに課題があった。 アニメーションは言葉での伝達が難しく、完成までに複数回のコミュニケーションラリーが必要だった。
アニメーションの速度やタイミング等はデザイナー・エンジニアなどの関係者間で膝を突き合わせて調整するのが一番早く、手間を感じていた。 チームにはオフィス出社のメンバーとリモートワークのメンバーが混在しており、なるべく非同期でコミュニケーションできる仕組みの必要性を感じていた。

どのような状態を目指していたか

エンジニア・デザイナー・PdMなど主要な開発関係者間でストレスの少ないコミュニケーションができる状態。

• 画面上でUIのプロパティを自由に編集することができ、エンジニア以外でもパターン確認が容易だったこと
• Reactとの相性が良いこと

改善したかった課題はどれくらい解決されたか

アニメーションを実装してデザイナーにレビューを依頼した際に、Storybook上でアニメーション速度やオブジェクトの個数を修正したものをスクリーンショットで返してくれるようになった。

導入までは、アニメーションの仮実装から調整完了まで2,3回のラリーや修正を行うことが普通だったが、デザイナー自身がStorybook上で数値を調整して最適なタイミングを調整してもらえるようになったことで、ほとんど1ラリーでコミュニケーションが完了するようになった。

どのような成果が得られたか

開発スピードが向上した。アニメーションは前述のとおりだが、複数人での並行開発も楽になった。 ページや機能単位ではなくコンポーネント単位でレビューできるようになったことで、部品だけ先行して作成し、ページは別の人が組み立てて後ほどマージするという戦略が取れるようになった。 hoverやclick時の挙動といった、インタラクション表現のすり合わせや考慮漏れの検討などもより早く気付けるようになった。

デザイナー、PdMなど実装者以外も簡単に最新の状態を閲覧できる状態にしたかったため、Storybookをどこに構築するかは検討が必要だった。 Development環境のみで運用すると、普段開発環境を構築しないメンバーが都度最新情報を取得して確認する負担が大きい。一方、Production環境に展開する場合は、社外への意図しない情報露出を防ぐため認可等の対策が必要になる。
今回は対象サービスがNext.jsをVercelで運用されていたため、Vercelのプロジェクトに関係者を招待し、Preview環境で確認できるよう設定した。 VercelのPreviewデプロイフローに乗せるためにpackage.jsonへ設定を追加するだけで実現でき、運用上のメンテナンスコストを抑えつつ、社内に閉じた形で実装者以外も確認しやすい環境を構築できた。

Figma MCPやStorybook MCPなどを連携させた開発効率化。実装とStorybookの同期は取れる環境を作ったので、Figmaとも連携できるようにしたい。