【DailyUI 011】Flash Message
DailyUIチャレンジでの個人ルール
ツールはFigmaを使う。
ミニマルデザインを意識して作成する。
制限時間を設ける。お題によるが、大体1~2時間を目安にする。
未完成でも70%の出来でもnoteに記事を書いて、やったことを残す。
ただ作っただけにはしない。作成過程で１つは学んだことを残せるようにする。
残業・体調不良などで時間がなければ休んでも良い。
デザインする際に考えたこと、気をつけた点など
表示する項目
アイコン（成功／失敗）
タイトル（成功／失敗）
メッセージ
閉じるボタン（OK／戻る、など）
表示項目を洗い出す際に考えたこと
架空の動画共有アプリのアップロード時に表示されるメッセージを想定する。
成功、失敗が一眼でわかるようにカラーを合わせる。成功は緑系、失敗は赤系。
アイコンは大きめに設定する。
右上に閉じるボタンは設置しない。必ず、メッセージ確認後に最下部のボタンで閉じてもらうように誘導する。
デザインを作成する際に調べたこと
参考
dribbble.com > 「flash message」で検索
作成したデザイン
学んだこと・反省点など
dribbble.comの検索結果を見た感想
成功・失敗でサービスのイメージカラーで合わせているデザインを見かけたが、メッセージを見ないと成功か失敗か分からなかったので、親切ではないと感じた。
アイコン代わりにイメージで成功か失敗か分けられているパターンが多かったが、キャラクターの表情差分などで分けられているパターンは正直イメージだけでは判断できなかった。
メッセージまで読んで理解できたので、イメージを明確にするか、色をもっと分かりやすく設定するべきと思う。
よく見るチェックマーク（成功）／バツマーク（失敗）ではなく、人の画像で笑顔（成功）／しょんぼり（失敗）で作られているメッセージがあって面白かった。利用しているサイトで見かけたことはあまりない気がする。
背景色が成功は緑系、失敗は赤系になっていたので、表情と合わせてすぐに理解できた。
トップにアイコンが表示されていて、そのアイコンが大きいほどパッと見ただけで理解できた。
大きいアイコンで、モーダルの縦半分くらいの大きさが設定されていた。平均モーダルの縦1/3くらい。
メッセージ系はよく見ずに閉じてしまうユーザーもいるので、パッと見てエラーだと分かるデザインを採用したいと思う。
おわりに
今回はサッとできてしまったので、dribbble.com内のデザインをよく確認して感想かく形にしました。
ある程度共通項目はあるものの、それぞれ凝っていて面白かったです。
ここまでお付き合いありがとうございました。
スキやコメントでフィードバックいただけるととても嬉しいです！お時間あれば、よろしくお願いします！！
この記事が気に入ったらサポートをしてみませんか？