ShellWebサービスの会社で働くデザイナーが、デザインやライフハックについてゆるく書き連ねるブログです。2017-04-05初心者必見!現役デザイナーが教えるUIデザインの勉強方法デザインこんにちは。デザイナーのtamuです。UIデザインをイチから勉強するにはどうすればよいと思いますか?サービス開発の現場でも「UIデザイン」という言葉が使われるようになって、早くも5年以上は経ったでしょうか。多くの現場では、未だに「UIデザイン=画面のビジュアルを作ること」と、表面的な理解しかされていません。企業の採用においても、IT企業を中心にUIデザイナーの求人数は右肩上がりで増え続けていますが、フタを開けてみれば仕事内容は従来と同じ。実質的には、ただのWebサイト制作だったり...。このように、UIデザインという言葉がただのバズワードとして認識されている場合も少なくありません。そこで今回は、現役デザイナーのわたしが考えた、UIデザインの勉強方法についてお伝えしたいと思います。「UIデザインに興味はあるけど、何から手を付けていいのか分からない!」という方は、ぜひ参考にしていただけたらと思います。そもそもUIデザインとは?UIデザインの本質は見た目にあらずUIデザインの学び方1.根本思想について知る2.代表的なデザインガイドラインを読む3.デザインパターンを把握する4.実践的な技術を学ぶ5.知見をアウトプットするおわりにそもそもUIデザインとは?まずは、UIという言葉の意味から確認しておきましょう。冒頭でも述べたように、近年ではWebサービスやモバイルアプリ開発の現場で「UIデザイン」という言葉がよく用いられるようになりました。そのため、つい「UIデザイン=画面のビジュアルを作ること」と誤解されがちなのですが、厳密には違います。UIとはどういう意味なのでしょうか?次に、わたしが大学時代に教授から教わった考え方をご紹介します。UIとはUserInterfaceという言葉の略称ですが、Userは「使う人」という意味です。これは問題ないと思います。次にInterfaceという言葉ですが、「inter(内側)」と「face(外側)」という2つの意味から成り立っているように、「内側と外側をつなぐ」といった意味合いを持っています。以上を踏まえて、UIデザインの意味を身近なスマホアプリで例えるならば、次のようになります。「ユーザーが操作する行為(外側)と、システムがユーザーの操作に対して機能を返す行為(内側)を、どうやってスムーズにつなぐかを設計すること。」UIデザインの本質は見た目にあらず上記の理解を踏まえると、UIデザインの本質は見た目だけにあるのではないということが分かります。UIデザインが語られるときによく出てくる「配色」や「動き」といった見た目の要素も、見た目を美しくするのが目的で設計されているわけではありません。ユーザーがいかに快適にシステムの機能へアクセスできるようにするかが目的であって、ただ「見た目をキレイにしたい」という装飾的な理由が全てではないのです。美しい見た目は、「ユーザーが画面を操作する行為(外側)と、システムがユーザーの操作に対して機能を返す行為(内側)を、どうやってスムーズにつなぐかを設計すること。」を考え抜いて設計した結果として生まれた、副産物とも言えるでしょう。UIデザインの学び方では、本題に入りましょう。していきなり本題に入らず、UIの意味について書いたのかというと、そもそものUIの意味を理解していなければ、結局スタイリングなど表面的な理解に収まってしまうと思ったからです。そもそもの概念について理解してから実際の技術を学ばなければ、本当にUIデザインの理解にはつながりません。1.根本思想について知るUIデザインを勉強するための「事始め」として、まずは次の本を読んでみましょう。見るこの本は、工業デザインにおける「人間中心設計」の考え方を広めた、デザインの古典的名著です。デザインとは、そもそもどのような意図をもって行われるのか。デザイナーとして、ユーザーにプロダクトを快適に使用してもらうためには、どのような事に気をつけなければならないのかといった、UIデザイナーとしての考え方の基礎を学ぶことができます。2.代表的なデザインガイドラインを読む次に、世界的な企業が公開している、UIデザインに関するガイドラインを読んでみましょう。代表的なのはAppleの「iOSヒューマンインターフェースガイドライン」と、Googleの「マテリアルデザインガイドライン」です。iOSヒューマンインターフェースガイドラインマテリアルデザインガイドライン注)上記の日本語ドキュメントの場合、情報が古くなっている可能性もありますので注意してください。可能であれば英語のオリジナルの方を参照しましょう。AppleもGoogleもIT界の巨人として知られていますが、デザインに関しても両社は最先端を走っています。ガイドラインの素晴らしいところは、これまでフワッとした概念でしか語られてこなかった「良いデザイン」の条件を完全に言語化し、体系的にまとめているところです。このガイドラインに書いてあることが全てUIデザインの原則として正しいわけではありませんが、UIデザインで最先端を走っている企業の考え方をインストールすることは非常に役に立ちます。(もちろん、実際に現場でiOS、Androidアプリを作る際にも)3.デザインパターンを把握するUIデザインを考えるとき、全く知識が無い状態から考えるのは難しいものです。そんなとき、主要なデザインパターンをあらかじめ把握しておくことで、スムーズにUIデザインができるようになります。デザインパターンを学べる書籍としては、次の2冊がおすすめです。見るデザインパターンとは、「繰り返し起こる問題を解決するための解法の型」であり、エンジニアリングの文脈でもよく使われる言葉です。UIデザインの現場でも、「このボタンはどうやって配置すればいいの?」「こういう画面遷移のさせ方でいいの?」といった疑問は度々生じます。こんなとき、デザインパターンをあらかじめ把握しておけば、すぐに解決できるようになるのです。使いやすく優れたUIデザインのパターンは、先人たちの試行錯誤や研究によって既に体系化されているのです。した先人たちの知恵から学びましょう。4.実践的な技術を学ぶここまで来れば、UIデザインについて基本的な知識はかなり身についているはずです。そこで、いよいよ実際にデザインしていくためのアプリケーションの使い方を勉強していきたいのですが、現状では少しハードルが高くなっています。近年のWebサービスやアプリ開発の現場でよく使われている「Sketch」というアプリケーションがあるのですが、こちらはPhotoshopやIllustratorなどAdobeのアプリケーションと違って、本などもほとんど出版されていません。いうオンラインスクールを利用する方法です。Sketchはもちろん、プロトタイピングツールのProttなど実際に現場でも使われているソフトの使い方が学べるので、かなりおすすめです。オンラインスクールということで、スキルアップしたい社会人や学生向けに作られており、自身のライフスタイルに合わせてプランを選ぶことができるという点も魅力です。学生で集中して時間が取れるのであれば「4週間プラン」を。社会人で毎日1時間程度しか時間が取れないのであれば「12週間プラン」を選ぶことで、働きながら無理なく学習を続けられるよう設計されています。具体的な料金やカリキュラムなどは、上記リンクの公式サイトから確認できますが、その際、まずは無料の「オンライン説明会」の動画から見てみてください。説明会動画を見れば、どんな事が学べるのかといった全体像も掴めますので、興味がある方は、一度説明会だけでも覗いてみてください。5.知見をアウトプットするUIデザインの理論であれ技術であれ、アウトプットしなければ知識は定着しません。勉強したことは、ブログに書いたりTwitterでつぶやいたりして積極的にアウトプットしましょう。実はこのブログも、わたしが本を読んで考えたり、仕事で学んだことを定着させる目的で書いていたりします。学んだことや考えたことを言語化することによって、仕事でも自分の考えを順序立てて説明できるようになるので、ぜひあなたも試してみてください。おわりにいかがでしたか?今回はUIデザインを学ぶために、主に独学での勉強方法についてお伝えしました。なんだかんだで一番手っ取り早いのはやはりUIデザインが盛んな会社に転職することかもしれません。UIデザインはあくまで手段に過ぎません。重要なのは、どうすればユーザーにとって素晴らしいプロダクトにできるかを考え続けて、それをデザインに反映させようとする姿勢ではないでしょうか。そんな中でも、今回の記事がこれからUIデザインを学ぼうとする方にとって役に立てば幸いだと思っています。本当に重要な問題に取り組むために。Reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。