こんにちは。
今回はProjectStepUPでUIデザインをやってきた自分が、独学で勉強する方法を考えてみました。これをやりきれば、『自力で綺麗なUIが作れる状態』にはなるはず。

内容は初心者にわかりやすいというのを大事に、かなり簡素化して書いております。とりあえず4STEPにわけてみました。そういや高校時代に4STEPとかいう数学問題集あったなあ...

STEP1：UIデザインに関係する一般知識を得る

◎目的
このステップはUIデザインに関する前提を知るためにあります。STEP2以降と平行してやってOKです。というよりちゃんと学ぼうと思ったら無限に続きそう。

主なトピックとしては、UIUXとはなにか・人間中心設計・デザインの4原則・デザインガイドラインの4つでしょうか。

・UIUXとはなにか
UIデザインはUX（顧客体験）大きな流れの一部なので、そこを理解しているかどうかは本質的なUI設計に欠かせないです。

・人間中心設計
人にとって使いやすいデザインってなんだろうな？という話です。

・デザイン4原則
ええ感じのUIをつくるために知ってて損ないです。

・デザインガイドライン
UIデザインする上でのルール一覧みたいなものなので日本語まとめだけでも読んでください。

最初は深入りする必要はないと思うので、ざっと一般知識を知れたら良いと思います。私もまだ勉強中。

◎やり方

手段は何でも良いので、本とか動画から吸収してください。有名なものばかりですが、参考までに教材貼っときますね〜

・ノンデザイナーズ・デザインブック
・Udemy
・Schoo!
・Material Design Guideline
・Human Interface Guideline

STEP2：UIトレースをする

◎目的
①Sketchなどのデザインツールに慣れる
Sketchは使いこなせるまでに時間がかかりました。トレースしながら、わからないことはググって吸収！

②UIの箱を理解する
これが一番重要なポイントですね。下に貼ったnoteに詳しく書いてあるので、ご参照ください。

③パーツを手に入れる
cocoda!やDaily UIで自分のデザインをつくるときは、トレースしたものを使い回すと素早く美しいUIが作れます。ゆえに、どんなアプリをトレースするかは大事。へなちょこUIのアプリだと良いパーツは手に入らない気がする。とりあえずFANCYはトレースするアプリとしてはおすすめです。（信者）

◎やり方

やり方関しては、こちらのnoteが詳しく書いてるので詳細省きます。

STEP3に進むにはUIトレースを避けて通れないです。先に自分でUI作ってる人は、まずは1つで良いのでアプリをトレースしてください。

◎おまけ：トレースで役立つ知識

・Twitterのタイムラインのように長い画面とトレースするとき
Tailorというアプリで繋げられます。

・Sketchでスクショの色をスポイトしても同じ色にならない問題
File→Change Color Profile→sRGB IEC61966-2.1で解決します。

・スクショで使われているフォントがわからないとき
WhatTheFontというアプリでわかるかもしれない（精度悪い）。
Fonts NinjaというChromeの拡張機能がフォント検索には良いとのこと。ご紹介ありがとうございます。（2019/06/11追記）

STEP3：リデザインしてみる

◎目的

①自分でUIを作れるようになる
STEP1、STEP2と得たことをフル活用してやってみてください。

②引き出しを増やす
これがデザイン力に直結します。自分の頭で最適なデザインを考えたときに、引き出せるもの（パーツや配色etc.）が多い程デザイン力は上がると思います。

◎やり方

①お題を決める
Cocoda!やDaily UIが有名なのかな。Cocoda!の方がターゲットユーザーが決まっててやりやすいです。

②パーツを使ってUIをつくる
間違っても自分で新しくパーツ作らないでくださいね。笑　大きさを変えるのは問題ないのですが、基本的にトレースしたものをそのまま使います。トレースしたパーツの中から、目的に合うやつをコピーアンドペースト。なければPinterestとかDribbleで探してトレースしてコピーアンドペースト。

トレースに関しては、こちらの記事を見てみてください！

◎おまけ：リデザインで役立つnote一覧
・配色について
・デザインの引き出しがないときに参照するリソース
・作ったデザインをスマホにリアルタイムで映しながら作業できるSkala Preview

STEP4：フィードバックをもらえる環境を見つける

身近に良いフィードバッカーがいる環境をどうにかつくるのが良いUI制作には必要だと思うんですが、独学だと難しいですよね。おそらくSTEP3までやりきったらある程度のアウトプットになると思いますが...この解決策は今の自分にはわからないのでわかったら記事にしますね。とりあえずTwitterに流してみるとかなのかな〜　ん〜　

まとめ

今回はUIデザインを独学で勉強する方法を考えてみました。自分も勉強したいと思ったときに、たけてつさんの記事以外にこういう情報がなくて困ってたので... 　。ひとまずここで書いてる内容は全部やってみて、自分の弱いところを補っていくのが良さげです。

読んでくださりありがとうございます！
Twitterもどうぞよろしくお願いします〜
👉https://twitter.com/_aaaaa_design