Automotive UI Prototyping with Real Car Data

実際に動いているように感じられるプロトタイプが必要な理由

UXテストは、‘実物’で行うのが何よりです。ですが、自動車HMI設計の仕事に少しでも携わったことがあれば、実際のプロトタイプ車両でデザインをテストできるのがどれほど稀な贅沢かご存じでしょう。

運が良ければ、半現実的なレイアウトでUIの見た目や人間工学を評価するためのベンチ環境にアクセスできるかもしれません。

現実感の欠如は、ユーザーテストをするときに特に厄介です。研究者としては、テストユーザーに十分な文脈を与えて、何を見ているのか理解してもらうために、かなり説明する必要があります（“今、あなたは高速道路を120km/hで走行していると想像してください。”）。

RemotiveLabs は、この不足している現実感を補えるかもしれないものを開発しました。同社のツールは実車データ（テレメトリ、位置情報など）のストリームを提供し、自動車ソフトウェア開発者がシミュレーター内で現実的なデータを使ってアプリケーションをテストするのに役立ちます。

これにより、シミュレーションを動かす方法はいくつもあります:

• あらかじめ用意されたサンプル録画ライブラリから選ぶ

• 自分の信号データファイルをアップロードする（例: BLF、ASC、MF4）

• あるいは実車を接続してライブデータストリームを取得し、現実の条件下でHMIデザインをテストする

実車データを使って、インタラクティブな車載UIプロトタイプをテストできたら素敵だと思いませんか?

デザイナーにとっての意義

これらのツールは、デザイナーにも次のように役立ちます:

• 実データ（の可視化）を使ってメータークラスターのプロトタイプをテストする

• 車両データを使ってインフォテインメントのモックアップに命を吹き込む

• タッチスクリーンをどんな車にも後付けして、ライブデータをプロトタイプUIに流し込む

自分のような自動車UXデザイナーにとって、これを現実世界のデザインプロトタイプにどれほど簡単に組み込めるのか興味が湧いたので、RemotiveLabs のツールを一般的なUIデザインワークフローに統合してみることにしました。

UI実験: Figma、ProtoPie、RemotiveCloud

今日の事実上のUIデザインツールは Figma です。デザインチームと関係者は、デザイン案を共同で反復検討するためにこれを使っています。

理想的には、こうしたデザインの反復にはテストも含まれます:

• デザイナーは、提案したデザインの動的な側面を評価するために、プロトタイプをテストする必要があります。

• ユーザーリサーチャーは、ユーザーの実際の利用者を使って、直感性、学習しやすさ、そして人間工学的要素をテストする必要があります。

残念ながら、Figma のプロトタイピング機能はやや基本的で、自動車用途にはたいてい十分ではありません。そこで、インタラクティブなプロトタイピングには別のツール、ProtoPie を使うのが私の好みです。

タッチディスプレイ上のHMIプロトタイプに車両データをストリーミングする RemotiveCloud

自動車業界では、ProtoPie は複数の同時（タッチ）ディスプレイ、センサー、そして複雑な条件ロジックを使えるため、人気の高いプロトタイピングプラットフォームです。

ProtoPie Connect（ProtoPie のアドオンで、プロトタイプが外部デバイスやデータソースと通信できるようにする機能）を含む ProtoPie ライセンスが必要になります。

ProtoPie Studio を ダウンロード して、ProtoPie Connect にサインアップ

計画は次のとおりです:

上は Figma で作成したサンプルデザインです

Figma からUIを取り込む

まず、Figma から自動車ダッシュボードのUIを取り出して ProtoPie に持ち込み、インタラクティブ性を追加します。

ProtoPie でプロトタイプの準備ができたら、RemotiveLabs のツールセットと接続し、車両データのストリームでUI内のさまざまなオブジェクトを動かします。

これを実現できれば、あとは何でもできます。実車データを、ユーザーインターフェースのあらゆる要素を制御するパラメータとして使えるからです。

シーンを整える

上は架空の都市型マイクロカーのHMIデザインです

今回は、架空の都市型ミニモビリティ車両向けのインフォテインメント画面を作ります。基本的な中央タッチスクリーンを備え、簡易なインフォテインメント画面とメータークラスターの両方として機能します。

この車両は街中の短距離移動（通常30分未満）向けに設計されているため、機能面ではシステムをシンプルに保ちます:

• 車両走行に必要な基本情報を表示するメータークラスター

• ナビゲーション機能

• デジタルラジオとスマートフォンへのBluetooth音楽接続を提供する音楽セクション

さあ始めよう: Figma でデモプロジェクトを準備する

この実験では、画面のメータークラスター部分のさまざまな要素に実車データを流し込みます。

これを実現するために、Figma では特別なことは何もする必要はありません。いつもどおりにデザインを組めば大丈夫です。言うまでもなく、すべてのレイヤーに意味のある名前が付いていれば、誰にとっても作業が楽になります。とはいえ、それはそもそも良い実践です。

Figma から ProtoPie へ

Figma のフレームを ProtoPie に持っていくのは、文字通り朝飯前です。ProtoPie の親切な方々は Figma 用プラグインを提供しており、Figma からフレームを取り込み、完全に編集可能な ProtoPie の「シーン」に変換できます。

Figma デザインを ProtoPie に書き出す

通常、Figma のデザインは 95% ほどそのまま引き継がれます。変換時に壊れやすい主な点は次のとおりです:

• グラデーション

• 背景ぼかし（人気のすりガラス効果）

• 画像のアスペクト比。これは通常 ProtoPie で簡単に修正できます

グラデーション（たとえばマスク用）を Figma から ProtoPie に持っていくには、Figma 上でグラデーションレイヤーを SVG としてコピーし、ProtoPie に貼り付けることをおすすめします。

ProtoPie の Figma Import Plugin はここからダウンロードできます: https://www.protopie.io/figma

ProtoPie をリアルタイムデータ入力に備える

最初にやるべきことは、操作したいレイヤーやオブジェクトを変更受け入れ可能な状態にすることです。対象のオブジェクトを選択し、それぞれの「編集可能にする」ボタンをクリックします。

改めて、各レイヤーには意味のある名前が付いていることを確認してください。ドロップダウンリストの中から見つけ直す必要があるからです。

操作したいレイヤーをすべてリアルタイムデータで変更できるようにしたら、次は使いたい RemotiveLabs のデータストリームを設定します。

RemotiveLabs のツールを設定する

プロトタイプで使う車両データパラメータを選択しているところ

私の実験では、RemotiveLabs の無料トライアルライセンスを使ってきました。これにより、デモに流し込める多数の異なる変数や信号を含む試用録画にアクセスできます。

Web環境では、プロトタイプで使いたい信号を自由に選べます。しかも一度に全部やる必要はありません。後からいつでも戻って、選択した信号を追加したり削除したりできます。

私は、OEM固有の信号よりも、使えるなら VSS 信号を優先して使うのが好みです。VSS は “Vehicle Signal Specification” の略で、Covesa による自動車データの標準化プロトコルです。詳しくはこちらをご覧ください。 VSS の良いところは、すべての信号名が意味のある説明的な名前になっていることです。

私は、生活を楽にしてくれるものが好きです。

正しい信号名を見つけるには少し探すこともありますが、たいていは命名形式のおかげでかなり簡単に判別できます:

• Vehicle.Speed

• Vehicle.Powertrain.TractionBattery.StateOfCharge.Displayed

• Vehicle.Powertrain.ElectricMotor.Power

• Vehicle.CurrentLocation.Latitude

• など

信号名は重要です! プロトタイプ内でこれらを参照する必要があります。

作業が終わったら、プロトタイプを実行するために必要な正確な設定コマンドを確認できます。このコマンドは後でターミナルウィンドウに貼り付けるので、プロトタイプを実行するたびにすぐ取り出せる場所に保存しておきましょう。

RemotiveCloud は ProtoPie との通信をネイティブにサポートしています

VSS信号を ProtoPie に流し込む

プロトタイプを実行する前に ProtoPie で最後にやることがひとつあります。Pie に、RemotiveCloud ストリームから選んだ VSS 信号を監視して応答するよう設定することです。

ProtoPie での手順は 3 ステップです:

1. グローバル変数を作成する。たとえば “speed” という数値変数

2. ProtoPie Connect から VSS 信号を受け取ったときに反応するトリガーを作成する。これはデータストリーム内で見つけた名前、たとえば “Vehicle.Speed” を監視します

3. 応答を追加する。受け取った値を、目的のために用意したテキストレイヤーに入れることができます（またはオブジェクトの色を変える、何かを表示／非表示にする、など）

以上です。もちろん、ProtoPie の豊富なロジック機能を使えば、画面上の数値を変えるだけではなく、複雑な条件付き機能や豊かなビジュアライゼーションを追加できます。

車両データをどう受け取り、どう扱うかを ProtoPie に伝える

プロトタイプを初めて実行する

実データでプロトタイプが動くところを見るまで、あと少しです!

1. ProtoPie Connect

Pie（ProtoPie のファイル）をローカルドライブに保存し、ProtoPie Connect がアクセスできるようにします。次に ProtoPie Connect を起動し、ローカルのプロトタイプを見つけます。

取り込んだ Pie の横にある小さな「Display」ボタンを押すと、ProtoPie のデモウィンドウが開きます。ここでインタラクティブなプロトタイプが実行されます。

2. ブラウザウィンドウで RemotiveCloud を開く

データストリームを設定したブラウザタブに移動します。Play を押してデータ送信を開始してください。選んだストリームの長さによっては、作業が終わる前にストリームが尽きることがあるので、その場合は途中で再起動が必要かもしれません。

3. ターミナルウィンドウでコマンドラインを少し操作する

次にターミナルウィンドウを開き、コマンドライン文字列を貼り付けます（すでに RemotiveCLI をインストールしている前提です。まだなら、今がその絶好のタイミングです）。RemotiveCLI は、RemotiveCloud から流れるデータと ProtoPie デモの間をつなぐ橋渡し役になります。

流れてくるデータストリームを表示する ProtoPie Connect

すべてが正しく設定されると、ProtoPie Connect と RemotiveCloud のデータストリームの両方が稼働していることを自動的に検出するはずです。ProtoPie Connect のウィンドウには、関連するデータポイントが次々とスクロール表示されるのが見えるでしょう。

これで、あなたのプロトタイプのUIはすべての入力信号に反応するようになっているはずです!

実車データを使ってインタラクティブなプロトタイプを動かしているテスト環境

デバッグのヒント: うまくいかない場合は、ProtoPie Connect が信号を受信しているか確認してください。

• はい: 問題は ProtoPie のプロトタイプ側にあります。

• いいえ: RemotiveCloud が（まだ）再生中か、RemotiveCLI が正しく動作しているか確認してください（ターミナルウィンドウにエラーメッセージがないか見てください）。

次のレベルのプロトタイピング: 地図、位置情報、動画ストリーム

RemotiveLabs の車両データストリームには、車両の位置情報データ（通常は緯度と経度の 2 つの変数で表されます）を含めることができます。

少し難しいことに挑戦したいなら、これらのデータポイントを使って高度なプロトタイピングができます:

• 移動する地図（記録された車両位置データに追従するもの）

• 連動する動画ストリーム（例: 駐車支援のシミュレーション）

• ステアリングホイールなどのハードウェア周辺機器からの入力と組み合わせる

これを行うには、Protopie Connect の高度な機能である “Stage View”（Webビューやライブ動画フィードをプロトタイプ上に重ねる）と “Plugins”（Arduino/Teensy、IFTTT、ゲームコントローラーの統合などに使える便利機能）を使う必要があります。

これらは今回の実験の範囲外ですが、可能だと知っておくのは良いことです。しかも、こうした可能性についてのチュートリアルはオンラインにたくさんあります。

ProtoPie Connect について詳しくはこちら: https://www.protopie.io/connect

RemotiveLabs のデータへのアクセス方法がわかったので、これらすべての入力を組み合わせて、以前 Figma のデモで使っていたものよりはるかに現実味のある、高度に洗練されたプロトタイプを作れます。

RemotiveCloud は位置情報データや動画映像もサポートしており、それらもプロトタイプに取り込むことができます

著者について

Bram Bos は、デザインと現実世界での実装を結びつけることに深い情熱を持つ、経験豊富なUXおよびプロダクトストラテジストです。HMI設計、UXリサーチ、迅速なプロトタイピングにまたがる経歴を持ち、現在は大手自動車ブランドとともに仕事をし、車載ユーザー体験の限界を押し広げる活動に貢献しています。

Bram Bos はこのブログ記事を Medium で最初に公開しました。