Help us understand the problem. What is going on with this article?

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

3ヶ月やるとどうなるか

Daily Cocoda 1日目

image 10.png
初心者丸出しのデザインですね。丸アイコンの画像が大きすぎたり、ピンクの背景色と白の文字色があってなかったり、パディングとマージンがおかしかったりしています。
ちなみにネットでよく見かけるこのアイドル(茜さやさん)は、フリー素材で、ぱくだそさんから取得してきました。

Daily Cocoda 50日目(最終日)

Group 124.png
50日目は初日からの成長を感じさせるいい感じのデザインですね。

諸注意

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

私について

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

どうやってデザイン学ぼうか悩んでいる1日目の自分へ

  • ツールはsketchでもいいけど、無料で使えるfigmaを使おう。sketchファイルはfigmaで取り込めるよ。
  • アウトプットのDaily Cocodaを優先してやろう。
  • 時間があったらUIトレースでインプットしよう。
  • マテリアルデザインガイドは聖書 よく見よう。ちなみに日本語版はない。
  • とにかく毎日Daily Cocodaを完成させよう。完成度は問わない。

なぜfigmaか

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

アウトプット - Cocoda(Daily cocoda)

  • Cocoda!とは、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

マテリアルデザインガイド

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

心構え的な

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

終わりに

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

リンク

ampersand-dev
エンジニア / 個人開発者 https://twitter.com/ampersand000
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした