---
title: HMIデモで語る、モバイルのリッチ表現と最適化手法
tags:  #unreal engine #ue5 #hmi #最適化  
author: [株式会社ヒストリア](https://convert.docswell.com/user/historia_Inc)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LELW3X29JR.jpg?width=480
description: 2025年8月5日(火)に行われた「Build: Tokyo&#039;25 for Automotive」にて発表させていただいたスライドです。  イベント詳細ページ https://www.unrealengine.com/ja/events/build-tokyo-2025-automotive  講演動画 https://youtu.be/XcosFi9cjYc?si=Bn54YlhXPor1FB1E  講演者： 株式会社ヒストリア　佐々木 瞬（代表取締役 / プロデューサー / ディレクター） 株式会社ヒストリア　真茅 健一（3Dアーティスト） 株式会社ヒストリア　星野 智希（エンジニア）  講演内容： ゲーム開発会社ならではのノウハウおよび、自動車業界向けのコンテンツ制作経験を元に、モバイル端末でも「処理負荷を軽くリッチなグラフィック表現を実現」をテーマに新たにHMIの技術デモを作成しました。 本セッションでは今回の技術デモを題材に開発ワークフローや、高品質なグラフィック表現手法、最適化手法を解説いたします。
published: January 09, 26
canonical: https://convert.docswell.com/s/historia_Inc/ZJQJ2N-2026-01-09-181632
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LELW3X29JR.jpg)

Build Tokyo ’25
for Automotive
HMIデモで語る、モバイルのリッチ表現と最適化手法
ヒストリア・エンタープライズ
佐々木 瞬、真茅 健一、星野 智希


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4JM9DL8VEW.jpg)

自己紹介
株式会社ヒストリア
佐々木 瞬
代表取締役
プロデューサー / ディレクター / エンジニア
ゲーム系の専門学校を企画職として卒業。
その後、ゲームのディレクターを経て、エンジニアへ
転身。前職でUnreal Engine 3 を使用していた経験か
ら、2013年 Unreal Engine 専門会社のヒストリアを
設立。ゲームとエンタープライズコンテンツの両方の
制作を行う。
本作では、企画・ディレクションを担当。
Unreal Engine 歴
14年くらい。
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/PJRG4K5WE9.jpg)

自己紹介
株式会社ヒストリア
真茅 健一
3Dアーティスト
ヒストリア・エンタープライズチーム所属の
3Dアーティスト。自動車、建築などノンゲー
ムコンテンツのアートワークを担当。元々の
専門は建築ビジュアライズだったためフォト
リアル系の案件を担当することが多い。ライ
ティング周りの表現力向上に関心が高い。
本講演デモではコンテンツ全体のビジュアル
設計と最適化を担当。


# Page. 4

![Page Image](https://bcdn.docswell.com/page/PEXX2LKVEX.jpg)

自己紹介
株式会社ヒストリア
星野 智希
エンジニア
2022年にヒストリア・エンタープライズチームに
新卒入社。
学生時代には同社開催のゲームコンテスト「UE4
ぷちコン」へ応募。第12回~15回に入賞する。
現在は自動車業界、建築業界などに向けたアプリ
ケーション開発を行っており、本講演デモでは各
種機能実装と、UI実装を担当。


# Page. 5

![Page Image](https://bcdn.docswell.com/page/3EKWML55ED.jpg)

ヒストリアの事業
開発者
コミュニティ
・家庭用ゲーム
・アーケードゲーム
・VR
・自動車業界
・建築業界
・放送/映像業界
・その他業界
・UE技術ブログ
・UEぷちコン
・セミナーイベント
・ゲームメーカーズ


# Page. 6

![Page Image](https://bcdn.docswell.com/page/L731Y3K1J5.jpg)



# Page. 7

![Page Image](https://bcdn.docswell.com/page/87DX543KEG.jpg)



# Page. 8

![Page Image](https://bcdn.docswell.com/page/VJPPGM43J8.jpg)

自動車業界のUE利用用途
カーコンフィギュレーター
自動運転シミュレーション環境構築
教師データ作成
デザインレビュー
HMI


# Page. 9

![Page Image](https://bcdn.docswell.com/page/2EV269XNEQ.jpg)

リッチ表現
×
最適化


# Page. 10

![Page Image](https://bcdn.docswell.com/page/57GRNZV5EL.jpg)

historia HMI Realize
デモ端末
2020年8月発売, Samsung Galaxy Tab S7


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4EQVQL6LJP.jpg)

Stats (Open GL)
デモ端末
フレームレート
Samsung Galaxy Tab S7
（ 2020年8月発売 ）
CPU使用率
GPU使用率


# Page. 12

![Page Image](https://bcdn.docswell.com/page/KJ4MND45E1.jpg)

Stats (Open GL)
デモ端末
フレームレート
Samsung Galaxy Tab S7
（ 2020年8月発売 ）
CPU使用率
GPU使用率


# Page. 13

![Page Image](https://bcdn.docswell.com/page/LE185Z427G.jpg)

Stats (Open GL)
デモ端末
フレームレート
Samsung Galaxy Tab S8+
（ 2022年2月発売 ）
CPU使用率
GPU使用率


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GEWZ59X2E2.jpg)

Unreal Engineが得意なこと
× UEは重い
○ UEはリッチ表現が軽く実現できる


# Page. 15

![Page Image](https://bcdn.docswell.com/page/47Z1N964J3.jpg)

チーム構成
佐々木
Director
小林
PM
櫻井
UI Artist
吉野
UI Artist
真茅
3D Artist
星野
Engineer
&lt;制作期間&gt;
約3か月


# Page. 16

![Page Image](https://bcdn.docswell.com/page/YJ6L8K2GEV.jpg)

ワークフロー
コンセプト決定
ここから1.5か月
画面構成決定
フレームワーク
制作
デザイン
背景制作
機能実装
ここまで1.5か月
調整


# Page. 17

![Page Image](https://bcdn.docswell.com/page/GJ519P2X74.jpg)

最適化の例をいくつかご紹介


# Page. 18

![Page Image](https://bcdn.docswell.com/page/LE31Y3K475.jpg)

アーティスト編


# Page. 19

![Page Image](https://bcdn.docswell.com/page/8EDX5435JG.jpg)

車のモデル
● 最終的に車モデル全体で約8万トライアングル


# Page. 20

![Page Image](https://bcdn.docswell.com/page/V7PPGM4D78.jpg)

不必要なハイポリはローポリにベイク
● 元のモデルは68万トライアングル、マテリアルが3つ


# Page. 21

![Page Image](https://bcdn.docswell.com/page/2JV269XGJQ.jpg)

ローポリを作成
● カメラから見てシルエットに悪影響を与えない程度のローポリを作成
元のモデル
ローポリモデル


# Page. 22

![Page Image](https://bcdn.docswell.com/page/5EGRNZRDJL.jpg)

Substance Painterでローポリにベイク
● 元のモデルの情報をローポリにベイクして、質感とともにテクスチャ化


# Page. 23

![Page Image](https://bcdn.docswell.com/page/4JQVQLVX7P.jpg)

ポリゴン数、マテリアル数を削減
ほぼ同じ見た目でポリゴン数を大きく削減（隙間は背面が見えないように意図的に潰している）
・元のモデル
・ローポリにベイクしたモデル
68万トライアングル
マテリアル3つ
840トライアングル
マテリアル1つ


# Page. 24

![Page Image](https://bcdn.docswell.com/page/K74MNDM2J1.jpg)

タイヤの回転はマテリアルで表現
● CPUの計算を減らしGPUで軽量に計算するためマテリアルで回転させている


# Page. 25

![Page Image](https://bcdn.docswell.com/page/LJ185Z8KEG.jpg)

タイヤの回転はマテリアルで表現
● マテリアルのRotate About AxisをWorld Position Offsetに接続して回転
● 頂点の位置をマテリアルで回転させることでタイヤが回っているように見せている
RotateAboutAxisについては弊社ブログ記事でも解説しています
[UE4] RotateAboutAxisでオブジェクトを回転する
https://historia.co.jp/archives/6261/


# Page. 26

![Page Image](https://bcdn.docswell.com/page/GJWZ59ZPJ2.jpg)

背景も連動して動くように
● 背景もタイヤの回転と連動してマテリアルで頂点を移動させた
● 実際には車は移動していないのでループ走行させるには管理しやすい


# Page. 27

![Page Image](https://bcdn.docswell.com/page/4EZ1N91673.jpg)

ライティング手法の検討
● 本講演デモでは低負荷かつリッチな表現を目指した
● 建築部分の表現に大量のライトと高品質のグローバルイルミネーションが必要
● クオリティとパフォーマンス両方の観点からライティングはLightmassを使用
※ライティングを事前計算してテクスチャ化しておくことで低負荷で高品質なライティングを実現
ただし、動的ライトを追加しない限りライトやモノを動かしてもリアルタイムにライティングが反映されない
のでシーン設計には制約がでる。


# Page. 28

![Page Image](https://bcdn.docswell.com/page/Y76L8KLLJV.jpg)

ライティング環境の切り替えはライトシナリオを使用
● 各時間帯、天候のバリエーションのライティングはライトシナリオとして事前
計算しておく
● 実行時には切り替えて読み込む


# Page. 29

![Page Image](https://bcdn.docswell.com/page/G7519P1ME4.jpg)

動的なライトの計算は最低限に
● 太陽と車のヘッドライトのみ動的にライティング


# Page. 30

![Page Image](https://bcdn.docswell.com/page/9J21261R7R.jpg)

デカール
● 上書きして質感を投影することができる


# Page. 31

![Page Image](https://bcdn.docswell.com/page/DEYZY9Z57M.jpg)

デカールによる影の表現
● 木があることを感じさせるために木の影だけをデカールで追加
● UVにノイズを加えてアニメーションさせることで風で揺れているように見せた


# Page. 32

![Page Image](https://bcdn.docswell.com/page/VJN3PL34J8.jpg)

デカールなし


# Page. 33

![Page Image](https://bcdn.docswell.com/page/YE993494E3.jpg)

デカールあり
● 車載機環境では表現しきれない詳細な影をデカールで追加


# Page. 34

![Page Image](https://bcdn.docswell.com/page/GE89MQ9V7D.jpg)

疑似的表現での軽量化
● 水の表現はまともにやるとコストが高すぎるので、不透明かつUnlitで擬似的に表現


# Page. 35

![Page Image](https://bcdn.docswell.com/page/LELW3XWRJR.jpg)

エンジニア編


# Page. 36

![Page Image](https://bcdn.docswell.com/page/4JM9DL9PEW.jpg)

CPU負荷
● アプリケーションのCPUの負荷は
システム全体の15%~20%ほど
● よほど重たいマルチスレッドの処
理を行わない限りCPU負荷がシステ
ムに影響を与えることは少ない
19.44
15.34
11.24
7.14
● ゲームスレッドも比較的余裕があ
る
● 今回特にゲームスレッド側での最
適化は行っていない


# Page. 37

![Page Image](https://bcdn.docswell.com/page/PJRG4KGYE9.jpg)

Android Single Instance Service(ASIS)
● Epic GamesがHMI向けに設計したUEのインスタンスを共有できる機能
● Rivianで実製品で使用実績あり
通常の構成
ASISを使用した構成


# Page. 38

![Page Image](https://bcdn.docswell.com/page/PEXX2LX4EX.jpg)

通常の構成では
● UEだけで完結
● プロトタイプなどに向いている
● 車両制御を組み込むハードルが高い
通常の構成


# Page. 39

![Page Image](https://bcdn.docswell.com/page/3EKWMLWPED.jpg)

ASISを使用する場合
● ASISアプリとUEアプリの2つに分離
● アプリ間は相互通信できる
● 車両制御はUEに組み込む必要がない
ASISを使用した構成


# Page. 40

![Page Image](https://bcdn.docswell.com/page/L731Y314J5.jpg)

クラッシュに強い
● ASISを使用していない場合
● Debug Crashを実行


# Page. 41

![Page Image](https://bcdn.docswell.com/page/87DX54X5EG.jpg)

クラッシュに強い
● ASISを有効にするとクラッシュしてもアプリ本体に影響がない


# Page. 42

![Page Image](https://bcdn.docswell.com/page/VJPPGMPDJ8.jpg)

アプリの切り替え
● 非常に高速に切り替えが可能
● 遷移アニメーションなども作れる


# Page. 43

![Page Image](https://bcdn.docswell.com/page/2EV2692GEQ.jpg)

ASISのパフォーマンス
● 若干オーバーヘッドがある（1msくらい遅くなった）
● CPU負荷はUEアプリ＋ASISアプリ（3%ほど）なので少し増える
● メモリの使用量はほぼ変わらない
● ただし起動するアプリが増えれば比例してメモリの使用量も増える


# Page. 44

![Page Image](https://bcdn.docswell.com/page/57GRNZLDEL.jpg)

最後に


# Page. 45

![Page Image](https://bcdn.docswell.com/page/4EQVQLYXJP.jpg)

JAXA×ヒストリアの共同開発
月面シミュレーション
将来的にローバーの走行シミュレーション等で使用
左：SLIMが撮影した画像
右：UE5で再現した月面環境


# Page. 46

![Page Image](https://bcdn.docswell.com/page/KJ4MNDW2E1.jpg)

JAXA×ヒストリアの共同開発


# Page. 47

![Page Image](https://bcdn.docswell.com/page/LE185ZYK7G.jpg)

JAXA×ヒストリアの共同開発


# Page. 48

![Page Image](https://bcdn.docswell.com/page/GEWZ59GPE2.jpg)



# Page. 49

![Page Image](https://bcdn.docswell.com/page/47Z1N9L6J3.jpg)

ご清聴ありがとうございました


