コネクテッドカー向けモバイルアプリの開発では、プロトタイピングが極めて重要です。ユーザーのニーズを満たし、シームレスな体験を提供できるようにするためです。
この記事では、メルセデス・ベンツの子会社であるMBitionが、ProtoPieを使ってMercedes meモバイルアプリケーションをどのようにプロトタイピングしているかを紹介します。デザインプロセス、ProtoPieのコンポーネントライブラリを使ってデザインシステムを構築する方法、そしてコネクテッドな自動車体験のプロトタイピングにProtoPie Connectが最適な理由について学べます。
ライブ配信「Prototyping Connected Experiences: A Look at the Mercedes me App」の録画を下でご覧いただくか、読み進めて、MBitionのデザインプロセスから得られる貴重な洞察やワークフローの例をぜひご確認ください。
概要
MBitionを紹介：自動車UXデザインの未来を形作る
Mercedes me Appのプロトタイピング：MBitionの革新的なアプローチ
Mercedes me Appとは？
Mercedes me Appのプロトタイピングプロセスを読み解く
ProtoPieのコンポーネントライブラリを使うための9つのベストプラクティス
ProtoPieのコンポーネントライブラリを構築する方法
ProtoPieのコンポーネントライブラリを使うメリット
ProtoPie Connectを使った車載コネクテッド体験のプロトタイピング
MBitionを紹介：自動車UXデザインの未来を形作る
MBitionはメルセデス・ベンツの子会社で、車のユーザー体験の未来を形作る専任のUXデザインチームを擁しています。ベルリンで設立され、同地を拠点とするMBitionは、Mercedes-Benzのソフトウェアハブの中核を担い、自動車の研究開発に積極的に取り組んでいます。チームは、メルセデス・ベンツのインフォテインメントシステム向けに、ひとつひとつのプロトタイプを通して、革新的でシームレスなユーザー体験を生み出すという野心に突き動かされています。ブルガリアのソフィアにも拠点を持ち、両拠点あわせて900人以上の多国籍なスタッフが働いています。
MBitionが何をしている会社なのか、気になるかもしれません。ひと言で言えば、「Mercedes-Benzインフォテインメントシステムの未来をデザインする」ことです。この文脈でのインフォテインメントとは、「information」と「entertainment」を組み合わせた言葉で、車の利用者に対して1つまたは複数のディスプレイを通じて提供されるコンテンツを指します。
実際の例を見るには、下の動画をご覧ください。
よく見れば、動画内で紹介されている車のインフォテインメント要素のいくつかに気づくはずです。たとえば、
メータークラスター
HUD（ヘッドアップディスプレイ）
HU（ヘッドユニット）
PD（パッセンジャーディスプレイ）
Mercedes-Benzのインフォテインメントシステム。
動画ではもう1つの製品、Mercedes me Appも紹介されています。これについては次のセクションで詳しく見ていきます。
Mercedes me Appのプロトタイピング：MBitionの革新的なアプローチ
Mercedes me Appとは？
Mercedes me appは、Mercedes車オーナー向けのコンパニオンアプリとして2020年10月に初めてリリースされました。
2020年10月、Mercedes me AppはMercedes-Benzオーナー向けのコンパニオンアプリとして登場しました。このアプリでは、車両の操作や状態確認など、ユーザーがさまざまな方法で車とやり取りできます。ユーザーは車両をアプリとペアリングし、リモートエンジン始動、リモートドアロック／アンロック、車両位置の確認などのサービスに外出先からアクセスできます。
ライブ配信「Prototyping Connected Experiences: A Look at the Mercedes me App」では、MBitionのUI/UXデザイナーであるSzymon Kościelniak氏とFeri Irsanto Pujianto氏に話を聞きました。彼らは、デザインスタックの中核ツールであるProtoPieの活用法とベストプラクティスを共有してくれました。
「Mercedes meは、MBitionでProtoPieを使って初めてプロトタイプを作り始めた製品でした」とSzymonは言います。「いくつか別のツールも試しましたが、最終的にはProtoPieに落ち着きました。今ではとても気持ちよく使えています。」
Mercedes me AppのプロトタイピングにProtoPieが最適だった理由。
彼は、プロトタイピングを始める際、最初から正しく進めたいと考えていたと説明します。というのも、次のような制約を理解していたからです。
比較的小さなチーム
時間的なプレッシャー
ステークホルダーを納得させるための高精度プロトタイプが必要だったこと
MBitionチームには、Sketch上のコンポーネントライブラリを含むデザインシステムという、しっかりした土台がありました。しかし、新機能が定期的にリリースされるため、デザイナーはテストケースを常に検証する必要がありました。つまり、機能的でインタラクティブなプロトタイプを素早く簡単に作れる高精度プロトタイピングツールが必要だったのです。その結果、ProtoPieにたどり着きました。
Mercedes me Appのプロトタイピングプロセスを読み解く
このセクションでは、MBitionでモバイルアプリのプロトタイプを作成する際のワークフローを見ていきます。
以下はホームタブを示すプロトタイプです。現在の状態では、ユーザーは車両ロック機能を操作できます。
Mercedes me Appプロトタイプのワークフロー例。
1. Sketchのコンセプトを使う
「たとえば、プロトタイプを拡張してリモートエンジン機能を追加したいとします」とFeriは言います。「まず、その機能のコンセプトチームの案を見ます。この例では、コンセプトは簡略化されています。」
以下のコンセプトには、開始ボタンの押下、ページを保留状態に送る処理、その後、停止ボタンを含むユーザーインターフェースでエンジンを始動する流れが含まれています。
リモートエンジン機能のワークフロー例。
2. テンプレートを使う
「私たちは、作成済みのテンプレートを使ってProtoPieでの構築を始めます。そこにはページのさまざまなパターンが示されています」とFeriは言います。「つまり、そのテンプレートはデザインレイアウトだけでなく、基本的なインタラクションのロジックも含んでいるんです。」
以下の手順で進めます。
適切なテンプレートを見つける。
シーンを自分のプロフィールにコピーする。
すべてをリネームする（例：変数、値、警告）。
同じロジックに基づいて変数が機能するか確認する。
作成したい機能に合わせてシーン名を変更し、プレースホルダーのタイトルを置き換える。
アイコン、ボタンラベル、その他の一般的なテキストを置き換える。
TapトリガーとJumpレスポンスを追加する。
ホームタブ内のTapトリガーを複製する。
リモートエンジンページへのJumpレスポンスを作成する。
チームは、デザインレイアウトだけでなく基本的なインタラクションのロジックも含む、あらかじめ用意されたテンプレートを使って作業を始めました。
3. Sketchのエクスポート機能を使う
プロトタイプ内で要素をインタラクティブにする予定がない場合、コンポーネントが不要なこともあります。「その場合は、エクスポート機能を使うか、[ProtoPie] プラグインを使ってSketchから直接要素をエクスポートできます」とFeriは言います。
図では、エンジンが有効なときに情報行とセル項目の要素が表示される必要があります。
Sketchからエクスポートするときは、どの要素を出力するか選択できます。
このプロセスには次の手順が含まれます。
エンジンの状態に基づいて正のレスポンスを使う。
制約に関する設定をすべて行い、下部に固定されるようにする。
コンテナと要素の名前を分かりやすく変更する。
すべてを0の容量に設定する。
アクティブ時の下部アクションバーの拡大方法を決め、その値（この場合は206）を保存する。
エンジンの状態に応じて、下部アクションバーを高さ206に拡大し、情報行とセル項目には逆のレスポンスを適用します。この場合、どちらも100に設定されています。
明確さを保つため、レスポンスの名前を変更する。
その後、オフ状態とエンジン状態では逆の処理を行い、0に変更して、下部アクションバーを150に戻します
ProtoPieのコンポーネントライブラリを使うための9つのベストプラクティス
MBitionチームは、プロトタイピングのアプローチとしてProtoPieのコンポーネントライブラリを使うことにしました。
モバイルアプリのプロトタイピングプロセスの中で、チームのデザインワークフローをより生産的かつ透明にし、機能するプロトタイプの開発に必要な時間と労力を削減する、いくつかのベストプラクティスを確立しました。
変数、条件、トリガー、レスポンスに名前を付けることは、整理されたコンポーネントライブラリを構築するうえで重要です。
1. 変数に名前を付ける
変数に接頭辞（例：「int_」「str_」「bool_」）を付けることで、毎回インスペクターをクリックして確認するよりもはるかに速く、変数の種類を見分けられます。
2. 条件に名前を付ける
同様に、条件に名前を付けることで、チーム内の他のユーザーにとっての透明性が高まります。
3. トリガーとレスポンスに名前を付ける
ロジック全体をより素早く把握できるように、トリガーとレスポンスにも必ず名前を付けましょう。
ライブラリをより小さな論理単位に分割すると、共同作業がしやすくなり、ライブラリのアップロードも速くなります。
4. 複数のライブラリを使う
MBitionチームには多くのコンポーネントがあったため、ライブラリをより小さな論理単位に分割すると便利でした。これにより共同作業がしやすくなり、ライブラリアップロードも高速化され、異なるチームメンバーが別々の領域を同時に担当できます。
5. 命名／背景色分けのルールを使う
MBitionは、ライブラリやコンポーネントの違いを強調するために、ライブラリ内で特定の命名ルールと色分けを使っていました。
6. トリガーをグループ化する
トリガーを論理的なまとまりにグループ化することは、ロジックが多く、全体像をより把握しやすくしたい場合に特に有効です。また、コンポーネント全体で一貫性を保てるため、より生産的なワークフローにつながります。
ハードコードの代わりに動的な値を使うことは、柔軟性を保ちたい場合に特に重要です。
7. ハードコードされた値を避ける
ハードコードの代わりに動的な値を使うことは、柔軟性を保ちたい場合に特に重要です。
「多くのユーザーがハードコードを好むのを見てきましたが、プロトタイプに戻ってきたときに、要素が少し動いただけでもプロトタイプを作り直さなければならないんです」とSzymonは言います。
8. 大文字小文字を区別しない条件を使う
大文字小文字の区別をなくすことで、上書き可能な変数を少し堅牢にできます。
「条件内の文字列値は、できるだけ同じ形式にそろえるようにしています」とSzymonは言います。「たとえば、常に大文字を使う。だから、誰かが小文字で書いていても、キャメルケースで書き始めていても、最後には問題にならないんです。」
9. コンポーネントをドキュメント化する
ProtoPieの コンポーネントガイド 機能は、チームメンバーが参照できるようにコンポーネントを文書化するツールとして便利です。
MBitionでは、スタイリングによってドキュメントの透明性が高められており、ユーザーやライブラリに貢献する複数の同僚と作業する場合には特に重要です。
ProtoPieのコンポーネントライブラリを構築する方法
MBitionチームはコンポーネントライブラリをさらに小さな単位に分割しました。以下は、彼らのコンポーネントライブラリを構成するさまざまなカテゴリと、それらが相互にどのように関係して見えるかを示した図です。
コンポーネントライブラリは、Helper、Assets、Logicベースのライブラリに分割されていました。
動的コンポーネントには、テキストスタイルのように、helperライブラリやassetライブラリの要素を含めることができます。
たとえば、右下に見られるように、動的コンポーネントにはテキストスタイルのようなhelperライブラリやassetライブラリの要素を含めることができます。
それぞれのライブラリを見ていきましょう。
1. Helperライブラリ
Helperは純粋に機能的なもので、データを受け取り、返すように設計されています。デザイン要素は含まず、アセットやその他のコンポーネントもありません。通常、Helperはさまざまなコンポーネント内の子要素として使われます。
通常、Helperはさまざまなコンポーネント内の子要素として使われます。
簡単な例としては、タイマーがカウントを終えたときにシグナルを送るタイマーヘルパーがあります。
より複雑な例としては、SketchやFigmaのようなデザインツールのレイヤースタイリング機能を再現するレイヤースタイルヘルパーがあります。色コードを入力として受け取り、対応する16進コードを出力します。Light ModeとDark Modeの両方のスタイルに対応しています。このスタイルヘルパーの主な利点は、すべてのコンポーネントを同時に制御できることで、各コンポーネントの色を個別に変更する必要がなくなる点です。ここでProtoPieのparseJson functionが役立ちます。色コードや値などの重要な情報の管理と取得の効率を高めてくれるからです。
Light ModeとDark Mode。
2. Assetライブラリ
Assetライブラリは、次のようなさまざまなコンポーネントの集合です。
アイコン: アイコンは最小限のロジックしか使わないため、ProtoPieのoverride機能で簡単に差し替えできます。初期色の設定、親コンポーネントからのカラー設定値の受け取り、Helperの助けを借りた色付けなどを担当します。
テキストスタイルコンポーネント: これらはアイコンと同様のロジックを持ちますが、追加機能があります。デザインシステムを模倣し、親コンポーネントからsetterを受け取ってテキストを変更できます。また、テキストの長さに応じて自動的に再スケールまたはレイアウト調整を行い、その高さを親に返します。
静的コンポーネント: 最小限のロジックで済み、主に色とスタイルの初期化に集中します。色の適用にはHelperを使い、Light ModeとDark Mode向けに特定のスタイルを持たせることができます。これらのコンポーネントはベクター、PNG、または動画素材で構成され、コンポーネントロジックを損なうことなく、視覚デザインの変更を簡単に適用できます。
アイコンコンポーネントのライブラリ。
3. Logicベースのライブラリ
動的コンポーネントは、他のライブラリや同じライブラリ内のコンポーネントを入れ子にできます。
動的コンポーネントは機能のためのロジックを保持し、他のライブラリや同じライブラリ内のコンポーネントを入れ子にできます。親コンポーネントと子コンポーネントの間でシグナルを分配し、状態のような上書き可能な変数を持つこともあります。
例をいくつか挙げます。
Control Sliderコンポーネントは、状態と位置の変数を保持します。setterを使って親コンポーネントから上書きでき、値は親に返されます。成功したインタラクションは親にシグナルを送ります。
同様に、SliderコンポーネントとStatus Lineコンポーネントは、状態、位置、ステータス、タイトル、サブタイトルの変数を保持します。親による上書きが可能です。Status Lineコンポーネントは、テキストの高さに応じて自動でスケールします。
コンポーネントを組み合わせることで、異なるコンポーネント同士がsend/receiveの概念を通じて通信し、インタラクションを実現します。たとえば、トグルスライダーはドアの開閉状態を設定する役割を担います。状態に応じて、シグナルはステータスライン、車のイラストコンポーネント、スライダー自体など、個々のコンポーネントに配信されます。
一方、マップコンポーネントは地図専用のロジックベースのコンポーネントです。動的コンポーネントライブラリと同じ考え方を、より大きなスケールで使っています。
Mercedes me App内で使われているマップコンポーネントの例。
上の例では、すべての要素がコンポーネントライブラリから来ています。デバイスの回転を検知するためにジャイロセンサーを使い、ユーザーと車両の位置座標を利用して「focus into」インタラクションを実現しています。
上の例では、すべての要素がコンポーネントライブラリから来ています。デバイスの回転を検知するためにジャイロセンサーを使い、ユーザーと車両の位置座標を利用して「focus into」インタラクションを実現しています。
ProtoPieのコンポーネントライブラリを使うメリット
Feriによると、初期段階からデザインチームは「プロトタイプ作成の工数の大きさや保守性の低さといった高精度プロトタイピングの欠点を最小化する必要がある」と理解していたそうです。ProtoPieでコンポーネントライブラリを使ったプロトタイピングのアプローチには、いくつもの利点があったと彼は言います。
時間を節約できる。こうしたアプローチにより、チームは通常ならゼロからプロトタイプを作るのに費やしていた多くの時間を節約できます。
保守しやすい。 ガイドラインや共通ルール／ルーチンのおかげで、MBitionチームは大規模なプロトタイプを維持できます。
ユーザー志向である。他の同僚がプロトタイプ作業に参加する場合も、摩擦少なく参画できます。
拡張性が高い。コンセプトが成熟するにつれて、プロトタイプに機能を追加できます。
共同作業しやすい。 異なる人が異なるライブラリを担当しても、マージコンフリクトを発生させずに作業できます。
コードは不要です。 高精度のインタラクションにコーディングは必要なく、論理的思考だけで実現できます。
ProtoPieにおけるコンポーネントライブラリのメリット。
ProtoPie Connectを使った車載コネクテッド体験のプロトタイピング
Mercedes-Benzのエコシステム内で、アプリとProtoPie Connectをつなぐ。
では、MBitionの文脈でいう**connected experiences**とは何でしょうか？
この記事の冒頭の動画では、車内に搭載されているもの、あるいは車と連携して使うことができるいくつかのデバイスが紹介されていました。ProtoPie Connectのおかげで、それらすべてのデバイスを対象にプロトタイプを作成し、さらには相互に通信させることも可能です。
bridge appsを使って、車両データやさまざまなインタラクションポイントをプロトタイプに供給することもできます。
「いいところは、適切なセットアップがあれば、同じプロトタイプをモバイル端末、タブレット、ノートPC、さらには実車でも試せることです」とSzymonは言います。
Szymonは続けてこう付け加えます。「ProtoPie Connectがあるなら、この巨大な可能性の世界をぜひ探ってみてください。時間を見つけて使ってみて、自由に試し、自分だけのbridge appsを作ってみてください。」
最後に、もう一度動画に戻ってみましょう。ルイス・ハミルトンの手にあったスマホを覚えていますか？
そのとおりです。あのプロトタイプはProtoPieで作られていました。
ProtoPieで作られたプロトタイプ。
ProtoPieで車のユーザー体験を向上させる
自動車UXのプロトタイピングは、自動車業界の発展とイノベーションに不可欠です。企業が新しいアイデアを形にし、デザインを洗練させ、ユーザー体験を向上させることを可能にします。
ProtoPieを使えば、企業は開発時間を劇的に短縮し、デザインとエンジニアリングチームの連携を強化し、顧客を魅了する最先端の車両を提供できます。デモを予約して、ProtoPieが車載プロトタイピングプロセスをどのように変革できるかをご覧ください。
