2024-03

Yahoo!乗換案内のUIデザインをコンポーネント・パターン・フローごとにまとめています。webデザイン、アプリデザインの参考に活用ください。

Yahoo!乗換案内

オンボーディング

8c5fc855-7517-42ef-9872-f2f7d0357542.webp

38b94650-1fdd-4589-8952-3d2960e5ae27.webp

13eccd3a-0649-43de-ac40-7857479ba7a4.webp

1c0c1b54-babc-40f7-bf77-aa49c3c04f2e.webp

ac5bcccb-ba94-4a18-a270-da0a9ba08b4e.webp

01bcac53-ee0a-4b2a-aa23-ed2a965067bc.webp

9681eec2-ed86-4cb4-85d3-04dccb283806.webp

トップ

d8acc974-b931-4b4b-ae5b-ab63a782993e.webp

公共交通マップ

377b5d46-70c3-4982-9a45-f07856668e56.webp

f3d04796-d86c-4068-9be7-bd7b12a3f66a.webp

e43beecd-3473-4a23-85f5-a6363573ae3d.webp

ef6ddd03-edc0-4fc0-bb41-da4366a8266f.webp

886f3841-af09-46e1-aae9-1f73cc0785e6.webp

55ef1aaf-ef6b-4784-97ff-d48ae429b25b.webp

a5583e19-3a48-4380-9a7a-a35029f9cfc1.webp

621cd438-1c86-45d8-a312-f5d3dae629e0.webp

85b926a2-f2ee-4f4a-9df5-e88edff47b9d.webp

498a06f4-afd3-4a6b-aec7-e8018713e43a.webp

68033ea8-f655-4672-bd60-3ede094c9504.webp

48be9de9-03bb-4824-8d9d-b94f6eae5c69.webp

fcb45d24-4e14-45e9-9967-e64292282d7c.webp

3cf94bb8-da96-4f21-8d5c-94a67838e70d.webp

379a8a54-4390-4966-ae36-0aed38481444.webp

c36cd46e-c1b2-4d40-8b81-ff392a1e894f.webp

41a46d01-b6a6-4f1a-913a-86ed7d9ac488.webp

48ce6944-c76d-48f8-94cd-132e6f7abd82.webp

89f5f76c-65b9-42c2-a2bc-160c03e7b092.webp

59b1bfae-f610-4c3e-8a99-9b68c3d4db93.webp

9f535b8a-164a-4b82-93b9-5324eaafb1f8.webp

a6256543-1e2f-427d-a231-f8eff4ade5f7.webp

59ddccbd-41d3-4cf2-9f86-3e5b463dea2f.webp

bcfbfa0c-ed58-485a-9bcf-0b316856f763.webp

ルート検索

a80feaa9-b30e-4a74-9b65-4755b3d0011b.webp

d9c118c9-a111-47a9-b403-69f786db7e17.webp

14cf3c52-4fb6-49d6-98c8-0295614e12e2.webp

78161efe-04ba-4f96-8e59-50e28fb4af5a.webp

ebc0f41c-4992-4404-8878-a4518b279edb.webp

a677d1bd-9f06-4cec-bd07-74cf7706dfb2.webp

4ff16b5c-23f6-4eb6-9f09-f9fd59bd833f.webp

00f3ae4f-5824-48fb-a3a4-468cd0770f49.webp

ba0db313-84da-423f-a6f6-181542de0190.webp

86777dd6-e856-4f39-b83a-8aceba76d1ad.webp

d67fd0df-e6c7-4486-80b4-61b6e2e0e1ae.webp

21b8adec-c555-41ad-9288-33b8f81ff99e.webp

837c8fd7-5e1c-487b-b1da-13d084121359.webp

54008915-0163-4f18-a708-b3fc34dbc489.webp

f6fbb024-2125-4aac-95e1-d5a1ec43358f.webp

6a0d0fe3-2ad1-45b3-841a-d015a1f13ecb.webp

716f9457-46c4-47fd-a93e-63823f848f43.webp

a1e40ef7-20a4-49cf-be47-3377d93ded51.webp

43e851ab-ca4e-424e-8301-a0f165390566.webp

cbb41ff0-631a-4a2b-9ec3-f76f24880fc3.webp

64733897-0858-4d7b-a54e-d0415df8bad6.webp

5ab01eb7-76f9-4b6d-87f7-5537acf8f015.webp

598d5ef8-fb14-40c7-80ed-9aaa94d5427b.webp

e3493e9a-de19-4100-9bed-6a0cfcd1324c.webp

01aae32b-9696-4e60-b116-63c93d0fb126.webp

d2b35aba-9221-41c3-9da3-000a457bcc77.webp

8f549a75-b50b-4568-b475-97eb90d848bf.webp

9c055550-2399-4828-9203-98e2deaf3660.webp

fa8d291a-44da-4e41-87f4-5020108ab715.webp

8414d614-2ab8-4ea4-912d-9ba5fca851ce.webp

ルート詳細検索

2775b06c-e73d-45aa-bcf6-b087500b947e.webp

818ed026-ea50-4cf0-9a66-90e76acab5b4.webp

af0ee84e-f9c9-47d9-a086-73cca325cda4.webp

3de17a9d-c6aa-4993-a236-0dfe73e9f169.webp

7a8dbeed-cce4-48eb-b262-0410a56d371b.webp

0e692fba-e1a0-46d5-8ab7-758b3005a332.webp

a0482fc5-92c9-4bdb-a5d3-f9042afd75fb.webp

753374be-b47a-4800-b85b-999e8bd09282.webp

ルート（遅延あり）

e1cd21fe-6ce0-4f13-8fe9-4beed9c77d57.webp

36021254-32c2-484f-8917-b80701bcdf39.webp

b93301d0-8ce8-4985-9a3a-202f1a2844f9.webp

83b8e49a-1a03-41b7-b56e-3626263d0df2.webp

c485666c-6bf6-4788-b721-c552f5085e87.webp

84d3ec18-82b7-4afd-b7ee-85206cbf6e7f.webp

4504239a-aee1-4f19-8100-ba64bdf1abee.webp

ce5c064f-ece3-4a14-810b-01f49c01221f.webp

7005e072-865b-423e-9a2e-bf0daa35bce2.webp

7ccfcebd-161e-4fb4-b4a7-8e8250f11852.webp

駅・バス停・スポット検索

bdbd430e-7c94-41f0-8dde-7d5f2e9da810.webp

db48c023-ada3-4a2a-bb0c-1803200acad6.webp

039675e4-efdf-4661-ab46-1684e89e8657.webp

cbce3a00-8812-4559-ba99-ede66537089a.webp

4723117c-0f13-48af-8b05-a5b9f5273e0d.webp

53b8ce93-0cc6-44eb-b6dd-83aa8d336e5f.webp

b7397f81-e55b-4dba-9ac1-2cec953b1c80.webp

be73af8f-5e57-4196-af52-d3da48a2f680.webp

11bd9298-a77a-4b35-849d-8d86ca93851c.webp

921e95ff-86df-498d-a7d2-27cfa6412342.webp

8189fdf1-73e9-4adb-9a33-94dd3f87b844.webp

46370937-7e5a-46aa-9938-e27fdc0e21a4.webp

bf195ca8-b5a5-4f59-a64a-6f31aea2269e.webp

6b4bd04b-da95-4970-a556-bf907cd9e19f.webp

a4921302-4185-4838-b01a-ce1dbfbe1bc7.webp

80cd0ef0-94a8-4f1b-ba6c-2957f74d7e33.webp

マイページ（ルートメモ）

04accec9-f9d7-4e18-8e43-c32d1deed0d6.webp

4093b186-09ec-4927-85f1-f4e522737506.webp

マイルート

5a50d022-bd9b-42e6-a12f-cb197ae1d987.webp

29f073b0-ab3c-4d71-a6d6-c02171f22b8e.webp

c2b735e5-dc24-4a1c-b9b5-baa049ac574f.webp

145fb50c-24cd-4ca3-9cde-1933c477139b.webp

3f780eb5-2cd0-423c-965d-845c32fc87f2.webp

f77796b6-d535-4210-ac54-2b5310da4dcd.webp

697905d0-2927-4ee5-bb35-74bdac6ba388.webp

d8434be6-5c13-4fe2-ae54-df048efb79e8.webp

検索履歴

715ffabf-72ed-4cca-80b7-e9364b05823a.webp

66d940be-2b73-4d46-b2f3-4633e6af9189.webp

ab8128b8-aadd-4042-a9cf-4cc12213df9b.webp

d27772e4-fcf8-47e8-9fda-2b9ee8212409.webp

3350a9f1-7b23-46a4-8437-c5407a4c37b5.webp

時刻表（定期区間タイマー）

4270ff47-abb8-4e7e-98f5-a5ec762b5f88.webp

56abe09f-f6cd-42ef-9928-abc121303ebc.webp

24bf1317-c141-4a8c-99e4-2f344c8f11ec.webp

2017ee95-0aef-425b-bd4a-4beeab348e7c.webp

44d76635-25c2-4aa2-b24e-bf357bcbd8c5.webp

c3346f4f-4d36-4f50-a8e9-d42c43178dec.webp

10d2c223-6690-4a5b-a487-b52e6bb90b6b.webp

77597a4d-8b42-4b1f-bbb8-624b32967a0a.webp

0271b82e-099d-46db-8e63-e83defaba126.webp

41872aef-b2bf-42a2-ae69-d1df5140ccb3.webp

5014f70f-750b-4e87-82b8-25bb8e4b1b1e.webp

49e8cca5-2a9b-436b-ad4e-1e744d9ab7ed.webp

d1f3ba66-3dad-4b1c-8e98-6b9c5b21cb9d.webp

時刻表を検索

c61c8535-ccc1-4724-8abb-0256ebf71cb9.webp

d3040d16-9937-47f2-9e91-6d6c9ca3e610.webp

25f3f51e-5008-4446-b838-8f04b080adbf.webp

beb38345-b0c7-444f-9cf3-2c5b0e0d4f1c.webp

f2e20305-3e41-42cd-991c-2f5f9531cbe1.webp

fda48090-7b29-49af-b3f5-cfbb533f9ba7.webp

d0bb3561-80ed-4538-b72b-ea13a809717f.webp

54084409-af20-4519-a863-7d8107833bf2.webp

52b25426-8b03-43fb-9627-2d0033c8549e.webp

4bea822a-a14d-4df7-968e-a74bcb4aac07.webp

マイ時刻表

9eee9d29-59f4-4d7e-b497-b48c7b44002d.webp

dbc10305-36e4-4d78-9d66-90b93e8d2086.webp

運行情報

c846eb3b-ad2e-41e4-96e5-4f0438f1c467.webp

e321497b-1af0-4c1c-b39d-c7d91e9d1942.webp

2fbc22b3-a4c7-4163-afc1-e510b42f3f5e.webp

d4694798-6f56-4d1f-93a6-ad70c55d9614.webp

13ec9169-f5b5-4991-a235-6f523107e7da.webp

017a2c80-4826-496d-81c0-19eb1118c7c4.webp

252c0c27-6cbc-4fd1-84fb-192e9f546056.webp

b62b4a9a-7d86-450f-a8b1-a164247f6bd0.webp

f66e7061-b573-4bf2-bff8-4b9125c37819.webp

6744a19a-0e35-41db-b9c1-d4357a549bef.webp

394a6e7b-9a67-4f34-a604-8fa9a0519fe3.webp

2cfe3491-f26d-4e68-9c3c-cd25b8fc8d25.webp

2a2d8dbd-445c-42b2-92ad-d3e51ed30182.webp

8e5bab8c-5df6-4522-b9a7-aa136ec31ce2.webp

d7492448-c311-4845-b8fc-0ce91eeb0af4.webp

9ac4bb80-4d1b-4b6b-aa42-e3ec1b5ce73e.webp

設定

508a3570-d7fa-4e25-9ecc-7b009c6c34f5.webp

f4eb9d4f-8dd0-480d-b2d9-5a223ceb8e7e.webp

e8ac48fb-dcc0-4298-81c3-193ad22d2c5c.webp

8421edb1-b00f-43d6-8bcb-165d3c34edbe.webp

f45b5740-b02d-4eb3-9aac-f625d891bf77.webp

985202e3-a740-4a44-81fe-dea84241599f.webp

d310238b-1720-414b-bce5-87f46ec56c2b.webp

19a0aa67-f49e-44b6-8e82-85cf09e7e74b.webp

87e3d730-6504-40d5-a3cc-fb53f65af5d4.webp

4ffaec4a-87e2-475e-a4f4-81fd62312562.webp

e4c0704c-7afa-498f-93e2-99f33c3f53cd.webp

a0f274a1-e4ed-43db-8a97-d4f585233d15.webp

71c0cb13-4bb0-46f7-b146-711fa57909e8.webp

ea1031a9-7131-4185-89dc-8a8115e29f4d.webp

59cd4936-c9e2-4b20-a532-c7ee311b6215.webp

17c7c4d2-1f86-42f2-a90e-658b0b3d3f37.webp

d947c618-b2e8-40f8-87ac-8083577ac151.webp

74181faa-25aa-4848-bb4c-c0e9f400c9cd.webp

ログアウト・ログイン

a5356fbc-be24-43f2-98e3-74822318bf59.webp

33326c59-8e02-49e8-923e-ba1cd86a7288.webp

a1d19af4-2c2d-464b-9fe8-1ce5253531d2.webp

501d0acc-955c-41e7-98aa-1b352da03be0.webp

「Yahoo!乗換案内」のUIデザイン一覧（2024年3月版）

Yahoo!乗換案内

オンボーディング

トップ

関連アプリ