「doda」サイトのSEO指標を向上させ、ユーザーが本当に求める求人情報を届けるために、今回「doda」トップページのリビルドが実施されました。
プロジェクトスタートの背景にはどのような課題があったのか。そしてプロジェクトの現在地と、今後の展望とは――プロダクト開発統括部 フロントエンドグループの梅村と和田に話を聞きました。
※撮影時のみ、マスクを外しています。
コンテンツのよさを適切な評価につなげるために、UX指標の改善に着手
――まずは今回のプロジェクトが始動した背景から教えてください。
和田：まず基本的な考え方として、「Google検索結果にある他のサイトと比較したときコンテンツ品質が同レベルで、Googleの提唱するUX指標 “Core Web Vitals” に差異がある場合、数値がよい方が上位表示される」ため、コンテンツのよさをきちんと成果につなげるためにも、Core Web Vitalsの各指標を良好にしておくことがシステム側に求められているのだと捉えています。
しかし「doda」サイトのフロントエンドについては、開発の多くを外部のベンダーさんに依頼してきており、統一された設計思想やルールがまったく無い状況で。。。結果として立ち上げ以来の長い歴史の中で多くの技術負債が蓄積され、Core Web Vitalsの数値も悪化していたのですが改善は難しい状態でした。
また企画側としては、応募や内定など転職希望者様のステップごとに設けたKPIを達成するためにさまざまな施策を行いたいのですが、これらの施策をやればやるほどSEOリスクが高まるという構造的な問題も抱えていたのです。
これらの課題を背景に、SEOを扱うスクラムのチームリーダーから相談をいただき、構造を抜本的に変えていこうとプロジェクト化に向けた検討が始まりました。
――積年の課題に対する解決策として、どのような方法を選択されたのでしょうか。
梅村：リビルドを行った「doda」サイトのトップページは、もともとコンテンツとして運用されることの多い領域だったためCMSに入っていたのですが、複数人で並行開発を行うことに向いたCMSではないので、さまざまな機能を入れるたびにデグレードが起きてしまっていたんですよね。そこで、機能を作りやすいように場所を移す必要があるだろうと考えました。
またトップページに限らずJavaで作られた領域も含めて、node.jsを使った現在一般的なフロントエンド開発環境がなく、その結果として運用が煩雑になってしまっていたため、現状に見合ったフレームワークを取り入れる方針で検討を進めました。
最終的には、トップページの中でも特に課題になっていた指標「CLS（Cumulative Layout Shift）」を改善するために「Next.js」と呼ばれるReactのフレームワークを採用。Next.jsが仲介する形で各所から必要なデータを集め、画面を作った上で返却する仕組みを作ることで、ページ閲覧中のレイアウト変更を解消するという方法を選んでいます。
――数あるフレームワークの中で、今回Reactを選択された判断基準を教えてください。
和田：トップページから始めたリビルドを今後他の領域にも広げていくことも見据え、「運用保守まで落としやすくする」という観点から選定しました。現状「doda」のアプリがReact Nativeで作られており、コアとなるReactについてスキルを持った方々が一定数社内にいるため、メンバーの異動や退職によって動かせなくなるというリスクを下げられます。
梅村：あとは採用の観点もそうですね。感覚的にではありますが、AngularJSに比べてReactの方が扱えるエンジニアさんも多いだろうと考えたことも、一つの決め手になっています。
積年の課題に着手できた鍵は、「事業」と「技術」二つの観点の両立
――プロジェクトの現在地と、現時点で見えている効果や課題などがあれば教えてください。
梅村：リリース後に一度障害が起きてしまったものの対応が完了し、現在は安定して稼働しはじめたという状況です。
数値的な効果としては、課題となっていたCLSについては、ページ閲覧中のレイアウト変更をほぼ0にまで解消することができました。ただサーバーサイドレンダリングをしている関係上、LCP（Largest Contentful Paint：コンテンツの最大描画時間）は改善が必要な数値まで低下しそうな傾向が見えているため、今後磨き込みを行っていきたいところですね。
ビジネス的な観点では、このプロジェクトにより各スクラムのKPIなどの数値が落ちることなく稼働できているので、一安心かなと思っています。
――長い間抱え続けてきた課題に対し、今回プロジェクトスタートに漕ぎつけられたこと、そして現段階で成果をあげられていることの要因をどのように振り返られますか。
梅村：まずフロントエンドグループの前身として、和田さんや私をはじめとした数名のメンバーで集まり、フロントエンド領域におけるフローなどの改善を行っていて。そこで足元を固められたこと、派生してフロントエンドチームができフロントエンドを専門的に担う組織が初めて生まれたことによって、フロントエンドの改善に視点が向くようになったのが大きかったと思っています。
また、このような大きな課題に向き合うにあたって、関係者の理解を得るためのアプローチを工夫できたことも成功につながったかなと振り返ります。今回のプロジェクト以前にも同様の取り組みを進めようと考えていたのですが、私たちとしても技術負債をなんとかしなければという思いが強くあったため、「新たなフレームワークを入れる」という技術的な観点が前面に出てしまって事業的なメリットの訴求が弱く、関係者との合意形成がうまくできなかったことがあったんですよね。
なので、今回プロジェクトを立ち上げる際には、「SEO観点からの事業リスク」と「技術的な課題」の観点を両立させ、事業的なインパクトをしっかりと関係者に説明することに特に気を配って進めました。
開発者として生産性を高めることはもちろん大切ですが、私たちは事業会社の開発者なので。やはり「事業に対してどれだけのインパクトがあるか」「事業課題をどのように解消できるか」といった視点を持ち合わせることが、重要なポイントになったと思います。
――和田さんとしてはいかがですか。
和田：私は入社以来、速度改善のプロジェクトに関わってきた経験がありますが、かつては速度指標とビジネスの直接のつながりが見えづらく、大規模な取り組みや投資につなげにくい部分がありました。
しかしブラウザ側の進化やGoogleによる評価指標の公開などを受けて「UX指標を向上させることが、ビジネス的なKPIの達成につながる」と関連性が見えてきたことで、取り組みの重要性に対する社内の認識も変わってきています。今回プロジェクトをスタートできたのは、そういった時流に後押しされた部分もあったのかなと思いますね。
サイトの構成も組織体制も、「フレキシブルな状態」を目指す
――リビルドの取り組みについて、今後の展望を教えてください。
梅村：今後は、まずは「どこまでやるか」を考える必要があると思っています。リビルドはやろうと思えば際限なく広げられる取り組みですが、必ずしも全ての領域で高い成果をあげられるとは限りません。やみくもに「doda」サイトの全領域にまで広げるのではなく、「どの領域に広げれば事業にとってよいのか」という視点が重要になります。その点はバックエンド側の方やデザイナー組織とも連携しながら見極めていきたいですね。
――取り組みを続ける中で、フロントエンドチームとしてはどのような役割を果たしていきたいとお考えですか？
梅村：「どこまでやるか」によっては取り組みが年単位のスパンで続く可能性もあり、その頃にはまた今の構成が時代に合わないものになっているかもしれません。だからこそフロントエンドの作りという観点では、変化に強い「フレキシブルな状態」にしておきたいと考えています。
和田：そうですね。ただ、現状はフロントエンドをしっかり作り直す必要があるため「フロントエンドチーム」として中心的に関わっていますが、今後もこのチームとしての取り組みが続く訳ではないと思っています。
今回プロジェクトに参加してくださったメンバーの方々にはそのままスクラムに入っていただき、この領域の知見を持ったメンバーでPDCAを回していける状態を作っていて。平常的に運用を担うチームに知見が移せているので、今後は異なる体制で「フレキシブルな状態」を目指していくことも考えられるかなと思います。
――技術負債の蓄積を防ぐためにも、今後も専門的な知見を持って追い続けていくことが必要ではあるけれど、「フロントエンドチーム」という形にはこだわらない、ということでしょうか。
梅村：おっしゃる通りです。今回これだけのメンバーの力を結集して取り組んだのは、長い間蓄積された技術負債があり、新たな取り組みをする難しさがあったことが大きいんですよね。
今後の計画を立ててフロントエンドグループとしての役割は果たしていきますが、今後はできるだけ各スクラムの中で安定的に回していく方向で。もちろん、また新たな技術が出てきて対応しなければいけない時にはチームとしてまた力を結集して対応するなど、柔軟に動いていければと思います。
いま、私自身はP&M推進部という本部全体の組織開発を担う部署の責任者も兼務しています。エンジニア一人ひとりのキャリアとしても「フロントエンドの領域だけに居続けなければいけない」ということはないので、バックエンドのスキルを身につけてフルスタックで活躍するなど他の選択肢も含めて、柔軟にキャリアパスを描いていってもらいたいですね。
――ありがとうございます。それでは最後に、今後お二人がチャレンジしたいことを教えてください。
和田：まずは「今回新しく作った基盤を、どこまで・どのように広げていくか」を考えていくことですね。それと同時に、このリビルドは数年かけて取り組んでいくものなので、その間に登場した新しい技術を「doda」に取り入れたらどうなるのかを検討するのが楽しみでもあり、チャレンジしていきたいところかなと思います。
梅村：今回のリビルドプロジェクトと並行してデザインシステムを導入しましたが、まだ最低限のものなので、今後リビルドが広がってコンポーネントの数が増えた時にも使いやすいようなものに進化させて。スクラムでの開発をスムーズにする土壌を作ることにもつなげていきたいと思っています。そのためにも、今後もデザインシステム側との連携をより密にして、これまで作ってきた取り組みの種を広げていきたいと思います。
――本日はありがとうございました！
（取材＝伊藤秋廣（エーアイプロダクション）／文＝永田遥奈／撮影＝服部健太郎）
梅村 政貴 Masaki Umemura
P&M推進部 ゼネラルマネジャー 兼 プロダクト開発統括部 フロントエンドグループ マネジャー
エンジニア・デザイナーを経て、前職はWebシステム開発・スマホアプリ開発のディレクター。2016年3月にインテリジェンス（現パーソルキャリア）入社。当初はdoda Recruitersやdoda Assist、dodaサイトの企画・開発ディレクション業務を担当。2019年4月よりディレクター組織のマネジメント、2020年4月よりP&M推進部とフロントエンドグループのマネジメントを担当。
和田 武 Takeru Wada
プロダクト開発統括部 フロントエンドグループ プロデューサー 兼 テクニカルディレクター
前職は金融系SIerでフロントエンド開発、UI設計、PMなどを担当。2016年4月にインテリジェンス（現パーソルキャリア）入社。当初はdodaサイトのグロースハックグループに所属し、A/Bテストの開発サポートや、環境改善、リーダー業務などを経験。その後、速度改善など技術的要素が多い案件を中心にディレクションを行い、現在はdodaサイトのテクニカルディレクション・PMを担当。
※2022年1月現在の情報です。
