未経験からUIデザイナーになるためにやってほしい5つの勉強方法

UIデザイナーになりたいけど、何をすればよいのか分からない…。

デザイナー志望の方をメンタリングさせていただいてきた中で、多くの方から「独学でUIデザインを勉強するにはどんな方法が良いのか？」という質問をいただきます。

そこで今回は、独学でUIデザインを習得し、**UIデザイン歴10年以上で現在はスタートアップでデザイン責任者を務める私が考える、最も効果的かつ最速な「独学でUIデザインを勉強する方法」**について解説します。

ちゃんと実践すれば、最短半年でUIデザイナーになることも可能です。

これからUIデザインを習得して、UIデザイナーになりたいという方の参考になれば嬉しいです。

UIデザイナーとは
UIデザイナーになるには？
未経験から独学でUIデザインを勉強するステップ
0. UIデザインの学習環境を整備する
1. UIデザインツールに慣れる
おすすめのUdemy講座
2. UIデザインの前提となる基礎知識を学ぶ
2-1. デザインの4大原則を理解する
2-2. 本でUIデザインの基本を学ぶ
2-3. UIガイドラインを読んでUIデザインの考え方を学ぶ
UIデザインにあたってWebデザインの知識は必要？
3. 良いデザインを知り、審美性を養う
3-1. 参考ギャラリーサイトで良いデザインをインプットする
4. UIトレースで基本のスキルを鍛える
UIトレースとは
デザインツールの使い方を学べる
UIパーツ・レイアウト・表現についての理解を深められる
5. UIをリデザインする・架空のプロダクトをデザインする
デザインする上で意識しておくと良いこと
UIのお題を出してくれるおすすめサイト
現役UIデザイナーが提供する、デザイナー向けメンタリング

UIデザイナーとは

UIデザイナーは、アプリやWebサービスなどのUI（ユーザーインターフェース）をデザインすることが仕事です。

アプリやWebサービスを利用するユーザーの体験（＝UX、ユーザーエクスペリエンス）を高めるために、アプリケーションの利用目的に沿った最適なUIを考え、形にしていきます。

UIデザイナーはプロジェクトの戦略段階から関わり、サービス設計、画面設計、ビジュアル設計を中心に担当します。

業務としては比較的多岐に渡るため、UIデザイナーによってサービス設計、画面設計、ビジュアル設計のどこに強みを持つのかも異なります。

ビジュアルデザインやアニメーションデザインを得意とする人、要件定義や情報設計を得意とする人、情報設計を画面設計に落とし込んでいくのが得意な人など、様々な特性のUIデザイナーがいます。そのため、個人の強みを生かして活躍することができます。

UIデザイナーになるには？

独学でUIデザインを勉強するといっても、「どこから手を付ければ良いのか」というところで悩まれる方は多くいます。

手を付けるところを間違えると遠回りになり、結果として挫折してしまったりもします。ですので、未経験から独学でUIデザイナーになるためには、適切な順序でUIデザインについて学び、手を動かしていくことが大切です。

UIデザインを効果的に独学で勉強するためのステップは、次のような順番が近道です。

未経験から独学でUIデザインを勉強するステップ

UIデザインツールに慣れる
UIデザインの前提となる基礎知識を学ぶ
良いデザインを知り、審美性を養う
UIトレースで基本のスキルを鍛える
UIをリデザインする・架空のプロダクトをデザインする

まずはじめにUIデザインの基礎知識を学んだ上で、そこから少しずつ手を動かし始め、最終的に自分でゼロからUIをデザインしていけるようになることを目指します。

それではここから、それぞれのステップについて詳しく解説していきます。

0. UIデザインの学習環境を整備する

UIデザインを学ぶにあたっては、必ずPCが必要です。

ではどのPCを購入すればよいのかというと、OSはWindowsではなくMacがおすすめです。

というのも、多くのデザイン会社ではMacが使われており、ソフトもMacに最適化されたものが多いからです。

入門機として比較的お手頃で購入できるMacbook Airでも十分な性能になっているので、まだMacを持っていない方はMacbook Airを購入するのが良いかと思います。

%3Cdiv%20class%3D%22iframely-embed%22%3E%3Cdiv%20class%3D%22iframely-responsive%22%20style%3D%22height%3A%20140px%3B%20padding-bottom%3A%200%3B%22%3E%3Ca%20href%3D%22https%3A%2F%2Fryota-kikuchi.com%2Fblog%2Fm1-macbook-air-2020%22%20data-iframely-url%3D%22%2F%2Fcdn.iframe.ly%2Fapi%2Fiframe%3Furl%3Dhttps%253A%252F%252Fryota-kikuchi.com%252Fblog%252Fm1-macbook-air-2020%26amp%3Bkey%3D2a7aa6aa4e2c53ca7a7468311ef03b58%22%3E%3C%2Fa%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%3Cscript%20async%3D%22%22%20src%3D%22%2F%2Fcdn.iframe.ly%2Fembed.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E

1. UIデザインツールに慣れる

UIデザイナーになるにあたって、まず必要なことは、UIデザインツールに慣れ、ツールで最低限のデザイン作業ができるようになることです。

IT業界で実際に業務で活用されているツールは以下のものになります。

Figma
Sketch
Adobe Photoshop
Adobe Illustrator
Adobe XD

IT業界では、圧倒的にFigmaが活用されているケースが多いです。そのため、まずはFigmaをある程度使いこなせるようになることをおすすめします。

デザインツールの使い方を効率よく学ぶには、Udemyなどのオンライン動画講座を活用することをおすすめしています。

2. UIデザインの前提となる基礎知識を学ぶ

UIデザインのスキルを習得していくためには、まず前提となる知識を学ぶことが大切です。

UX（ユーザー体験）とは何か
UI（ユーザーインターフェース）とは何か
HCD（人間中心設計）とは何か
デザインの4大原則
プラットフォーム別デザインガイドライン
ユーザビリティ

これらの基礎知識は本を読んだり、参考サイトを読んだりして理解を深めていくことをおすすめします。

2-1. デザインの4大原則を理解する

デザインには、WebデザインやUIデザインなどの区別を問わず、すべてのデザインにつながるデザインの4大原則というものが存在します。

デザインの4大原則は以下の4点から成り立っています。

近接
整列
強弱
反復

まずはこのデザイン4大原則を理解することで、デザインのレベルがグッと上がります。

詳しくは別の記事で解説しているので、ぜひ目を通していただけると嬉しいです。

%3Cdiv%20class%3D%22iframely-embed%22%3E%3Cdiv%20class%3D%22iframely-responsive%22%20style%3D%22height%3A%20140px%3B%20padding-bottom%3A%200%3B%22%3E%3Ca%20href%3D%22https%3A%2F%2Fryota-kikuchi.com%2Fblog%2Fdesign-4-principle%22%20data-iframely-url%3D%22%2F%2Fcdn.iframe.ly%2Fapi%2Fiframe%3Furl%3Dhttps%253A%252F%252Fryota-kikuchi.com%252Fblog%252Fdesign-4-principle%26amp%3Bkey%3D2a7aa6aa4e2c53ca7a7468311ef03b58%22%3E%3C%2Fa%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%3Cscript%20async%3D%22%22%20src%3D%22%2F%2Fcdn.iframe.ly%2Fembed.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E

2-2. 本でUIデザインの基本を学ぶ

別の記事でUIデザインの独学におすすめな本について詳しく紹介していますので、書籍選びの参考にしてみてください。

UIデザイン入門書「はじめてのUIデザイン」【無料】

「はじめての」と付いているように、デジタルプロダクトのUIデザインを学びたい人を対象に、基本的な知識や考え方がひと通り盛り込まれている本です。

「UIデザイナーとは何をする人なのか」という前提の部分から、UIデザインをする上で欠かせないポイントや進め方まで、はじめての方でも理解しやすいようにわかりやすく執筆されています。

内容は初心者に寄り添ったものでありながらも、著者の方々はクックバッド社やヤフー社でUIデザインを実際にされてきた方々ですので、信頼が置けます。

リンク先から無料で電子書籍が読めます！

%3Cdiv%20class%3D%22iframely-embed%22%3E%3Cdiv%20class%3D%22iframely-responsive%22%20style%3D%22height%3A%20140px%3B%20padding-bottom%3A%200%3B%22%3E%3Ca%20href%3D%22https%3A%2F%2Fui-design.studio.site%2F%22%20data-iframely-url%3D%22%2F%2Fcdn.iframe.ly%2Fapi%2Fiframe%3Furl%3Dhttps%253A%252F%252Fui-design.studio.site%252F%26amp%3Bkey%3D2a7aa6aa4e2c53ca7a7468311ef03b58%22%3E%3C%2Fa%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%3Cscript%20async%20src%3D%22%2F%2Fcdn.iframe.ly%2Fembed.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E

以下の記事でおすすめのUIデザイン参考書籍を詳しく解説していますので、そちらをご覧ください。

%3Cdiv%20class%3D%22iframely-embed%22%3E%3Cdiv%20class%3D%22iframely-responsive%22%20style%3D%22height%3A%20140px%3B%20padding-bottom%3A%200%3B%22%3E%3Ca%20href%3D%22https%3A%2F%2Fryota-kikuchi.com%2Fblog%2Fbooks-for-design-beginner%22%20data-iframely-url%3D%22%2F%2Fcdn.iframe.ly%2Fapi%2Fiframe%3Furl%3Dhttps%253A%252F%252Fryota-kikuchi.com%252Fblog%252Fbooks-for-design-beginner%26amp%3Bkey%3D2a7aa6aa4e2c53ca7a7468311ef03b58%22%3E%3C%2Fa%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%3Cscript%20async%3D%22%22%20src%3D%22%2F%2Fcdn.iframe.ly%2Fembed.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E

2-3. UIガイドラインを読んでUIデザインの考え方を学ぶ

スマートフォンのOSを開発しているAppleやGoogleは、それぞれ自社のプラットフォームでリリースされるアプリのUIについてガイドラインを設けています。

どのようなUIが、AppleやGoogleが良しとするUIなのかという、UIデザインの考え方の思想の部分を学ぶことができます。

UIデザインにあたってWebデザインの知識は必要？

グラフィックデザイナーからUIデザイナーに転身したり、デザイン未経験からUIデザイナーへの転身を志す場合、Webデザインの知識が必要かどうか気になっている方もいるかもしれません。

結論としては、絶対ではないがあったほうが良いです。

求人のなかには、Webデザインの経験を必須としている企業もありますので、あったほうが就職先の選択肢は広がります。

ですので、もしWebデザインの経験がない場合は、UIデザインの独学と併せてWebデザインを独学することもおすすめします。

%3Cdiv%20class%3D%22iframely-embed%22%3E%3Cdiv%20class%3D%22iframely-responsive%22%20style%3D%22height%3A%20140px%3B%20padding-bottom%3A%200%3B%22%3E%3Ca%20href%3D%22https%3A%2F%2Fryota-kikuchi.com%2Fblog%2Fbooks-for-webdesigner%22%20data-iframely-url%3D%22%2F%2Fcdn.iframe.ly%2Fapi%2Fiframe%3Furl%3Dhttps%253A%252F%252Fryota-kikuchi.com%252Fblog%252Fbooks-for-webdesigner%26amp%3Bkey%3D2a7aa6aa4e2c53ca7a7468311ef03b58%22%3E%3C%2Fa%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%3Cscript%20async%20src%3D%22%2F%2Fcdn.iframe.ly%2Fembed.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E

3. 良いデザインを知り、審美性を養う

UIデザインを習得していく上でもう1つ大切な基礎は、良いデザインを知り、審美性を養うことです。

UIデザインは機能面だけではなく、利用者の感性に響く表現や、ブランドイメージに沿ったクリエイティブをデザインできることが求められます。

そのため、日頃から他のデザイナーがつくったクリエイティブやUIデザインからインスピレーションを受け、自身の審美性を養うことがアウトプットのクオリティに直結します。

インスピレーションを受けた際には、そのデザインがなぜ良いと思ったのかを、できる限り細かく言葉にできるようにしましょう。

3-1. 参考ギャラリーサイトで良いデザインをインプットする

上記のほかにも、現役UIデザイナーの私がインスポレーションを得るために活用しているUIデザインギャラリーを以下の記事で厳選してご紹介していますので、ぜひご覧ください。

%3Cdiv%20class%3D%22iframely-embed%22%3E%3Cdiv%20class%3D%22iframely-responsive%22%20style%3D%22height%3A%20140px%3B%20padding-bottom%3A%200%3B%22%3E%3Ca%20href%3D%22https%3A%2F%2Fryota-kikuchi.com%2Fblog%2Fui-inspiration%22%20data-iframely-url%3D%22%2F%2Fcdn.iframe.ly%2Fapi%2Fiframe%3Furl%3Dhttps%253A%252F%252Fryota-kikuchi.com%252Fblog%252Fui-inspiration%26amp%3Bkey%3D2a7aa6aa4e2c53ca7a7468311ef03b58%22%3E%3C%2Fa%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%3Cscript%20async%3D%22%22%20src%3D%22%2F%2Fcdn.iframe.ly%2Fembed.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E

4. UIトレースで基本のスキルを鍛える

さて、ここからは実際に手を動かしながら学んでいくステップです。

UIデザインに必要な基本的なスキルを鍛えるために、「UIトレース」という手法を取り入れていくことをおすすめします。

UIトレースとは

UIトレースとは、その名の通り、お手本となるUIをトレースしていく作業です。

お手本となるUIをピックアップし、そのUIをデザインツール上で忠実に実現していきます。

UIトレースを通して、次のような効果が得られます。

デザインツールの使い方を学べる

UIをトレースする上で、UIデザインに必要なデザインツール上の機能をすべて触ることができます。繰り返しトレースをすればするほど、デザインツールの使い方が習得でき、デザイン制作がスムーズにこなせるようになります。

デザインツールを使いこなさずして、自分の思い通りのUIをデザインすることはできませんので、その意味でもUIトレースはおすすめです。

UIパーツ・レイアウト・表現についての理解を深められる

それぞれのUIには、必ずルールが存在しています。

パッと見は気づかなくても、UIトレースをしてみることで気づくポイントは多々あります。

「ボタンの高さは44pxで揃っているのか」「余白は8の倍数なのか」とか、「黒に見えてカラーコードは#222222なのか」等、多くの気付きがあるはずです。

それらの気付きは、自分で真っ白な状態からUIをデザインするときに応用できます。

Udemy

5. UIをリデザインする・架空のプロダクトをデザインする

デザインツールに慣れ、UIデザインで考慮すべきポイントもある程度分かってきたら、次は真っ白な状態からUIをデザインしていきましょう。

自分が普段から使っているアプリをリデザインしてみるか、何かお題をもとに架空のプロダクトをデザインするかは、自身のやりやすい方から進めてみると良いでしょう。

デザインする上で意識しておくと良いこと

以下のことを頭に入れてデザインすると、より学習効果が高まります。

似たようなアプリのUIのリサーチ・考察
利用シーンや利用者のイメージから機能や表示情報の優先度を考える
実際の操作性の考慮

UIのお題を出してくれるおすすめサイト

現役UIデザイナーが提供する、デザイナー向けメンタリング

UIデザイナーの僕が考える、現時点で最も効果的な「独学でUIデザインを勉強する方法」について紹介してみました。

2012年から10年以上に渡ってUIデザイナーとして活動し、現在はスタートアップでプロダクトデザイン責任者やプロダクトマネージャを務める私、キクチがあなたのキャリアビジョンの実現のためにメンタリングいたします。

すでに、

フリーランスデザイナーから上場企業のUI/UXデザイナーに転職（年収700万以上）
Web制作会社からデザインファームのUXデザイナーにジョブチェンジ
業界未経験から制作会社のWebデザイナーに転職決定

などの実績があります。

気になる方はぜひ一度、MENTAから「お試し相談」のお申し込みいただけますと幸いです。

%3Cdiv%20class%3D%22iframely-embed%22%3E%3Cdiv%20class%3D%22iframely-responsive%22%20style%3D%22height%3A%20140px%3B%20padding-bottom%3A%200%3B%22%3E%3Ca%20href%3D%22https%3A%2F%2Fmenta.work%2Fuser%2F17795%22%20data-iframely-url%3D%22%2F%2Fcdn.iframe.ly%2Fapi%2Fiframe%3Furl%3Dhttps%253A%252F%252Fmenta.work%252Fuser%252F17795%26amp%3Bkey%3D2a7aa6aa4e2c53ca7a7468311ef03b58%22%3E%3C%2Fa%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%3Cscript%20async%3D%22%22%20src%3D%22%2F%2Fcdn.iframe.ly%2Fembed.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E

RYOTA

KIKUCHI