共通コンポーネント
似たデザインや操作を毎回実装する代わりに、共通のフロントエンド部品を活用。
約9か月だったローンチ期間を短縮
取り組みの概要
次の市場への展開を、ゼロからのサイト構築ではなく、共通プラットフォームの拡張として実現する。
再利用可能なコンポーネントとサービスのアプローチを導入し、社内プラットフォームのプロダクト開発とグローバル展開を主導しました。ProductとEngineeringのVPと協力し、5組織・12チームへの導入を進めました。
ProductとEngineeringのチームが、コンポーネント、サービス、自動化を開発しました。社内の関係者やパートナーも、共通機能を使ってより多くの作業を自ら進められるようになりました。
01 / 出発点
入社当時のAmerican Expressでは、新市場へ展開するたびにサイトをゼロから構築していました。デザインや機能は既存市場と似ており、市場固有のロジックに小さな違いがある程度でも、同じ開発作業が繰り返されていました。
その結果、各ローンチが大きな開発案件になっていました。共通部分と、本当に市場ごとに変える必要がある部分を分ければ、チームは共通基盤を再利用し、差分の開発に集中できます。
市場ごとの柔軟性を確保しながら、同じ機能を毎回つくり直さずに済む方法はないか。
02 / プラットフォームの判断
フロントエンドにAtomic Designを導入し、同じモジュール化の考え方をバックエンドにも広げました。再利用可能なコンポーネントライブラリと、共通機能・市場固有のロジックを扱うマイクロサービスを組み合わせるアプローチです。
新しいコンポーネントとサービス群を開発し、自動化によって提供を加速しました。再利用の対象は画面だけでなく、その裏側のサービスにも及びます。UIだけを共通化しても、内部の振る舞いを毎回実装していては十分ではありません。
似たデザインや操作を毎回実装する代わりに、共通のフロントエンド部品を活用。
各市場に共通する機能を、再利用可能なバックエンドのサービスとして提供。
共通基盤の再利用性を保ちながら、各市場の違いに対応。
社内アーキテクチャの再現ではなく、アプローチを説明する概念的な整理です。
03 / コンテンツと実験基盤
CMSと、外部の実験ツールであるOptimizelyも置き換えました。必要な機能を自分たちでコントロールし、コンポーネントライブラリやモジュール型サービスと深く統合するためです。
社内のA/Bテスト・多変量テスト基盤の開発と立ち上げに携わりました。コンテンツ、実験、再利用可能な機能をつなぐことで、チームがこれらを横断して扱い、提供スピードを高められるようにしました。
内製化は、ツール自体に責任を持つことでもあります。単なるベンダーの置き換えではなく、コンテンツとテストを同じ再利用可能な開発基盤に組み込むことが、プロダクトの方向性でした。
04 / 導入と組織の変化
導入にはProductとEngineeringのVPの理解が必要でした。Engineeringのリーダーは、チームや進行中の仕事への影響を懸念していました。Product側もスピードを得る一方、社内の関係者やパートナーが自ら作業できるようになることで、一部の直接的なコントロールを手放す必要がありました。
この変化により、従来の作業の多くをチームが担う必要はなくなりました。そこでProductとEngineeringの力をより有効に使い、全社のモダナイゼーションにつなげる新しい開発課題を定義しました。
コロナ禍での人員削減や業務最適化の必要性も、導入の緊急性を高めました。提供スピードの向上だけでなく、チームに生じる変化にも向き合うことが、リーダーシップの課題でした。
05 / 成果
レジュメに記載した、おおよその市場ローンチ期間の変化。
共通の社内プラットフォームを導入。
業務効率の改善として報告した数値。
内製化に伴う人件費と、置き換えたソフトウェアのライセンス費用を基に測定した年間削減額。
この基盤は、個人・中小企業・法人向け事業において5,000万人以上の顧客が利用するプロダクトを支えました。この数字は顧客への到達範囲であり、社内プラットフォームの利用者数ではありません。
年間削減額は、人件費と置き換えたソフトウェアのライセンス費用から測定した、プラットフォーム全体の取り組みによる成果です。ローンチ期間と業務効率はレジュメに記載した別々の指標であり、一方から他方を算出したものではありません。