DailyCocoda! #001~#010
DailyCocoda!とは
デザイン学習サービスCocoda!（https://cocoda-design.com） のお題シリーズです。
毎日お題、ターゲット、コンセプト、雰囲気が提示され、そのお題に合わせてデザインの練習を行います。
#001 プロフィール画面
ーペルソナー
20代前半の「乙女と大人のあいだ」にいる女性たち
ーコンセプトー
女子の「好き」を集めるSNSをテーマにして作りました。
ーデザインー
シンプルさと余白を重視し、写真のレイアウトは2x2で好きなものを大きく表示する。
フォローやフォロワー数をあえて載せないことにより、「好き」なことに夢中になれる。
#002 新規登録画面
ーペルソナー
シンプルでおしゃれが好きな大学生男子。少し飽き性な音楽好き。
ーコンセプトー
‟好みの音楽がレコメンドされる音楽アプリ”という題なので、
「あなたの好きが、きっと見つかる」というコンセプトを込めて作りました。
好きなジャンルや今までの履歴を合わせて検索できる音楽アプリ。
ーデザインー
爽やかな青と緑をテーマカラーにし、
清潔感・気軽さのある細字フォントでおしゃれな雰囲気を出してみました。
#003 メッセージ画面
ーコンセプトー
「社内向けビジネスシチャットアプリ」
個人会話や部署の連絡事項、ファイルの共有も簡単でできる。
・気軽に個人とやり取りできるダイレクトメッセージ
・部署ごとに分けたグループメッセージ
・ビジネスシーンでの定型文返事
・ファイルの共有
ーデザインー
ビジネス向けということで、シンプルな操作画面で作りました。
メインカラー：集中力を高め・爽やかなイメージを持っている青色
アクセントカラー：ホバーやオンライン状態に使う、馴染みのある緑色
#004 料理アプリの検索画面
ーペルソナー
・食べ盛りな子どもを持つ夫婦
・共働きでじっくり作る時間がないため、時短レシピがほしい
・子どもの大好きな料理のレシピがすぐ知りたい
・旬の食材を使ったレシピがあればうれしい
ーコンセプトー
「腹ペコ家族のための料理レシピアプリ」
ーデザインー
サービス名は「お食べ」から生まれた「Otabe」
口が開いている食べたい顔とフォークのロゴです。
メインカラー：食欲をそそる、あたたかみを持つオレンジ
アクセントカラー：オレンジと相性良い優しい黄色
背景色：シンプルで写真が見やすい白色
ー機能ー
・キーワード検索
料理名、食材で検索できる
・らくらく検索
所要時間で絞り込む：簡単で時短でできる
使う食材で絞り込む：冷蔵庫にある食材で手軽にできる
・人気レシピ検索
旬の食材を使った料理やみんなが食べたい人気料理
・お気に入り機能
好きな料理レシピを保存できるお気に入り機能
#005 アプリのアイコン
ーペルソナー
・高校生
・外遊びが好き
・雨の日は少し落ち込む
ーコンセプトー
天気アプリ the weather
「晴れの日も雨の日もそばにいる」
外で遊ぶのが大好き！
だから天気はいつも気になる。
雨の日だと少し落ち込んでしまう‥‥
雲のアイコンが笑顔で守ってくれる。
雨の日も寂しくないから元気になりそう！
という思いを込めました。
ーデザインー
晴れのまん丸い太陽、曇りと雨の日の雲
ポップなデザインと色合いを意識しつつ
優しく笑っているような雲さんで作りました。
メインカラー：青空をイメージする優しい青
アクセントカラー：太陽のお色
#006 音楽アプリの再生画面
ーペルソナー
・音楽好きな働き盛りの20代後半の女性
・毎日の通勤で音楽を聴く
・好きなアーティストのアルバムは全部聴くタイプ
・時々ジャケットから音楽を探す
ーコンセプトー
ジャケットで選べる音楽アプリ
ーデザインー
どんなジャケットでもきれいに見える、
モノトーンデザイン。
メニューや再生アイコンは全て細めのラインで
洗練されたおしゃれデザイン感を出してみた。
下部にはジャケットから選べる画像バーがあり、
直感でジャケットを選び、いつでも好きなアルバムが聴ける。
メインカラー：青みのあるグレー
アクセントカラー：白と明るめのグレー
#007 フードデリバリーアプリのリスト画面
ーペルソナー
・都内に住む会社員
・仕事帰りや休みの日に気軽に美味しいごはんを食べたい
・インドア派
ーコンセプトー
「気軽に、おいしい。」
食べたいものがすぐに見つかる
お家まで届くフードデリバリーアプリ
ーデザインー
前回作った料理レシピアプリ「Otabe」から
生まれたデリバリーサービス「Otabe Delivery」
メインカラー：明るくておいしそうな優しい赤
アクセントカラー：Otabeのメインカラーと同じオレンジ
#008 計算機アプリの計算画面
ーペルソナー
・30代主婦
・税込や割引を計算するのが苦手だが、毎日の買い物にきっちり計算したい
ーコンセプトー
買い物や家計簿をつける時にさっと使える電卓アプリ
ーデザインー
普段の買い物や家計簿をつけるときの電卓ということで、
計算しやすく割引％と税込機能を入れました。
右上の調整アイコンで、好みで壁紙の色をカスタマイズできます。
メインカラー：気分を上げるための、あたたかみのあるグラデーションカラー
#009 天気情報画面
ーペルソナー
・20代半ばのビジネスマン
・仕事で外回りが多いので常に天気を確認したい
ーコンセプトー
天気アプリ the weather
「晴れの日も雨の日もそばにいる」
ーデザインー
前回（005）のアプリアイコンから
作った天気情報画面。
簡単で今日の天気を確認できることを意識し、
天気に合わせたアイコンと気温、
降水確率をわかりやすくしました。
背景色は天気のアイコンによって変わる。
（明るい青→落ち着いた青→グレーに近い青）
メインカラー：青空をイメージする優しい青
アクセントカラー：太陽のお色
#010 地図アプリの行き先検索画面
ーペルソナー
・受験を控えている中学生
・いつも図書館で勉強している
・普段の行動範囲は家～学校～図書館が多い
・休みの日は友達の家で遊ぶ
ーコンセプトー
よく使う道がすぐに確認できる地図アプリ
ーデザインー
中学生向けに地図アプリということで、検索機能と画面をシンプルにしました。
・ペルソナが受験生を想定し、図書館検索機能を追加
・友達の家に行くときに使いやすい検索機能（図書館を探す画面と同じ感じのデザイン）
メインカラー：気分が明るくなる柔らかい黄色
アクセントカラー：現在地の表示と目的地先、またはクリックしたときに使う青色