現役デザイナーが教えるUIデザインの勉強方法

こんにちは。デザイナーのtamuです。

突然ですが、UIデザインをイチから勉強するにはどうすればよいと思いますか？

サービス開発の現場でも「UIデザイン」という言葉が使われるようになって、早くも５年以上は経ったでしょうか。

しかし多くの現場では、未だに「UIデザイン＝画面のビジュアルを作ること」と、表面的な理解しかされていません。

また企業の採用においても、IT企業を中心にUIデザイナーの求人数は右肩上がりで増え続けていますが、フタを開けてみれば仕事内容は従来と同じ。

実質的には、ただのWebサイト制作だったり…。

このように、UIデザインという言葉がただのバズワードとして認識されている場合も少なくありません。

そこで今回は、現役デザイナーのわたしが考えた、UIデザインの勉強方法についてお伝えしたいと思います。

「UIデザインに興味はあるけど、何から手を付けていいのか分からない！」という方は、ぜひ参考にしていただけたらと思います。

そもそもUIデザインとは？

まずは、UIという言葉の意味から確認しておきましょう。

冒頭でも述べたように、近年ではWebサービスやモバイルアプリ開発の現場で「UIデザイン」という言葉がよく用いられるようになりました。

そのため、つい「UIデザイン＝画面のビジュアルを作ること」と誤解されがちなのですが、厳密には違います。

では、UIとはどういう意味なのでしょうか？次に、わたしが大学時代に教授から教わった考え方をご紹介します。

UIとはUserInterfaceという言葉の略称ですが、Userは「使う人」という意味です。これは問題ないと思います。

次にInterfaceという言葉ですが、「inter（内側）」と「face（外側）」という２つの意味から成り立っているように、「内側と外側をつなぐ」といった意味合いを持っています。

以上を踏まえて、UIデザインの意味を身近なスマホアプリで例えるならば、次のようになります。

「ユーザーが操作する行為（外側）と、システムがユーザーの操作に対して機能を返す行為（内側）を、どうやってスムーズにつなぐかを設計すること。」

UIデザインの本質は見た目にあらず

上記の理解を踏まえると、UIデザインの本質は見た目だけにあるのではないということが分かります。

UIデザインが語られるときによく出てくる「配色」や「動き」といった見た目の要素も、見た目を美しくするのが目的で設計されているわけではありません。

あくまで、ユーザーがいかに快適にシステムの機能へアクセスできるようにするかが目的であって、ただ「見た目をキレイにしたい」という装飾的な理由が全てではないのです。

美しい見た目は、「ユーザーが画面を操作する行為（外側）と、システムがユーザーの操作に対して機能を返す行為（内側）を、どうやってスムーズにつなぐかを設計すること。」を考え抜いて設計した結果として生まれた、副産物とも言えるでしょう。

UIデザインの学び方

では、本題に入りましょう。

どうしていきなり本題に入らず、UIの意味について書いたのかというと、そもそものUIの意味を理解していなければ、結局スタイリングなど表面的な理解に収まってしまうと思ったからです。

やはり、そもそもの概念について理解してから実際の技術を学ばなければ、本当にUIデザインの理解にはつながりません。

１．根本思想について知る

UIデザインを勉強するための「事始め」として、まずは次の本を読んでみましょう。

誰のためのデザイン？　増補・改訂版　―認知科学者のデザイン原論

この本は、工業デザインにおける「人間中心設計」の考え方を広めた、デザインの古典的名著です。

デザインとは、そもそもどのような意図をもって行われるのか。

デザイナーとして、ユーザーにプロダクトを快適に使用してもらうためには、どのような事に気をつけなければならないのかといった、UIデザイナーとしての考え方の基礎を学ぶことができます。

２．代表的なデザインガイドラインを読む

次に、世界的な企業が公開している、UIデザインに関するガイドラインを読んでみましょう。

代表的なのはAppleの「iOSヒューマンインターフェースガイドライン」と、Googleの「マテリアルデザインガイドライン」です。

• iOSヒューマンインターフェースガイドライン
• マテリアルデザインガイドライン

注）上記の日本語ドキュメントの場合、情報が古くなっている可能性もありますので注意してください。可能であれば英語のオリジナルの方を参照しましょう。

AppleもGoogleもIT界の巨人として知られていますが、デザインに関しても両社は最先端を走っています。

ガイドラインの素晴らしいところは、これまでフワッとした概念でしか語られてこなかった「良いデザイン」の条件を完全に言語化し、体系的にまとめているところです。

このガイドラインに書いてあることが全てUIデザインの原則として正しいわけではありませんが、UIデザインで最先端を走っている企業の考え方をインストールすることは非常に役に立ちます。

（もちろん、実際に現場でiOS、Androidアプリを作る際にも）

３．デザインパターンを把握する

UIデザインを考えるとき、全く知識が無い状態から考えるのは難しいものです。

そんなとき、主要なデザインパターンをあらかじめ把握しておくことで、スムーズにUIデザインができるようになります。

デザインパターンを学べる書籍としては、次の２冊がおすすめです。

デザイニング・インターフェース 第2版 ―パターンによる実践的インタラクションデザイン

モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集

デザインパターンとは、「繰り返し起こる問題を解決するための解法の型」であり、エンジニアリングの文脈でもよく使われる言葉です。

例えばUIデザインの現場でも、「このボタンはどうやって配置すればいいの？」「こういう画面遷移のさせ方でいいの？」といった疑問は度々生じます。

こんなとき、デザインパターンをあらかじめ把握しておけば、すぐに解決できるようになるのです。

使いやすく優れたUIデザインのパターンは、先人たちの試行錯誤や研究によって既に体系化されているのです。

そうした先人たちの知恵から学びましょう。

４．実践的な技術を学ぶ

ここまで来れば、UIデザインについて基本的な知識はかなり身についているはずです。

そこで、いよいよ実際にデザインしていくためのアプリケーションの使い方を勉強していきたいのですが、現状では少しハードルが高くなっています。

例えば、近年のWebサービスやアプリ開発の現場でよく使われている「Sketch」というアプリケーションがあるのですが、こちらはPhotoshopやIllustratorなどAdobeのアプリケーションと違って、本などもほとんど出版されていません。

そこでおすすめしたいのが、TechAcademy（テックアカデミー）というオンラインスクールを利用する方法です。

元々プログラミング学習サービスとして有名でしたが、最近ではデザイン分野のコースにもかなり力を入れており、去年ついにアプリUI/UXデザインコースも公開されました。

Sketchはもちろん、プロトタイピングツールのProttなど実際に現場でも使われているソフトの使い方が学べるので、かなりおすすめです。

オンラインスクールということで、スキルアップしたい社会人や学生向けに作られており、自身のライフスタイルに合わせてプランを選ぶことができるという点も魅力です。

例えば、学生で集中して時間が取れるのであれば「４週間プラン」を。

社会人で毎日１時間程度しか時間が取れないのであれば「12週間プラン」を選ぶことで、働きながら無理なく学習を続けられるよう設計されています。

具体的な料金やカリキュラムなどは、上記リンクの公式サイトから確認できますが、その際、まずは無料の「オンライン説明会」の動画から見てみてください。

説明会動画を見れば、どんな事が学べるのかといった全体像も掴めますので、興味がある方は、一度説明会だけでも覗いてみてください。

５．知見をアウトプットする

UIデザインの理論であれ技術であれ、アウトプットしなければ知識は定着しません。

勉強したことは、ブログに書いたりTwitterでつぶやいたりして積極的にアウトプットしましょう。

実はこのブログも、わたしが本を読んで考えたり、仕事で学んだことを定着させる目的で書いていたりします。

学んだことや考えたことを言語化することによって、仕事でも自分の考えを順序立てて説明できるようになるので、ぜひあなたも試してみてください。

おわりに

いかがでしたか？今回はUIデザインを学ぶために、主に独学での勉強方法についてお伝えしました。

しかし、なんだかんだで一番手っ取り早いのはやはりUIデザインが盛んな会社に転職することかもしれません。

ただし、UIデザインはあくまで手段に過ぎません。

重要なのは、どうすればユーザーにとって素晴らしいプロダクトにできるかを考え続けて、それをデザインに反映させようとする姿勢ではないでしょうか。

そんな中でも、今回の記事がこれからUIデザインを学ぼうとする方にとって役に立てば幸いだと思っています。