〜ほぼ Daily UI vol.13〜 Direct Messaging

Design a Direct Messaging app, profile, or chatbox. Consider the parties involved in the messages, images, placement, and context of the messages. Are the messages for social purposes? Customer support?

参考にしたサイト・アプリ

メッセージングアプリなだけあって、実データをマスキングするのがめんどくさかったのでスクショは載せないで行く。

参考にしたのは下記のあたり
- Facebook Messanger
- LINE
- Twitter の DM
- Slack
- dribbble(https://dribbble.com/tags/daily_ui_013)

デザインを考える上でのポイント

入力欄のアクションを絞る
結構メッセージを入力できる以外にも次のようなアクションを送れるケースがある。

- 画像を送る
- gif を選んで送る
- その場で撮影する
- 通話をかける
- ビデオチャットを始める
- いいね
- リアクションを送る

連続したメッセージのスタイリング
続けて複数送った場合はアイコンを何個も表示しない、というは基本だがFacebook Messanger は次のような感じで最初と最後の border-radius を変えていて、まとまりとして見やすくしていた。

自分のデザイン

あつもりのキャラと会話できるメッセージングアプリという体で考えてみた。

思ったこと

- 緑、文字の背景色に不向きなのかもと思い始めた
    - 色相によってそういうのあるのかな。メッセージングアプリとかも大体青系の色か、白背景に黒テキストにしてた
- Webのトレースはまだなんとかなるけど、アプリだとCSS見れんからしづらい、なんかいい方法ないかな