UI/UXデザインの勉強方法は?おすすめの本や学習サイトも紹介!

UI/UXデザインの勉強方法は?おすすめの本や学習サイトも紹介!
ABOUT ME
ライター shin
航空系の会社に勤務した後、フリーランスとしての活動を開始。現在は主にWebメディアに携わりつつ海外を転々としている。
エディター Tomomaru
フリーランスWeb編集・コンテンツディレクター兼たまにライター。 略歴は、アパレル→事務職を経てWebデザインをスクールで学んだのち、SHElikesと出会いWeb制作会社でマーケOLしてみたり。結果、書くことが天職だと思い込み、副業ライター道を歩んでいる。次なる野望は絵描きになること。思い込むのは自由です。

UI/UXデザイナーを目指すにあたって、以下のような悩みを抱える方はいるのではないでしょうか。

「UI/UXデザインの勉強方法が分からない」
「UI/UXデザイナーになるには、どのようなスキルが必要?」

そこで、本記事ではUI/UXデザインの勉強方法を解説。また、UI/UXデザイナーを目指すうえでおすすめの書籍や学習サイトも紹介します。

最後までチェックし、UI/UXデザイナーに必要な知識やスキルの習得を目指しましょう。

UI/UXデザインとは?

まず、UI/UXデザインとは何かについて解説します。UIとUXの意味は、以下の通りです。

  • UI:「User Interface(ユーザーインターフェース)」の略で、Webサイトやアプリなどのサービスやプロダクトとユーザーの接点を指す。たとえば、色やレイアウト、文字のフォントなどが当てはまる。
  • UX:「User Experience(ユーザーエクスペリエンス)」の略で、ユーザーが商品やサービスを通じて得られる体験や感情を指す。例としては、「レイアウトが整っていて情報を見つけやすい」「写真が豊富なECサイトだからショッピングが楽しい」などがあげられる。

つまり、UIはWebサイトやアプリの見た目、UXは使用感や顧客体験を指すといえます。

UI/UXについての詳細は以下の記事で解説しているので、チェックしてみてください。

あわせて読みたい
UI/UXとは?違いや意味、デザインのポイントについて解説
UI/UXとは?違いや意味、デザインのポイントについて解説Webサイトやアプリなどを設計する際に使われる、UIとUX。よく聞く言葉ではありますが、以下のような疑問を抱く方はいるのではないでし…

UI/UXデザインの需要

UI/UXデザインの需要は、今後も高いと考えられます。その理由は、インターネットやスマートフォンが普及した昨今では、Webサイトやアプリなどは必要不可欠だからです。

また、経済産業省によると、Webデザイナーなど情報通信に関わる労働者の数は2020年から2050年までに約7%増加する必要があるとされています*1。そのため、UI/UXデザイナーとして活躍するチャンスは今後もあるといえるでしょう。

UI/UXデザインの勉強方法とは?

ここからは、UI/UXデザインの勉強方法を見ていきましょう。今回は以下7つの方法を紹介します。

  • まずはデザインの基礎知識を身につける
  • 本で学ぶ
  • 学習サイトを活用する
  • 資格の勉強をする
  • スクールで学ぶ
  • UI/UXデザインの事例を参考にする
  • 実際のデザインをトレースしてみる

各方法を詳しく説明します。

デザインの基礎知識をつけてからスタート

UI/UXデザインを勉強するなら、まずはデザインの基礎知識を身につける必要があります。たとえば、デザインの基本原則である「近接」「整列」「コントラスト」「反復」の知識を習得しておくとよいでしょう。

  • 近接:関連性のある情報を近くに配置する
  • 整列:要素に一体性や統一感を持たせる
  • コントラスト:情報に強弱をつけ、違いを明確にしたり情報に優先度をつけたりする
  • 反復:デザインの要素を繰り返して一貫性を持たせる

ちなみに、Webデザインの知識やスキルは独学でも習得を目指せます。詳しくは、以下の記事をチェックしてみてください。

あわせて読みたい
Webデザイン初心者におすすめの勉強法!独学でスキルアップを狙う5つの方法
Webデザイン初心者におすすめの勉強法!独学でスキルアップを狙う5つの方法WebデザイナーはさまざまなWebサイトの制作を行う職業です。Webデザイナーのスキルを身に付ければ、働き方の選択肢も大きく広がりま…

本で学ぶ

UI/UXデザインは、本で勉強するのもおすすめです。今回は3冊紹介するので、自分に合うものを手にとってみてください。

『はじめてのUIデザイン』 著: 池田 拓司、宇野 雄、上ノ郷谷 太一 ほか

UIデザインの基本的な知識や考え方が身につくことを目的として書かれた本です。デザインの現場で活躍するプロの考えや視点を学べます。

UIの基礎からデザインを作る方法までを体系的に学習することが可能です。UIデザイナーになりたい方やUIデザインの仕事内容について知りたい方は、手にとってみてください。

created by Rinker
¥100 (2024/05/26 02:33:06時点 Amazon調べ-詳細)

『UXデザインの教科書』 著: 安藤 昌也

千葉工業大学のメディア工学科で教授を務める安藤昌也さんによる、UXに特化した1冊です。優れたUXをデザインするための理論やプロセス、手法などを体系的に学べます。

アカデミックな内容が含まれているため、UXについてより深く理解できるでしょう。小手先のテクニックだけではなくUXデザインの本質を知りたい方におすすめです。

created by Rinker
¥3,300 (2024/05/26 02:33:06時点 楽天市場調べ-詳細)

『UIデザインの教科書 マルチデバイス時代のインターフェース設計』 著: 原田 秀司

UIにおけるデザインの定義や人間の認知特性、デザインを形にする方法などが体系的にまとめられています。デザイナーはもちろん、エンジニアやディレクターなどUIの制作に関わるさまざまな方を対象にした1冊です。

UIデザインの基礎を身につけたい方や、分かりやすくて使いやすいUIのデザイン法を知りたい方に適しています。

学習サイトで学ぶ

学習サイトを活用してUI/UXデザインを勉強するのもよいでしょう。たとえば、オンライン学習プラットフォームのUdemy(ユーデミー)には初心者向けのものから実践的なスキルの習得を目指せるものまでさまざまな講座があり、デザインの現場で活躍するプロから学べます。

また、各講座は購入後の視聴期限がなく、自分のペースで学習を進めやすいのもメリットの1つです。

資格の勉強をする

UI/UXデザイナーに必須の資格はありませんが、資格の勉強をするのはおすすめです。資格試験への合格という明確な目標は、勉強のモチベーション維持につながるうえ、資格を取得すればスキルを保有していることの証明になります。

UI/UXデザイナーにおすすめできる資格には、「ウェブデザイン技能検定」「Google UX Design Professional Certificate(Google UX Designプロフェッショナル認定)」などがあります。

スクールで学ぶ

UI/UXデザインを学ぶなら、スクールの受講もおすすめです。オンラインスクールなら時間や場所に縛られず学習を進められるため、仕事や学校、家事、育児などと両立しやすいでしょう。

たとえば、女性向けキャリアスクールのSHElikes(シーライクス)には「UIデザインコース」「UXデザインコース」があり、UI/UXの基本やデザインツールの使い方などをオンラインで学べます。また、全45以上の豊富な職種スキルが定額・学び放題で、IllustratorやFigmaなどを学べるコースもあるため、デザインに関する幅広いスキルの習得を目指せます。

女性向けキャリアスクールSHElikes無料体験レッスンはこちら

UI/UXデザインの優れた事例を調べる

優れたUI/UXデザインの事例を参考にするのも勉強方法の1つです。使いやすいと感じるアプリや人気の高いWebサイトなどを見て、どのようにデザインされているかチェックしてみましょう。

なお、レイアウトやフォントなどに加えて、「ターゲットは誰なのか」「ユーザーのどのような行動や心理を反映しているのか」などにも着目するのが大切です。

実際のサイトをトレースしてみる

Webサイトをトレースしてみるのも、UI/UXデザインのスキルを身につける方法の1つです。優れたWebサイトを細部まで忠実に真似することで、良いデザインとは何かが見えてきたり、自身のデザインスキルの向上が期待できたりします。

「なぜこのレイアウトなのか」「なぜユーザーは価値を感じるのか」などを意識しながら、デザインをトレースしてみてください。

UI/UXデザインにおすすめのツール

UI/UXデザインの勉強をする際は、ツールやソフトを準備しておくのがおすすめです。結論からいうと、以下の3つがあるとよいでしょう。

  • Adobe XD
  • Figma
  • Sketch

それぞれを詳しく説明します。

Adobe XD

Adobe XDは「Adobe」社が提供しているソフトで、Webサイトやアプリなどのデザインができます。3Dデザインを簡単に作成できたり、レスポンシブ対応でデバイスごとに適切なサイズに調整できたりなど、便利な機能がそろっています。

また、画像編集に適したPhotoshopやデザイン制作ができるIllustratorなどと連携できるため、ニーズに合うデザインを作りやすいでしょう。

Figma

Figmaはブラウザ上でデザインが可能なツールで、ほかのユーザーと共同で作業ができます。チームメンバーが同時にプロジェクトに取りかかれるため、作業内容の確認やフィードバックのやり取りなどをスムーズに行えるでしょう。

「スタータープラン」なら無料で使えるので、気軽に使いやすいといえます。有料プランを選ぶと、音声通話ができたりチームを無制限で作れたりなどの機能が追加されます。

Sketch

Sketchは、UIデザインに便利なツールです。ツールバーのカスタマイズやテンプレートの設定など、作業効率のアップが期待できる機能が搭載されています。

また、さまざまなプラグインを活用することで、デザインの幅が広がったり作業がしやすくなったりします。ただし、Macのみの対応で、Windowsでは使えない点には注意が必要です。

UI/UXデザイナーに必要なスキル

ここでは、UI/UXデザイナーに必要なスキルを紹介します。具体的には、以下3つのスキルがあげられます。

  • 基礎的なデザインスキル
  • マーケティングスキル
  • コミュニケーションスキル

各スキルを詳しく見ていきましょう。

基礎的なデザインスキル

まず、基本的なデザインスキルがUI/UXデザイナーには必要です。前述したデザインの基本原則に加えて、配色やレイアウトなどの知識や、PhotoshopやIllustratorのようなソフトを使用するスキルなどを身につけておくことが求められます。

また、HTMLやCSSなどコードの知識もあるとよいでしょう。

  • HTML:Webページの文章を構造化して見出しや本文などを明確化するマークアップ言語
  • CSS:Webサイトのサイズ、レイアウト、色などの見た目を装飾するスタイルシート言語

UI/UXデザイナーにコーディングのスキルは必須ではありません。しかし、コードへの基本的な理解があれば、Webサイトを制作する際にデザイン実装のチームと意思疎通が図りやすくなったり、活躍の場が広がったりするでしょう。

マーケティングの知識

UI/UXデザイナーを目指すなら、マーケティングの知識を習得しておくとよいでしょう。その理由は、市場調査やほかのWebサイト、アプリの分析などをもとにデザインを制作するケースがあるからです。

また、デザインが完成したあとは成果物の分析を行い、期待通りの結果が出ない場合は改善策を講じることが求められるため、マーケティングの知識が必要だといえます。

コミュニケーション能力

UI/UXデザイナーには、コミュニケーション能力が欠かせません。なぜなら、クライアントとのやり取りをしたり、ディレクターやマーケター、エンジニアなどと協力してプロジェクトを進めたりするからです。

他者と良好な関係を築くことはもちろん、「自分の考えを分かりやすく相手に伝える」「相手の意見を正確に汲み取る」などのスキルも求められます。

あわせて読みたい
UI/UXデザイナーとは?仕事内容や年収、将来性、なり方まで徹底解説
UI/UXデザイナーとは?仕事内容や年収、将来性、なり方まで徹底解説UI/UXデザイナーは、Webサイトをはじめとする商品・サービスの開発において、ユーザーにとって使いやすいシステムやビジュアルをデザ…

UI/UXデザイナーのロールモデル

最後に、UI/UXデザイナーへの転職を実現させた方のストーリーを紹介します。これからUI/UXデザインの勉強を始める方は、ぜひ目を通してみてください。

やりがいも収入も失った私が、やりたいことを見つけて年収約200万UPでデザイナー転職を叶えるまで ふかさん

IT企業でシステムエンジニアとして働いていたふかさんは、ルーチンワークをこなす日々を送るなかで、Webデザイナーの仕事に挑戦したいと思うようになりました。そこで、SHElikesへ入会し、Webデザインの勉強を始めます。

初めはWebデザイナーを志望していましたが、UI/UXデザインコースの受講がきっかけでUI/UXデザイナーへの転職を決意。もくもく会*を活用することで勉強時間を確保し、UI/UXデザインの学習を進めたといいます。

その結果、UI/UXデザイナーへの転職を叶え、やりたいことに出会えたうえに収入もアップしたそうです。

*講師やほかの受講生と一緒に行うオンライン勉強会。コースにより提供状況は異なります。

インタビュー記事はこちら
やりがいも収入も失った私が、やりたいことを見つけて年収約200万UPでデザイナー転職を叶えるまで
やりがいも収入も失った私が、やりたいことを見つけて年収約200万UPでデザイナー転職を叶える…Webデザインやマーケティングなど、38の職種スキルが学び放題の女性向けキャリアスクールSHElikes。たくさんの方がやりたいこと…

自分に合ったUI/UXの勉強方法を見つけて、UI/UXデザイナーを目指そう

UI/UXデザインの勉強方法は、書籍や資格の勉強、スクール、学習サイトなどさまざまです。本記事で紹介した勉強方法を参考にし、自分に合う方法で学習を進めてみてください。

もしUI/UXデザインの勉強方法に迷う場合は、女性向けキャリアスクールのSHElikesがおすすめです。UI/UXデザインはもちろん、Webデザインやマーケティング、Figmaなど、デザインに関する幅広いスキルの習得を目指せます。また、一緒に頑張る仲間と学習状況をシェアできるコーチング*が月1回あるので、モチベーションを維持しやすいでしょう。

無料体験レッスンを実施しているので、ぜひ参加してみてはいかがでしょうか。

*SHElikesオリジナルのコーチング。理想の人生を棚卸しして、毎月の目標を立て、先月の振り返りを行います。グループコーチングで月に1回、オンライン限定です。

女性向けキャリアスクールSHElikes無料体験レッスンはこちら

※出典
*1:経済産業省「未来人材ビジョン」p25より

※ 掲載している情報は記事更新時点のものです。