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

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

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

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

前提

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

やったこと

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

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

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

レビューでアップデート

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

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

まとめ

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

Gaji-Laboでは、HTML/CSSコンポーネント設計経験が豊富なパートナーさんを募集しています

現在、Gaji-Laboの開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。現在は特に正しいHTMLマークアップやCSS設計の業務経験が豊富なWebフロントエンドエンジニアを必要としています。


パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!


投稿者 横田 東母子

運用やアクセシビリティに配慮したHTML/CSSの設計やコンポーネント作成、スタイルガイドの構築、コードレビュー、組み込み、要件の整理、社内進行管理、顧客とのコミュニケーションまで、ジョインしたチームが前に進むためにあれこれ担当しています。子育てと仕事のバランスを楽しめるよう、日々模索しています。