Daily UI #013「Direct Message」ダイレクトメッセージ

制作の流れ

ダイレクトメッセージ画面の調査

Xやインスタのダイレクトメッセージ画面を参考にしました。

※注. プライベートもあるのでメッセージは一部省いています！

メッセージの送信をはじめ、メディアの共有や最近では音声通話ができる仕様が増えている印象があります。

特徴としてメッセージ項目をクリックすると入力専用のフォームが表示される仕様になっているのですが、他のオプションと分割することでユーザーが入力に集中できるという意図があると考察しています。

今回は以前から製作しているCosComiなのでペルソナは特に設定せず、アプリの仕様書を元に構成を考えました。

UIデザインを作成

ユーザー一覧

CosComiでは、製作案件の受注ができるスキルマーケット機能を想定しているので、スキルマーケットに関連するダイレクトメッセージを優先度でトップに、続いて参加グループとユーザーの順でメッセージを表示するようにしています。

「グループを作成」では友達同士のコミュニティや撮影併せのメンバーなど自由に作成できます。

メッセージ画面

最近はダイレクトメッセージで通話や画面通話もできるようになってきているので、合わせて実装しています。

メッセージのやり取りではLINEとエックスを組み合わせたデザインにしました。

LINEを使用しているユーザーが圧倒的に多く見慣れている仕様で実装することもUIデザインを作成する上であながち大切なのではないかと思います。

入力フォームのUI

メッセージの入力をクリックすることで他のオプションと分割させ専用の入力フォームを表示させるようにしました。

まとめ

#013「Direct Message」UIデザインのまとめです。

• 他のオプションやコンテンツとの関連性を切り離して専用の入力領域でコンテキストを分離
• メッセージの表示優先度をコンテンツ次第で考える

DailyUIをしていると見た目が同じになってしまいがちということがありますが、ユーザーが使い慣れていて見慣れているということもUIデザインを作る上で大切かもしれません。

最後までご覧いただきありがとうございました！