DailyCocoda! #031~#040

Dailycocoda! とは

株式会社almaが運営する、UIデザイン学習サービスCocoda!の課題の一つです。
毎日決められた画面・ターゲットユーザ・コンセプト・雰囲気が提示され、そのお題に合わせてUIデザインを行います。

作品

#031　検索結果画面

設定

誰向け：検索結果が見つからない時の画面
コンセプト：ほしいものが見つかるフリマアプリ
雰囲気：やさしい、カジュアル

ポイント

検索が見つからなかった時に、検索で見つかりやすくなるポイントを記載しました。
大体のUIはフリマアプリを参考に作成しました。

#032　漫画アプリの本棚画面

設定

誰向け：マンガ好きな20代前半の男性
コンセプト：豊富なラインナップを無料で楽しめる漫画アプリ
雰囲気：にぎやか、ユーモラス

ポイント

表示方法・並び替え・ジャンル選択を一列で表示し、なるべく表紙を大きく見せるようにしました。
表示が並ぶとカラフルになるので、ベースカラーは白ですが、ヘッダーにカラフルな模様を入れて楽しい感じを出しました。

#033　グッズ作成画面

設定

誰向け：クリエイティブ好きな20代女性
コンセプト：自分だけのオリジナルグッズを作れるサービス
雰囲気：ポップでつくっているのが楽しくなる雰囲気

ポイント

簡単に作れるというイメージを出すために、爽やかでシンプルなデザインにしました。
ヘッダーでアイテムを変更し、フッターでデザインを行います。
ペイントやスタンプ、テキストを選択した場合は、フッターの上に詳細パネルが表示されます。

#034　メッセージ削除画面

設定

誰向け：day3のメッセージ画面の削除画面をつくってみよう
コンセプト：20代半ばのビジネスマン
雰囲気：ビジネスシーンでも使えるチャットアプリ

ポイント

メッセージを長押しすると、コピー、共有、削除を選択できるようになります。
メッセージは自分側の端末だけ消すことができます。

#035　ダッシュボード画面

設定

誰向け：都内に住む20代の会社員
コンセプト：運動のログを貯められるアプリ
雰囲気：スポーティで洗練された雰囲気

ポイント

自分の記録したい項目、目標を設定してダッシュボードに表示できる仕様です。
スポーツの記録だけではなく、体重、カロリー、水を飲む量など記録も好きにカスタマイズできます。

#036　イベントサイト詳細画面

設定

誰向け：音楽好きな20代男性
コンセプト：音楽イベントの予約サイト
雰囲気：シンプルで馴染みやすい

ポイント

１つのイベントの詳細画面をデザインしました。
主要情報（日時・場所・定員・金額など）のフォントサイズや幅の取り方に悩みました。
日時などの文字や、場所のリンクにアイコンを使用するか考えましたが、アイコンばかりになってしまうのでお気に入りとカレンダー以外は文字情報にしています。

#037　ほしいものリスト

設定

誰向け：転職を考えている新卒3年目の会社員
コンセプト：デザインやプログラミングのコンテンツが買えるサービス
雰囲気：整っているが敷居が高すぎない雰囲気

ポイント

丸みのあるデザインやパステルカラーを使用し、優しく親しみが持てるデザインにしました。
Wishlistはピンク色ですが、探す、学習、設定は別のパステルカラーになります。（探すは黄緑、学習は青など）

#038　ログイン画面

設定

画面情報：パスワードミスなどで、エラーが出た際のログイン画面
誰向け：オシャレ好きな男子大学生
コンセプト：好みの音楽がレコメンドされる音楽アプリ
雰囲気：カジュアル、オシャレ

ポイント

今回コンセプトや内容が#002と同じものだったので、#002のデザインを修正し、同じでテイストで作成しました。
背景が暗く・濃い場合は赤文字との相性が悪く注意を促す文言の色選びに時間がかかりました。
他のデザインをたくさん見て参考にしたいと思います。

#039　お絵かき画面

設定

誰向け：子育てが忙しいママさん
コンセプト：子供に渡して遊ばせられるお絵描きアプリ
雰囲気：子供らしい、マイルドな

ポイント

子ども向けのスマホでできる簡単なお絵かきアプリです。
機能は、ペン、消しゴム、スタンプ（サッカーボールマーク）、スクリーンショット、完成（保存）、UIの左右変更です。
ペン、消しゴム、スタンプは、選択すると上にサブメニュー（カラー選択や太さ選択）が表示されます。
顔をタッチすると引っ込みます。
背景の模様はスタート時に選択します。

#040　日程調整画面

設定

誰向け：幹事を任されがちな会社員
雰囲気：退屈な日程調整を楽しんでできる

ポイント

参考アプリの3つを触ってみて、必要な機能をまとめ、スマホで使用しても煩わしくない使用感になるように設計しました。

日程と時間の両方を設定しようとすると場所を取ってしまうのですが、Lineスケジュールを使用している時に、時間の設定は必要だと感じていたので、調整くんの機能を参考にスマホのUIに落とし込みました。