Daily UI #019 / 020 / 021 / 022
- コミュニティアプリ
- 家計簿アプリ
- 旅行
制作範囲
- デザイン
- 企画
制作ツール
- Figma
制作期間
- 4時間 ~ 5時間
Daily UI #019「Leaderboard」ユーザースコア

デザイン概要
コスプレ特化型アプリ「CosComi」のユーザーランキングのUIデザインを作成しました。
タブ形式で「ユーザー」「クリエイト」「記事」に関連するランキングを切り替えられる形式になっています。
ユーザーランキングでは「投稿のいいね数」「ブックマーク数」による評価はもちろんですが、CosComiではスキルマーケットによる取引による「信頼貯金」も含めた総合評価でランキングを決める形式になっています。
Daily UI #020「Location Tracker」地図の経路



デザイン概要
地図アプリの経路に関するUIデザインを作成しました。
ただのMapアプリとして作成するとGoogleMapと変わらずトレースになってしまうため、旅行アプリのマップを想定しました。
「Tripadvisor」「NAVITIME Travel」をベースにデザインを作成し、タブボタンによる切り替えで周辺の目的地をすぐに切り替えられようになっています。

地図経路
ルート表示はGoogleMapを参考にし、観光地情報に「徒歩」や「公共交通」による移動手段ボタンを載せることで、ユーザーの現在地からすぐにアクセス方法を表示することができる仕様を想定しています。

Daily UI #021「Home Monitoring Dashboard」ホームモニタリングダッシュボード

デザイン概要
制作内容の勘違いにより今回は家計簿アプリによる家計簿アプリの光熱費計算のUIデザインを作成してしまいました。
「Home Monitoring Dashboard」というアプリを使った電気や部屋の気温などを知ることができるUIとは違うのですが、
りそな銀行の口座アプリのデザインを参考に、今月の光熱費代と過去の内容から分析して節約のアイデアを得ることができる仕様になっています。
Home Monitoring Dashboard プロトタイプはこちら



Daily UI #022「Search」検索

デザイン概要
#019に引き続きCosComiの検索画面のUIデザインを作成しました。
過去の検索履歴はもちろんですが、SNSなどでは検索画面にトレンドやおすすめの情報が事前に掲載されているパターンもあるのでそちらを採用しました。
検索結果
「投稿」「ブログ(記事)」「ユーザー」のカテゴリごとに検索結果画面を作成しました。
画像投稿がベースなので、インスタグラムを参考にサイズに合わせたタイル型の検索結果表示を「投稿」で使用しています。
ブログは画像、タイトル、投稿者の内容でカード型を採用しました。


