Daily Cocoda ! #001 - #010

#001　プロフィール画面

（作成日：2/27）

【誰向けか】

20代前半女性

・SNSにオシャレ写真をUPして、自分の世界観を見てもらいたい。
・だけど日常の写真だと映えない。いちいち加工をするのも面倒くさい。

【コンセプト】

特別感がない写真でも映えるように、「色味」で写真をまとめるアルバム機能があるSNS

【雰囲気】

POP、可愛い  

【こだわった点】

・女の子らしさを出すために曲線や丸文字を多く使った。
・写真SNSなので、余白をたっぷりとってごちゃごちゃしないようにした。
・ツールバーのアイコンは4つにし、指を伸ばさなくてもボタンが押せるようにした。
・プロフィール欄は「自分のコンテンツ」と「自分のお気に入りのコンテンツ」が見れる自己満ページだと思うので、イイねした写真＆アルバムを見れるようにした。(ハートのアイコン)
・イイね数やコメント数より「世界観」を見てほしいので、最初に表示させないようにした。投稿を詳細表示すると見れるようになる。
【参考】

Instagram、Pinterest、Twitter

#002　新規登録画面

（作成日：2/28）

【誰向けか】

オシャレ好きな男子大学生

・自分好みのジャンルが明確な男子大学生
・好きなアーティストというより「音楽」自体を重視して選曲する。
そのため色々なアーティストに手を出したいと思っている。

【コンセプト】

感性にビビっとくる音楽が見つけられる音楽アプリ

【雰囲気】

カジュアル、オシャレ

【こだわった点】

・大学生なので、メールアドレス登録よりもSNSで登録するほうがメインだと考えた。
普通はFacebookかTwitterだが、LINEやGoogleの方が利用人数は多いのではないかと感じたため、上記のような優先順位で配置。インスタ連携もできる仮定で、追加してみた。
・新規登録＞ログインと優先順位をつけ、配置を決定。
・片手で持ってちょうど親指が来る位置に新規登録ボタンを配置。

【参考】

spotify

#003　メッセージ画面

（作成日：3/1）

【誰向けか】

20代半ばのビジネスマン

・ITベンチャーのマーケティング部署の社員
・チームで仕事を行っている
・やり取りしたい相手が離席していたり話しかけてもいい状態か知っておきたい

【コンセプト】

ビジネスシーンでも使えるチャットアプリ

【雰囲気】

きっちり、使いやすい

【こだわった点】

・ビジネスシーンで使用するとのことだったので、スマホではなくPCのデザインにしたところ
・ホバーしたときに出てくるアクションバーを、slackでは上部に置いていたところを下部に設置したところ。チャットを見るときは下にスクロールするので、スムーズにアクションバーに辿りつけるようにした
・slackの良い箇所(1つ1つのメッセージにリアクションができるところ、スレッド内で返信できるところ)とchatworkの良い箇所(タスク機能が使えるところ、1つ1つのメッセージのリンクを発行できるところ)を取り入れてみたところ

【参考】

slack、chatwork

#004　料理アプリの検索画面

（作成日：3/2）

【誰向けか】

食べ盛りな子供を持つ夫婦

・共働き夫婦。仕事で疲れて帰ってくるため、手間がかからない料理を作りたい。
・レシピを考えるのも面倒なので、冷蔵庫にある食材で何ができるか教えてほしい。
・食べ盛りな子どもたちには、栄養あるご飯を作ってあげたい。

【コンセプト】

冷蔵庫にある食材で手軽にできる料理アプリ

【雰囲気】

あたたかい 、やさしい

【こだわった点】

レキピオが思い描いていた通りのサービスだったためほとんど参考にしたが、以下の場所をオリジナルで変更してみた。

・画面遷移する際に、ボタンの位置を変えないように意識した。片手で持ってちょうど親指が来る位置に配置。
・「調理時間」、「電子レンジで調理可能」「盛り付けだけで完成」という選択肢を追加。
・あえてフリーワードの検索バーをいれていない。タップのみで利用できることで使いやすいUIにした。

【参考】

レキピオ、クラシル

#005　天気アプリのアイコン

（作成日：3/3）

【誰向けか】

高校生

・天気を知りたいというよりも「今日雨が降るか・傘が必要か」が知りたい

【コンセプト】

毎日確認したくなるような天気予報アプリ

【雰囲気】

ポップ、たのしい

【こだわった点】

・のっぺりと見えないようにグラデーションをつけた。
・既存の天気アプリは太陽＆雲のアイコンのものが多かったが、あえて「雨」のアイコンのみにした。
また、傘を使用している人(?)のイラストを入れることによって利用目的を明確にした。

 【参考】

iPhoneの天気アプリアイコン

#006　音楽アプリの再生画面

（作成日：3/4）

【誰向けか】

音楽好きな働き盛りの20代後半の女性

・毎朝満員電車で通勤している
・ライブなどに定期的に行くくらい好きなアーティストがいる
・バックグラウンド再生で音楽を聴きながらSNSを開いている時間が多い
・たまーに今聴いているアーティストのミュージックビデオを見たくなるときがある

【コンセプト】

ミュージックビデオをバックグラウンド再生できるアプリ

【雰囲気】

おしゃれ、落ち着いた

【こだわった点】

ほぼYouTube Musicのようになってしまったが、違いをつけた点として以下がある。

・動画画面＆動画の横幅にマージンをつけた。視線を真ん中に寄せることができるので、より見やすくなるのではないかと考えた。
・再生時間のバーにも、左右にマージンをつけた。親指を本体の端から端へと動かす作業が、手の小さい女性だと難しいため。
・15秒再生ボタン、15秒巻き戻しボタンを付けた。ちょっと戻りたいときに便利だな～と感じていたので。
・インスタのように画面をダブルタップすることで、お気に入りフォルダに追加できる。
・音量バーは意図的につけていない。iPhone本体やイヤホンでできるので。

【参考】

YouTube Music、AWA、Amazon music、niconico、Instagram

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

（作成日：3/5）

【誰向けか】

都内に住む会社員

・都心部に独り暮らしをしている20代前半女性
・何にも予定が入っていないときは、1日パジャマでダラダラしている。料理をわざわざ作る気力はない、けれど外に買いに行くのも身なりを整えないといけないから面倒くさい…と思っている

【コンセプト】

食べたい料理でお店が選べるフードデリバリーアプリ

【雰囲気】

明るい、おいしそう

【こだわった点】

・こだわり検索で選択した情報を上部で固定し、何を選択したのかいつ見てもわかるようにした。
・食べたい料理は決まっているので、一つ一つ見ていくよりもサッと一覧を見れるようにした方が速くアクションに移せるのではと考えた。なので、2カラムのデザインにしている。
・同様の理由で、スクロールバーを押しながら動かせるものにした。

【参考】

Uber Eats

#008　計算機アプリの計算画面

（作成日：3/6）

【誰向けか】

30代主婦

・かしこく家計をやりくりしたい

【コンセプト】

「カートに入れた商品の値段を計算するときに役立つ」計算機アプリ

【雰囲気】

やさしい、あたたかい 

【こだわった点】

・「00」ボタンが意外と便利なのにあまり使用されているアプリがなかったため、追加してみた。
・「C」「＝」は使用頻度が高いボタンなので、サイズを大きくした。
・計算の記録の部分が「上スクロールできますよ」ということがわかるように、一番上のボタンの背景色をグラデーションにしてみた。
・毎日使用してもらえるよう、シンプルでわかりやすいデザインを心がけた。

【参考】

iPhoneの電卓アプリ、Money Forward

#009　天気アプリの情報画面

（作成日：3/7）

【誰向けか】

20代半ばのビジネスマン

・営業職
・天気痛、片頭痛持ち
・花粉アレルギーで、春にかけて辛くなる

【コンセプト】

パッと見て欲しい情報が手に入る、テレビのお天気ニュースより便利なアプリ

【雰囲気】

シンプル、さわやか 

【こだわった点】

・画面上部を目いっぱい使って「わかりやすく」を意識した。
・文字をできるだけ使用せず、視認性の高いデザインを心がけた
・指標コンテンツのアイコンの並びを均等にした結果画面に動きがなくなってしまったので、丸いオブジェクトを追加してみた。

【参考】

iPhoneの天気アプリ、気象ライブ -地域の天気予報

#010　地図アプリの行き先検索画面

（作成日：3/8）

【誰向けか】

スマホを買ってもらった中学生

・部活動に入っている女子中学生
・スマホをいじるのは平日の夜と休日のみ
・友達とプリクラを撮ったり、カラオケや映画館に行くのが好き
・お小遣いはやや少なめなので、マックやサイゼリアなどを愛用している

【コンセプト】

自分のお気に入りスポットを登録しておける地図アプリ

【雰囲気】

わかりやすい、手軽

【こだわった点】

・中学校はスマホ禁止のところがほとんどなので、地図アプリを使用するのは平日の家に帰ったときと休日の遊ぶときなのかな？と考えた。
・家や塾などしょっちゅう行く場所はアプリがなくても行けるため、休日のお出かけのときに使用する地図アプリという体で作成した。
中学生が使用するとのことで、無駄な機能や情報を削りシンプルにした。

【参考】

iPhoneの地図アプリ