<p><strong style="color:#c7243a">※ 画像はプロダクトの裏側の事情になるため、ぼかしを入れさせていただいております。</strong><br></p><h2 id="hd2c91c24e4">経緯</h2><p>私は2021年6月から2022年1月まで「BizReach Campus」に関わっており、フロントエンド・デザインの2つのチームに所属し、社内のデザイン・フロントエンド負債を解消するプロジェクトを担当していました。<br>私が在籍していた時点で、BizReach Campusはリリースから5年が経過しており、新規機能の開発を優先していたため、デザイン・フロントエンド双方の負債解消は後回しにされていました。多数の負債が存在し、類似コンポーネントや100を超えるカラーコードが乱立していたため、機能開発を進めるうちに負債が増え続ける状況に陥っていました。そのため、改めてデザイン負債の解消とフロントエンドのモダン化移行プロジェクトが発足することとなりました。<br></p><h2 id="h73b1e1edd0">1. 課題とスコープの定義</h2><p>最初に取り組んだことは、デザイナー・フロントエンドチームを含め、いつまでに、何を、どの程度まで改善するのか、プロジェクトのゴールを定めることでした。BizReach Campusには、OG・OB向けアプリ、学生向けアプリ、企業側アプリなど複数のプロダクトが存在するため、本プロジェクトだけで全ての負債を解消することは困難でした。そのため、チームのゴール認識の齟齬が生まれる可能性があったため、まずはスコープを制限することで、プロジェクトの目的意識をチームで共有しました。<br></p><h2 id="hb454e3dd38">2.乱立した既存コンポーネントの収集</h2><p>スコープを定めた後は、デザインファイル、開発画面、プロダクト画面を参照しながら、類似したコンポーネントや乱立しているカラーコード、タイポグラフィなどを収集していきました。開発が先行してデザインファイルが存在しない画面もあったため、開発画面で画面を出し分けて参照したり、プロダクト画面を隅々まで確認して、どのようなコンポーネントが存在するかを洗い出しました<br></p><h2 id="h688d82a61b">3.スタイルガイドの作成</h2><p>乱立したコンポーネントをどのようにマージするのかを自分でコンポーネントのたたき台を作りながら、チームに共有・協議し、設計していきました。スタイルガイド作成におけるカラーの命名や分類方法、複数のデザイナーが触ることを考慮した運用ルールをデザイナー・エンジニアの方にレビューいただきながら作成を進めました。<br>特に難しかったのはカラーの命名で、どうすれば意図しないカラー利用や無駄に新規カラーを増やさない運用設計ができるかを考えながら設計していました。この際、他事業部(キャリトレ・HRMOS)のデザイナーにどのようなカラー設計を行っているのかヒアリングを行わせていただいたり、他社のデザインシステムを参考にしてBizReach Campusで最も開発工数が少なく、デザイナーが運用しやすいスタイルガイドを作れるかを精査していきました。<br><img src="https://images.microcms-assets.io/assets/745b8ed864fb400b9f1c82166c34c100/8dcf4c7b95ae4f67911e5a71541d1046/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-09-11%2015.31.17.png" alt=""><br></p><h2 id="he7776c855e">4. 設計したUIの実装業務</h2><p>スタイルガイドの作成と同時にフロントエンド開発にも関わらせていただきました。React + TypeScriptを用いた開発に着手し、Storybookを含むコンポーネントの実装に従事しました。<br><img src="https://images.microcms-assets.io/assets/745b8ed864fb400b9f1c82166c34c100/166b2322bbdd40f69395cfba0ac998c6/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-09-11%2015.31.48.png" alt=""><br></p><h2 id="h3bdc5e7525">総評</h2><p>負債解消やスタイルガイドの作成は、開発チームとの協力と既存の実装状況への理解が欠かせません。<br>デザインファイルの整理は一人のデザイナーでも可能ですが、継続的で安定したスタイルガイドの運用やUIの再設計・実装には多職種の協力が不可欠です。私のフロントエンドチームでの経験がここで大きく役立ちました。<br>新機能の開発とUIのリアーキテクチャの同時進行は複雑で、保守性を考慮しないデザインは後に大きな負担となります。私はこれを実際に経験しました。<br>その経験を元に、今は再利用や保守が容易なUI設計に焦点を当て、デザインシステムの研究を積極的に行っています。</p>