ソリューションWebサービス開発UI/UXデザイン
3つの交通手段を単体で決済できるアプリRingo Passを制作しました

プロジェクトの紹介

2022.7.27

はじめに

こんにちは、チームラボ採用担当です!

今回はチームラボソリューションチームが開発を担当したスマホアプリ「Ringo Pass」について、制作時のこだわりポイント等ご紹介します。

Ringo Passとは

Ringo Passは東日本旅客鉄道株式会社と株式会社日立製作所の共同開発によるバイクシェア、 タクシー、バスなど、様々な交通手段をまとめてつなぐアプリです。

チームラボはUI/UX設計・デザイン・ロゴ制作・アプリ開発を担当しました。


Ringo Passは駅周辺で利用可能な交通サービスを一括で検索できる他、複数のアプリを個別で登録する必要もなく、シェアバイクやタクシーなどをより快適に利用できる機能を備えています。


2018年より実証実験を行なっており、現在は一般の方でも利用可能となっております。


ここからは制作時のこだわりポイントを紹介します。

point1: Ringo Passでしか得られないものを表現する

ブランド構築では、Ringo Passでしか得られないものを表現するために、他サービスとは異なったデザインアプローチを試みました。

まず、「交通アプリ=シンプルに、モノトーンに」のイメージから離れ、柔らかく温かみのあるポップさを表現し、親しみやすさを追求したデザインを目指しました。

また、JRのメインカラーである「緑」を青に寄せ、Ringo Pass独自のカラーを用いることで、今までにない革新的なサービスであることを印象づけました。


ロゴデザインの3色のグラデーションは、JRから始まる一次交通・二次交通・徒歩を示しています。

また、青から赤への移り変わりは、サービスと人々の移動自体が成長する様子を、まるで青りんごから赤りんごへと熟す様を用いて表現しました。

point2: 近くの交通手段をパッと表示

Ringo Passのメイン画面では現在地又は指定の場所の地図が表示され、その地図上にRingo Passに対応したタクシー、シェアサイクル、バス停の位置が表示されます。

これにより、迷わず利用したい交通手段に乗ることができます


また、タクシーに関しては、任意の場所に配車することができ、手を上げてタクシーを停車させる事なく乗車することができます。

point3: 各交通手段の支払いをこのアプリ一つで可能に

支払いをすべてアプリのネット決済で行える為、ビジネスシーンでの複数の交通機関の支払いで、もたつくこともありません。

実際にお客様からのレビューとして


このアプリでシェアサイクルを初めて使いましたが、suicaをタッチするだけで使えて便利でした。

タクシーはたまにしか使いませんが、タクシーに乗っている最中に支払い操作が出来て降りる時はとてもスムーズです。急いでいる時はいいなと思いました。


というお声をいただいております。



2021年10月現在利用可能な交通手段は


タクシー

・QR決済サービス

※対応タクシーと対象エリアは以下です。

-kmタクシー(東京23区、武蔵野市、三鷹市、神奈川県横浜市(中区、西区、南区))

-大和自動車交通(東京23区、武蔵野市、三鷹市、北多摩交通圏(西東京市、立川市))

-チェッカーキャブ(東京23区、武蔵野市、三鷹市、北多摩交通圏、南多摩交通圏)

・配車サービス

※対応タクシーは大和自動車交通・チェッカーキャブのタクシーです。

対象エリアは以下です。

-大和自動車交通(東京23区、武蔵野市、三鷹市)

-チェッカーキャブ(都内23区、武蔵野市、三鷹市)


シェアサイクル

・Ringo Passに登録したSuicaを使った自転車の貸出サービス

※対応シェアサイクルはドコモ・バイクシェアです。


バス

・NFCタグ認証を用いた決済サービス

※対応バスは株式会社kmモビリティサービスのお台場レインボーバスです。


となっております。

さいごに

今回はRingo Passについて紹介しましたがチームラボでは他にも様々なスマホ向けアプリケーションの開発を行っています。


他の実績については以下のリンク先で見ることができますので、是非ご覧ください!

そして一緒に開発おこなっていただける仲間も随時募集しています。


▼ご興味ある方はこちらから

採用に関する情報はTwitterでもタイムリーに発信しておりますで、少しでもご興味をお持ちいただけたら、ぜひフォローをお願いいたします。


Tweets by teamlab_recruit



クライアント:東日本旅客鉄道株式会社

URL:https://ringopass.com/

関連するプロジェクトの紹介

ソリューションプロダクトマネジメント

リアル店舗とECサイト『&mall』の連携をどのように実現したのか?「三井ショッピングパークアプリ」のリニューアルを担当しました。

プロジェクトの紹介

2026.6.04

ソリューションプロダクトマネジメント

「おうちが、あなたのカフェになる。」ブランドコンセプトを体現するアプリ開発の仕掛け

プロジェクトの紹介

2026.6.01

ソリューションプロジェクトマネジメント

27サイト・約3.2万ページの統合。慶應義塾 公式ウェブサイト全面刷新のプロセス

プロジェクトの紹介

2026.5.29

ソリューションスマートフォンアプリ開発

スマホでの応援が、もっと熱く、もっと快適に!チームラボが阪神タイガース公式アプリを全面リニューアル。

プロジェクトの紹介

2026.5.29

ソリューションWebサービス開発

大同生命 「どうだい?」公式アプリの新規構築において、企画、UI/UX設計、デザイン、開発を一貫して担当しました。

プロジェクトの紹介

2026.5.13

ソリューションWebサービス開発

チームラボが千葉銀行公式サイトのリニューアルを手掛けました。

プロジェクトの紹介

2026.4.28

ソリューションWebサービス開発

チームラボが慶應義塾公式ウェブサイトのリニューアルを手掛けました!

プロジェクトの紹介

2026.4.24

ソリューションWebサービス開発

すべての人の快適な空港体験 ── 成田国際空港公式Webサイト リニューアルの設計指針

プロジェクトの紹介

2026.4.23

ソリューションUI/UXデザインプロダクトマネジメント

“学校というインターフェース”のデザイン — 安平町早来学園 ICT空間設計

プロジェクトの紹介

2026.2.26

ソリューションアートUI/UXデザインプロダクトマネジメント

体験価値を高めるために、あえて機能を削ぎ落とす。チームラボアプリの「経路案内機能」のデザイン

プロジェクトの紹介

2025.9.12

ソリューションアートUI/UXデザインWeb/アプリディレクション

リスナーの“居場所”となる体験を追求する―。BUMP OF CHICKEN 公式アプリ『be there』開発の裏側

プロジェクトの紹介

2025.5.15

ソリューションWebサービス開発Web/アプリディレクション

BUMP OF CHICKEN リスナー向け公式アプリ、オフィシャルサイト、グッズECサイトを制作しました

プロジェクトの紹介

2023.12.21

ソリューションUI/UXデザインプロジェクトマネジメント

【Featured Projects 2023で講演】チームラボがICT空間設計を行った義務教育学校「安平町立 早来学園」について

プロジェクトの紹介

2023.4.24

ソリューションWebサービス開発スマートフォンアプリ開発

ネットでも通販でも使いやすく東急ハンズアプリを制作しました

プロジェクトの紹介

2021.10.07

ソリューションWebサービス開発

十分な機能で無駄を無くすavex入館申請支援と会議室予約管理システムを制作しました

プロジェクトの紹介

2021.9.30

ソリューションスマートフォンアプリ開発プロダクトマネジメント

最適なタイミングでニーズにあった服を提案するアプリ「メチャカリ」を制作しました

プロジェクトの紹介

2021.9.24

ソリューションWebサービス開発プロダクトマネジメント

相性の良い物件と出会える東急リバブル不動産検索サイトを制作しました

プロジェクトの紹介

2021.9.17

ソリューションWebサービス開発

的確に情報を提示する日本ペイントコーポレートサイトを制作しました

プロジェクトの紹介

2021.9.16

ソリューションWebサービス開発

好きな球団の情報をいち早くキャッチできるアプリ「パ・リーグ.com」を制作しました

プロジェクトの紹介

2021.9.10

ソリューションWebサービス開発

全ての媒体で魅力的に表示する大阪芸術大学サイトを製作しました

プロジェクトの紹介

2021.9.09

ソリューションWebサービス開発スマートフォンアプリ開発

使いやすく洗礼されたデザインを目指したヒルズアプリの製作裏話

プロジェクトの紹介

2021.8.06

ソリューションWebサービス開発Web/アプリディレクション

イノベーション自販機連動アプリacure pass

プロジェクトの紹介

2021.8.05

ソリューションWebサービス開発プロダクトマネジメント

より使いやすくZIPAIR公式Webサイト

プロジェクトの紹介

2021.7.30

ソリューションスマートフォンアプリ開発

ゴジラ公式アプリ「ゴジラ+」製作裏話

プロジェクトの紹介

2021.7.17

ソリューションWebサービス開発

(後編) チームラボがサイトリニューアルを担当したZIPAIR公式Webサイトの開発裏側をインタビューして頂きました!

プロジェクトの紹介

2021.4.21

ソリューションWebサービス開発

(前編)チームラボがサイトリニューアルを担当したZIPAIR公式Webサイトの開発裏側をインタビューして頂きました!

プロジェクトの紹介

2021.4.14

ソリューションスマートフォンアプリ開発

“銀行”らしくないUI/UXを実現した「りそなグループアプリ」はどのようにして誕生したのか

プロジェクトの紹介

2021.2.26

すべてのインタビューを見る