パーソルキャリアが提供するダイレクト・ソーシングサービス「dodaダイレクト（旧doda Recruiters）」は、2023年12月に名称を変更し、さらなるサービス拡大に向けて着実に歩みを進めています。一方、ダイレクトソーシング市場全体が急速に発展していることから、立ち上げ当初より運用してきたアーキテクチャの再構築が求められている状況です。
そこで今回は、dodaダイレクト アーキテクチャ再構築PJT（以下リアーキPJT）に内包される「デザインシステム」に注目します。UXデザイナーとフロントエンドエンジニアが協業し、プロダクトの利便性と開発効率の向上をどのように目指しているのでしょうか。本プロジェクトをリードするプロダクトデザイナー近藤と、フロントエンドエンジニアT氏に話を聞きました。
- アーキテクチャの刷新でUI/UXを強化する。リアーキテクトとデザインシステム導入の必然性
- デザイナー×エンジニアが生み出す協業体制――デザインシステムの構築に迫る
- 手軽にアクセスできるドキュメントを整え、迷わず使える“優しいシステム”を目指す
- プロダクトごとに最適化される未来。dodaダイレクトを超えて拡張するデザインシステム
アーキテクチャの刷新でUI/UXを強化する。リアーキテクトとデザインシステム導入の必然性
――本日はよろしくお願いします。まずはお二人のこれまでのキャリアと、現在の主な業務を教えてください。
近藤：2021年4月に新卒で入社し、最初は転職サービス「doda」のコンテンツマーケティング領域でバナーや記事デザインなどを担当していました。その後、「dodaダイレクト」に異動し、プロダクト全体のUI/UXデザインを担当しながら、営業資料のデザインやデザインシステムの構築を手がけています。
T氏：大学卒業後はWebデザインや設計に携わりながら、徐々にエンジニア領域にシフトしていきました。前職では、動画配信サービスのコンテンツ制作やソーシャルゲームの開発を経て、10年ほどファッションテック系のベンチャー企業に勤めていました。
私自身、転職を繰り返す中で多くの人材サービスを利用してきたので、いつかは人材サービスに携わってみたいと考えていたんです。また、フロントエンドエンジニアとしてデザインシステムの領域にも強い興味がありました。
ちょうどパーソルキャリアでデザインシステムを任せられる人材を探していると聞き、「自分のやりたいことを実現できるかもしれない」と思い、2024年2月にパーソルキャリアへ入社しました。
現在は、リアーキPJTでフロントエンド部分を主に担当しています。今回のデザインシステムの導入では、近藤さんと一緒に技術的な検証を進めています。
――リアーキテクトとデザインシステムを同時に進めるに至った経緯を教えてください。
T氏：dodaダイレクトは2016年頃にサービススタートしましたが、当初はシステム開発の大部分を外部に委託していました。その後、内製化を進めたものの、仕様書がほとんど管理されていなかったため、システム内部の実態を把握できない状況だったと聞いています。
その結果、数日で終わりそうな改修作業に膨大な時間がかかってしまうなど、非効率な状態が続いていました。運用フローを整えることで一定の改善はありましたが、改善活動のたびに調査やテストに膨大な時間がかかり、根本的な問題は解消できずにいたんです。そこで、2024年に基盤そのものを見直すリアーキPJTが立ちあがりました。
▼リアーキPJTの詳細はこちら
近藤：私自身、入社当初からコンポーネントまわりが整備されていないと感じ、デザインシステムを導入してプロダクトを整理したいという思いが強くありました。しかし、実現するにはエンジニア・デザイナー双方のコスト投資が不可欠であり、なかなか手を付けられずにいたんです。そんな折、フロントエンド領域に明るいT氏さんが入社し、デザインシステム構築に向けたチームを構成できるようになりました。
――デザインシステムを導入するメリットは何ですか？
近藤：開発側の負担を減らせることです。例えば、開発で使用するボタンが統一されていれば、エンジニアもデザイナーも迷わずに作業できます。ところが、複数のパターンが混在していると、そのたびに仕様を確認し直す必要がでてきます。そうした微妙なズレが積み重なるほど、確認工数が膨大になってしまうんです。
T氏：ユーザーインターフェースは建築によく例えられますが、今の状態は統一感のない家に近いイメージですね。玄関ドアのノブが右で外開きのものもあれば、横のドアはノブが左で内開き、さらにその隣は引き戸。単体で見ると問題ありませんが、使う人からすると「ここはどうやって開けるんだ？」という違和感が生じるんです。
そのため、リアーキテクトで根本の構造を見直しつつ、デザインシステムでUIを標準化することで、統一感のあるUIをローコストで作成できるようにする狙いがあります。
近藤：実は、デザインを整理することで、ユーザーにとっても使いやすくなるというメリットもあるんです。サービス全体でデザインが統一されていると、「このボタンは登録ボタンだよね」「この形のものはこう動くよね」と自然に理解できます。その結果、サービスにおけるユーザーの利便性が高まり、開発側にとっても扱いやすいプロダクトになるんです。
デザイナー×エンジニアが生み出す協業体制――デザインシステムの構築に迫る
――デザインシステムにおけるお二人の役割と、取り組みの際に注意している点を教えてください。
近藤：私はコンポーネントのデザインや詳細な設計を決めています。決定した情報をT氏さんに渡し、コンポーネント化してもらう。その後、モックアップと呼ばれる完成形に近い試作品を作成し、実際のプロダクトで使えるように微調整しながら進めています。
T氏：Reactを使ってコンポーネントを作成する際、技術的な観点から共通化したい部分を近藤さんに相談しています。例えば、「名称変更」機能を作る際、同じような機能をコピーして使うと、色や余白などが少しずつ違うものができるんです。
結果的に、用途は同じでありながら、似たようなコンポーネントが乱立してメンテナンス工数も膨れ上がります。一方、共通要素を一つにまとめて、必要なところだけをプロパティで外部から変更できれば、コンポーネントが統合されるので効率的なんです。
近藤：そうですね。コンポーネントの背景も含めてしっかり設計しているため、統合しない場合もあります。そのため、T氏さんとの週1回のミーティングで、「ここは統合しよう」「ここは分けたほうがいい」と議論を重ねています。
デザインシステムを“使う”のは、プロダクトのエンドユーザーではなく社内のエンジニアです。だからこそ、エンジニアの皆さんが迷わず使える状態に整えることが重要なんです。
――デザインシステムの導入は多くの企業で注目されていますが、どのプロダクトにもそのまま適用できるのでしょうか？
T氏：デザインシステムの作り方を解説する書籍やセミナーが数多くありますが、実際に同じ手法をそのまま適用してもうまくいかないことが多いんです。組織構造やプロダクトの性質、作り手のスキルレベルなどを踏まえて調整しないと、机上の空論に終わってしまいます。
近藤：そうですね。デザインシステムは見た目のUIコンポーネントだけが成果物ではありません。運用フローやルール作りまで含めて一つの“システム”にしないと、運用していく中でルールから外れた要素が増えてしまい、せっかく改善した効果が薄れてしまうことがあるんです。
T氏：プロジェクトの大きな目的は生産性の向上なので、運用フェーズで破綻しないようにデザインシステムを考える必要があります。自社の環境に合わせて設計することが、デザインシステムの本質だと思います。
手軽にアクセスできるドキュメントを整え、迷わず使える“優しいシステム”を目指す
――dodaダイレクトのデザインシステムを構築するうえで、どのような点を重視していますか？
近藤：大きく二つの点を意識しています。一つは、必要以上にルールを縛らず、運用後の追加要素にも対応できる柔軟性を持たせることです。変化に耐えうる設計が初期段階のデザインシステムにおける重要なポイントだと考えます。
もう一つは、誰でもアクセスしやすく、簡単に内容を確認できる場所にドキュメントを集約することです。現在は、Confluenceに1コンポーネントあたり1つのドキュメントを用意していますが、一カ所だけにまとめてしまうと誰も使わなくなる恐れがあります。
そのため、運用に備えてFigmaやStorybookとも連携し、メンテナンスコストを抑えながら管理していく方法を模索しています。
将来的には、これらを一つのハブとして集約できれば理想的ですね。
――T氏さんは前職でも同様の業務をされていたと聞いています。dodaダイレクトのデザインシステムは一般的なものと比べて違いはありますか？
T氏：dodaダイレクトは業務ツールに近いプロダクトなので、インターフェイスそのものは一般的なものが多く、大きな違いは感じません。ただ、これまではフロントエンド専任のエンジニアが少ないこともあって、必要なルールや指針が整っておらず、担当者による独自の流用が起こりやすい状態でした。そのため、フロントエンドの深い知識がなくても扱える、簡潔かつ統一感のある実装を第一に考えています。
また、企画担当者がワイヤーフレームを作成することもあるので、リアーキテクト後は、デザインシステムを踏まえた設計図を作成できるようにするのが理想ですね。そうすれば、デザイナーの工数を削減でき、より本質的なUI/UX改善に注力できます。
他社の事例を見ると、高度なフロントエンド専門チームを組織し、複雑なデザインシステムを細部まで作り込むケースも珍しくありません。一方で、私たちは誰が関わっても迷わず使える“優しいシステム”を目指しています。そこがdodaダイレクトの独自性と言えるかもしれませんね。
プロダクトごとに最適化される未来。dodaダイレクトを超えて拡張するデザインシステム
――デザインシステムで目指すゴールを教えてください。
T氏：まずはリリースの時点でデザインシステムがしっかり機能する状態を目指しています。また、リアーキPJTの難易度は高いですが、デザインシステムを組み込むことでアーキテクチャをさらに強化し、開発効率や事業推進にも貢献していきたいですね。
近藤：デザインシステムを導入して良かったと感じてもらえるよう、社内のエンジニアが迷わず使える仕組みをしっかり整えたいですね。その先では、基幹システムのように、ある程度決まったデザインシステムを作って、プロダクトに合わせてそれぞれカスタマイズしていく。そうすることで、プロダクト全体を統一したいと考えています。
――最後に、リアーキテクトとデザインシステムを通して、今後どのように発展させていきたいかお聞かせください。
T氏：いずれはデザインシステムの“ポータビリティ”を確保して、社内の他プロジェクトにも展開したいですね。現在はリアーキPJTの中で進めているので、すぐに広げるのは難しい面があります。
さらに、汎用的に展開するためには、さまざまな人が等しく理解できるよう、ルールをよりシンプルにしていく必要があります。そのため、デザインシステムの構築を進めながら、どのような方法が最適かも検討していきたいと考えています。
近藤：まずはdodaダイレクトで成功事例を作ることが目標です。そのためにも、デザインシステム導入によって開発スピードがどれだけ上がったか、改修コストがどれだけ下がったかを数値で示し、有用性をしっかりと伝えていきたいと考えています。最終的には他のプロダクトでも自然に使われる状態が理想ですね。
――ありがとうございました！
（取材＝伊藤秋廣（エーアイプロダクション）／文＝嶋田純一／写真＝長坂 佳宣（PalmTrees inc. ））
T氏
タレントソーシング事業開発本部 プロダクト統括部 プロダクト開発部 dodaダイレクト_エンジニアリンググループ リードエンジニア
大学卒業後はWebデザインや設計に携わりながら、徐々にエンジニア領域にシフト。動画配信サービスのコンテンツ制作やソーシャルゲームの開発を経て、10年ほどファッションテック系のベンチャー企業に勤め、2024年にパーソルキャリアに転職。
近藤 鷹冶 Takaya Kondo
カスタマープロダクト本部 デザイン統括部 デザイン2部 dodaダイレクトデザイングループ リードデザイナー
2021年4月新卒入社。 大学時代では統計学/データサイエンスの分野を中心に学んでいたが、在学中にデザインとの出会いをきっかけにインハウスデザイナーを志す。入社後はdodaでデザイン業務に従事。2022年9月よりdodaダイレクトのデジタルプロダクトデザイナーとしてジョインし、現在はプロダクトの機能改善からからコミュニケーションデザインまで幅広く担当している。
※2025年2月現在の情報です。
