Daily cocoda #001~007

OVERVIEW

cocodaはデザイナーを目指す人向けのサービスです。cocodaのdaily UIというお題に沿って、UI/UX作成を行いました。


写真投稿SNSープロフィール画面ー

[お題]

(ターゲット)20代女性

(コンセプト)日常の写真をお洒落にupできるsnsアプリ

(雰囲気)popで可愛い



[考えたこと、工夫したところ]

ターゲットは、20代女性ということで、「インスタ映え」を狙いたい女子大生、つまり自分に近い人物をペルソナとして想定し作成しました。

instagramやpinterestといったSNSでは、プロフィール上に自分の好みの写真や日常の写真を並べて、統一感を出し、自分だけの世界観を表すことができます。
しかし、その統一感を出すのは意外と難しいです。
今回は、日常の写真をお洒落にアップできるという提示されたコンセプトのを、「自分のアップした日常写真に、統一感を持たせて表示できる」というように噛み砕いて、プロフィール画面を作成しました。

統一感を出すために工夫したのは、
・どんなサイズの写真でも、その写真が持つ構図や余白が崩れないように、サイズは変更されずに表示されること
・写真の角を角丸で揃え、写真の周りの余白も十分に取り、すっきり見せること
・縦は見切れてもいいので、できるだけ写真を大きく表示されるように配置すること
(→見切れていることでスクロールしてもっと写真が見たくなるようなUIを目指すという意味も込めて。)

この3点です。
これによって、写真の雰囲気を崩すことなく、snsのプロフィール上にすっきりとした統一感を持たせ日常の写真をアップできる画面を作成しました。




音楽アプリー新規登録画面ー

[お題]

(ターゲット)おしゃれな男子大学生

(コンセプト)カジュアルでお洒落な好みの音楽がレコメンドされる音楽アプリ

(雰囲気)カジュアル、お洒落


[考えたこと、工夫したところ]

新規登録画面は、めんどくさかったり、エラーが起きたりしてしまえばユーザーがすぐ離れてしまうため、非常に重要な画面だと思います。ですから、アプリの雰囲気は表現しつつ、できるだけ慣習にそったデザインで、わかりやすさを重視しました。

アカウント作成ボタンを押したあとは、メールアドレスとパスワードを設定する、または、facebookで登録する画面です。

メールアドレス記入欄は、ダミーのテキストを入れることで、メールアドレスだと認識しやすくしたり、パスワードの条件は初めから記述しておいたりなど、自分が普段登録する際に便利だとおもうものを入れてみました。
また、「アカウントを作成する」ボタンは適切なメールアドレスとパスワードが入力されるまで色がグレーになっているようにデザインしました。






チャットアプリーメッセージ画面ー

[お題]

(ターゲット)20代半ばのビジネスマン

(コンセプト)ビジネスでも使えるチャットアプリ

(雰囲気)シンプル、シック


[考えたこと、工夫したところ]

インターンで実際に使っていたのは、slackなど。それ以外はlineやmessengerやスナップチャットなど様々なチャットアプリがあります。このアプリの昨日は、それらの代表的なアプリの機能を分析し、実際にビジネスシーンで役立ちそうな部分を想定しながらデザインしました。


1、画像やデータの添付

会議のためのpdfの資料や画像といったデータがすぐに添付でき、またそれらが会話の中で流れてしまっても、遡ってすぐ見つかるよう、メッセージよりウェイトを大きくとって、自然に目立たせました。


2、トークルーム内の検索機能

大事な話や、○月○日の会話、過去に送信されたデータや資料がすぐに見つかるように、トークルーム内に検索機能をつけました。


3、トークルーム内に誰がいるかすぐにわかる。

画面のトップに、全メンバーのアイコンを表示したり、吹き出しの上に話者の名前を表示することで、このトークルームに誰がいるか、誰が話しているかが一目瞭然です。


4、入力中表示、どこからが未読かがわかる。

誰かが入力中であったり、自分がどこまで読んでいるかがわかるので、同時に発言してしまったり、大事なメッセージを見逃してしまったりすることを防ぎます。





お料理アプリー検索画面ー

[お題]

(ターゲット)食べ盛りな子供を持つ夫婦

(コンセプト)冷蔵庫にある食材で手軽にできる料理アプリ

(雰囲気)あたたかい、やさしい


[考えたこと、工夫したところ]

お料理アプリの検索画面と、保存したお気に入りのレシピを見れる画面をデザインしました。
このアプリは、自分の作った料理の写真とそのレシピを投稿できるアプリで、他の人が作ったレシピを保存したり、自分でファイル別に分けたりすることができます。

冷蔵庫にある食材で手軽にできる料理アプリということだったので、検索ページは「#にんじん #豆腐」など食材単位で簡単に検索できるよう考えました。

検索画面は、「人気レシピ」「簡単レシピ」「旬の食材を使ったレシピ」「ダイエットレシピ」などがタブで分かれており、美味しそうな料理のビジュアルが画面いっぱいに表示されます。
お気に入り保存の画面では、作りたい日や気分によって名前をつけたフォルダに、今まで作ったレシピや今度作ってみたいレシピが保存できます。




お天気アプリーアプリアイコンー

[お題]

(ターゲット)高校生

(コンセプト)毎日見たくなるようなお天気アプリ

(雰囲気)ポップ、たのしい


[考えたこと、工夫したところ]

instagram tiktok snow picsart B612 SODAなど
とにかくジャンルは問わず、高校生に人気でアイコンがユニークであったり、可愛らしかったりするアプリを参考にデザインしました。

これらに特徴的だったのが、爽やかな色味や丸みを帯びたシルエットなどなどです。一方で、どのアプリアイコンもオリジナリティがあルものが支持されている印象を受けました。

私のデザインでは、爽やかな色味やグラデーション、丸みを帯びたシルエットを意識しつつ、雲が溶け出すポップなアイコンをデザインしました。



音楽アプリー音楽再生画面ー

[お題]

(ターゲット)音楽好きな働き盛りの20代後半の女性

(コンセプト)ジャケットで選べる音楽アプリ

(雰囲気)おしゃれ、落ち着いた


[考えたこと、工夫したところ]

お題のターゲットやコンセプト、雰囲気から、リラックスした音楽の好きな知り合いのお姉さんをペルソナとしてデザインしました。ジャケットを目立たせるようにデザインし、音楽の進み具合は、その曲の波形でデザインされています。また、操作する際の気持ちよさも重視したかったので、色味や透明感、ドラッグアップして上がってくるリリックスなども工夫した点です。



フードデリバリーアプリーリスト画面ー

[お題]

(ターゲット)都内に住む会社員

(コンセプト)食べたいものがすぐに見つかるフードデリバリーアプリ

(雰囲気)明るい、おいしそう


[考えたこと、工夫したところ]

制作したのがちょうどコロナの時期ということもあって、フードデリバリーアプリの需要がとても高まっていたときに作成しました。

ランチ時の「ラーメン食べたい・・・。」という思いや、
15時ごろの「この作業のお供にタピオカ飲みたいな・・・。」という思い、
夜のzoom飲み会で「つまみがほしい・・・」という思いなどなど
何かが食べたい時は、その時間によって、食べたい量や、食べたいもののジャンルなどがあると思います。
このアプリでは、そんな時に食べたいものがすぐ見つかるように、food snacks desserts drinksのアイコンでお腹の空き具合、そして食べ物のジャンルに合わせた画像のアイコンで食べ物の種類が選べます。