dailycocoda!30~
cocoda!(https://cocoda-design.com)という学習サービスのdailycocoda!というお題で作成したUIデザインです。30~40までのお題をまとめてます。（現在作成中）
検索結果画面
コンセプト
フリマアプリ
雰囲気
優しい・カジュアル
制作時間
1時間半
参考アプリ
メルカリ amazon
デザインについて
検索検索した後、商品が見つからなかった場合、検索条件を変更する提案ボタン、
その下にamazonのように商品の提案機能を付けました。
基本的に検索機能の型は大体同じだと思っていたのですが、
検索パターンにはいくつか種類があり、ターゲットユーザの行動、特徴に合わせて一番使いやすくなるよう考慮したUIや情報設計がなされていることを学びました。
※画像はamazonからお借りしました。
グッズ作成画面
コンセプト
自分のオリジナルなグッズが作れるアプリ
ターゲット
クリエィテブ（なグッズが）好きな20代女性
制作時間
1日
制作ソフト
figma
参考アプリ
SUZURI
デザインについて
今回UIフローを作成し、画面移行など考えて作成してみました。
インジケーター表示で自分がどの制作ステップにいるか可視化してみました。
グッズの編集画面は、わざわざ画面が新しくなるのは画面のページが増えてしまうため、モーダル画面にしてみました。
グッズの編集画面
SUZURIのように自分の画像を投稿してすぐ商品に反映され、編集を後でする情報設計は自分の商品のイメージがすぐ確認できる点が良いと思ったので、グッズが反映された画像を使用しました。
グッズ確認画面
メッセージ削除UI
以前作成したメッセージアプリを利用して削除画面を作成するといった内容でした。
LINEやtwitterのメッセージなどのメッセージ（チャット）機能がついているアプリを参考に削除機能をどのように取り入れているのか調べて、作成しました。スワイプで削除する方法はメッセージやメール、todoアプリのリストなどでよく利用されてました。
メッセージ一覧の削除機能
トーク画面の削除機能
プレビュー画面時の削除画面
ダッシュボード画面
ターゲット
都内会社員
目的
運動のログをためる
デザイン
スポーティ、洗練
feeputにて、フィードバックを頂きました。
●修正箇所
- 画面に情報が収まっていなかったので、習慣的に使ってもらえるために、画面に情報が収まるように修正。
- アクティビティの表記がボタンに見えてユーザーに混乱を与えるということで、修正。
- １週間の表記と実際のグラフの情報の誤差の修正。
- アイコンデザインの統一。
- 言語表記の統一。
- グラフの色の修正。
- 使用頻度の高くなる通知アイコンを右側へ配置。
イベントサイト（ライブチケットの詳細画面）
コンセプト
音楽イベントの予約サイト
ターゲット
音楽好きな男性・女性
デザイン
シンプルで馴染みやすい
韓国のチケットサイトとか、ローソンチケットのサイトを参考にしました！
欲しいものリスト画面
コンセプト
オンライン学習サービス
ターゲット
プログラミング言語を学ぶ社会人男性
デザイン
Udemyを参考にしました。
ログインエラー画面
コンセプト
音楽アプリ
パスワードの入力ミスなどでエラーがでた画面
ターゲット
おしゃれ好きな大学生
デザイン
カジュアルおしゃれなデザインにするとのことだったので、イラストを入れておしゃれな雰囲気を出してみました。イラストはこちらのフリー素材を使用しました。
ログイン画面はasanaというアプリを、エラーのUIはBussuという英語学習アプリを参考にしました。
参考記事
色々なサービスのエラー文言について書かれた記事
https://blog.mah-lab.com/2014/01/27/sign-in-error-messages/
エラー設計についての記事（英語）
https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps/
非アクティブボタンのカラー
お絵かきアプリの画面
コンセプト
お絵かきアプリ
ターゲット
子育てが忙しいママ＆３〜５才の子ども
デザイン
子どものUXデザインについて記事や本を参考に作成しました。子どものデザインは対象年齢により大きく変化するということで、３〜５才の子どもをターゲットにしました。
現実のものと同じになるように鉛筆などはアイコンなど抽象的なものは使用せず、リアル感を出すように作成し、ボタンなども小さい手で押しやすいように大きくしてみました。また、極力情報量を多くしすぎないよう必要最低限「色」「書くもの」「ペン先の大きさ」「戻るボタン」にしました。
保存は、「戻るボタン」を押すと自動的に保存されるという設定にしてます。
参考文献
子どもアプリのUX
https://boel.jp/tips/vol49_children_ux.html
子どものアプリで気をつけていること
https://note.com/higo/n/nee6a34af3474
https://app.litalico.com/jp.html
子どもと大人のデザインの違いの比較が記載されている記事
https://u-site.jp/alertbox/20100913_childrens-websites
「子どものUXデザイン ―遊びと学びのデジタルエクスペリエンス」、デブラ・レヴィン・ゲルマン (著), 依田光江 (翻訳)、 ビー・エヌ・エヌ新社