この記事はfreee Developers Advent Calendar の10日目です。
こんにちわ。土日に美味しいクラフトビールを飲めるか飲めないかでその週の体調が左右される freee株式会社 UXデザイナーのShotaです。
私の一番好きなクラフトビールのスタイルはHazy IPAです。
Hazy IPAは通常のIPA（Indian Pale Ale）の派生として2016年頃から流行り出したまだ歴史の浅いスタイルです。
今回は今月の12/2にリリースしたばかりのサービス、freee スマート受発注（以下、スマート受発注）でやっているちょっと変わったUI改善の取り組み方について書いてみようと思います。
1日かけてUI改善するShota Day
スマート受発注は今月のリリースまではβ版として提供してきたサービスです。
プロダクトマネージャー1人、エンジニア2人、デザイナー1人の少数チームで機能開発をしてきました。 スマート受発注のような新規プロダクト開発では、仮説検証や不足機能の開発の優先度が高く変化も激しいので、まずはリリースして検証することを優先しました。そのため普段の開発では、細かいUIやアクセシビリティを考慮した設計に手が付けれないことが多くありました。
ある機能のリリース前、実装されたデザインチェックしている時のことです。余白が少し違っていたり、ちょっとした挙動の違いがあったり、アクセシビリティ周りが対応されていなかったりするのに気付きました。これらの課題をエンジニアに伝えると、エンジニアも同じ課題感を持っており、細かいUIの課題どうにかしたいねと話していました。
そんなこんなで「あらゆる点でユーザーに使いたいと思われるサービスを創るために細部にこだわる日を作ろう」という想いから、UI改善を1日集中してやる「Shota Day」が企画されました。
なぜ「Shota day」となったかと言うと、私（Shota）が気になった点を改善するからという理由で、その時会話していたエンジニアが命名しました。
普段はスマートな方ですが、この時はテンション高かったんだろうな。
Shota Dayの流れ
Shota Dayは毎月月末に1日かけて実施します。
その日までに私がデザイン観点で気になる課題をJIRAにチケット化していきます。 エンジニアの工数も限られているため、Shota Dayでは1日でできる範囲のチケットをエンジニアが選定し改善を行います。
1日で終わらせるためにはエンジニアが手を動かす時間を少しでも多く取る必要があります。 そのため事前に改善内容・改善する理由・実装方針を記載し、溜まったチケットを共有するためミーティングを開きます。 このミーティングも他の作業を逼迫しないよう45分間と決め、その中で実装方針の詳細などを詰めていきShota Day当日に迷わず実装に取り掛かれるように準備していきます。
これによりShota Day当日はすぐにエンジニアが実装に取り掛かれるようになります。
アクセシビリティ改善で100点！
企画してからほぼ毎月実施し6回目を迎えたShota Dayの代表的な成果として「アクセシビリティ改善」があります。
β版リリース当初は検証を優先していたため、アクセシビリティを考慮した設計が後回しになっておりアクセシビリティ上の問題を抱えてしまっていました。
そこで出たアクセシビリティ観点の課題の一例を記載します。
各種リンクや遷移ボタンをaタグ化、右クリックして新しいウインドウで開けるようにする
取引先や依頼一覧のカードをtabキー等でフォーカスが当たり、Enterで開けるようにする
フォーカス時のアウトラインが表示されていなかったのを修正
各種フォームにfor, id, aria-labelを設定
htmlタグにlang="ja"を設定
装飾用のimgタグにはalt=""を設定し、スクリーンリーダーの読み上げ対象にならないようにする
このような細かいけど重要な課題をShota Dayでどんどん改善していきました、 その結果トップページでは Lighthouse によるアクセシビリティスコアの計測で100点を叩き出すことができました！
その他のページでも平均して90点以上をとることができました。 もちろんこれが100点だからといって完璧というわけではありませんが、改善の効果を定量的な数字として表すことができました。 また、定量的な数字で示せたことでShota Dayが成果を出している取り組みであることを関係者にアピールでき、UI改善を推奨する雰囲気を作ることができました。
実際に触ってもらいフィードバックを得る
数字としては良いが、アクセシビリティ対応は本当にこれで良いのか？ということで freeeの社員でスクリーンリーダー利用者の中根さんにユーザビリティテスト形式で触ってもらいました。
実際に触ってもらったことで細かな課題も見つかったものの、ユーザーテストのシナリオ上では大きな問題もなく操作をしてもらうことができました。 さらにそこで見つかった課題も、翌月のShota Dayで改善を行いました。
実際に操作している様子を見ることで、「あれがないとここでつまづくんだ」などアクセシビリティ対応すること意味を実感することができました。
チーム内での効果
Shota DayではUI改善によりプロダクト自体がより良くなっていくのもありますが、エンジニアとデザイナーの関係性にも良い効果があったと感じています。
普段はデザイナー側の要求をエンジニアの判断でリリース優先して妥協しがちで、デザイナーは思ったとおりのものにならないフラストレーションを溜めてしまうことがありました。しかしShota Dayによりデザイナーの要件が優先され、エンジニアはUIのこだわりを実現するために全力で取り組む。
このサイクルが生まれたことでエンジニアとデザイナーがお互いの役割を尊重し合えるようになったと感じています。
また、Shota Dayでの改善を通じて意識すべきアクセシビリティ観点をチーム内で共通認識を持つことができ、最近では普段の開発でも当たり前に意識しながら開発を進めることができるようになりました。
今後の展望
これまでのShota Dayはアクセシビリティ改善やUIとしての一般的な挙動にするための改善など、クラウドサービスのUIとして求められる最低限の品質を担保するの対応をメインにやってきました。それにより、あたりまえ品質はある程度担保できるようになってきていると思います。
今後はこの品質を常に担保もしていきながらも、よりユーザーに使いたいと思われるためのUI改善を実施してきたいと思っています。
明日は弊社CEO佐々木大輔の登場です。 一体何を書くのかわからないけども、すごい楽しみだ！！
