SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

開発現場インタビュー(AD)

StorybookとAIエージェントの活用で技術負債を解消、次世代のSNSマーケティングを支えるエンジニアの裏側に迫る!

モダン技術で技術負債に立ち向かう舞台裏と、その後の運用に見られた変化とは?

  • X ポスト
  • このエントリーをはてなブックマークに追加

 インフルエンス・プラットフォーム事業を展開している株式会社トリドリ(以下、toridori)の主力サービス「toridori marketing(トリドリマーケティング)」は、企業が案件を作成してインフルエンサーの募集から、依頼、その後のやり取りまでを完結出来るマッチングプラットフォームだ。同サービスにおいて2025年3月~5月にかけて、リニューアルが実施された。放置されていた「誰も手を入れたがらない」機能に正面から取り組み、Storybookをフル活用した動作テストと、AIコーディングエージェントの活用により、案件作成から公開までの期間を50%削減。さらに案件作成数25%向上というビジネス成果も実現した。このプロジェクトの裏側をリードしたエンジニアリングマネージャーの長坂翔吾氏に聞いた。

  • X ポスト
  • このエントリーをはてなブックマークに追加

ビジネスの価値を高めるため、放置された技術負債の解消に挑む

 toridoriが提供する「toridori marketing(トリドリ マーケティング)」は、企業とマイクロインフルエンサー[※]をつなぐマッチングプラットフォームだ。商品やサービスのPRをSNS上で行いたい企業が案件内容を作成しインフルエンサーを募集する。インフルエンサー側は「toridori base(トリドリ ベース)」というアプリ上で、案件を確認し、自分がやってみたい案件にエントリー。企業とマッチングした後、インフルエンサーは企業の依頼内容を参考にSNSで商品やサービスを紹介するという構造になっている。

[※] マイクロインフルエンサー:フォロワー数は数千〜数万人程度と多くはないが、特定の分野やジャンルに特化したインフルエンサーのこと。彼らはフォロワーとの距離が近く、投稿に対して「いいね」やコメントなどのリアクションを多くもらえるため、企業は、自社の商材と親和性が高い層にピンポイントで効果的なアプローチをすることが可能。

 この「toridori marketing(トリドリマーケティング)」のビジネスモデルは、企業がチケットを事前購入し、そのチケットを消費することで案件内容を作成するという仕組みになっている。サブスクリプション制になっており、1か月ごとにチケットが発行される。

 しかし、このサービスの中核となる案件作成機能には課題があった。エンジニアリングマネージャーとして今回のプロジェクトを推進した長坂氏は、企業ユーザーから使いにくいという声が多く寄せられていた状況や、作成から公開までの審査時間が長いという問題に頭を悩ませていた。特に、案件内容作成時の自由入力欄の多さは、ユーザーの離脱率を上げていた。長坂氏は「テキストを自由に書けるシステムではあったものの、初心者にとっては何を書けばいいかが非常にわかりにくい状態でした」と語る。

株式会社Toridori エンジニアリングマネージャー 長坂翔吾氏
株式会社トリドリ エンジニアリングマネージャー 長坂翔吾氏

 toridoriは、2018年よりプラットフォームを運営してきた経験から、どのような内容を書くと問題が起きないか、逆にどういうことを書いておかないと問題が起きるかを把握していた。そこで、自由度は減ってしまうものの、新規の顧客が迷わずに項目を入力できるよう選択肢に変換していくことを決めた。

 案件作成の障壁は、直接的な収益損失につながる。売上が立っているにも関わらず、案件を作ってもらえなければ継続利用の促進ができない。初回の入金後、案件作成のハードルの高さから翌月以降の利用をためらうユーザーが少なくないことが分かった。この離脱ポイントを解消したいと考えたのだ。

 技術的な課題はさらに深刻だった。案件の作成システムと審査・編集システムが別々に構築されており、これらが最後に大きく手を加えられたのは数年前。それ以降は個別の項目修正が継ぎ足されている状態が続いていた。その結果、作成側でチェックする項目と審査・編集側でチェックされる項目に乖離が発生し、1つの項目を修正するために2箇所のコードを直さなければならない非効率な状況に陥っていた。長坂氏は「この機能はサービス内で一番大きな機能でしたので、誰も手を付けたがらず、塩漬けになっていました」と語った。

 プロジェクトのKPIは明確だった。案件を作成するユーザーを増やすために、いかに入力方法を簡単にするか、入力で迷わないようにするかを意識してプロジェクトを進めていた。また、サブスクリプションチケットの失効率をいかに減らして、ちゃんと案件が作られるようにするかが目標だった。

煩雑な動作確認をStorybookで解決。コード修正時間を大幅短縮

 リニューアルプロジェクトは2025年3月から5月にかけて実施され、長坂氏がエンジニアリングマネージャーとテックリードの両方の役割を担った。チーム構成は長坂氏に加えてプロダクトマネージャー1名、バックエンドエンジニア2名、フロントエンドエンジニア1名の計5名体制だ。

 まず案件作成を容易にするため、UIの見直しを行った。そこで導入したのがReactのStorybookだ。これを使って各UIコンポーネントを単体で検証・修正できる環境を整備した。「技術的な負債の解消に最も大きく貢献したのがStorybookです」と長坂氏は強調する。

 案件作成フローには約10ページのステップが存在した。その結果、最終ページの修正を確認するためだけに、前のステップをすべて入力し直す必要があった。前のステップでの入力条件によって最終ページの表示内容が変化するようなケースもあり、確認作業が非常に煩雑だった。

 Storybookの導入により、特定のUIコンポーネントのみを切り出して、他の画面遷移を経ずに単体で表示・テストできるようになった。そして、修正内容がどのように改善されたかを即座に確認でき、効率的な修正が可能になった。

 また、バリデーション確認も大幅に効率化された。従来は、フォーム全体を通して最後まで入力を完了しないと、各入力項目のバリデーションが正しく動作しているかを確認できなかった。Storybookでは、個々のコンポーネントごとにテストを行えるため、エラー値をあらかじめ設定しておけば、わざわざ実行時に手入力し直さなくてもバリデーションの動作確認が可能になった。

 長坂氏は従来の固定的なページ遷移設計を根本から見直した。以前の実装では各ステップが固定の順序で結びつけられていたため、ページの順番をわずかに入れ替えようとするだけでも、大幅なコードの修正が必要になっていた。

 これを解決するため、各ページ同士の依存関係を切り離し、案件全体の流れをデータとして定義する仕組みを導入した。これにより、ステップの順序を柔軟に変更できるようになり、構成変更への対応が格段に容易になった。

 「今後も案件の設計や作成フローが変化していくことが想定されるため、構造自体をあらかじめ拡張性のある形に見直しました」と長坂氏は将来を見据えた設計思想を説明する。

 さらに、作成用のコンポーネントと編集用のコンポーネントが別々になっていた問題も解決した。バリデーションライブラリとしてZodを採用し、入力値の検証が以前は統一されていなくて、項目によってバリデーションの方法が違うという問題を解消。作成と編集時で同じものが利用できるようにバリデーション方法を統一した。

 全ての入力項目が統一されたフォーマットで作成される「ベースコンポーネント」の仕組みを導入し、そのルールに従って全てのコンポーネントを作っていく体制を構築した。これによってバリデーションや入力値の検証が統一され、新しいコンポーネントを増やすときも、そのフォーマットに従って追加していけばよいという形になった。

AIコーディングエージェントが支えた大規模移行

 既存コードの移行という最も困難な作業では、AIコーディングエージェントのDevinを積極的に活用した。長坂氏は「完全にすべてを新しくしたわけではなく、一部は既存のものを残した状態だったため、それらが正しく移行できているかを検証する作業が非常に大変だった」と振り返る。

 この課題において、Devinは大きな力を発揮した。「既存のコードを同じように書き換える作業には非常に強いと感じた」と長坂氏は評価する。たとえば、別のフレームワークの類似機能を置き換えたり、既存コンポーネントを新しい設計に沿って変換したりする際には、AIに処理を任せることで大幅な時間短縮が可能となった。

 プロジェクトが始まった2025年3月当時は、ちょうどDevinの導入時期とも重なっていた。どの程度のタスクを任せられるのかは未知数であり、プロジェクトと並行して、どのような作業がAIに適しているのか、開発コストはどうかなどの検証も行い、傾向をつかんだ。

 toridoriの開発部では2025年8月よりAI活用補助制度[※]を正式に導入し、これまでに開発業務の約半分をAIが補完することに成功しており、社内でもAgenticCodingに関する勉強会も開催しているという。長坂氏の業務スタイルも大きく変わり、「今回のプロジェクトでも作業の5割以上は削減できたと感じています。ここ半年ほどは、ゼロからコードを書く機会はほとんどなくなりました。また、現在はDevinだけではなく、Cursor/ClaudeCodeなとも活用しています」と語る。

[※] AI活用補助制度:toridoriのプロダクト開発に携わる従業員のスキルアップと業務の生産性向上を目的とした制度。従業員が希望するAIツールの導入費用を月額最大200米ドルまで補助している。

 AIコーディングエージェントの強みについて長坂氏は「調査を妥協せず、不整合のチェックに非常に優れています。人間では見落としがちな部分を、かなりの精度で拾ってくれる」と分析する。また、新しいライブラリやフレームワークを導入する際には、それが解決すべき課題さえ把握していれば、「この問題をこのツールでどう解決すればよいか」とAIに相談することで、最適な解決策とともに具体的なコードを提示する。長坂氏は「そこから使い方を学べる点も、大きな利点です」と述べた。

KPI達成に寄与したAI活用。さらなる向上を目指す

 プロジェクトの成果は数値で明確に表れた。最も重要なKPIだった案件作成から公開までの時間について、長坂氏は「審査時間を約50%短縮できました」と報告する。作成してから大体1週間弱ほど顧客を待たせていた状態が非常に問題だったが、大幅に改善された。「目標としては2日以内、できれば1日程度で公開や修正が必要というレスポンスが返せるようにしたいです」と長坂氏は話した。

 その他の指標でも顕著な成果が現れた。改善後は期間あたりの案件作成数が25%程度アップし、サブスクリプションチケットが放置されて使われないという課題についても5%ほど解消した。

 開発チームの生産性向上も著しい。リリース後の文言修正や選択肢の変更といった要望に対する修正・確認が非常に早くできるようになった。長坂氏は「今回の案件機能の改修は、社内に大きなメリットがあったので、他の機能で同様に使えるのではないかと考えています。新しい機能の作成や検証が必要だから作っておこうという形、動いてもらえるようになったのが大きな進歩です」と語る。

 toridoriのエンジニアチームの特徴は、技術的な実装だけでなくビジネス指標への強いコミットメントにある。機能がリリースされた後に、実際にどのような変化があるかをダッシュボードで確認し、週次ミーティングで案件作成率を見守り、議論をしてきたと長坂氏は説明する。

 興味深い発見もあった。リリース後しばらくは審査時間が削減される傾向にあったのだが、その後審査時間が長くなる段階があった。長坂氏は「調べた結果、以前からの案件作成者は審査時間がほとんどいらなくなってどんどん短くなっていく一方、新規の案件が増えた影響で審査時間が延びているという原因が分かりました。システム自体には問題はないけれど、新たに作成する場合に課題があるという認識ができ、現在改善を進めています」と分析する。

 現在、長坂氏が注力しているのは品質保証の自動化だ。「案件のパターンを全部合わせると数千から数万のパターンになってしまいますが、その主要パターンを自動的にチェックして正しい表示・状態になっているかを検証する自動テストを導入したいと考えています」と構想を語る。

 AIとの協働についても更なる効率化を目指している。「いろんな組み合わせを処理したり、自動的にケースを書いたりという部分では、AIがさらに役に立つと思っています。ただし現状のAI活用では挙動確認・レビューが課題です。より人間がチェックしないといけないことを明確化し、人間がチェックしなくても目的に沿ったものが作れる仕組みを改善できないか試行錯誤しているところです」と長坂氏は今後の展望を語った。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加

提供:株式会社トリドリ

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/21984 2025/08/29 12:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング