見出し画像

予定もタスクも。カレンダーアプリのUI制作メモ(Dailycocoda#13)

こんにちは!よもぎです。

色んな人に、いつでもどこからでも読んでもらえるよう、
【Dailycocoda!】にて
制作した作品のアウトプットをnoteにも残しておきます。
制作期間は約1週間、使用ソフトはAdobeXDです。
(こちらを加筆修正してます)

お題の概要

誰向け:「自律した自分」を目指す20代女性
コンセプト:月ごとの表示画面で、予定をパッと確認できるカレンダー
雰囲気:Oggi,CLASSY,日経WOMANに出てくる女性が使っている
参考アプリ:Timetree/Google カレンダー/lifebear

制作したUI

仕事もプライベートも積極的な女性のための、カレンダーアプリ」
を目指しました。


少し小さいので画面のみverも貼っておきます。

どんな人のためのアプリ?

【20代女性、「自律した女性を目指す」、Oggi,日経WOMANなどを読む】

上記のお題から掘り下げ、
「都内で営業職をしていて、仕事もプライベートも
積極的にこなしていきたい20代女性」
を想定しました。

(↑pinterestで作成したイメージ。画像を押すとボードが見れます)

何ができるのか?

月ごとの表示画面で、予定もタスクもまとめられるカレンダーアプリ】を目指しました。
ミーティング等の予定は上段、企画書などは下段に表示することで、
記入することが多くても、どこに何があるか見渡せるようにしています。

工夫したこと

予定、タスクを一画面でまとめるにあたり、
「どこに何があるか」をすぐ把握できるように工夫しました。

①午前中の予定は一行目に、午後の予定は二行目以降に表示(時間も表記)
②一番下の行(四列目)にタスクを表示。


色は、きちんとした印象を出すため白をメインで使用。
大人の女性がアイシャドウに使いそうなにぶいピンクをアクセントに使っています。
機能は予定管理に特化するため、カレンダーのみ。timetree・Googleカレンダーを参考にしました。

制作プロセス

①参考アプリのトレス
②それぞれの参考アプリのコンセプト・ターゲットを調べる
③お題に照らし合わせてUIを作成する

私は「UIの引き出しを増やすこと」を目的にDailycocodaを行なっています。
今までは短い時間で量をこなすことに注力していましたが、
コンポーネントの引き出しや既存のUIへの理解を
しっかり深めたい…と考え、
今回はとことん丁寧に行いました。

①参考アプリのトレス


Pinterestでユーザーをざっくりイメージした後、


既存アプリの機能・構成を知るため参考アプリをトレスしました。
・機能の数(カレンダーのみか、メモ機能があるか)
・カレンダーの表記の仕方、スクロールの方法
などに差があることがわかりました。

(カレンダーに特化)Googleカレンダー<<<timetree<<<Lifebear(色々できる)

②それぞれの参考アプリのコンセプト・ターゲットを調べる

実際に手を動かして見ると「何を目指したらこのUIになるんだ?」
いくつか疑問が出てきます。
App storeと各アプリのHPを見ながら、「何を目指したアプリなのか」「どんな人に向けて作られているのか」を調べました。

誰に何を届けるか によって、アプリの機能やUIが決まっていくんだなあ…。
特に印象深かったのは「Lifebear」のコンセプトが
「クラウド型電子手帳アプリ」だったこと。
トレス中は「カレンダーアプリ」と捉えていたので
何でこんなに機能が多いんだ?と疑問でした。
が、電子手帳を目指していると知り、日記・ノート・Todo機能もあることに納得できました。
コンセプトを知るの、大事!

③お題に照らし合わせてUIを作成する

ある程度調べた後、今回のお題の場合はどうすればいいだろう?と考え、近いアプリのUIをベースにUIを組み立てていきました。

今回のお題
ターゲット「都内で営業職をしていて、仕事もプライベートも
積極的にこなしていきたい20代女性」

コンセプト月ごとの表示画面で、予定もタスクもまとめられるカレンダーアプリ

予定管理メイン、共有機能なしなので「googleカレンダー」が一番近そう。
また一月の予定を見やすくするためにtimetreeも一部取り入れました。

完成!

感想

参考アプリ分析、HPまで見るとコンセプトがしっかりわかって学びが深かったです。作った方の思いを理解した上で、自分でもう一度考えるのが大切だと思いました。

今後の課題

①スピード
Dailyなのに1週間もかかってしまった。特にトレスに時間がかかりすぎた。次回はしっかりトレスするのは一個にして
コンセプト理解と、どう活かすか?を考えるのに集中してみます。
速さとのバランスを取りたい。

②引き出しの少なさ
ターゲット、コンセプト、機能を決め実際にUIに落とし込む際、
引き出しの少なくてもどかしい。
絶対にもっと良くできるはずなんだけど、いくら案を考えてもパッとするものがこれ以上出てこない。これに関しては数をこなすしかないのかな…?


ここまで読んでくださって、ありがとうございました!!

★ここが良い!ここもっとこうした方がいいかも!などフィードバックあれば教えて頂けるととっても嬉しいです!🙇‍♀️


参考URL





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

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

読んでくださってありがとうございます!頂いたサポートで制作に疲れた時に甘いものを買います。

わーい!
6

よもぎ|デザイン

10月から小売業のEC担当になりました🎁デザイナー目指して勉強中です。noteでは、趣味で描いてるゆるーいイラストや、日々の学びを載せてゆきます〜。作ったもの→https://www.foriio.com/yomogi

デザインのこと

作ったものの学びや、参加したイベントなど デザインについて書いたものをまとめます。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。