マルティスープ
Staff Blog

2025.06.12

複雑な駅構内も迷わない！3D構内図開発を通して見つめた「ユーザー体験」

こんにちは！マルティスープ株式会社 テクニカルDept.の渡邊です。

この度弊社では、ジェイアール西日本コンサルタンツ株式会社様で開発された、大阪駅などの複雑な駅構内での移動をサポートする「3D構内図」のWebアプリの開発を担当いたしました。

大阪駅は、複数の路線が乗り入れ、商業施設も併設された巨大な駅です。そのため、駅構内で迷ってしまうという課題がありました。

この課題を解決するために開発されたのが、3Dで駅構内のマップや経路を確認できる「3D構内図」です。

弊社はアイデンティティの一つとして「『ユーザー体験』を創る」という理念を掲げていました。

3D構内図の開発においてもこの言葉を重要なものとみなし、ユーザーがストレスなく、スムーズに目的地にたどり着けるようなユーザー体験の提供を目指しました。

3D構内図は2025年6月現在、下記の3駅において「JRおでかけネット」該当ページの上部にあるリンクよりアクセスいただけます。また、大阪駅に関してはうめきた地下口付近にあるデジタルサイネージでもご覧いただけます。

JR大阪駅 https://www.jr-odekake.net/eki/premises?id=0610130
JR新大阪駅 https://www.jr-odekake.net/eki/premises?id=0610155
JR京都駅 https://www.jr-odekake.net/eki/premises?id=0610116

大阪駅で3D構内図を体験してみた

3D構内図の最大の特徴は、その名の通り、3D技術を活用している点です。
これにより、ユーザーは駅構内の構造を立体的に把握でき、より直感的に目的地への経路を理解することができます。

特にこだわったのは、経路案内の見せ方です。
複雑な構内でも、ユーザーが迷うことなく目的地にたどり着けるよう、3Dを用いて視覚的に分かりやすい経路を表示するように工夫しました。

実際に私も、大阪駅で3D構内図を使用してみました。
大阪駅を利用するのはこれが人生で2回目であり、ほとんど馴染みがありません。

私は新大阪駅からJR京都線で大阪駅に到着後、まずトイレを探すために3D構内図を利用しました。
6番ホームから最寄りの男子トイレを検索し、3D構内図の案内に従って移動したところ、問題なく目的地にたどり着くことができました。

その後、駅構内のお店で肉まんを食べるため、3D構内図で経路を検索。
大丸梅田店の地下1階にある551蓬莱まで3D構内図の案内に従って迷うことなく移動し、無事に食事を堪能することができました。

最後に、大阪駅のシンボルである金時計を見に行きます。
当然、ここでも3D構内図を活用します。
地下1階から5階に移動するためにはいくつものエレベーターやエスカレーターを経由する必要があるため、通常の地図では表示を何度も切り替えながら確認する必要があると予想されます。
しかし3D構内図では全ての階が一度に表示されるため、スムーズに目的地にたどり着くことができました。

このように、大阪駅のような複雑な駅構内でも、3D構内図は目的地までスムーズに移動するための強力なサポートツールとなることが分かりました。

ユーザー体験へのこだわり

3D構内図の開発を通して、「『ユーザー体験』を創る」という理念を体現できたと考えています。

3D技術の活用や分かりやすいデザインはもちろんのこと、実際にユーザーがどのように利用するかを想定し、細部にまでこだわって開発を進めました。

• 経路を見やすくするための工夫
  • ・各階の経路に関する部分のみを表示することで、経路を立体的に示しつつも一定の視認性を確保
  • ・改札口などの重要な地点を経由する場合は、それらの地点もUIに表示
  • ・経路を示す赤い線の彩度を高める代わりに、ベースの地図は彩度を若干落とし、また赤系の色を極力使用しないように配色を設定
• 多くのスマートフォンで快適にご利用いただくための工夫
  • ・各OSのシェアと互換性を考慮し、リリース初期はWebGL 1.0を使用 (現在はWebGL 2.0を使用しています)
  • ・原則として半透明マテリアル不使用 (ディザによる半透明表現を活用)
  • ・リアルタイムライト不使用
  • ・上記の制約のもと視認性を確保するため、独自のシェーダーを開発
• 保守性を高めるための工夫
  • ・再ビルド不要で各地点の情報を差し替え可能
  • ・基幹となるシステムと地図モデルとをAssetBundleを用いて完全に分離、他駅へ容易に展開できる設計を実現
  • ・独自シェーダーはShader Graphで作成されており、修正が容易

もちろん、未だ解消されていない課題もあります。
例えば、出発地の指定方法の改善などは、今後の開発における重要な検討事項です。
しかし、今回の3D構内図開発を通して、ユーザーにとって本当に使いやすいサービスとは何かということを改めて深く考える良い機会を得られました。

今回開発した3D構内図は、複雑な公共施設での移動というユーザーの課題を解決に導くための可能性を秘めたツールです。
この開発を通して、弊社の理念が、サービスにいかに反映されるべきかを学ぶことができました。

3D構内図は2025年6月現在、下記の3駅において「JRおでかけネット」該当ページの上部にあるリンクよりアクセスいただけます。また、大阪駅に関してはうめきた地下口付近にあるデジタルサイネージでもご覧いただけます。

JR大阪駅 https://www.jr-odekake.net/eki/premises?id=0610130
JR新大阪駅 https://www.jr-odekake.net/eki/premises?id=0610155
JR京都駅 https://www.jr-odekake.net/eki/premises?id=0610116

今後もマルティスープは、ユーザーの皆様に快適でより良い体験を提供できるよう、技術力とアイデアで社会に貢献してまいります。