バナーレシピのコピーのコピー

Daily Cocoda!#004-013

GW中に毎日1つDaily Cocoda!をやる宣言し、達成できましたので作品をnoteにまとめます!

宣言したもの↓

証拠はTwitterに上げているので、見ていただけますと!笑↓

デザイン勉強のデザインの反省については、また別日にnoteにまとめようと思います!
それでは、10日間のデザインをご覧くださいませ!

#004 プロフィール画面

お題:冷蔵庫の中にある食材で手軽にできる料理アプリの検索画面
ターゲット:食べ盛りの子供を持つ夫婦
参考:タベリー

検索機能の種類
忙しい時にはキーワードである食材を入力するだけで検索でき、時間がある時は「詳しく検索する」で料理ジャンルを選んだりできるようにしました。

おすすめタグ
調べられることが多い食材を表示し、当てはまるものがあれば検索時間も短縮可能になるように設定しました。

ランキングレシピ
人気なレシピを表示し、お買い物の時間があるときや、または丁度冷蔵庫の中にあるのもでできそうと検索して探すのではなく見て探すこともできるようにしました。

#005 お天気予報アプリのアイコン

お題:毎日確認したくなるようなお天気予報アプリ
ターゲット:高校生

流行りのグラデーション
最近流行りのグラデーションで作成しました。ポップで楽しいとのことだったのでワンカラーではなく太陽と雲、雨で色を変えてワクワクする感じにしました。

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

お題:ジャケットで選べる音楽アプリ
ターゲット:音楽大好きな働き盛りの20代後半女性

場所によって縦横操作
パーティーやBGMとしてみんなで共有で音楽を流したいときは、横にして操作を誰でも簡単にできるように設定。1人の時は縦で音楽を聞き、ジャンルに合わせて下の丸ボタンを押すと「バラード」「HIPHOP」「ラブソング」「その他」のジャンルで音楽をシャッフルできるように設定。

1人の場合はシャッフルを重視
なんとなくバラード聞きたいや、仕事に集中したいからなんでもいいからHIPHOP聞きたい時には下にある「●」ボタンで、ジャンルに合わせた音楽がシャッフルで流れるようになります。青:バラード、黄色:ヒップホップ、ピンク:ラブソング、グレー:その他でまた曲が選択できる。

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

お題:食べたいものがすぐに見つかるフードデリバリーアプリ
ターゲット:都内住む社会人

ジャンル別で分けられる
「なんでお気に入り入れたんだっけ」「お気に入りしたけど探せない」を解消するためにPinterestの様にジャンル別で保存できてタグから見つけやすくしました。

最近入れたお気に入りのお店は表示
後でしっかり見よう」とお気に入りリストに入れた場合は、すぐに見返せる様にお気に入りリストに入れたてのものはお店が表示される設定にしました。

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

お題:お買い物や家計簿をつけるときにさっと使える計算機アプリ
ターゲット:30代主婦

電卓打ちをやめる
お買い物中などさっと使える様にとのことで、普段打っているのと同じ入力画面でデザインしました。

機能の追加
お買い物前に仮で計算したものを保存でき、履歴をみれる機能やレシートを撮って数字を読み取れたり、計算したものをメモ帳や家計簿アプリに連携できたり、割り勘やお買い物時の税をすぐできる様なボタンを設置しました。

#009 お天気情報画面

お題:通勤前にさっと確認できるお天気予報アプリ
ターゲット:20代半ばのサラリーマン

押して詳細を見えるように
今日の自分のいる場所の天気と遠出する際にもすぐわかるように日本地図でも天気がわかるようにしました。
20代前半向けの天気情報画面とのことだったので、文字は少なくボタンや1日の天気のところを押せば時間毎の天気も表示できるようにシンプルで爽やかなデザインにしました。

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

お題:よく使う道がすぐに確認できる地図アプリ
ターゲット:スマホを買ってもらったばかりの中学生

簡単ボタン
携帯を買ったばかりの中学生がターゲットなので、あまり移動距離が少ないことを考え・自分の家・おつかいで頼まれるスーパーマーケット・おばあちゃんの家・緊急避難経路をファーストビューに設定し、スクロールすれば他にも保存したよく行くリストを設定できるようにしました。探すのが大変になった場合は、下の行き先リストから絞って飛べるようにしました。

#011 お問い合わせ画面

お題:わからないことや不具合はすぐに問い合わせられるプログラミング学習サービス
ターゲット:仕事のかたわら、プログラミング学習をはじめた社会人

簡単操作
社会人だと仕事で疲れた後にお問い合わせなど文字を打つのは結構体力を消耗するので、それを少なくするために出来るだけボタンだけの操作で行えるように設定しました。最終的には普段の入力する形になりますが、1から文を打つよりはチャット感覚でできる方が体力の消耗は削減できるのではないかと思いました。

ちなみに、これは本来PCデザインでやるべきだったらしく…やる方は注意しましょう!笑

#012 料理アプリのレシピ画面

お題:料理しながら使える料理アプリ
ターゲット:料理好きで見た目も味もこだわりたい女子大学生

材料と作り方を別ページで作成
実際料理を作るときはお買い物→材料を測る→調理する順番になるかと思うので、それを意識したページをデザインしました。女子大生がターゲットだったこともあるので、今年のトレンドカラーとも言われている珊瑚色を入れてみました!
また、カメラボタンから完成した料理をとればその中でInstagramのようなSNSがあって共有できればもっと料理が楽しくなるのではないかなと思いました!

#013 カレンダー画面

お題:月ごとの表示画面で、予定をパッと確認できるカレンダー
ターゲット:"自律した自分"を目指す20代女性

1ヶ月のスケジュールをすぐ見れるように
1ヶ月のスケジュールをすぐ見れる且つ今日1日のスケジュールも確認できるようなデザインにしました。詳細などは今日のスケジュールを押すとメモとか記入できるような設計です。
キャリアウーマン向けとのことで、カラーは派手では無くなるべく同じ色合いにして、その月の花の色でデザインしました。5月はふじ色です。

10日間を振り返ってみて

DailyCocoda!の画面は下記のようになっていて、参考アプリでは、色々なアプリが紹介されるため沢山のアプリに触れることができました。


デザインに困ったときは、デザインが身につくTips集があるので安心です!

他の人の作品を見ることもできるので、私は作り終わった後に確認し周りの方はどんな考え方でデザインしたのかも知ることができるので、反省点に繋げることができました!

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

ご覧いただき、ありがとうございます!サポートいただいた分につきましてはデザイナーとしての勉強代とさせていただきます。

ありがとうございます!もしよかったら、フィードバックください!
9

CHIHARU

駆け出しデザイナー2019年1月〜ありがたいことにハンズシェアにデザイナーとして働くことになりました!全く未経験(事務)からフリーランスWebデザイナーになれるスキルを手に入れるため、学びの日々。#駆け出しwebザイナーと繋がりたい

DailyCocoda!まとめ

1つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。