デザイナー×エンジニアで行う『ペアUI改善』のススメ

リリース前のちょっとしたUI修正をエンジニアがデザイナーとペアで修正したら、早くていい感じに進んだのでUI改善でも取り入れてみた話です。

UI改善する箇所は長くサイトを運営していると溜まってくる微妙な崩れや、いつか直したい案件のやつ。「なんか気になるを一掃するぞ！」とやってみました。

『ペアUI改善』の目的

目的は以下のとおり。デザイナー・エンジニアの相互理解と、負債の解消がメインです。

・チケットに上がりづらい余白・文字サイズ等のUI修正
・数字に上がりづらいUXの向上
・デザイナーがUIの修正方法を知る
・プログラマーが細部のデザイン意図を理解する

『ペアUI改善』の流れ

基本的にはペアプロと同じ流れを想定。

準備

・対象のページを決める（今回は複数ページ）
・『気になるリスト』作成。なんか気になる箇所をまとめる
※気になるリストは日々上がるUI修正チケットとまとめておくと良さそう

手順

１．デザイナーとエンジニアが同じモニターの前に並んで座る
２．UI改善（３０分）
　　・タイマーをセットして時間を守る
　　・スプレッドシートを参考にひたすらUI改善
　　・なぜ修正するのか、どう修正するのかを共有しながら進める
　　・適切にコミットする
３．休憩（１０分）
４．UI改善（２と同様、３０分）
５．直したものを確認（５分）
６．ふりかえり（５分）
　　・やってみた感想、良かったこと、変えたいことを話す
７．プルリクを作る

やってみた

やってみた感想

【良かったこと】

デザイナーがいつも気にしている余白・サイズを理解できた
話しながらやるので、なぜこの余白・サイズなのかを聞きながら修正することで、エンジニアとして実装時に気をつけたほうが良いポイントを理解でき次回からの実装精度が上がりそう。

いつか直したいを直せた
後回しになっていた気になる点をまとめて修正できてとてもスッキリ。

修正チケットあげて都度修正より数こなせて良い
チケット管理にはJiraを使っていますが、いちいちチケットを上げて個別にプルリクを出すよりも数をこなせた。

【気になった・変えてみたいこと】

『今日はどのページ』とかあると良いかも
準備の時間をあまり取れず『気になるリスト』がちょっと少なかったため複数ページを修正しましたが、特定のページに集中してやったほうが効率が上がりそう。

スプリント終わったときのほうが良さそう
スプリント中のタスクとして『ペアUI改善』をしましたがスプリント外の時間でやるのがよさそう。他社でリファクタリングをする部活『整地部』なんかもあるようなのでリファクタの一環としてやりたい。

ページ跨いだ修正はちょっと大変
他にも影響が出そうな変更だとこの時間内で終わらせるのが難しい可能性を感じた。他ページを気にせず１箇所だけ修正の方針だけ確認して別チケットを切ってあとで対応とかにしたほうが良さそう。

Windowsでも見つつやると良いかも
二人ともMacでやっているとWindowsでのズレや見え方に気づけないのでデザイナーはWindowsで見ながらやると良いかも。

併せてスタイルガイドも作りたい
作り途中のスタイルガイドがあるのですが今回修正したUIをガイドに入れるなどルール付けを出来るようにしていきたいなと思った。スタイルガイド作成のための時間取ってやったほうが良いかもだけど。

まとめ

手法の改善点はたくさんありますが、デザイナー・エンジニアの相互理解やサイトの改善のための良い取り組みだと思います。エンジニアがやっているリファクタリングと合わせて定期的なイベントにしていきたい💪