DailyCocoda! #001~#010

OVERVIEW

Cocoda!(https://cocoda-design.com)のDailyチャレンジの制作物です。

YEAR 2019

Dailycocoda! とは

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

作品

#001 プロフィール画面

設定

誰向け:20代前半女性
コンセプト:日常の写真をおしゃれにUPできるSNS
雰囲気:POP、可愛い

ポイント

ボタンのメインカラーや背景を変えられる設定で考えました。
このアプリ自体を自由なアルバムとして楽しんでもらえるようなデザインを意識しました。
ヘッダーやアイコンを少し大きめに表示し、見せたい一枚を大きく見せられるようにしています。


#002 新規登録画面

設定

誰向け:おしゃれ好きな男子大学生
コンセプト:好みの音楽がレコメンドされる音楽アプリ
雰囲気:カジュアル、おしゃれ 

ポイント

1画面完結型+SNSアカウントでも登録できるタイプの新規登録画面です。
明るく、軽い印象を出すためにグラデーション+白文字を使用しています。
普段グラデーションを用いたデザインをあまりしないので勉強になりました。 


#003 メッセージ画面

設定

誰向け:20代半ばのビジネスマン
コンセプト:ビジネスシーンでも使えるチャットアプリ
雰囲気:シンプル、シック

ポイント

 シンプルでもきれいに見えるように、ドロップシャドウや色に気をつけてデザインしました。
機能面では、なるべく必要最低限の機能に絞り、すっきり見えるようにしました。


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

設定

誰向け:食べ盛りな子供を持つ夫婦
コンセプト:冷蔵庫にある食材で手軽にできる料理アプリ
雰囲気:あたたかい、やさしい

ポイント

カテゴリ、人気ワード、時間、特集で項目を分類し、フリーワード検索を補助する項目を入れました。


#005 アプリのアイコン

設定

誰向け:高校生
コンセプト:毎日確認したくなるような天気予報アプリ
雰囲気:ポップ、たのしい

ポイント

太陽・雲・雨マークは丸みを強調して描くようにしました。
軽めの明るい色を使用しました。
天気アプリは、毎日頻繁に使うものではありませんが、『可愛いから並べておきたい』と思ってもらえるようなアイコンを目指しました。


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

設定

誰向け:音楽好きな働き盛りの20代後半の女性
コンセプト:ジャケットで選べる音楽アプリ
雰囲気:おしゃれ、落ち着いた

ポイント

ジャケットを魅せるためサイズを大きくとっています。
歌詞表示画面にもジャケットが薄く見えるようにしています。
1曲をゆっくり楽しめるように、他の情報はあまり載せないようにしています。


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

設定

誰向け:都内に住む会社員
コンセプト:食べたいものがすぐに見つかるフードデリバリーアプリ
雰囲気:明るい、おいしそう

ポイント

検索画面から、食べたいものを選んだ次の画面のイメージです。
出前のアプリを複数調査し、必要な機能を精査して並べてみました。
食欲をそそる色、食品を映えさせる色としてオレンジを使用しました。


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

設定

誰向け:30代主婦
コンセプト:買い物や家計簿をつける時にさっと使える電卓アプリ
雰囲気:やさしい、あたたかい

ポイント

家計簿、買い物と「お金」を計算することを考えてボタンの内容を決めました。
メインカラーは桃色で、機能に応じて少しずつトーンを変えています。
ふんわりと温かいイメージでデザインしました。


#009 天気情報画面

設定

誰向け:20代半ばのビジネスマン
コンセプト:出勤前にさっと確認できる天気予報アプリ
雰囲気:シンプル、さわやか

ポイント

情報の構成を考えながら作成しました。
上の段は、今の天気を大きく表示しています。
中の段は、今日1日の天気、気温、降水確率、風の様子を一覧で見ることができます。
下の段は、今週の天気、気温、降水確率、風の様子を一覧で見ることができます。
忙しい時は一番上だけ、じっくり見たい時は下まで目を通す、という使用を想定しています。


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

設定

誰向け:スマホを買ってもらった中学生
コンセプト:よく使う道がすぐに確認できる地図アプリ
雰囲気: わかりやすい、手軽

ポイント

周辺にあるスポット検索とよく使う場所を簡単に検索できる内容にしています。
よく行く場所を登録すると、すぐに道案内を開始します。
google mapやiOSのmapを参考に、機能を減らすことで簡単に道検索ができるようにしました。

WEBSITE