チャットのインターフェイスは、ユーザー同士のコミュニケーションに欠かせません。さまざまなアプリに搭載されているチャット画面のデザインの中から、使いやすいインターフェイス、ユニークなインターフェイスなど、事例を48個集めました。
アプリ設計の参考にしてみてください。
1. Adding Recent Images in chat Application
![Adding Recent Images in chat Application](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_1-640x480.gif?resize=640%2C480&ssl=1)
by Srikant Shetty
2. Timeline Display and Screenshot Edit in a Chat Room
![Timeline Display and Screenshot Edit in a Chat Room](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_3-640x480.gif?resize=640%2C480&ssl=1)
by Xiaoxue(Ellie) Zhang
3. Lisn App — Synced spotify & soundcloud chatrooms
![Lisn App — Synced spotify & soundcloud chatrooms](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_49-640x480.gif?resize=640%2C480&ssl=1)
by Abhinav Chhikara
4. Chat interface (Message)
![Chat interface(Message)](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_4-640x480.png?resize=640%2C480&ssl=1)
by whitton
5. Chat iPhone App Design
![Chat iPhone App Design](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_10-640x480.gif?resize=640%2C480&ssl=1)
by Ramotion
6. Chat With Friend
![Chat With Friend](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_5-640x480.png?resize=640%2C480&ssl=1)
by Puppet
7. App, part 3 — “Oliveboard”
![App, part 3 — “Oliveboard”](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_11-compressor-640x480.gif?resize=640%2C480&ssl=1)
by Aleksey Belikov for Fireart Studio
8. Simple chat app
![Simple chat app](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_6-640x480.gif?resize=640%2C480&ssl=1)
by Andrei Mironov
9. Chatbot animation
![Chatbot animation](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_8-640x480.gif?resize=640%2C480&ssl=1)
by noterrain
10. Intelligent secretary
![Intelligent secretary](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_12-640x480.jpeg?resize=640%2C480&ssl=1)
by Sunny
11. Messaging screen
![Messaging screen](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_7-640x480.jpeg?resize=640%2C480&ssl=1)
by Grégoire Vella
12. Wechat Redesign
![Wechat Redesign](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_9-640x480.jpeg?resize=640%2C480&ssl=1)
by 追求_Design
13. IM — Chat Dashboard PSD
![チャットインターフェイス](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/IM_Chat_Dashboard-640x400.png?resize=640%2C400&ssl=1)
by Matt Thompson
14. Fun App Design
![Fun App Design](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_27-640x480.jpeg?resize=640%2C480&ssl=1)
by Riko Sapto Dimo
15. #Daily gif#for car-part one
![#Daily gif#for car-part one](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_14-640x480.gif?resize=640%2C480&ssl=1)
by BOLIANG.
16. Contact Doctor App
![Contact Doctor App](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_13-640x480.png?resize=640%2C480&ssl=1)
by Iswanto Arif
17. Chat Room Conversation Page
![Chat Room Conversation Page](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_18-640x480.png?resize=640%2C480&ssl=1)
by Ghani Pradita
18. Messages
![Messages](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_15-640x480.png?resize=640%2C480&ssl=1)
by Gale P? for Freedom Union Studio
19. Workflow board UX
![Workflow board UX](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_26-640x480.png?resize=640%2C480&ssl=1)
by Gleb Kuznetsov✈
20. Skype redesign
![Skype redesign](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_22-640x480.png?resize=640%2C480&ssl=1)
by Polina Dombrovska for Awesomed
21. Social Location App
![Social Location App](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_17-640x480.jpeg?resize=640%2C480&ssl=1)
by Masudur Rahman
22. ToFind Multi function chat interface
![ToFind Multi function chat interface](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_23-compressor-640x480.gif?resize=640%2C480&ssl=1)
by Leo Leung
23. iOS 10 | iMessage Groups Concept
![iOS 10 | iMessage Groups Concept](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_16_loss-640x480.gif?resize=640%2C480&ssl=1)
by emilie badin
24, people + story screen
![people + story screen](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_25-640x480.png?resize=640%2C480&ssl=1)
by Prakhar Neel Sharma
25. Direct Messaging
![Direct Messaging](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_19-640x480.png?resize=640%2C480&ssl=1)
by Olivia
26. Messaging App iOS Concept
![Messaging App iOS Concept](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_21-640x480.png?resize=640%2C480&ssl=1)
by Ollie Barker
27. Chat Screen (just for spare pixels)
![Chat Screen (just for spare pixels)](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_20-640x480.png?resize=640%2C480&ssl=1)
by Prakhar Neel Sharma
28. Conversation
![Conversation](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_24-640x480.png?resize=640%2C480&ssl=1)
by Anton Chandra
29. Direct Messaging
![Direct Messaging](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_28-640x480.jpeg?resize=640%2C480&ssl=1)
by Goutham
30. Messages
![Messages](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_40-640x480.png?resize=640%2C480&ssl=1)
by Gale P?
31. Direct Messaging
![Direct Messaging](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_41-640x480.gif?resize=640%2C480&ssl=1)
by Lay
32. Gredash — Chat
![Gredash — Chat](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_45-640x480.png?resize=640%2C480&ssl=1)
by Afrian Hanafi
33. Day031-Chat2
![Day031-Chat2](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_37-640x480.png?resize=640%2C480&ssl=1)
by UISTAR for Freedom Union Studio
34. Chat
![Chat](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_30-640x480.png?resize=640%2C480&ssl=1)
by Annie
35. Badge Chat
![Badge Chat](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_48-640x480.png?resize=640%2C480&ssl=1)
by Alexandr Brinza
36. Client Communication App Concept
![Client Communication App Concept](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_31-640x480.png?resize=640%2C480&ssl=1)
by Mackenzie Child
37. Messenger for Sberbank
![Messenger for Sberbank](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_38-640x480.png?resize=640%2C480&ssl=1)
by Mahaev Nikita
38. Messenger Bots & Partial payment Concept
![Messenger Bots & Partial payment Concept](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_39-compressor-640x480.gif?resize=640%2C480&ssl=1)
by Isil Uzum
39. Mondo Inbox and Conversation Interface
![Mondo Inbox and Conversation Interface](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_29-640x480.png?resize=640%2C480&ssl=1)
by Ghani Pradita
40. Day029-Chat App
![Day029-Chat App](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_36-640x480.png?resize=640%2C480&ssl=1)
by UISTAR for Freedom Union Studio
41. Dashboard Virtual Personal Assistants
![Dashboard Virtual Personal Assistants](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_34-640x480.png?resize=640%2C480&ssl=1)
by Thomas Budiman
42. iOS Gui Kit — Vol 1 — Sneak Peek
![Day013-Chat](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_33-640x480.png?resize=640%2C480&ssl=1)
by Nimasha Sewwandi Perera for LUFT
43. Day013-Chat
![Day013-Chat](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_32-1-640x480.png?resize=640%2C480&ssl=1)
by UISTAR for Freedom Union Studio
44. Chat
![Chat](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_43-640x480.jpeg?resize=640%2C480&ssl=1)
by Ionut Zamfir
45. Location and Chat — UI UX Design
![Location and Chat — UI UX Design](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_35-640x480.png?resize=640%2C480&ssl=1)
by Nimasha Sewwandi Perera
46. ios app for travellers
![ios app for travellers](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_42-640x480.png?resize=640%2C480&ssl=1)
by Stano Bagin
47. Uber integration with messenger
![Uber integration with messenger](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_44-640x480.gif?resize=640%2C480&ssl=1)
by Awesomed
48. Chat app demo screens 3 (WIP)
![Chat app demo screens 3 (WIP)](https://i0.wp.com/goworkship.com/magazine/wp-content/uploads/2017/09/chat_47-640x480.png?resize=640%2C480&ssl=1)
by Prakhar Neel Sharma
デザイナーのあなたも思わず使ってみたくなるようなインターフェイスは見つかったでしょうか。ビジネス向けなのか、プライベート向けなのかによって、必要な機能はもちろん、色づかいやモチーフの扱いも変わります。良いチャットインターフェイスが完成したら編集部にも見せてくださいね。
(翻訳:Akiko Ogita)