エンジニアに喜ばれるUIデザイナーとは？ - サイボウズ新人研修でチーム開発した話
こんにちは。サイボウズ新卒デザイナーの飛田（@0b1tk）です。
3ヶ月に渡った新人研修も先日すべて終わり、いよいよ本格的に業務に取り組むこととなります。
その前に、研修最後の2週間で取り組んだ、新卒エンジニア同期たちとのチーム開発の備忘録を、デザイナー視点で熱冷めぬうちに残しておこうと思った次第です。
実践研修とは？
サイボウズの新卒デザイナーとエンジニアは、全体の新人研修（4〜5月）とは別にエンジニア向けの研修も受けます。
今年の具体的なスケジュールとしては、
・講義期間 （5/9〜5/20）
・チーム体験（5/23〜7/1）1チームあたり2週間 * 3チーム ＝ 6週間
・実践研修 （7/4〜7/15）
と進んでいきました。
↑ 講義について今回は割愛しますが、デザイナーも知っておくべき開発知識が盛り沢山のコンテンツだったので、公開された資料も添付します。
そんな研修最後を飾る実践研修は7月から2週間、新卒エンジニアとデザイナーが3チーム（4~5名）に分かれるのですが、HTTPサーバーを立てるもよし、Web開発をするもよしな自由な開発研修です。4月から続いてきたオンボーディングを締め括る集大成のイベントともいえます。
僕はコードがガッツリ書けるレベルにないので、正直参加前はデザイナーとしてなにができるか・エンジニアにどう貢献できるかが全く見えてこず、
「え、チーム開発って僕になにができるんだ…😨」
と不安が募っていましたが、一緒のチームになったエンジニア4人（フロントエンド1人・バックエンド3人）が迎え入れてくれたおかげで和気藹々とした雰囲気で進めることができたので、杞憂に終わりました。
また、それぞれが他領域にも造詣があったので、ペアモブでの作業や話し合いがとてもスムーズなバランスの良いチームだったと思います。
・・・
デザイナーとして心がけた5つの役割
僕の職能がデザインエンジニア寄りのUX/UIデザイナーであるため、4人のエンジニアと共創しながらも、いかにデザインシステムなどの保守運用視点で責任を持てるか、実務を意識しながら立ち回っていました。
1. アイデアの共有🧠
今年の実践研修は「どんな技術でなにを作っても自由」というお題だけが出されていたので、初日はチームメンバーの得意領域や取り組みたいことを出し合うところからキックオフしました。
上のホワイトボードからも見て取れるように、ブレインストーミング時点ではユーザー起点の「なぜ作るか」よりも「何を作りたいか」の機能（タスク）の議論が先行して、製品自体が複雑化する可能性があったため、最低限の必要要素（オブジェクト）だけを切り出してサービスの手がかりを探ってみることにしました。
最初にこのステップを踏襲したことで、”言葉”でなく”ビジュアル”の叩きで解像度が上がり、各々がイメージしているものの差分や実装障壁を事前共有できただけでなく、エンジニアが技術選定しやすくなったと思います。
2. 共通言語の構築💬
最終的に僕たちが作ることに決めたWebサービスは、汎用型RSSリーダーでした。
日々の業務では社内製品のkintoneやGaroonをはじめ、チームによってはSlack・GitHubなど、多岐にわたる情報を処理していますが、ときに通知を意図せず見落としてしまったり、見返したいことが流れてしまうことも少なくありません。そこで情報を1箇所に集約できるFeederのようなサービスを作ることにしました。
しかし競合製品のコンポーネントはどれも煩雑な構成で、実装時にもどこの部分を指しているか混同することがありました。
そこで早い段階でFigmaのコンポーネントに名前をつけて統一し、Figmaレイヤーにもその名前を適用・整備することで、もし仮にデザイナーが離脱してもエンジニアは何を指しているか最低限わかる状態を担保できるようになりました。
3. ドキュメントを残す📑
タスクはGitHub上でカンバン管理していたのですが、期間はわずか2週間で、さらに未知数のタスクへの見積もりが難しかったので、スプリントではなく個々人が取れるバックログを消化するスタイルを優先していました。
裏を返せば、決め事を振り返る場所がなかったり、誰が何を取り組んでいるかの進捗共有があとに残らない懸念があったので、なるべく決定事項や朝会夕会の進捗はConfluenceやkintoneに残すことに注意しています。
個人的にもメリットは大きく、誰しも耳馴染みのない技術は名前だけ聞いてもわからないと思いますが、「書く」という動作によって知ったかぶりせずに自分が何がわかっていないか分かり調べる習慣がついた恩恵がありました。
もちろん、他チームや社員の方々から見ても透明性が増しただけでなく、来年以降に参考にしてくれるかもしれない新入社員に記録を残すことができました。
💭（といいつつ、終盤は完成に追い詰められコミットルールが崩壊していたり、タスクの切り分けが不十分だったので、長期プロダクト開発ではベロシティ計測も考慮しながらアジャイルをちゃんと回そうと内省しています）
4. ロジックでデザインスタイルを定義する🛠
デザイナーとして1番注力した部分です。
具体的にはガイドラインを作成しただけでなく、以下のようなデザインルールで実装を進めていきました。
＜一例＞
・原則マージン/パディングは多くの画面サイズでも端数が出にくい8の倍数を守り、デザインプロトタイプになるべく準拠して実装を行う。ペアレビューで差分を詰める。
・カラーは「Web Content Accessibility Guidelines (WCAG) 2.0」に基づき、Figmaの「Contrast」でアクセシビリティを考慮したカラー比を採用。
・ボタンは"押せる/押せない"を明瞭にするため、hover時にCSSアニメーションを適用したり、disabledの際にはマウスポインタは「cursor: not-allowed;」とする。
・画面内の追加ダイアログはユーザーの集中を切らさないため半モーダルとし、1画面で追加完了まで完結するフローにする。etc…
5. フロントエンドが手の止まる時間を減らす💪
バックエンドがサーバー周りやAPI認証などのロジック構築をするまでの間、フロントエンドエンジニアと共にモブで画面設計をしました。
具体的には、Figmaでのデザインプロトタイピングしながら、Reactで実装された画面との差分をリアルタイムで詰め、同時並行で必要になりそうなロゴやアイコンを渡せる準備を進めていきました。
バタバタでしたが、エンジニアの生産性を上げることに特に尽力していました。
💭（途中で僕のFigma構築力を、フロントエンドのReact実装が追い抜きペアレビュー実装状態になったので、弊社エンジニア作るの速え〜つえ〜…と感嘆したり…）
まなびと今後について
多忙な2週間でしたが、バックエンドのみんなの頑張りあって無事認証まわりをクリアし、実際にデプロイされた動いたものを見たときは感慨深いものがありました。
僕の開発スキルが乏しいばかりにデザイナー1人の力では"夢を魅せる"ことぐらいしかできなかったのですが、圧倒的実装力でそれを現実にしてくれたチームメンバーに感謝しています。
成果発表会には100名近い社員の方々が来てくださり、温かいコメントをたくさんいただいたのが嬉しかったのですが、特に刺さったのは一緒に頑張ったメンバーたちからのコメントでした。
「開発がとても楽だった。これからも一緒にやりたい」
「一緒に仕事していてデザインとフロントは特に、"こいつらこれで食っていくんだな"ってことを認識させられましたね」
デザイナー冥利に尽きる言葉をもらい、報われたなと感じた瞬間でした。
・・・
そして今後は、既に走っている自社製品のデザインシステムを育てていくデザイナーになります。
少人数のエンジニアに混ざりながら、チーム唯一のデザイナーとしてデザインに責任を持つやりがいある仕事です。1番やりたかったことと組織に求められることが合致したのを嬉しく思いつつ、これからチームに貢献できるよう努めていきます。
この記事が気に入ったらサポートをしてみませんか？