デザインを学ぼう!chot.designの使い方

2-3. UI/UXデザイナーを目指す人向けおすすめの勉強法

  • UIデザイン
  • UXデザイン

未経験からUI/UXデザイナーを目指す人に向けて、おすすめの勉強法を解説します。当サイト内のレッスンだけでなく、独学する際のコツ、参考の本なども紹介します。

公開日:2019/05/08最終更新日:2021/01/28

1.UI/UXデザイナー、未経験からでも大丈夫?

未経験からでもUI/UXデザイナーになれますか?」と質問されることがあります。その答えはもちろん「YES」です。

しかし、何もしないでUI/UXデザイナーになれるわけではありません。ツールの使い方や制作の流れを勉強して何かを作れるようにならなければ、会社で働いたり依頼を受けて仕事をすることはできません。

またWebデザイナーに比べると求人の数も少ないため、ハードルは若干上がります。

では、どうやってスキルを身に着けていけば良いのでしょうか?

chot.designでは以下のような流れで勉強することをおすすめしています。

  • デザインの考え方を知る
  • ツールの使い方を覚える・慣れる
  • 写経(デザイントレース)する
  • 大きな成果物に挑戦する

2.デザインの考え方を知るのにおすすめのカリキュラムと本

chot.designではデザインの考え方を知るためのカリキュラムとして『はじめてのデザイン 〜デザインの基本・考え方〜』を用意しています。

デザインとはそもそも何なのか?そしてデザインの基礎的な知識、考え方などを体系的にまとめたものです。

 

またさらに詳しく勉強したいという方にはこちらの『ノンデザイナーズ・デザインブック』という本もオススメです。非常に人気な本で、何度も重版を重ねています。図解も多く、優しく丁寧に書かれた大変読みやすい本です。


amazonで購入する >>

ヒューマンインターフェースガイドラインを読む

デザインに関する基本的なことがわかったら、Appleが提供しているヒューマンインターフェースガイドライン(HIG)を読んでみましょう。これはAppleが開発者向けにどのようなデザインでアプリを作るとより使いやすいかを示した指針です。

Human Interface Guidelines
https://developer.apple.com/design/human-interface-guidelines/

こちらは英語で提供されているため、少し難しいかもしれません。

日本語での要約版がありますので、こちらで軽く把握したり
https://developer.apple.com/jp/design/tips/

有志の方が日本語訳を出していたりしますので、「HIG 日本語」などで検索して探してみましょう。

他にもAndroidの開発者向けガイドラインや、WindowsのUXデザインガイドラインなど、各プラットフォームごとにガイドラインが出ています。

3.どんなツールを使えばいい?Sketch・Figma・Adobe XD、それぞれの勉強法と使い所

UI/UXデザイナーとして要求される制作スキルはUIデザイン・プロトタイピング・ユーザーや市場の調査などがあります。それぞれ作り方や使うツールが違いますので、それぞれの勉強方法と使い分けの仕方を解説します。

デザインツールの選定方法

UI/UXデザインのツールは、いろいろな会社から提供されており、どのツールがスタンダードとは言えない状況です。特に人気だったのはSketchというツールでしたが、Macのみ・英語版のみということもあって、後発のAdobe XD(日本語サポートあり)やFigma(リアルタイムで共有できる)などのツールもじわじわとシェアを伸ばしているようです。

どのツールにも良いところがあり、現場の状況によって使われるツールは変わります。しかし基本的なUIデザインの機能は大体同じですので、どれか1つをしっかりと使いこなせるようになれば、他のツールへのスイッチも容易でしょう。

幸いどのツールも一部機能を無料で使えるので、少し触ってみてしっくり来るものを勉強していきましょう。

Sketchで出来ること

Sketchは2010年以降、スマホやWebのUIデザインに特化したツールとして、多くのUI/UXデザイナーに愛されているツールです。図形やテキストの配置・レイアウトや、高機能なコンポーネント化(ボタンやパーツなどの使い回し)、プロトタイプ(ページの切り替え)などの機能が備わっています。さらにサードパーティによるプラグイン開発ができるようになっていて、このプラグインが沢山の開発者によって提供されているのも人気の秘訣です。

最近は機能が多く初心者には敬遠されがちですが、使いこなせれば非常にスピーディにUIデザインの作業ができるはずです。

chot.designではSketchの使い方が勉強できます。

Adobe XDで出来ること

Adobe XDはSketchに比べると後発のツールですが、Adobeも非常に力を入れて開発を進めているようで、毎月のようにアップデートが行われています。画像加工やイラストを描くことはできませんが、レスポンシブデザイン(スマホやPCなど画面幅が違っても整った形で見せる手法)に対応していたり、ページの切り替わりを再現(プロトタイプ)することができます。Photoshop・Illustratorとの連携機能も充実していて、今後ますます現場での活用シーンが増えていくと考えられます。

chot.designではAdobe XDの使い方が勉強できます。

Figmaで出来ること

ここ最近、非常に人気が出てきているのがこの「Figma」です。Figmaは例えるならSketch + Google Docsのような感じで、多人数で同時にデザインを編集することが出来るのが大きな特徴です。まるでチャットをするかのようにユーザー同士で1つのデザインを見ながら、編集したりコメントすることができます。これまでもSketchで作ったデザインをInVisionという共有サービスで見せあったりすることはできましたが、同時に編集・コメントできるのはFigmaだけです。

chot.designではFigmaの使い方が勉強できます。

4.普段使っているアプリのUIをトレースしてみる

ツールがある程度使えるようになったら、TwitterやInstagramなど、みんなが普段よく使っているようなアプリのUIをトレースしてみましょう。

スマホで画面のスクリーンショットを撮り、並べながら写経のつもりで細かいところまで真似をしながら作ってみましょう。

 

また、様々なアプリのUIデザインを紹介した本「UI GRAPHICS」を見ながら、トレースしてみたいアプリを探してみると良いでしょう。


【新版】UI GRAPHICS 成功事例と思想から学ぶ、これからのインターフェイスデザインとUX

5.Daily UIにチャレンジする

トレースに慣れてきたら、いよいよ何かオリジナルのアプリのデザインをしてみましょう。

おすすめなのが、Daily UIというメールマガジンのサービスです。このメールマガジンは平日に毎日100日分のUIデザインについてのお題が届くというものです。無料で利用できるので、ぜひ使ってみてください。

https://www.dailyui.co/

Twitterで「#DailyUI」を検索すると、他の人が作ったDaily UIを見ることができます。

自分でも作ってみたUIデザインをTwitterで投稿してみましょう。誰かがフィードバックをくれるかもしれません。

6.その他、UI/UXデザインの勉強に役立つおすすめ本

UXデザインの教科書

UXデザインについて体系的に解説されている本です。


amazonで購入する >>

UIデザイン みんなで考え、カイゼンする。

デザインはデザイナー1人が提案するものからチームで考えるものというふうに変わりつつあります。どのようにチームでUIデザインを作っていくのか体系的に書かれた本です。


amazonで購入する >>

 

さて、一通りUI/UXデザイナーになるための勉強法を解説しました。私達の身の回りでは、スマートフォンだけでなく様々なウェアラブルデバイス・IoT製品・キャッシュレス・コネクテッドカーなどの新しいデジタル製品で溢れてきています。今後もますますUI/UXデザイナーは注目を浴びるでしょう。ぜひUI/UXデザイナーを目指して、毎日ちょっとずつ、コツコツと練習をしてみてください。

理解度チェック







このレッスンの著者