overflowでUIをいい感じにするお手伝いでやったこと
こんにちは！Offers Tech Blog でははじめまして。株式会社 overflow で、技術顧問をしている @masuP9 です。
さて 4 月から始めた overflow のアクセシビリティとか UI をいい感じにするお仕事、もう半年も経ちました。それほど長い時間コミットできていない私ですが、この半年ほどでやった取り組みをご紹介します。
私が overflow で副業することになったきっかけは overflow社でアクセシビリティとかUIをいい感じにするお仕事 / masuP.net をご覧ください。
全社向けアクセシビリティ研修
最初はアクセシビリティのお仕事からです。とにかくまずは「アクセシビリティ」ってなに？役に立つの？なんでやるの？どうやってやるの？ということをお話させていただきました。
当日も多くの、また開発チームでない方からも質問をいただき、アクセシビリティに対する熱量を感じました。特に社内システムを担当している方から質問があったのは、働く上での DE&I を大事にしている overflow らしさを感じました。
全職種向けということで、後日詳しく！と後回しにした開発向けの技術的な勉強会は色々ありましてまだ開催できていないのですが、近日開催予定です。
モブデザイン
overflow では、アクセシビリティ以外の UI に関連する取り組みもお手伝いしています。その取り組みのひとつとして、デザインに関する意思決定の質を高めるためのモブデザインを開始しました。
overflow はデザイナーの採用を積極的に行っており、デザイナーの人数も増えています。そういう状況において、安定したクオリティを出しながらも事業のスピードを加速するような速さも求められています。ちょうど私がデザインチームのお手伝いを始めたときに、デザインチームの共通の価値観、Mission・Value が作られたところでした。
さてこの Mission・Value やデザイン原則などは作っただけでは役立てたり浸透させたりすることは難しいと考えています。幅広いユースケースや事象に対応できるよう抽象的になり、人によって解釈がぶれる、実作業にどう適用していいか分からないなど、うまく使えないことが多いでしょう。
Mission・Value もある意味デザインのための道具でもある、と私は考えています。チームとして、デザインの意思決定に実際に役立つのか、各メンバーで同じような意思決定ができるのか、などの使い方を共有し習熟していく必要があります。
その習熟の方法の 1 つがモブデザインです。1 つのデザインタスクに対してデザイナー全員で、なぜその意思決定が行われたか、その意思決定や、意思決定の仕方は Value に基づいていたかを意識することでチームとしての習熟度をあげることができます。
まずは、週のはじめにその週のスプリントで作業するデザインタスクを 1 つ選定し、週の真ん中の水曜日にそのデザインに対して全員でモブデザインをします。タスクにアサインされたデザイナーが、タスクの目的や背景、現在の案などを共有し、どの方向性で行くかを議論します。
まだモブデザインを通じて Mission・Value の浸透は見られませんが、タスクの目的や背景を言語化して他者に説明することそのものが、課題への理解を深め目的に立ち返る効用があるようです。実際に参加してくれたデザイナーにはモブデザインの効果を感じてくれたみたいです。
リバースモデリング勉強会
他にもデザイナー向けの取り組みとして「リバースモデリング勉強会」を実践しました。
リバースモデリングとは、すでに実装されている画面の視覚情報から、画面内で扱っているデータをモデリングする、という行為のことを言っています（キチンとした言い方じゃないかもしれませんが…）
この場合、大切なのはユーザーが見えている情報をそのままモデリングする、ということです。開発者だから知っている API やデータベースの情報は考慮に入れません。見えている情報をそのままモデリングした後、実際のデータモデルと比較してみたり、理想形を考えてみたりすることで、画面の改善に繋がります。
overflow のデザイナーはどちらかというと情報設計よりも視覚表現に強いキャリアを歩んできたデザイナーが多いため、今回は改善というよりは情報構造を意識したデザインに慣れてもらう目的で実施しました。
勉強会では、すでにリリースされている Offers の管理画面を対象に、デザイナーとフロントエンドエンジニアにペアで取り組んでもらいました。
デザイナーのメンバーからは慣れずに難しかったけど、エンジニアの考えがわかってよかった、という感想がありました。実際に一緒にチームで働いているフロントエンドエンジニアと共同で作業することで、お互いが画面を設計するときの思考が共有されているようでした。
勉強会としては 1 回やっただけですが、その後も自発的にリバースモデリングに取り組んでもらえているようです。
リバースモデリング勉強会を通じて、デザイナーとエンジニアが共通言語（データモデル）を持てば、今後のコミュニケーションもスムーズに行われることを期待しています。
今後
今後もアクセシビリティや情報設計などデザイナーとエンジニア、それ以外の職種とも共通のものさしを作り、コミュニケーションを円滑にし、意思決定を早めドンドンとプロダクトがよくなる基礎を作っていきたいと考えています！
そんな overflow では開発メンバーを大募集中だそうです。正社員はもちろん、私のような副業でのジョインも歓迎だそうですよー。
副業転職の Offers 開発チームがお送りするテックブログです。【エンジニア積極採用中】カジュアル面談、副業からのトライアル etc 承っております💪 jobs.overflow.co.jp
Discussion