Euronext

フィンテック

10以上の金融プロダクトのための統一されたデザインシステムの構築

リードUX

デザインシステム

Euronextの最初の共有デザインシステムの構築をリードし、10以上のB2B金融製品を統一し、デザインから開発への納期を30%短縮しました。

10+

プロダクトを統一

30%

効率向上

80+

コンポーネントをリリース

6ヶ月

キックオフから完全採用まで

An illustrative sketch of a flower
An illustrative sketch of a flower
An illustrative sketch of a flower

課題

10以上のプロダクトチーム、共通基盤なし。

EuronextはパリAmsterdam、ミラノ、リスボンに証券取引所を持ち、ヨーロッパ全域で規制された金融市場を運営しています。Euronext Corporate SolutionsはB2B SaaS部門で、上場企業向けのデジタルツール(投資家向け広報プラットフォーム、ガバナンスソフトウェア、取締役会管理ソリューション)を構築しています。各チームが独自のパターンを構築し、共有トークンも共有コンポーネントもありませんでした。その結果、ビジュアルの断片化、機能デリバリーの遅延、そしてデザインチームが既存パターンの再構築に40%の時間を費やすことになりました。

デザインの一貫性がゼロ

10以上の製品それぞれが異なる色、スペーシング、インタラクションパターンを持ち、製品間を切り替えるユーザーがその不一致を感じていました。

遅いデリバリーサイクル

共有コンポーネントがないため、デザイナーとエンジニアは製品ごと、機能ごとに同じパターンを再構築していました。

デザイン・エンジニアリング間の引き渡し基準なし

引き渡しはすべてその場しのぎでした。仕様は異なるツールに分散し、規約はチームによって異なり、本番環境とのズレが常態化していました。

An illustrative sketch of a flower

私のアプローチ

プロセス、ステップバイステップ。

01

クロスチームの監査と整合

8つの製品全体のすべてのUIパターンをカタログ化。重複、矛盾、使用頻度をマッピング。共有システムの必要性を立証しました。

02

トークンファーストのアーキテクチャ

単一のコンポーネントに触れる前に、デザイントークン(カラー、スペーシング、ラジアス、タイポグラフィ)を定義。デザインとコード間の契約を作成しました。

03

協働によるコンポーネント構築

日常的に使用するプロダクトチームとコンポーネントを共同設計。リリース前に実際のプロダクトの文脈で各コンポーネントを検証しました。

04

エンジニアリングファーストのコラボレーション

開発者は引き渡し時ではなく、初日から関与しました。プロセス全体を通じて週次の同期と共同デザインレビューを実施。実装前にエンジニアリングチームと密に議論してトークンの仕様と命名規則を定義し、翻訳ギャップをなくしました。コンポーネントはリリース前にStorybookで検証されました。

05

ガバナンスとコントリビューションモデル

大規模なシステムを健全に維持するため、構造化されたコントリビューションプロセスを確立。新しいコンポーネントのリクエストは、追加前にリードデザイナーとエンジニアリングによるレビューを経ました。エッジケースのカバーとドキュメントの作成なしにはリリースしませんでした。

キーとなる意思決定

「コンポーネントではなくトークンから始めることを選んだのは、トークンこそがコンポーネントをポータブルにするものだからです。共有トークンレイヤーなしでは、すべてのコンポーネントが一点もののになります。それがあれば、すべてのコンポーネントが再利用可能になります。」

ソリューション

ビジネスとともにスケールするために構築されたシステム。

共有トークンレイヤー上に構築された80以上のコンポーネント、Figmaでドキュメント化されコードで実装。ローンチから6ヶ月以内に10製品で採用されました。

An illustrative sketch of a flower

成果

一貫したプロダクト。より速いチーム。

次にやり直すなら:初日から組み込みエンジニアリングパートナーを求めます。トークンからコードへの翻訳ギャップが4週間の手戻りを生み、早期コラボレーションがあれば防げたはずです。

10+

プロダクトを統一

30%

効率向上

80+

コンポーネントをリリース

6ヶ月

キックオフから完全採用まで

© 2026 Victoria Pereira

Figmaで制作

Euronext

フィンテック

10以上の金融プロダクトのための統一されたデザインシステムの構築

リードUX

デザインシステム

Euronextの最初の共有デザインシステムの構築をリードし、10以上のB2B金融製品を統一し、デザインから開発への納期を30%短縮しました。

10+

プロダクトを統一

30%

効率向上

80+

コンポーネントをリリース

6ヶ月

キックオフから完全採用まで

An illustrative sketch of a flower
An illustrative sketch of a flower
An illustrative sketch of a flower

課題

10以上のプロダクトチーム、共通基盤なし。

EuronextはパリAmsterdam、ミラノ、リスボンに証券取引所を持ち、ヨーロッパ全域で規制された金融市場を運営しています。Euronext Corporate SolutionsはB2B SaaS部門で、上場企業向けのデジタルツール(投資家向け広報プラットフォーム、ガバナンスソフトウェア、取締役会管理ソリューション)を構築しています。各チームが独自のパターンを構築し、共有トークンも共有コンポーネントもありませんでした。その結果、ビジュアルの断片化、機能デリバリーの遅延、そしてデザインチームが既存パターンの再構築に40%の時間を費やすことになりました。

デザインの一貫性がゼロ

10以上の製品それぞれが異なる色、スペーシング、インタラクションパターンを持ち、製品間を切り替えるユーザーがその不一致を感じていました。

遅いデリバリーサイクル

共有コンポーネントがないため、デザイナーとエンジニアは製品ごと、機能ごとに同じパターンを再構築していました。

デザイン・エンジニアリング間の引き渡し基準なし

引き渡しはすべてその場しのぎでした。仕様は異なるツールに分散し、規約はチームによって異なり、本番環境とのズレが常態化していました。

An illustrative sketch of a flower

私のアプローチ

プロセス、ステップバイステップ。

01

クロスチームの監査と整合

8つの製品全体のすべてのUIパターンをカタログ化。重複、矛盾、使用頻度をマッピング。共有システムの必要性を立証しました。

02

トークンファーストのアーキテクチャ

単一のコンポーネントに触れる前に、デザイントークン(カラー、スペーシング、ラジアス、タイポグラフィ)を定義。デザインとコード間の契約を作成しました。

03

協働によるコンポーネント構築

日常的に使用するプロダクトチームとコンポーネントを共同設計。リリース前に実際のプロダクトの文脈で各コンポーネントを検証しました。

04

エンジニアリングファーストのコラボレーション

開発者は引き渡し時ではなく、初日から関与しました。プロセス全体を通じて週次の同期と共同デザインレビューを実施。実装前にエンジニアリングチームと密に議論してトークンの仕様と命名規則を定義し、翻訳ギャップをなくしました。コンポーネントはリリース前にStorybookで検証されました。

05

ガバナンスとコントリビューションモデル

大規模なシステムを健全に維持するため、構造化されたコントリビューションプロセスを確立。新しいコンポーネントのリクエストは、追加前にリードデザイナーとエンジニアリングによるレビューを経ました。エッジケースのカバーとドキュメントの作成なしにはリリースしませんでした。

キーとなる意思決定

「コンポーネントではなくトークンから始めることを選んだのは、トークンこそがコンポーネントをポータブルにするものだからです。共有トークンレイヤーなしでは、すべてのコンポーネントが一点もののになります。それがあれば、すべてのコンポーネントが再利用可能になります。」

ソリューション

ビジネスとともにスケールするために構築されたシステム。

共有トークンレイヤー上に構築された80以上のコンポーネント、Figmaでドキュメント化されコードで実装。ローンチから6ヶ月以内に10製品で採用されました。

An illustrative sketch of a flower

成果

一貫したプロダクト。より速いチーム。

次にやり直すなら:初日から組み込みエンジニアリングパートナーを求めます。トークンからコードへの翻訳ギャップが4週間の手戻りを生み、早期コラボレーションがあれば防げたはずです。

10+

プロダクトを統一

30%

効率向上

80+

コンポーネントをリリース

6ヶ月

キックオフから完全採用まで

© 2026 Victoria Pereira

Figmaで制作

Euronext

フィンテック

10以上の金融プロダクトのための統一されたデザインシステムの構築

リードUX

デザインシステム

Euronextの最初の共有デザインシステムの構築をリードし、10以上のB2B金融製品を統一し、デザインから開発への納期を30%短縮しました。

10+

プロダクトを統一

30%

効率向上

80+

コンポーネントをリリース

6ヶ月

キックオフから完全採用まで

An illustrative sketch of a flower
An illustrative sketch of a flower
An illustrative sketch of a flower

課題

10以上のプロダクトチーム、共通基盤なし。

EuronextはパリAmsterdam、ミラノ、リスボンに証券取引所を持ち、ヨーロッパ全域で規制された金融市場を運営しています。Euronext Corporate SolutionsはB2B SaaS部門で、上場企業向けのデジタルツール(投資家向け広報プラットフォーム、ガバナンスソフトウェア、取締役会管理ソリューション)を構築しています。各チームが独自のパターンを構築し、共有トークンも共有コンポーネントもありませんでした。その結果、ビジュアルの断片化、機能デリバリーの遅延、そしてデザインチームが既存パターンの再構築に40%の時間を費やすことになりました。

デザインの一貫性がゼロ

10以上の製品それぞれが異なる色、スペーシング、インタラクションパターンを持ち、製品間を切り替えるユーザーがその不一致を感じていました。

遅いデリバリーサイクル

共有コンポーネントがないため、デザイナーとエンジニアは製品ごと、機能ごとに同じパターンを再構築していました。

デザイン・エンジニアリング間の引き渡し基準なし

引き渡しはすべてその場しのぎでした。仕様は異なるツールに分散し、規約はチームによって異なり、本番環境とのズレが常態化していました。

An illustrative sketch of a flower

私のアプローチ

プロセス、ステップバイステップ。

01

クロスチームの監査と整合

8つの製品全体のすべてのUIパターンをカタログ化。重複、矛盾、使用頻度をマッピング。共有システムの必要性を立証しました。

02

トークンファーストのアーキテクチャ

単一のコンポーネントに触れる前に、デザイントークン(カラー、スペーシング、ラジアス、タイポグラフィ)を定義。デザインとコード間の契約を作成しました。

03

協働によるコンポーネント構築

日常的に使用するプロダクトチームとコンポーネントを共同設計。リリース前に実際のプロダクトの文脈で各コンポーネントを検証しました。

04

エンジニアリングファーストのコラボレーション

開発者は引き渡し時ではなく、初日から関与しました。プロセス全体を通じて週次の同期と共同デザインレビューを実施。実装前にエンジニアリングチームと密に議論してトークンの仕様と命名規則を定義し、翻訳ギャップをなくしました。コンポーネントはリリース前にStorybookで検証されました。

05

ガバナンスとコントリビューションモデル

大規模なシステムを健全に維持するため、構造化されたコントリビューションプロセスを確立。新しいコンポーネントのリクエストは、追加前にリードデザイナーとエンジニアリングによるレビューを経ました。エッジケースのカバーとドキュメントの作成なしにはリリースしませんでした。

キーとなる意思決定

「コンポーネントではなくトークンから始めることを選んだのは、トークンこそがコンポーネントをポータブルにするものだからです。共有トークンレイヤーなしでは、すべてのコンポーネントが一点もののになります。それがあれば、すべてのコンポーネントが再利用可能になります。」

ソリューション

ビジネスとともにスケールするために構築されたシステム。

共有トークンレイヤー上に構築された80以上のコンポーネント、Figmaでドキュメント化されコードで実装。ローンチから6ヶ月以内に10製品で採用されました。

An illustrative sketch of a flower

成果

一貫したプロダクト。より速いチーム。

次にやり直すなら:初日から組み込みエンジニアリングパートナーを求めます。トークンからコードへの翻訳ギャップが4週間の手戻りを生み、早期コラボレーションがあれば防げたはずです。

10+

プロダクトを統一

30%

効率向上

80+

コンポーネントをリリース

6ヶ月

キックオフから完全採用まで

© 2026 Victoria Pereira

Figmaで制作

Euronext

フィンテック

10以上の金融プロダクトのための統一されたデザインシステムの構築

リードUX

デザインシステム

Euronextの最初の共有デザインシステムの構築をリードし、10以上のB2B金融製品を統一し、デザインから開発への納期を30%短縮しました。

10+

プロダクトを統一

30%

効率向上

80+

コンポーネントをリリース

6ヶ月

キックオフから完全採用まで

An illustrative sketch of a flower
An illustrative sketch of a flower
An illustrative sketch of a flower

課題

10以上のプロダクトチーム、共通基盤なし。

EuronextはパリAmsterdam、ミラノ、リスボンに証券取引所を持ち、ヨーロッパ全域で規制された金融市場を運営しています。Euronext Corporate SolutionsはB2B SaaS部門で、上場企業向けのデジタルツール(投資家向け広報プラットフォーム、ガバナンスソフトウェア、取締役会管理ソリューション)を構築しています。各チームが独自のパターンを構築し、共有トークンも共有コンポーネントもありませんでした。その結果、ビジュアルの断片化、機能デリバリーの遅延、そしてデザインチームが既存パターンの再構築に40%の時間を費やすことになりました。

デザインの一貫性がゼロ

10以上の製品それぞれが異なる色、スペーシング、インタラクションパターンを持ち、製品間を切り替えるユーザーがその不一致を感じていました。

遅いデリバリーサイクル

共有コンポーネントがないため、デザイナーとエンジニアは製品ごと、機能ごとに同じパターンを再構築していました。

デザイン・エンジニアリング間の引き渡し基準なし

引き渡しはすべてその場しのぎでした。仕様は異なるツールに分散し、規約はチームによって異なり、本番環境とのズレが常態化していました。

An illustrative sketch of a flower

私のアプローチ

プロセス、ステップバイステップ。

01

クロスチームの監査と整合

8つの製品全体のすべてのUIパターンをカタログ化。重複、矛盾、使用頻度をマッピング。共有システムの必要性を立証しました。

02

トークンファーストのアーキテクチャ

単一のコンポーネントに触れる前に、デザイントークン(カラー、スペーシング、ラジアス、タイポグラフィ)を定義。デザインとコード間の契約を作成しました。

03

協働によるコンポーネント構築

日常的に使用するプロダクトチームとコンポーネントを共同設計。リリース前に実際のプロダクトの文脈で各コンポーネントを検証しました。

04

エンジニアリングファーストのコラボレーション

開発者は引き渡し時ではなく、初日から関与しました。プロセス全体を通じて週次の同期と共同デザインレビューを実施。実装前にエンジニアリングチームと密に議論してトークンの仕様と命名規則を定義し、翻訳ギャップをなくしました。コンポーネントはリリース前にStorybookで検証されました。

05

ガバナンスとコントリビューションモデル

大規模なシステムを健全に維持するため、構造化されたコントリビューションプロセスを確立。新しいコンポーネントのリクエストは、追加前にリードデザイナーとエンジニアリングによるレビューを経ました。エッジケースのカバーとドキュメントの作成なしにはリリースしませんでした。

キーとなる意思決定

「コンポーネントではなくトークンから始めることを選んだのは、トークンこそがコンポーネントをポータブルにするものだからです。共有トークンレイヤーなしでは、すべてのコンポーネントが一点もののになります。それがあれば、すべてのコンポーネントが再利用可能になります。」

ソリューション

ビジネスとともにスケールするために構築されたシステム。

共有トークンレイヤー上に構築された80以上のコンポーネント、Figmaでドキュメント化されコードで実装。ローンチから6ヶ月以内に10製品で採用されました。

An illustrative sketch of a flower

成果

一貫したプロダクト。より速いチーム。

次にやり直すなら:初日から組み込みエンジニアリングパートナーを求めます。トークンからコードへの翻訳ギャップが4週間の手戻りを生み、早期コラボレーションがあれば防げたはずです。

10+

プロダクトを統一

30%

効率向上

80+

コンポーネントをリリース

6ヶ月

キックオフから完全採用まで

© 2026 Victoria Pereira

Figmaで制作