Daily cocoda!

Daily cocoda! #1

女の子をターゲットにしたSNSのプロフィール画面です。

初めてのUIデザイン！初めてAdobe XDを使ってのデザインです。

cocodaは基本XDでデザインしており、必要があればイラレフォトショを使っています。

モックアップは他サイトから借りて、背景などもXDでまとめて作成！

これから頑張ります！

#3

mockupの作り方がまだまだ下手くそです（そしてなぜか昨日作ったモックアップをテンプレ化するのを忘れてました）

この日はビジネスマン向けのチャットアプリの画面でした。

配色・余白の取り方がすごく難しいです。

#4

お料理アプリのトップ画面です。

背景に波状のデザイン入れて見ましたが、全体的にすこしぼんやりしすぎたような気がします。

#6

おしゃれな音楽アプリの画面。

この日から下調べにかなり時間をかけて取り組んでみることにしました。

時間配分的には下調べやワイヤーフレームに〜40分、デザインに〜60分、色や微調整に〜30分で大体2時間ちょっとで完成できるのを目標に。

しかしまだまだ慣れないことが多いので、平均2時間半〜3時間くらいかかってしまいます。

参考アプリのUIや他アプリの違いを見つつ、配色や色決めについてもかなり下調べをしてから挑戦。

その分時間はかかりますが、自分的に納得がいくデザインにできました。

#7

都内住み会社員向けのフードデリバリーアプリ。

店詳細画面はまとまってできたと思うのですが、一覧ページの検索窓の下の種類で選ぶメニューが本当にしっくり来なくて修正に修正を重ねました。

しかしこの日から、個人的に2時間半までと制作時間に制限を設けているので、泣く泣く投稿。

今やるとしたらアイコンの色をもう少し薄めの色に変えるのと、四角ではなく丸にして作ります。(#25作成時点)

#8

主婦向けの計算アプリ。

計算アプリってもうほとんど完成されていて、あとはメモ機能とかあればいいなと思ったので右上からメモとして追加できるように作ってみました。

色はお気に入りです。フォントはもう少し良いのに変えれそう。

ナイトモードっぽくなってしまったので、白ベースでも作ればよかったかなと思いました。

#9

お天気アプリ画面。

ほとんどiPhoneの天気アプリを参考にしました。

色々見たけどやっぱり完成されている気がする・・・アレンジしたところは、時間帯や天気で背景が変わるところ（この場合は晴れている夜）、波状のデザインを取り入れてみたことです。

今見るともう少し波のところ含めて白背景のところを下げるべきですね、せっかくの背景が圧迫されているように感じます。

#10

10日目は地図アプリ。

これは本当に時間がかかりました・・・まず地図っぽい画面を作るのが本当に苦労して、今住んでいるセブ島の中でもめっちゃ簡単に作れそうな道をそのまま使いました。

後から気づいたんですが、XDの公式から配布されているワイヤーフレームに地図のワイヤーフレームがあったのでそれを使えばよかったと後悔しました。

#11

11日目はめずらしくwebの画面で、新しくプログラミングを始めた人用のお問い合わせ画面です。

後ろのコードは私のポートフォリオサイトから引っ張ってきました。

初心者に優しいような色使いと、気軽さを考えてチャット風の画面にしてみました。

#12

女子大生向けの料理アプリ。

私は料理が好きなのですが、そうでない女の子だったらどうすればやる気になるだろうと考えた時に、とにかく手軽さをアピールしようと思い、視覚的に手軽であることをわかりやすくしたUIにしました。

特に2枚目の５ステップで構成されており、それぞれ動画も用意されている・・・のような感じだとズボラな子でもやってみようという気になるのではないかと！

この画面で見ると5ステップかどうか色が薄すぎて分かりづらいですね、反省。

#13

13日目はOggiやCLASSY読者がターゲットのカレンダーアプリ。

大好きなCLASSY!

大人で上品なイメージなので、紺色をベースに、けれどポイントで淡いカラーを使って抜け感を出してみました。

出来る女性はスケジュール管理も簡潔で上手なんだろうな、と想像しながら作成しました。

#14

記録をするのが楽しくなるような読書アプリ。

苦手なパステルカラーをベースに、設定した目標達成度に応じてひよこちゃんが成長していく遊び心も入れてみました。

淡い色を使うと全体的にぼんやりしてしまうので、どうやってメリハリをつけるべきかいつも悩みます。

#15

15日目は女性社会人向けニュースアプリ。

これもなんだか色を多用している割にはぼやっとした印象になってしまいました。

どう改善したらメリハリの効いたすっきりとしたデザインになるんでしょうか・・・難しい。

#17

17日目は家計簿アプリ。

Cocoda!では同テーマで過去に投稿した他のユーザーの作品も見ることができるのですが、この日のテーマはイメージのせいかオレンジやイエローベースのデザインが多かったので思い切ってグリーンを使ってみました。

イメージは某メガバンのアプリです。

フォントサイズ、全体的にもう１回り大きくしてもよかったような気がします。

#18

18日目はメンズファッションアプリ！

今までにない感じでおしゃれにデザインできたと思います！

1枚目のsectionの下線ボーダー、もう少し細く短く、そして文字との間隔もあければもう少しすっきりした印象になりそうです。

こういうデザインは本当に余白でかなりイメージが変わりますね。

#19

19日目はフライト予約アプリ画面。

いろんなサイト見ると、やはり旅に向けてのわくわく・どきどき・ハッピーな感じを後押しするためか、明るい色を使ったサイトが多いと感じました。

なので同じように明るいイエローベースで！

#20

20日目は配信アプリの画面。

ポップな感じとお題にあったものの、ポップとはなんだろうということをずっと考えてしまって予想以上に時間がかかってしまいました。

私のデザイン、いつも写真に頼っている感があるのでもっと写真がなくとも使いやすくてUIに配慮したデザインを作れるようにします。

#21

21日目はフィットネス系アプリ。

運動に縁がなさすぎてこれまた参考サイト探しとワイヤーフレーム決めで苦戦・・・

色は単色ベースで、とにかく脂肪燃焼できるようなイメージで作成しましたが、少し海外のアプリのようなデザインに寄ってしまった気がします。

日本ではあまり受けなさそうだなと反省・・。

#22

22日目は家計簿アプリのダウンロード導線のweb画面。

家計簿アプリとの指定だったので、17日目で作成したアプリ画面を少しだけ修正して再利用して見ました。

まとまったデザインでいいなと思いますが、ダウンロードさせることを目的だからQRコードも入れればよかったなと反省。

日々勉強になることばかり、そして正解がないので知れば知るほど、作れば作るほどハマっていく感じがデザインのとっても楽しいところだと思います。

#23

23日目はママのためのアプリ。

イメージはLUCLAのようなUIにして、大好きなピンクベースで作ってみました。

いつもTwitterでも投稿しているのですが、フォロワーさんに『更新日付も書いてあるといいかも！』とアドバイスいただきました！

私は完全独学でweb制作もデザインもプログラミングも学んでいるので、こうやってアドバイスをくれる方は本当に貴重でありがたいです。

#24

24日目は通話アプリ画面。

この画面にプラスしてチャット機能もあれば便利だよなあと思ったのですが、画面がごちゃつきそうだったのでやめました。

#25

25日目は決済アプリのリワードモーダル画面。

左のアプリ開いた時の待機画面は完全趣味で作りました。

なんだかんだイラストを探す時が一番時間がかかっている気がします。

#26

26日目はランキング画面。

いつもと違うデザインに挑戦しようと、クイズゲームアプリ風のデザインに挑戦してみました。

慣れないデザインだったので、下調べや参考サイト探しに一番時間をかけて、どうすればみやすくポップな感じにできるのか過去最高に時間がかかってしまいました。

少し雰囲気は出せたかな？と思っています。

#27

27日目はクレジットカード登録画面。

お題の未来という言葉につられてしまった感じがあります。

すでにクレカを登録していて、その登録情報を変更する・・・というのを想定してデザインしました。

#28

28日目は404画面。

ネットに疎い人は404ページって何かわからないですよね。私もそうでした。

参考サイトは404と文字をきちんと表示しているサイトが多かったけど、あえて表示させずにデザインしてみました。

お題が女性向けの美容院予約アプリの404ページだったので、全体的に淡いカラーに。

#29

29日目はスワイプで近くの飲食店を探せるアプリ。

Tinderの飲食店バージョンでしょうか。

食べ物系のアプリなので、写真の印象をはっきりさせるために暗い色をつかってみましたが、食欲促進のためにオレンジ系を使えばよかったかなと反省。

#30

30日目は主婦向けのショッピングサイト

ロハコ的なのをイメージして作ってみました。

これもアドバイスいただいたのですが、削除の欄（ゴミ箱のアイコンの所です）を角丸にしているのですが、実装のことを考えると結構辛いらしいので角丸いらないかも？というご指摘をいただきました。

モックアップはこのままですが、＋−ボタンの大きさや上記で指摘いただいた箇所は修正しております。

#31

この日のお題は#30で作成した同アプリを想定した、『検索結果が見つからない時の画面』でした。

いわゆるNOT FOUNDですよね。

この日がクリスマスイブだったということもあり、参考サイトでも遊び心を出しているページが多かったのでクリスマス仕様にしてみました。

1ヶ月、1日も休まずに投稿できています。

年内の投稿はあと2日しかできないですが、年明け以降は毎日ではなく3日に１回のペースでデザイン以外の学習にも時間を使っていく予定です。

#32

32日目は男性ターゲットの漫画アプリ。

漫画アプリ、いろいろみてみると共通してメインカラーが鮮やかなのが特徴ですね。

それに倣って今回は明るい色を使ってみました。

#33

33日目はオリジナルグッズを作れるアプリ。

自分でパッケージをデザインできるのっていいですよね。

ポップにはあまりならなかったです、反省。

#34

34日目はday3のメッセージアプリを使って、削除画面を作ってみようというお題。

ここに来て3日目のお題・・・見直してみるとなんか微妙だったのでフォントの大きさや余白を微調整して再利用しました。