【導入事例】自動車UXプロトタイピング：Mercedes Me App
2025/02/24
Mercedes Me Appのプロトタイピング
プロトタイピングは、コネクテッドカーのモバイルアプリ開発に不可欠なプロセスであり、ユーザーのニーズを満たし、スムーズな体験を提供するために重要な役割を果たします。
本記事では、Mercedes-Benzの子会社であるMBitionがProtoPieを活用してMercedes meモバイルアプリケーションをプロトタイピングする方法を紹介します。
MBitionのデザインプロセスとProtoPieコンポーネントライブラリを活用したデザインシステムの構築方法、そしてProtoPie Connectが自動車のコネクテッド体験に最適なプロトタイピングツールである理由をご確認ください。
下記の「Prototyping Connected Experiences: A Look at the Mercedes me App」のライブ配信録画を視聴または本記事を通じてMBitionのデザインプロセスに関する貴重なインサイトとワークフローの例をチェックしてみてください。
MBition: 未来の自動車UXデザインを構築するチーム
MBitionはMercedes-Benzの子会社であり、自動車のユーザーエクスペリエンス（UX）デザインをリードするチームです。ドイツ・ベルリンに本社を構え、Mercedes-Benzのソフトウェアハブの重要な一部として、積極的に自動車の研究開発に取り組んでいます。MBitionチームは900人以上の多国籍メンバーで構成され、ベルリンだけでなくブルガリアのソフィアにも開発拠点を運営しています。
MBitionの目標は、Mercedes-Benzのインフォテインメントシステムの未来を設計することです。インフォテインメント（Infotainment）とは、「情報（Information）」と「エンターテインメント（Entertainment）」を組み合わせた言葉で、車両内の複数のディスプレイを通じて提供されるコンテンツを指します。
以下の動画から実際の適用事例をご覧ください。
動画内の車両には、以下のインフォテインメント構成要素が含まれています。
インストルメントクラスター（Instrument Cluster）
HUD（ヘッドアップディスプレイ、Head-up Display）
HU（ヘッドユニット、Head Unit）
PD（パッセンジャーディスプレイ、Passenger Display）
動画内では、もう一つのプロダクトであるMercedes Meアプリケーションもご覧いただけます。それでは、Mercedes Meアプリケーションについて詳しく見ていきましょう。
Mercedes Me Appのプロトタイピング：MBitionの革新的なアプローチ
Mercedes Me Appとは？
Mercedes Meアプリは、Mercedes-Benz車のオーナー向けのコンパニオンアプリとして、2020年10月にリリースされました。
このアプリを通じて、ユーザーは車両と対話し、リモートでの制御や車両の状態確認が可能になります。代表的な機能として、リモートエンジン始動（Remote Engine Start）、リモートドアロック＆アンロック（Remote Door Lock & Unlock）、車両位置検索（Locate Vehicle）などがあり、移動中でも簡単に車両を管理できます。
MBitionのUI/UXデザイナーであるSzymon KościelniakとFeri Irsanto Pujiantoは、ライブ配信セッションにてMercedes MeアプリのプロトタイピングツールとしてProtoPieを選択した理由を次のように説明しました。
「Mercedes Meは、MBitionで私が最初にProtoPieを使ってプロトタイピングした製品でした。さまざまなツールを試しましたが、最終的にProtoPieを選び、とても満足しています。」
— Szymon Kościelniak, MBition UI/UXデザイナー
MBitionチームはすでにSketchベースのデザインシステムやコンポーネントライブラリなど、堅実な基盤を持っていました。しかし、新機能が継続的に追加される中で、次のような課題に直面し、より高度なプロトタイピングツールが求められるようになりました。
✅ 小規模チーム：限られた人員の中で迅速かつ効率的なプロトタイピングが必要
✅ 時間的制約：素早いテストと繰り返しの検証が可能な高忠実度プロトタイピングが必須
✅ 高忠実度プロトタイプの必要性：ステークホルダーを納得させる機能的なプロトタイプが求められる
Mercedes Me Appのプロトタイピングプロセスのインサイト
MBitionがどのようにモバイルアプリのプロトタイプを作成するワークフローを紹介します。
以下は、ホームタブ(Home Tab)のプロトタイプ例です。現在の状態では、ユーザーが車両のロック機能を操作することができます。
MBitionは、Mercedes Meアプリのプロトタイプを作成する際に、以下の3つのステップに従って作業を行っています。
1. Sketchコンセプトを使用
コンセプトチームが定義した機能に基づいて、プロトタイピングを開始します。
簡単な例として、開始ボタンを押すとページが保留状態に切り替わり、その後エンジンが稼働し、停止ボタンが含まれたユーザーインターフェイスが表示されるプロセスを組み込みます。
2. テンプレートを活用
すでに作成されたProtoPieテンプレートを活用して、ページ構造と基本的なインタラクションを設定します。
適切なテンプレートを選んでコピーし、新しい機能に合わせて修正します。
3. Sketchのエクスポート機能を使用
Sketchからデザイン要素をProtoPieへプラグインを使って直接エクスポートし、インタラクションしない要素を簡単に反映させます。
ProtoPieコンポーネントライブラリを活用した9つの活用事例
MBitionチームはProtoPieコンポーネントライブラリを活用し、プロトタイピングの効率を大幅に向上させました。
コンポーネントライブラリを最適化するための9つのヒントをご紹介します。
バリアブルに名前を付ける
（「int_」、「str_」、「bool_」など）バリアブルタイプを素早く識別できるように名前を付けます。条件付きアクションに名前を付ける
可読性を向上させ、透明性を保つために条件付きアクションにも名前を付けます。トリガーおよびレスポンスに名前を付ける
論理構造を整理し、素早く全体を把握できるようにトリガーとレスポンスにも名前を付けます。
複数のライブラリを使用する
チームでの協力を促進し、ライブラリのアップロード速度を向上させるために、ライブラリを小さく分けて使用します。名前規則および背景色の使用
ライブラリ間の違いを強調するために、名前付けや色分けを行います。トリガーをグループ化する
ロジックが多く、より良い概要を得る必要がある場合にトリガーをグループ化します。また、一貫した作業の流れを維持するためにも重要です。
ハードコードのバリアブルを避ける
ハードコードではなく、動的なバリアブルを使用することで、柔軟性を保ちます。大文字と小文字を区別しない条件付きアクションを使用する
条件付きアクションのオーバーライドバリアブルをより堅牢にするために、大文字と小文字を区別しないようにします。コンポーネントの文書化
チームメンバーが参照できるようにコンポーネントガイド機能を使用してコンポーネントを文書化します。
ProtoPieコンポーネントライブラリの構造化方法
MBitionチームは、コンポーネントライブラリを小さな単位に分けることで、より体系的な構造を作り上げました。
以下は、これらのコンポーネントライブラリを構成するさまざまなカテゴリと、各ライブラリがどのように関連しているかを示しています。
例えば、動的コンポーネント（Dynamic Component）は、下の右側にあるように、HelperおよびAssetライブラリの要素（例：テキストスタイルなど）を含むことができます。
それでは、各ライブラリを詳しく見ていきましょう。
Helperライブラリ
Helperライブラリは、データの受信と返却に焦点を当てた機能的コンポーネントで、デザイン要素（アイコンや画像など）は含まれておらず、他のコンポーネントの子要素として使用されます。
例
✔ タイマーHelper（Timer Helper）
一定の時間が経過すると信号を送るシンプルなHelperコンポーネント
✔ レイヤースタイルHelper（Layer Style Helper）
SketchやFigmaなどのデザインツールのレイヤースタイル機能を再現
色コードを入力すると、対応するヘクスコード（hex code）が出力され、ライトモードとダークモードのスタイルをサポート
1つのHelperで全コンポーネントのスタイルを一括管理し、デザインのメンテナンス効率を向上
ProtoPieのparseJson関数を活用して、カラーコードや値の管理を効率化
2. Assetライブラリ
Assetライブラリは、さまざまな視覚的要素を含むコンポーネントの集まりで、以下のような要素を含みます。
主なAsset要素
✔ アイコン（Icons）
最小限のロジックで動作し、Override機能を使って簡単に変更可能
親コンポーネントから色の値を受け取り、それを適用する構造
✔ テキストスタイル（Text Style Components）
アイコンと同様の原理で動作しますが、追加機能を持っています
デザインシステムを模倣し、テキストスタイルの変更やサイズの自動調整を実施
テキストの長さに応じて自動的にサイズを調整し、親コンポーネントに高さを渡します
✔ 静的コンポーネント（Static Components）
基本的なスタイル/カラーの初期化、ライトモードとダークモードスタイルのサポート
ベクター（Vector）、PNG、ビデオなどの要素を含み、デザイン変更時にもコンポーネントロジックを妨げることなく修正可能
3. Logicベースのライブラリ
動的（Dynamic）コンポーネントは、機能を担当する論理的なコンポーネントで、他のライブラリの要素を含むか、独立してロジックを構築できます。
例
✔ コントロールスライダー（Control Slider）
状態（state）および位置（position）の値を保存し、親コンポーネントで値を設定可能
相互作用が成功すると、親コンポーネントに信号を送信
✔ スライダー＆ステータスライン（Slider & Status Line Components）
状態（state）、位置（position）、タイトル（title）、副題（subtitle）などの変数を保存し、親コンポーネントで設定可能
テキストの長さに応じて自動でサイズを調整（auto-scale）する機能を含む
✔ トグルスライダー（Toggle Slider） – ドア状態設定の例
車両のドアの開閉状態を変更する役割を果たします。
トグル状態に応じて、ステータスライン、車両のイラスト、スライダーなどと相互作用します。
✔ マップ（Map）コンポーネント – 地図ベースの動的要素
マップコンポーネントは、Logicベースのライブラリを使用して地図関連の動的要素を作成します。
ユーザーおよび車両の位置座標を使用して「フォーカスイン（Focus Into）」インタラクションを実現します。
ジャイロセンサー（Gyroscope Sensor）を使用して、デバイスの回転を検出する機能を追加することもできます。
ProtoPieコンポーネントライブラリ活用の利点
FeriはProtoPieコンポーネントライブラリを活用したプロトタイピングが次のような利点を提供すると強調しました。
✅ 時間の節約: テンプレートとガイドラインを活用して、既存のプロトタイプを修正する時間を短縮
✅ メンテナンスの容易さ: 一貫した命名規則と共通の設計方法を適用
✅ ユーザー中心: 他のチームメンバーが簡単に適応できる構造
✅ 拡張性: 新しい機能を追加しやすい拡張性をサポート
✅ コラボレーションの最適化: 複数人が同時に作業可能、マージ衝突（Merge Conflict）の防止
✅ コーディングなしで高忠実度（High-fidelity）インタラクションの実現: 論理的な思考だけで高度なプロトタイピングが可能
ProtoPie Connectを活用した自動車体験のプロトタイピング
ProtoPie Connectを使って、MBitionは車内ディスプレイだけでなく、スマートフォン、タブレット、ノートパソコン、さらには実際の車両でも同じプロトタイプをテストできるだけでなく、さらにそれらが互いに通信できるように実現しました。
ProtoPie Connectの利点
ブリッジアプリを使用して、さまざまなデバイス間でデータの送受信が可能
車両データを活用したリアルタイムフィードバックの適用が可能
複数のデバイスで同時にテストが可能
「ProtoPie Connectを活用すると、モバイル、タブレット、車内の実際の環境で同じプロトタイプをテストできます。Connectの素晴らしい機能をぜひ活用し、ブリッジアプリを作成することを強くお勧めします。」
— Szymon Kościelniak, MBition UI/UXデザイナー
自動車UXにおけるProtoPieの役割
自動車UXプロトタイピングは、自動車業界の発展と革新に欠かせない要素です。これにより企業は新しいアイデアを実現し、デザインを改善し、最高のユーザー体験を提供できます。
ProtoPieを活用すると、
✅ 開発期間を劇的に短縮し
✅ デザインとエンジニアリングチーム間の協力を強化し
✅ 革新的な車両UXをより迅速に実現できます。
今すぐデモを予約して、ProtoPieがどのように車両プロトタイピングのプロセスを変えることができるかを直接体験してください！ 🚀