2024-04

ニューズピックスのUIデザインをコンポーネント・パターン・フローごとにまとめています。webデザイン、アプリデザインの参考に活用ください。

ニュース

厳選した最新・話題の情報をNewsPicksで時短チェック

ニューズピックス

2022-04

オンボーディング

1e5ff0f1-6727-49ab-a772-a2aff52bbd3e.webp

ede22e9a-169e-446c-acf3-6fb4664b3458.webp

2a9780dc-c0ad-412f-8caf-525049619248.webp

ba9a3e86-9bc2-4a30-a2c4-fdd809bddeeb.webp

1ddcb9d7-5002-427f-b9c5-7dc265a1d334.webp

f2b4355c-f926-4f66-8ace-15cb71f43034.webp

08dffc11-a1d1-4549-96a5-e34b1cb3a959.webp

9d0746d2-5ca7-42e6-91db-d6be725cbeec.webp

9fa62988-93cb-4e0c-aee1-717609928de8.webp

ed92608c-de74-4cb9-bd34-0b84aaf39d07.webp

9cfb480d-ecf4-4822-857c-686aecff62fb.webp

ed771b56-903f-447e-90d2-41447bf90e79.webp

94b9a0b7-5840-42f2-8007-e8f5466ecb71.webp

9b00249b-a74a-447c-ae71-ae5cb037a77a.webp

a36e904e-7fe7-4c5b-b3a2-b7538363c5af.webp

1286d4ed-42c2-4b19-b799-80febe8eecfc.webp

e1db66b0-8b99-4125-a79c-4650ff51dfc3.webp

43432a75-f050-45c3-b8d6-04440cbf3c4a.webp

91bea83c-67d6-47e2-80d6-cb7f011a9229.webp

7f6791e2-8858-494b-91cd-e22eeea8316e.webp

532a0611-cb1a-49e0-a4b6-c99fb449956d.webp

d0062848-c0fa-4481-85ec-c1924a173ebf.webp

f6b7b70f-a201-4f1d-a579-2f93fde3482e.webp

b0287996-0b9f-46c6-9252-8987c3724d8c.webp

1400331a-57c2-4f65-af2b-4af71950b036.webp

b2331390-1ba0-455b-9905-b9c7be435f65.webp

タブ・フィードの設定

d827ab6f-0c0a-4950-a014-c4eb6d19084d.webp

06f70426-15f6-40ae-8abd-36f7e16699b7.webp

e4a97269-dd01-4eaf-9c29-5fa3474d12cf.webp

c1f45430-9abd-46cd-8b70-fe879797fcbe.webp

92188ea7-5c8d-476f-9729-d3316a1b2c1f.webp

使い方ガイド

1e21b0dc-6e0c-4bf7-94e0-9218d4c70cae.webp

b1b64fb0-d364-44ae-b9e5-f698cde3fd1e.webp

214f0557-b8c7-4595-b9cc-67796b957529.webp

67e07bf5-6b3d-4a96-9fb2-4b86644f0337.webp

ad8a5c31-cdf1-41d7-a5c7-fb27512af486.webp

dd5ca40c-728d-4f66-bfc5-1f4b9c4f2644.webp

fc2844aa-3ba7-4bd4-8d77-ac4db5b79d26.webp

f11b9076-f4e8-443a-87df-0e842e632016.webp

b4733a30-76fc-44eb-bd0e-7bcb7d06e023.webp

b7665b3d-12e6-42ca-b9e4-bcedad2b99c8.webp

a2e6e406-dc11-4f19-b192-7a09b1c2a3bf.webp

2763c942-3327-4afc-aff4-e7b9a589e1ea.webp

f3b2d448-3978-4fd9-98a9-82a299a213ef.webp

234f0c25-6e43-4af2-98c6-f6cd4aa9eb52.webp

95b36ead-cb29-45b2-a7c9-dc78d083c780.webp

c388046d-5871-48c7-b1cf-9f70b0dc67a3.webp

c3810fc4-2d8f-474c-8bf4-09add8962b7e.webp

6ad87993-97c3-4a41-9d9b-378fe40bf0b9.webp

4d77fbac-4495-4793-8151-87b554e25095.webp

3911cba4-06c6-4cc7-9a72-ddd179857556.webp

0844be29-b86f-4333-ad97-666b02209442.webp

9ba005c5-53c9-4e5c-a7a7-d245b965be17.webp

15f4016a-64f8-4bd5-99a0-839ee004c1c4.webp

7f69f89a-a3e4-4cd5-b8f6-c8426f19cf1e.webp

37cd9e46-b3bc-4cc4-baa1-14ad69b2c93b.webp

1ae89ef8-01d1-40f6-af06-6729c732c6b3.webp

ニュース詳細

6e496af9-2160-4ff5-818f-5d8b1d2d6eb3.webp

ef3927af-dbb6-4522-9174-f39d61fdb727.webp

8c51d7a8-1201-4b45-a0a5-252ceb05b6ea.webp

30be5457-8bc8-4f20-ad33-18acdbf92763.webp

10dc9256-643e-473c-b891-243ec88acdd5.webp

db8f3182-fd40-4c63-8058-a35c03fbc6f1.webp

a5f96fb9-ec69-417e-8367-6a5a9ba81388.webp

64cd7061-3589-4819-847e-cdb7c1985ebf.webp

f8131bf9-6957-4a59-bfb3-81a11a988c32.webp

62a1172f-5f07-43f0-984e-6f556522b7d9.webp

c13fbe31-6a83-4a7e-8d86-befd2ea030dd.webp

b4c70bc5-1d23-4ac2-a493-67fcfcc0d135.webp

5211aa57-f0a1-411c-a3d8-062b9a0706f2.webp

83e780e5-acde-4444-8689-df7cf303190f.webp

7d3bf321-4798-4a8b-98ad-6fad3ae57de8.webp

9d5abde6-52b0-4b2c-8d2c-6724692060de.webp

14cf6b12-b21f-4b95-aac9-9d5e3ddb0c0e.webp

f64d90b9-43c4-457a-9ba7-7e220095b6f4.webp

5656010d-eb2c-4814-b636-111f06369da3.webp

571b57a7-5e87-4ebb-9309-a2b4da1c3afe.webp

c4ba78a2-3c98-4391-8311-b272c087789b.webp

944c57ef-bf0b-4667-a95e-efa12c012eec.webp

dbed36e6-7ede-4c4a-81d5-0f2f4d6599a2.webp

75b46927-7a66-4d53-9938-fd9d9f66b01b.webp

1ce64791-19d8-413e-83c6-a87d69cb4160.webp

42156d00-1af5-4e0a-8e71-a4b81d3f1af1.webp

6a1df86b-6e9f-4962-b3d5-9924610c768c.webp

e487f3fb-58e9-494b-9c01-0e81561e5645.webp

アカウント詳細

31cede89-1771-478b-98b0-1e4d80ed2a24.webp

737a999e-cc37-4e00-a2d3-035f02c65c73.webp

c35f7c5a-3feb-4f50-a5c3-c19bfdaa99c2.webp

54c8fc50-62ce-4116-b92c-dae114dc6cff.webp

8b8194c1-f2ec-4b25-b3d9-880bb7f045bd.webp

f47546d7-e6de-46f0-b256-f1bd87efbf83.webp

2ddc00e6-848c-4bf1-8c10-5aa69560151c.webp

6129b6c3-2a41-4f21-b9af-91401b0ca0c2.webp

コメントを投稿・削除

e3eabce2-5ed6-4226-a357-e59ac97570ad.webp

48c2fd14-07ea-495d-b1cf-200b6b27e5d2.webp

ab67bda5-88ed-4647-bd7a-23efc1b1280e.webp

93eddf6d-9202-4662-bc6c-cf71faca2c7c.webp

f7d26cb5-f59e-4435-9daf-4b8f35d7a4c6.webp

cf056950-398c-4d82-99cd-473a94b78754.webp

4bedefdd-809c-48e1-beef-505f7a52f13a.webp

2fffd4ab-ba7e-45f6-9dd6-cd7e848bf1f0.webp

24d8c90c-1a87-4ce5-a2e3-952825929404.webp

d4015d3d-9169-4365-8fc6-8e12b137fd15.webp

検索

af8c8852-2f8a-432f-92ca-7b7b105b1f3e.webp

5bd7f4ec-f6d3-4d3f-846e-640f73fac900.webp

b0319865-8dfa-4842-bc96-ac40494f4c6d.webp

52a2831e-87f1-422b-ada9-2e4c52af70c5.webp

6f4f65e3-e1e6-41e2-bcd0-0fe3ab4241bd.webp

f4f8cec8-25bf-417d-bfae-0938ca472e29.webp

a7fa7ce5-c9e2-4f1c-a43e-c91639d9353e.webp

978f9ecd-f420-4c51-b0ab-b90b0ff1e8c2.webp

03f2caaf-3a06-4140-b58a-cee9de62df42.webp

9b4c59b6-a9b3-470b-b0e5-75b07c675885.webp

e7878880-69cf-4891-a674-147c0fb61619.webp

55274bc9-00b2-432d-a79a-9e51d2bd9e46.webp

3161108d-a840-4b01-9116-a5b2e6c9a9f2.webp

fb6bf654-3fe6-464b-bb70-3ee1599ae982.webp

613b24fc-7637-4c7d-8697-dc075ec4b5c0.webp

bf8ab7dc-0193-4804-b767-19eee1ae58ff.webp

0bd24367-2a8d-447e-8d33-bf5c60b02912.webp

お知らせ

f82d1214-4b69-4461-bf54-cdc44fb39f8b.webp

4c07bc78-40a2-4608-8a34-b1a4273a7080.webp

4c78d8c1-2948-4561-a287-8795b0882d0a.webp

3b54c5fd-a961-4cfc-937e-4439f2720cf1.webp

326cce62-042c-4fc3-a8aa-fa84c239cf3d.webp

17f2721c-94da-40ad-a198-e6c910478a84.webp

74227a21-5720-4702-a33f-e3a102784f2c.webp

e9bb140d-a1df-4228-949b-4174131920a7.webp

294b9863-f9ec-4490-bb4b-853873a37c23.webp

348a0a83-e06f-47d7-b9f0-cd1c5c5f922a.webp

7f35deea-0013-4c53-9332-6995f6229d23.webp

フォロー

0f40c861-332d-4c5e-b792-d62c3c84e27c.webp

60245b81-0bcf-46a5-9a9b-eb8822137358.webp

d1228608-4f1c-4e85-b8c0-437d3b6bc5b1.webp

a5b58c8a-ff34-4e66-b14d-fc6a5041b6c1.webp

53acbe69-3b98-4ed7-b4b1-55b3c19383b5.webp

4a69c14f-5149-457e-983b-6237122cc346.webp

890e04d3-f388-416d-914d-53c7710fb53a.webp

ee1196cb-0ab5-45e9-b5cc-7026f0b7c4eb.webp

5b67f63a-4176-498c-9ad9-cc40326c2ddb.webp

455562db-c805-4385-91d3-65a753335553.webp

e49bf4f4-a3a7-4d77-9953-5cf4af00f006.webp

56d3a643-6fd6-41c8-a17f-14d2dec7b22a.webp

84a475f8-239f-4836-8787-fe283567a3a1.webp

330388a5-5b6d-4296-b761-978663d640a7.webp

8ebaf477-3992-41fa-9a38-bda84462634d.webp

特集

a6340345-5939-4e3f-a104-6e4e6014cc9c.webp

fbb837d4-f77b-4e6c-a153-3ed853d0af6f.webp

087cfde0-55bc-4b0c-b5af-faac5f62d9d3.webp

bd2dde15-da14-4ccc-b38c-491c7c69dc99.webp

17389f17-5ac3-48fc-bac5-50ef4d09c083.webp

9c1fa172-cebc-4a7a-a4c8-7b6adf0e5068.webp

番組

fa543525-ca18-475f-9006-1465ac9ac5eb.webp

9fd6bfde-375c-4a9b-a8c3-f1801904ca78.webp

fb48b6ff-7594-452b-bc23-af440301cb6b.webp

601bae3a-fe0d-41b9-b6ff-f199efffb28e.webp

99e3711c-77da-4f77-af62-c1a27c0fb34d.webp

f4269cc0-459b-4399-b902-2b676eaf16fa.webp

07bcc783-d6cd-4f12-a138-cb94938e1179.webp

番組詳細

32e5dae4-8950-46c1-9417-c2c6e1c045a8.webp

ed23218e-114c-4bf1-b31e-d3b6002fc7fc.webp

6015e468-9ef5-493f-9911-8e9bb267d2f0.webp

b1e55281-7ee7-4344-9945-e794371e6a16.webp

a39e231a-7b61-411a-aadc-997a83d94945.webp

7b07e212-26bb-4d27-8846-d0b36786cbd6.webp

2a0e6c61-936e-41dd-9330-585d49613752.webp

363c512a-2749-4269-a310-5767520b9cba.webp

音声番組詳細

5f0d6625-04c7-4a35-a320-d842078083af.webp

75cd68c9-82dc-4536-a65a-225829037664.webp

ba93c716-18e0-4935-9c06-19c40cd05af7.webp

6f9999e6-baf0-4eb8-8495-b87731ee07af.webp

09a5f168-0765-44e5-b235-ff800c3fc289.webp

45ab168a-a2c0-4e2a-9987-093fcd3249c3.webp

2be3d9a7-deff-463d-b8a0-71d65714d8a1.webp

3a817e7b-ed5b-4ffa-b422-ba29f6975733.webp

09fc203c-2100-463b-b044-492183829c46.webp

550f2a3b-137d-42e1-9c7d-ae1333e49330.webp

マイピックス

fabdb063-b0f9-4cb9-b28f-f4b059d101fa.webp

ad9fbb2b-98e7-4abb-a6d5-43fbf623cfea.webp

d8f2002a-f7fe-4ef4-b0c6-426cd3067a6f.webp

「ニューズピックス」のUIデザイン一覧（2024年4月版）

ニューズピックス

オンボーディング

ニュース

関連アプリ