Volkswagen Group Services GmbH、FigmaとFigJamを活用してデザインとエンジニアリングとのコミュニケーションギャップを解消
ドイツのヴォルフスブルクに拠点を置くVolkswagen Group傘下の企業、Volkswagen Group Servicesは、研究開発(R&D)から調達に至るまで、Volkswagenの各ブランドに多岐にわたるサービスを提供しています。同社のビジネス開発サービスチームは、新たなビジネスモデルを創出し、それを製品へと具現化し、新市場への参入に向けた準備を整えるという、極めて戦略的な使命を担っています。
このような大規模なプロジェクトでは、多分野にわたるチーム間の緊密な連携が不可欠ですが、全員の認識を一致させるのは容易なことではありません。さらに、Volkswagen Group Servicesでは、勤務地や勤務時間の柔軟性を高める取り組みを最近開始していたという事情もありました。
そこで、大規模なプロジェクトを開始するにあたり、製品開発を妨げる常套的な問題を回避できる、新たなコラボレーションの方法を見出そうと考えました。FigmaとFigJamを活用することで、同社はまさにそれを実現したのです。
FigmaとFigJamが、デザインとエンジニアリングのコミュニケーションの隔たりを解消
Volkswagen Group Servicesは、人々が収納スペースを貸し出せるC2C(個人間取引)プラットフォームを構築するというミッションを掲げました。その構想は、ユーザーが利用可能な収納スペースを掲載できるだけでなく、全国規模で収納ソリューションを検索できるマーケットプレイスを構築するというものでした。
「私たちの目標は、物流に依存して価値を創出しているあらゆる業界の企業向けに、グローバルネットワークを構築することです」– Volkswagen Group Services、Worageのベンチャービルダー兼ビジネスメンター、Stefanos Tsoutis
しかしその前に、新しいプラットフォームのMVP(最小実行可能製品)を設計・構築すると同時に、ブランド要素や中核となるビジネスモデルを確立する必要があります。そのためには、デザイン、ユーザーエクスペリエンス、カスタマーエクスペリエンス、そしてエンジニアリングといった各種チームからの多大な貢献が必要です。

「当初の目標は、スケーラブルなビジネスモデルと製品をゼロから構築し、市場でブランドを確立し、MVPをリリースした上で、製品とビジネスモデルを継続的に改善していくことでした」– Volkswagen Group Services、Worageのイントレプレナー兼プロダクトオーナー、Simon Elvers
これほど多くの人々が関わっていると、ミスが起きやすく、その修正には多大なコストがかかります。Volkswagen Group Servicesは、デザインとエンジニアリングチームの間の引き継ぎを確実にこなす必要がありました。
デザインチームは、Figmaを使用して、デザインシステム、詳細ページ、アニメーションを含むアプリケーションのプロトタイプを作成しました。また、フローに影響を与えるあらゆる操作や条件を綿密に整理し、開発者、デザイナー、ステークホルダー向けに視覚的なガイドを提供しました。
「課題は、アプリケーションの視覚化を行い、プラットフォームのフロー、データ転送、品質保証といった観点から、プラットフォームの仕組みについて共通の理解を築くことでした」– Volkswagen Group Services、Worageのリードソフトウェアアーキテクト、Hendrik Surma
素晴らしいスタートでしたが、プロジェクトリーダーたちは、チーム間の初期段階のアイデアをホワイトボード上で共有し、フィードバックを得る手段を必要としていました。そのためには、異なる拠点間での有意義なリアルタイムコミュニケーションが不可欠です。Figmaのオンライン共同ホワイトボードであるFigJamが、この課題を解決し、異なる場所にいるユーザー同士の画面をシームレスにつなぎました。エンジニアたちは早い段階から意見を出し合い、機能に影響を与える運用上の課題を特定することで、協力して解決策を見出すことができました。この密接な連携により、数多くの問題を未然に防ぐことができました。

Figmaと並行してFigJamを使用することで、製品のデザインを視覚化する革新的な方法も導入されました。チームは詳細なユーザーフローをFigJamにドキュメント化し、それをメインのFigmaファイル、ページ、フレームと結びつけました。これにより、さまざまなチームがフローを理解し、詳細にアクセスしやすくなりました。
「FigJamとFigmaを使用した視覚化は、デザイナー、開発者、プロダクトオーナー、ステークホルダーの認識を一致させ、プロジェクトの複雑さに対する共通理解を深める上で重要な役割を果たしました。」– Volkswagen Group Services、Worageで主要な役割を果たすプロダクトデザイナー、Laura Lake


エンジニアリングとコミュニケーションの隔たりを乗り越える
製品のインタラクションの視覚的な表現と、組み込みのドキュメントを組み合わせることで、エンジニアは異なるデータソースと宛先の間で情報がどのように移動するかを正確に理解できるようになります。これにより、プロセスを最適化し、サーバーへのリクエストを最小限に抑えることが可能となり、運用コストを低く抑えることができました。
デザイナーたちは、一貫性があり洗練されたユーザーエクスペリエンスを構築するために、視覚化ツールも活用しました。これにより、さまざまな行動喚起(CTA)によってどのようなインタラクションが引き起こされるかを確認し、不足している画面を特定したり、改善が必要な箇所をすばやく見つけ出したりすることができました。
プロジェクト管理チームにもメリットがありました。通常、Volkswagen Group Servicesの上位レベルのプロジェクト管理の進捗追跡は、あくまで参考情報に過ぎませんでした。つまり、担当者はタスクを正確に解釈した上で、背景情報やリソースをどこから入手すべきかを自ら見極める必要があったのです。今回、Volkswagen Group Servicesのチームは、FigmaとAtlassian Suiteを連携させるJIRAプラグインを活用し、プロジェクト管理のチケットを特定の画面や機能に紐付けました。これにより、効率性が飛躍的に向上しました。
以前は、画面のリンクをJIRAチケットに手動でコピーする必要があり、開発者はJIRA、Figma、VS Codeの間を行き来しなければならず、非常に手間のかかる作業でした。新しいJIRA統合により、必要な関連情報がすべて簡単に確認できるようになりました。これにより、プロダクトオーナー、開発者、プロジェクトマネージャーは個々のコンポーネントや機能のステータスを容易に把握できるようになり、プロジェクト管理がさらに合理化されました。
プロダクトオーナーたちは、この視覚化を、どの機能や機能性を優先すべきかについて、情報に基づいた意思決定を行うためのショートカットと考えました。全体として、この統合的なアプローチは、連携していないツールを使用するよりも優れていました。視覚化は、チームがビジョンを具体化し、その詳細を全員に伝えるための直感的な手段となり、Worageを形にする上で大きな役割を果たしました。
Dev Modeにより、デザイナーから開発者へのハンドオフが円滑に
デザイナーから開発者へのハンドオフにおける課題の多くは、2023年にFigmaがDev Modeを導入したことで解決されました。Dev Modeは、デザイナーと開発者がデザインをコードへと迅速に変換できるよう支援する機能を備えたFigma内のスペースです。この機能にはコンポーネントプレイグラウンドが含まれており、Volkswagen Group Servicesのエンジニアリングチームは、開発前にさまざまなコンポーネントとそのバリエーションをプレビューできるため、コンポーネントの挙動に関する不確実性を排除することが可能になりました。
アセットセクションでは、Volkswagen Group Servicesの開発者は、関連する画面用のアイコン、画像、動画を簡単にダウンロードできるため、追加のアセットパッケージをやり取りする必要がなくなります。これによりすべてが一元管理され、開発準備が整った画面やページが、デザイナーと開発者の双方にとっての決定的な情報源となります。
Volkswagen Group Servicesのチームは、新しい比較モードによって画面の変更点が明確に表示されることで、開発チームの当て推測での作業や認知的負荷が軽減され、結果として不具合が減少したことを確認しました。また、さまざまな言語の要素からコードを抽出できる機能により、開発チームはコードの確認や実装を容易に行えるようになり、時間の節約とエラーの削減につながりました。
全体として、Volkswagen Group Servicesは、Dev Modeがデザイナーと開発者間の引き渡し時の摩擦を大幅に軽減することで、コラボレーションを促進することを発見しました。
「私たちは、コラボレーションをイノベーションのツールとして活用し、アイデアに付加価値を生み出しています。そしてFigmaは、チーム内でのコラボレーションをシームレスに実現してくれます。とてもすばらしい環境です!」– Volkswagen Group Services、プロダクトデザイナー兼Figmaアドボケート、Parth Pandya
Figmaを使ってWorageのビジョンを拡大
Worageプロジェクトは順調に進んでおり、中小企業が必要なストレージスペースを利用できるよう支援する準備が進められています。2024年後半にサービスを開始する予定です。
「意思決定権限の明確化と定期的なフィードバックは、当社のCX KPIに目に見える形で影響を与えます。FigmaとFigJamを組み合わせることで、デザインプロセスの初期段階からすべてのステークホルダーとのコミュニケーションを円滑に行うことができました。こうして認識を揃えることにより、顧客中心で完成度の高い製品が生まれ、より迅速かつコスト効率良く本番環境への移行を実現できました」と、Volkswagen Group ServicesのリードUXエキスパートを務めるSandra Schausは述べています。
The Total Economic Impact of Figma (Figmaによる総経済効果)
Forrester社発行のこのレポートでは、ワークフローの効率化やデザインスタックの統合、優れた製品の開発におけるFigmaとFigJamの活用事例が紹介されています。
Figmaを活用してデザインの規模を拡大するには
優れたデザインは、製品やブランドを差別化する可能性を秘めています。しかし、偉大なものは一人では作れません。Figmaは、製品チームを迅速かつ包括的なデザインワークフローで結びつけます。
企業がFigmaを活用してデザインの規模を拡大する方法の詳細については、当社までお問合せください。
Figmaの主な特長:
- デザインのアイデア出しから、作成、構築までデザインプロセスにおけるすべてのステップを1カ所に集約
- 全社共有のデザインシステムでデザインワークフローを加速
- Webベースでアクセスしやすく、使い勝手に優れた製品で、製品チームのプロセスにおける包括性を促進