UIデザインとフロントエンドの連携について振り返りしてみた

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

Gaji-Labo では受託案件を進めながらOKRに取り組んでいます（OKRについては原田の書いた 受託でもOKRを回すコツをご一読ください）。

そのOKRの中で、チームとしての案件処理能力を向上させるために「UIデザインからフロントエンドへの連携をよりシームレスに行える状態にする」ことを今期KRの一つに設定しています。
社内のデザイナーと実装者間でKRを達成すべきアクティビティから考え、 まずは最初のステップとして、UIデザインとフロントエンドの連携について、実プロジェクトで振り返り、Keep （維持したい良いこと）と Problem （改善したい課題）を洗い出すことから始めてみました。

UIデザインとフロントエンドの連携でKeep に挙がった点

Keep （維持したい良いこと）として挙がった項目の一部抜粋です。

• デザイン・実装それぞれの視点から懸念点を洗い出し、事前に仕様のすり合わせをすることで認識の齟齬なく進められた
  • レスポンシブのブレークポイント
  • 色変数名の決め方
  • 余白の定義 など
• モバイルファーストでデザイン・実装着手の場合、タブレット/PC 独自のデザインが必要なコンポーネントについて、着手前に仕様や優先度のすり合わせをすることで互いに手戻りなく進められた
• 上記により、あらかじめ課題点を検証してからクライアントに共有することができた
• 単体コンポーネントが持つスタイルの責務を定義しておくと、複数人での実装がスムーズ
• コンポーネントの色、幅、余白などデザインガイドラインが固まっているとページごとのデザイン揺れの確認コストが減り、メリットは大きいと実感
• 定例打ち合わせを設けると、デザインと実装のすり合わせの起点ができる
• Slack でデザインと実装のすり合わせたい内容を非同期でメモしつつ、ビデオ会議で会話できるとスムーズだった

UIデザインとフロントエンドの連携でProblem に挙がった点

次に、Problem （改善したい課題）として挙がった項目の一部抜粋です。

• ページデザインが先行するとページごとにデザイン揺れや仕様の確認が出てくる場合があり、実装スピードに影響する
• 色やフォントサイズなど、値にバリエーションのあるコンポーネントはパターンを用意されたい
• デザインアップデートされた箇所が分からないことがある
• コンポーネント単位での実装進捗をデザイナーに共有した方がいいか考えたい
• UIフレームワークを使用する時は、UI仕様を理解しておくことはデザイン・実装ともに必要
• デザイン上、UIフレームワークから離れそうなパターンは、あらかじめ実装者とすり合わせるとよさそう

Keep と Problem をたたきにディスカッション中

Keep でも Problem でも、仕様決定のためのコミュニケーションやすり合わせのタイミングについて意見が出ています。また、実装上、用意してほしいデザインパターンやデザインレビューする箇所を明確にすることも、連携をシームレスにするポイントとなりそうです。

これらの項目をたたき台に、私たちが提供できるUIデザイン とフロントエンド開発の価値をより強力にすべく、Gaji-Labo式の仕組みとして機能させられるようにディスカッションを進めているところです。

今回は、実プロジェクトの振り返りで、UIデザインとフロントエンドの連携について Keep と Problem で挙がった項目を紹介しましたが、今後も「UIデザインからフロントエンドへの連携をよりシームレスに行える状態にする」過程をブログで紹介していければと思います。