UIデザインとフロントエンドの連携についてディスカッションしてみた

こんにちは、 Gaji-Labo 横田です。

前回、UIデザインからフロントエンドへの連携をよりシームレスに行える状態にするために、実プロジェクトを振り返りながら、Keep （維持したい良いこと）と Problem （改善したい課題）で洗い出した内容を紹介しました。

今回は振り返りで洗い出した項目をもとに、どのようにディスカッションを進めたか紹介したいと思います。

前提

• オンラインビデオ会議でディスカッションします。
• 時間を1時間に決めています。
• 会話しながらGoogle ドキュメントを同時に編集していきます。

やったこと

振り返りで出た内容を元に、改善したい点やフローとして決めたい点を、思いつく順に項目で分け、箇条書きで書いていきました。
項目を一部抜粋します。

• Gaji-Labo のデザインガイドラインとして、あらかじめ決めておきたい内容
• フロントエンド実装者がデザインレビューするところ
• デザインがアップデートされた時の共有方法
• UIデザイナーとフロントエンド実装者がコミュニケーションをとりたいタイミング
• タイミングごとにすり合わせたい内容
• デザインに対して実装の実現度

項目にそって具体的な内容が揃った段階で、ドキュメントとして整理しやすいように esa に移行させ、「ガイドラインとして決めておきたい内容」と「コミュニケーションのフロー」に内容を分け、他メンバーにレビューしてもらいました。

レビューでアップデート

会話しながらこのドキュメントの目的や最終ゴールの認識をそろえ、 ドキュメントとして、初見の人にも伝わるように時系列や見出しを整理していきました。

「コミュニケーションのフロー」は、タイミング と そのタイミングですり合わせたい内容 の2点に絞った内容となりました。

まとめ

UIデザイナーとフロントエンド実装者のコミュニケーションフローを明文化できたことで、職域間で認識のずれなく、チームワークをスケールしてプロジェクトに貢献できる仕組みの一助となると感じています。
様々なプロジェクトやチームに最適な形でコミュニケーションフローを役立てられるように、ドキュメントを作って終わりではなく、変化させながら更なる充実を目指したいです。