![見出し画像](https://assets.st-note.com/production/uploads/images/97865507/rectangle_large_type_2_3a4cf13162f9aac39839e578d3549767.png?width=1200)
DailyUI #013 Direct Messaging
以下のテーマで作りました!
🌈テーマ設定
・SNSのDM
参考デザイン
![](https://assets.st-note.com/img/1676197814646-IDAV7N2Yx7.png?width=1200)
✏️取り入れたいと思ったところ
・自分と他人の吹き出しの色を分けてわかりやすくする
・Facebookのメッセンジャーのように、👍などのリアクションができると便利そう
できたもの
完成したものがこちらです。
既読・未読・スタンプのリアクションがある時とない時などの状態変化をわかりやすくしてみました。
💬先輩のフィードバック
・下部に設置しているアイコンのサイズが小さく感じる。タップの範囲は40pxくらいを確保した方がいい
・↑のような違和感を見つけるためには、必ず実機で確認すべし!
まとめ
うう、確かに…実機で見てみると、アイコンのタップ範囲が狭いことに気付きました。
Figmaのデザインデータと実機とでは見え方の印象が違うものなので、ちゃんと実機でチェックするようにしたいです。
ちなみに、Facebookのメッセンジャーのアイコンを調べてみたところ、以下で赤く記した範囲はちょうど40pxになっていました。
![](https://assets.st-note.com/img/1676198499684-H6Xeh3QwTc.png)
タップ範囲が狭すぎないように気をつけていきたいと思います!
この記事が気に入ったらサポートをしてみませんか?