事業にインパクトを与えるために、新卒1年目のデザイナーが、開発プロセスで取り組んだこと

はじめまして。ビズリーチ事業部プロダクトデザイナーの古谷です。

2022年新卒で入社し、「ビズリーチ」の求職者様（toC）向けプロダクトの機能開発や改善を担当しています。
今回は入社後1年間で行った業務の紹介をしつつ、デザイナーがプロダクト開発の現場に入り込み、成果を出すために考えたことを紹介します。
この記事を通して、Visionalの新卒1年目のデザイナーの働き方について知っていただく機会となれば嬉しいです。

※このストーリーは、2023年10月5日に、企業ブログ「Visional Designer Blog」で公開した記事を転載したものです。

主な業務の紹介

この1年間で取り組んだこととして、「プロダクトグロース」と「プロダクト基盤改修」の２つを軸に業務を行いました。

「プロダクトグロース」に関しては、主に求職者様（toC）向けプロダクトをより使いやすくするための機能改善であったり、転職成功者様に利用していただくギフト機能の追加を行いました。また、部内のCRMチーム（お客様との関係性の維持、構築を行うチーム）と連携しながら、「ビズリーチ」アプリの全体的なお客様の体験を向上するための施策におけるデザインや実装を担当しました。

もう１つの「プロダクト基盤改修」は、Web版サービスのアーキテクチャ刷新プロジェクトに携わっていました。こちらはグロースとは異なり、技術的負債を解消しつつプロダクトの基盤を構築するためのもので、私はデザインとフロントエンド開発を円滑にするための取り組みをいくつか行いました。

この記事では主に「プロダクト基盤改修」のプロジェクトにおける取り組みについて共有していきたいと思います。

デザイナーとエンジニアの共通言語の整備

今回の刷新にあたっては、お客様の目に触れる範囲でのデザイン（UIなど）の変更は基本的に行わず、なるべく既存のデザインを引き継ぐ形で開発を行っていました。

しかしながら、既存のプロダクト基盤ではデザインルールが明確に定義されていなかったり、同じ用途で類似のコンポーネントやデザインの各要素（色、余白など）が乱立していました。また、実装時に見本となるデザインデータ自体が存在してなかったこともあり、スピード感を持ってフロントエンドの開発ができる状態ではなく、私はそれらを整備することから始めました。

具体的にはColor、Spacing、Typographyなどといった小単位の要素（デザイントークン）を定義し、エンジニアとデザイナーが一貫性を持ってUIをデザインや実装をしていくための基礎を作りました。

また、UIコンポーネントのデザインや整備も併せて行いました。

しかし、当初は、後になってから考慮できてなかったパターンを発見してデザインや実装を追加で行う必要が出てしまい、手戻りを発生させることがありました。逆に、同じ用途で異なる色が増えすぎていたりと、不必要なデザインパターンを生んでしまったこともありました。

そこで、エンジニアを巻き込み、共同でコンポーネントを定義するプロセスを設けました。デザイナー・エンジニア間で細かく共通認識を取りつつ、将来的なコンポーネントライブラリの運用コストを抑えていくために、実装すべきデザインパターンの洗い出しをしました。

これによって、実装対象を明確にし、コンポーネントを作る目的や命名のルールなども共有され、スピーディーに開発ができるようになりました。

早期段階でデザインの品質の担保を行うプロセスの構築、運用

開発スピードを担保することに加えて、デザインの品質を担保していくためにチームで行ったことを紹介します。

１つ目の取り組みとして、早期の開発段階で実装成果物のレビューをするようデザインQAのフローの見直しを行いました。ここでいうデザインQAとは、実装成果物がデザイン段階で意図したものと合致するのかを確認するフローを指します。

既存のフローでは、検証環境にリリースしたものを一律にQAしており、大小問わず様々な粒度の指摘が発生し、大きな手戻りを生んでいましたが、今回のフローの変更によって検証環境へリリース時の指摘が減少し、手戻りを防ぐことに繋がりました。

詳しいフローはチームのデザイナー福田が執筆した記事をご参照ください。

リリースの早さと品質を保ち続けられる体制へ。 「ビズリーチ」のデザイナーとエンジニアの連携フロー

２つ目に、上記のデザインQAフローよりも早期の段階で開発チームのテストプロセスを利用し、デザインや仕様の抜け漏れを検出するフローを追加しました。

具体的には、開発チームではTDD（テスト駆動開発）を採用していたため、実装前のテスト作成時に行う分析活動にデザイナーも参加するようにしました。そこで得られたフィードバックをデザインに反映することによって、実装後の手戻りが低減されました。

インパクトのあるプロダクトデザインをするために

デザインを始めたばかりの頃に、アーキテクチャ刷新のプロジェクトについて「関心を持てるか？」と問われたとすれば答えは「否」だったかもしれません。

抽象的な表現にはなりますが、とにかく革新性のあるデザインやプロダクトを考え、成果を出していくことに関心が高かったためです。

それはもちろんデザイナーとして大事な思考だと考えていますが、ある日、部内のPdM（プロダクトマネージャー）の方から、「プロダクトの提供便益の大きさは課題の質とソリューションの質の掛け合わせで決まる」ということを教わりました。

そこで「まずはプロダクト基盤の質向上に貢献して、ソリューションの質を上げられれば、いずれ革新性のあるデザインでビジネスにインパクトを与えられるのではないか」と考えるようになり、それがデザイナーとして大きな成果に繋がると捉え、自ら手を挙げてプロジェクトに参画しました。

「プロダクト職」としてできることを考え続けたい

現場配属前の新卒研修にて、品質管理に関する体系的な知識について学ぶ機会があったのですが、そこで学んだことを今回の事例のように、デザインプロセスに活用することができたのは良い経験でした。

Visionalのプロダクト職の新卒研修についての詳細は、23新卒のデザイナーが執筆した記事をご参照ください。

2023年 新卒研修③ 総括編 —— 研修から学んだモノづくりへの姿勢

Visionalが大切にするモノづくりへのスタンスとして、「エンジニア」や 「デザイナー」という役割にとらわれず、 自身の強みを生かしながら、 モノづくりに関して必要な一連の行程に関与することがあります。

私自身も引き続き、幅広くプロダクト開発に関する知識を身につけていき、主軸であるデザインに関する知識や技術を最大限活用し、価値のあるプロダクトをつくっていきたいです。

▼25本選考はこちら