TOP

Daily UI #011 / 012 / 013

アプリデザイン
  • コミュニティアプリ
  • 家具家電

制作範囲

  • デザイン
  • 企画

制作ツール

  • Figma

制作期間

  • 4時間 ~ 5時間

Daily UI #011「Flash Message」フラッシュメッセージ

画像のアップロード成功
画像のアップロード失敗

デザイン概要

フラッシュメッセージ「成功またはエラー」に関連するデザインを作成しました。

エラーが発生する具体的な理由があった方がデザインも考えやすかったため、今回は画像アップロードを想定したフラッシュメッセージを設定しました。

画像ファイルは複数で上げるパターンもあるので「どの画像でどこに問題があるのか」を具体的に赤文字のエラーメッセージとして表示することで、ユーザーの対応方法を明確化する意図があります。

Daily UI #012「E-commerce Shop」ECアプリ

家具のECサイトの商品一覧_パソコン版
商品一覧
家具のECサイト購入画面_パソコン版
商品詳細
家具のECサイトの商品一覧_スマホ版
商品一覧(スマホ版)
家具のECサイト購入画面_スマホ版
商品詳細(スマホ版)

デザイン概要

家具販売のECサイトを「IKEA」や「ニトリ」を参考にデザインを作成しました。

ペルソナ設定の際に「お得な商品がわかりやすいと助かる」というChatGPT先生からのご要望で商品画像の上にアイコン付きのラベルを表示させています。

また商品の特徴を緑枠のタグ形式で表示することによりユーザーが家具の購入で求める機能を視覚化しサイト回遊の絞り込みを行うことができると考えました。

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

ダイレクトメッセージ送信者一覧
メッセージユーザー一覧
メッセージ画面

デザイン概要

現在製作中のコスプレ特化型アプリ「CosComi」のダイレクトメッセージのデザインを作成しました。

TwitterとLINEをベースに作成したので、とてもシンプルなデザインになりました。コミュニティアプリらしくもう少し遊び心のあるデザインでも良いのかも?と考えましたが、現時点ではメッセージや画像の送信などの基本的な操作環境で完結させています。

メッセージのユーザー一覧ではメッセージ内容をカテゴリ分けし、メッセージの優先度と重要性が高いスキルマーケットのDMをトップに表示するようにしています。
(スキルマーケットはこのアプリで想定している製作受注取引です)