デザインを何もしらないエンジニアがDailyCocoda！を3ヶ月かけて完走したので、1日目の自分にアドバイスする その１ 概要編



# ３ヶ月やるとどうなるか
### Daily Cocoda 1日目
![image 10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/79f5a7b3-8a68-e6b9-a74f-e6aacdc77c3d.png)
初心者丸出しのデザインですね。丸アイコンの画像が大きすぎたり、ピンクの背景色と白の文字色があってなかったり､パディングとマージンがおかしかったりしています。
ちなみにネットでよく見かけるこのアイドル（茜さやさん）は、フリー素材で、[ぱくだそ](https://www.pakutaso.com/)さんから取得してきました。

###Daily Cocoda 50日目(最終日)
![Group 124.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/e0b52630-c4ff-29bf-1145-f81116bd6b7a.png)
50日目は初日からの成長を感じさせるいい感じのデザインですね。

#諸注意
* このページはデザイン一日目の自分を対象にしています。
* デザインシステムはマテリアルデザインを採用しています。
* オレオレ流です。間違いも多々あると思いますので、指摘お願いします。
* ここでいう３ヶ月とは、6H/日 * 90日です。(でも９０日のうち２０日ぐらいはサボっています。真面目にやれば一日6H * 60ぐらい)

#私について
* 個人開発者としてモバイルアプリをつくって、その収益で生計を立てたいエンジニア
* Flutterで開発を始め、いくつかアプリを作ろうとするも、いづれのアプリもデザインが出来ずに断念
* デザインを学ぶ必要に迫られて、DailyCocoda!でデザインを学び始める。
* デザインは全くの初心者でセンス0
* 7/23日から始めたDailyCocodaが10/15日に完走 <-- いまここ
* アプリをリリースして生計を立てる <-- これから

#どうやってデザイン学ぼうか悩んでいる１日目の自分へ
* ツールはsketchでもいいけど、無料で使えるfigmaを使おう。sketchファイルはfigmaで取り込めるよ。
* アウトプットの[Daily Cocoda](https://cocoda-design.com/top)を優先してやろう。
* 時間があったらUIトレースでインプットしよう。
* [マテリアルデザインガイド] (https://material.io/design/)は聖書 よく見よう。ちなみに日本語版はない。
* とにかく毎日[Daily Cocoda](https://cocoda-design.com/top)を完成させよう。完成度は問わない。

#なぜfigmaか
* デザインツールはXDでも、figmaでも、sketchでも何でもOK
* 自分はchromebookとmacを併用しているので、ブラウザベースのfigmaを使おう。

#アウトプット - Cocoda(Daily cocoda)
* [Cocoda!](https://cocoda-design.com/top)とは、UIデザインをアウトプットして実践力が身につけられるサービス
* もっと簡単にいうとprogateのデザインバージョン
* Daily Cocoda!はCocoda!のサービスの一つで、日替わりで指定されたお題のUIを作っていくもの
  * メリット
      * 1日1題でUI1枚か2枚分 ちょうど一日で終わるぐらいの分量なのが良い
      * 多種多様なお題があるので、実力が身につく
  * デメリット
      * 興味ないお題の日はやる気でない。(お題のskip機能がない)
      * 続かない。(初日お題提出者は700以上人いるが最終日はわずか23人)

#インプット -UIトレース
* アプリをスマートフォンからスクリーンショットで撮影して、その画像をベースに同じUIをつくる
* Twitter,facebook,instangramのようなSMS系や、google系アプリのデザインがおすすめ
* やり方は色々あるけど、flutterでアプリを作ろうとしている自分には以下を勧める
  * ラインを意識する
  * 幅を意識する
  * サイズを意識する
  * マテリアルデザインは8を基準にしたレイアウトっぽいので、8の倍数を意識する
* 厳密にトレースしなくていい。むしろマテリアルデザインに準拠する形に直していくと良い
* ちなみに、スクリーンショットした画像はiphoneシリーズはwidth375、pixcel3はwidth360に合わせる
* 自分のトレースはこんなかんじ
![Group 124 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/dee771c5-0e81-1aaa-48bb-98f58238220d.png)

#マテリアルデザインガイド
* 自分はflutterをやってるから[マテリアルデザインガイド] (https://material.io/design/)を重宝することになる。ブックマークに入れておくこと。
* ちなみに、日本語バージョンはない。google翻訳しながら見よう。でも読みやすい英文なので気構える必要はない。

#心構え的な
* とにもかくにも、毎日DailyCocodaをやっていこう。
* 目安時間は気にしない。60分とか70分とか書いてあるけど、無理 1つのお題に6時間ぐらい費やすことになる。
* とにかく毎日Daily Cocodaをやろう。２日以上かけると間違いなくだらける。
* 最初は糞デザイン量産して経験値を貯めろ。レベルを上げろ。
* UIトレースは時間が余ったらやる感じ
* お前のデザインなど誰も見ないから、毎日やれ
* 2~3日先のお題を知って、予め資料集めをするのはあり。ちょっとずるい感じするけど。


#終わりに
初めての投稿です。至らぬ点ありましたらコメントお願いします。

#リンク
* [デザインを何もしらないエンジニアがDailyCocoda！を3ヶ月かけて完走したので、1日目の自分にアドバイスする その１ 概要編](https://qiita.com/ampersand-dev/items/e0768faf4b7260fc28d6)
* [デザインを何もしらないエンジニアがDailyCocoda！を3ヶ月かけて完走したので、1日目の自分にアドバイスする その２ figma準備編](https://qiita.com/ampersand-dev/items/0bbe2de76b39db70551f)
* [デザインを何もしらない1日目の自分に "実践的" なマテリアルデザインの使い方を説明する - Layout Color Typography 編](https://qiita.com/ampersand-dev/items/28e3ba3dfd1871be9e78)
* [自分のfigmaの作業テンプレートを公開するよ[モバイルアプリ向け]](https://qiita.com/ampersand-dev/items/847e149794aaeb20ce12)