Daily Cocoda!まとめ　001-010

はじめまして。事務職からデザイナーへの転職をめざす、もも(@turning_m_up)といいます。
終業後や休日を使って、デザイン勉強をしています。

これまでnoteは読む専門でしたが、同じように独学でデザインを勉強している人、これからしたいと思っている人にとって少しでも役に立てればと思い、noteを書くことにしました。

今回は、12月下旬に始めたDaily Cocoda!のお題10個を終えたので、制作した感想などを書いていきます。

Daily Cocoda!とは？

その前にDaily Cocoda!の説明を。

Daily Cocoda!は、Cocoda! というデザイン学習サービスのコンテンツのひとつです。

Cocoda!は、UIデザインやグラフィックデザインについて学ぶことができ、ポートフォリオを作成したり、求人に応募できたりするサービスです。しかも全部無料で利用可能です。（ありがとうございます🙇‍♀️）

Daily Cocoda!は、お題に沿ってUIデザインを制作し、投稿する。すると次の日にまたお題が届く、というものです。お題は全部で50個あります。

デザインが習慣化することと、お題に沿って作るので色々なジャンルに取り組めることがメリットです。

制作物　001-010

さてここからは、001-010までの間で作ったものを短いコメントと共に載せていきます。制作ソフトは基本的にAdobe XDです。

001　プロフィール画面

はじめてのUIデザイン！LIPSトレースを基にしてます。今見るとフォロー・メッセージボタンの余白がギチギチだ…

002　新規登録画面

SNSでログインするボタン、各社ガイドラインがあり、自由にデザインできないことを知りました。ちなみにサービス名のRECOMUは、Recommend Musicから来ています。

003　メッセージ画面

LINEを参考にしています。ビジネスで使えるように直線的なかっちりしたデザインに。

004　料理アプリの検索画面

検索履歴を基に、同じ食材を使うレシピがさっと出てきたら冷蔵庫の中身を有効活用できるのではと思い作成。今思えば毎回検索して作ると限らないし、普通にキーワード検索で良かった気がします。

005　アプリのアイコン

アプリのアイコンということで、久々にIllustrator使用。
こちらに載せているのは feeput でフィードバックをいただき、修正したものです。第1案よりも少し立体感が出て、良くなったかなと思います。ありがとうございます。

006　音楽アプリの再生画面

ジャケットをスワイプすると曲を切り替えられるイメージです。20代後半というターゲットに合わせ、かわいらしいけれど落ち着いた配色にしました。

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

LINEデリバリーを参考にしています。配色、ジャンルアイコン、店名アイコンなど地味にこだわりました。

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

Pinterestで検索しながらイメージを作りました。
下部分はアプリ切り替えボタンとかぶらないように、空白にしてありますが、しっくりこないですね。暖色系の配色で、やさしい雰囲気は出てるかなと思います。

009　天気情報画面

amehareというアプリで、温度によってカラーが変わるバーがあり、わかりやすかったので取り入れてみました。これまで作った中だとTwitter・Cocoda共にいいねが多かったです。なぜだろう…

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

よく使う道がすぐに確認できる、というコンセプトに苦戦。その状況だとアプリ見なさそうだなと思いつつ…
よく使う項目を上部の目立つところへ持っていき、すぐに検索できるようにしました。

まとめ

XDを使い始めたのが11月末だったので、はじめに比べるとソフトにも慣れてスムーズに作れるようになってきたかと思いますが、設計に甘さがあったり、全体的にまだまだと感じています。

あと、他の方の投稿作品を見ていて思うのが、作品の見せ方って重要だなと。モックアップを使ったり、映えるグラフィックだったりすると作品自体の見え方も変わってくると思いました。

年末年始の休みが終わり、時間が取りにくくなる不安がありますが、作業をスピードアップし、調査や情報設計は通勤時間など細切れ時間を利用して続けていきます。

詳しい制作意図などは、ポートフォリオ にまとめていますので、興味がありましたらご覧ください。いいねやコメント等いただけましたらすごく嬉しいです。

最後までご覧いただきありがとうございました。