Daily Cocoda #41 - #50

OVERVIEW

デザイナーになりたい人のためのコミュニティサービスCocoda!(https://cocoda-design.com)のDailyチャレンジ(#041 - #050)に取り組んだアウトプットを載せています。

YEAR 2019

【041】タイマーアプリ

◎設定
誰向け:料理や勉強で時間をはかることが多い主婦や学生
コンセプト:手軽に使えるタイマーアプリ
雰囲気:シンプルで見やすい

◎工夫した点
タイマーにはそれほど追加する必要がある機能は多くはないと思ったため、必要な機能だけに絞って配置した。時間表示を中心に大きく表示し、黒の背景に映えるようにビビッド目の色で配色しました。

【042】動画視聴アプリ -動画詳細画面-

◎設定
誰向け:休日はゆったり動画を楽しみたい30代
コンセプト:見たい映画やTV番組が見られる動画アプリ
参考:amazon prime video、Netflix

◎工夫した点
トップ画像、タイトルはインパクトを与えられるように上部に大きく配置しました。
また、タイトル下にはストーリー、キャスト、レビューなどタブ切り替えでストレスなく情報を確認できるように配置しています。
レコメンドはタイトルと評価をともに配置し、最低限の情報を確認できるようにデザインしました。

【043】ギフトアプリ -eギフト画面-

◎設定
誰向け:友達に日頃の感謝を伝えたい人
コンセプト:友達に気軽にeギフトが送れるアプリ
参考:Starbucks eGift、giftee

◎工夫した点
ギフト送信画面ではLINEとLINEを持っていない人に贈る場合にメールでも選択できるようにしました。
受け取り側ではLINEで共有された場合には、アプリを持っていない人でもブラウザで確認できる想定です。また、受け取り側からは「お返しのギフトをおくる」という導線を用意し、気軽にギフトを送りあえるようにしました。


【044】TODOリストアプリ -チュートリアル画面-

◎設定
誰向け:仕事を効率化したいビジネスマン
コンセプト:シンプルで使いやすいTodoリストアプリ
雰囲気:初めてでもすぐに使い方が分かるようにしよう
参考:Trello

◎工夫した点
わかりやすいチュートリアルには文字だけでなくグラフィックやアニメーションなど視覚的に伝えることが大事だと感じています。視覚的に伝えることでただの単調なチュートリアルにならずユーザーの離脱を減らせるのではないかと感じました。


【045】Cocoda! LPリデザイン

◎設定
誰向け:デザインを学びたい人
コンセプト:デザインで繋がり、学び会えるコミュニティサービス
雰囲気:楽しい、わくわくする

◎工夫した点
レイアウトを全体的に統一してストレスなくみてもらえるようなデザインにしました。
また、新規登録の導線をトップとボトムに配置し、登録してもらいやすいデザインを意識しました。

【046】フリマアプリ -商品購入画面-

◎設定
誰向け:安く手軽に商品を買いたい人
コンセプト:欲しいものが見つかるフリマアプリ
参考:メルカリ、ラクマ

◎工夫した点
「購入手続き」「購入する」ボタンの配置は既存アプリを参考に、画面下部に置きユーザーがいつでも次のステップへ進めるようにデザインしました。購入手続き画面ではシンプルに必要な情報だけを整理して表示するように工夫しました。


【047】ヘアサロン予約アプリ -詳細検索画面-

◎設定
誰向け:おしゃれにこだわりがある男性
コンセプト:メンズでも使いやすいヘアサロン予約アプリ
雰囲気:気軽に使えるカジュアルな雰囲気

◎工夫した点
詳細検索画面では場所、メニューなど別々に検索をかけるのではなく、絞り込みたい項目をカスタマイズして絞り込めるようにこのようなUIにしました。メニューは一般的なタグ以外に自分でタグを追加して検索できるようにデザインしました。


【048】地図アプリ -移動経路画面-

◎設定
誰向け:簡単に行き先を調べたい大学生
コンセプト:目的地までの経路を示してくれる地図アプリ
雰囲気:シンプル

◎工夫した点
表示する要素を少なくして地図の表示領域を多くとりました。既存の地図アプリではFromTo検索がしにくいと感じたため、目的地を入れるとFromToの入力欄に遷移し、検索がしやすいようにデザインしました。


【049】SNSアプリ -画像アップロード画面-

◎設定
誰向け:イラストを描くのが好きな人
コンセプト:気軽にイラスト画像を投稿できるSNS
雰囲気:馴染みやすい , シンプル

◎工夫した点
投稿する作品は情報入力画面に入る前に選択し、登録する想定です。必要な情報を簡潔に入力できるようにし、「公開範囲」と「作品ジャンル」はタブで選択可能にしました。情報入力部分をファーストビューにおさめてスクロールせずに完結できるようにデザインしました。


【050】ポートフォリオサイト

◎設定
コンセプト:今まで作ったデザインをまとめたポートフォリオ
雰囲気:シンプル、おしゃれ、洗練されている

◎工夫した点
白を背景に、文字とアクセントとなる装飾を加えたシンプルなデザインにしました。
Worksページでは基本のレイアウトはそのままにし、作品に注目してもらえるようなデザインを意識しました。

WEBSITE