UIデザインの学び方

仕事柄、どうやってUIデザインを学んだらいいのかとしょっちゅう聞かれます。

「レイアウトパターンを参考にしているWebサイトとかあるのですか？」
「おすすめの本を教えてもらえませんか。」
「XDとSketchとFigma、どれが一番おすすめですか？」

これが一番多い、というよりいつも聞かれるのは大抵この3つです。

その質問に答える前に私が確認しなければならないのは、質問者の方がなにを指して「UIデザイン」と言っているかです。
なぜならば、上記のような質問をされる方の多くは、UIデザイン=画面のデザイン　というような認識をされていることが圧倒的に多いからです。

大抵はスマートフォンアプリのデザインのことを指しているのですが、
「スマートフォンアプリのUIデザインということでいいですか？」と一応確認してからお答えしています。

モバイルアプリのデザインと限定するのであれば、iOSならばiOS Human Interface Guidelines、AndroidならばMaterial Designをまずは読んでくださいと答えています。
正確に言うとこの分け方は必ずしも正しく無いのですが、ひとまずわかりやすくということで、今回はそう区別しておきます。

他の誰かが作ったレイアウトパターンをどんなに眺めていてもUIデザインのスキルが身に付くということはあまりないんじゃないかと私は思っています。

おすすめの学習順序を以下に書いていきます。

Step1 - スマートフォンを使い倒す

普段使っているのがiPhoneならば、どうにかしてAndroidデバイスを入手して、しばらくそれをメインにして日常的に使ってみる。
逆もしかりです。知らない物のデザインすることはできないですよね。

使ってみればわかります。両者はあちこち違います。
最近はどんどんお互いが似てゆく傾向にありますが、それはやはり、それぞれの良いところを取り入れた方が使う人たちにとって便利だからだと思います。
使う人にとって便利であれば、提供する側に返ってきます。つまりビジネスにおいて何かしらの成果があるということです。

Step2 - それぞれのガイドラインを読む

iOSアプリ : iOS Human Interface Guidelines
Androidアプリ : Material Design

※Androidアプリの場合、必ずしもMaterial Designを採用しないでもいいのですが初めて取り組む場合は、そのことは一旦隅に置いておいてください。

これらを読んで理解しておくと、開発者と共通言語でコミニュケーションができるようになります。
共通言語で話すことがなぜ大事なのかというと、双方の認識のズレを最小限に抑えることができて、効率の良い議論やアプリの開発ができるからです。

デザイナーはすぐにでもXDやSketchを開いて画面のデザインを作りはじめたくなるものですが、「急がば回れ」です。実はそれが最短の道のりです。

数年前に「ガイドラインに縛られていたら自由な表現なんてできない。ガイドラインは読まない主義だ」と堂々と言う中堅デザイナーと出会ったときは少々驚きました。学生ではないですからね。
基本を知った上で敢えて外すのと、知らずに出たらめをやるのとはまるで違うことです。
UIデザインは自己表現のためにあるのではなく、モノを使いやすくするための方便であると思います。

Step3 - 何を作ろうとしているのかをきちんと理解する

デバイスの特性とデザインガイドラインを学習したら、次はこれから作ろうとしているアプリの全体像と、何をどうユーザーに伝えれば説明書がなくてもそのアプリを使えるだろうかと考えます。

例えばユーザー一覧の、名前の横にある小さな丸が緑色だったらその人はオンライン、灰色だったらオフラインであることはいちいち文字で示さなくても大抵の人は直感的にわかります。

そんなふうに、日常の生活の中で誰もが共通認識していることを基準に考えていけばそれほど難しくないのです。
特にMaterial Designはその辺りの概念がかなり深く詳細に言及されているのでUIデザインの考え方そのものの学習にも向いているように思います。
最低限の基本をきちんと学習すれば、仕事としてスマートフォンアプリのUIデザインは必ずできるようになります。

トレンドや方法論に振り回されすぎない

熱心なデザイナーはとても多いので、多くの方が日々真面目にネット上に溢れている情報に目を通されていることでしょう。私もそれなりにいつも見ています。しかしちょっと注意が必要です。

この10年間のスマートフォンアプリ開発周辺の流れでいうと、
開発者が率先してアプリを作っていたスペックの時代
↓
使い勝手も向上させよう、UIデザイナーが不可欠だ！
↓
Photoshop VS Sketch論争
↓
UXが重要だ（カスタマージャーニーマップ、ユーザーストーリーなんてワードが飛び交っていた）
↓
デザイン思考こそ重要だ！
↓
ポストイットがたくさん必要だ！
↓
これからはデザインシステムが重要だ！
↓
今はなんだろう？？

トレンドのトピックが頻繁に変わり、毎度大騒ぎになって、その度に頭がパンパンになってわけがわからなくなってしまいますよね。
でもこれって、常に本質に目を向け続けているとそれほど気にならなくなります。
自分のアンテナが振れたところだけ取り入れて行くのでも良いと思います。全部かたっぱしから追いかけていると息切れしてしまいますから。

それに方法論は万全ではありません。基礎的な思考力、思考の過程を大切にして欲しいと思います。

エンジニアの集まるところに飛び込んでみる

基本的なことをある程度学習したら、デザイナー同士で集まるのではなく、積極的に開発者の人と関わり、話をするのが良いと思います。
実際、私はそうしました。

企業などで、デザイナー勉強会のようなものが定期的に開催されてアプリをデザインする際のノウハウを共有し合うなんていう場面を何度も見かけました。
どうすればもっと質の良い勉強会になるか？と質問されると私は必ず、
「アプリ開発者の人を交えてみてください」とアドバイスします。

デザイナーだけで集まってあれこれ話していると、うまく行ったことの共有止まりで、疑問点は疑問のまま終わるからです。

私の場合は10年前にAndroidアプリのデザインを始めて、ほどなくしてiOSアプリのデザインもするようになりましたが、それ以前はWebデザイナーをやっていました。

スマートフォンアプリのデザインに取り組むようになってからすぐにぶつかった壁は、「Webデザインの経験が生きるところもあるけれど、生きないことが多い」でした。

とにかく苦しんだのは、アプリは自分で実装できないという点でした。
Webならばデザインからコーディングまで自分でできますが、アプリはそう簡単にはできないのです。
ですからとにかくひたすらアプリ開発者と話したり、アプリ開発者が集まる勉強会に頻繁に参加したりしました。
初めのうちはほぼ全てが宇宙語でしたが、しつこく通っているとだんだん理解できるようになってきます。

更に学習を深める為に

最低限の学習をし、アプリのUIデザインがだいたいできるようになったら、次は人の認知だとか、人体の構造だとか、情報をどうよりよく分類するかだとか、そういうことに興味をむけていくといいと思います。

そして改めて前述したデザインガイドラインを読んでみると、なぜそういうきつい制約とも言えるルールを細かく定義しているのかが理解できるようになってきます。

その結果私が思ったことは、「なんだ。結局日常の身の回りにある様々なモノの通りだし、人間の性質そのまま言ってるだけじゃん。」です。
それが大変難しいのですけれど。

その先は、標準UIコンポーネントをどうカスタマイズしてより素敵で魅力的なプロダクトに仕上げるか、だとか応用的なこと、自分の得意なことを探究していけば良いわけです。

他のデバイスや機器のUIデザインもできるようになる

そんな風に学習をどんどん深めていくと、更に気づくことがあります。
結局、人間である自分が、改めて外側から人間について勉強していたんだなとかそんなようなことです。

そうすると、スマートフォンアプリのUIデザインだけではなく、様々な機器のディスプレイに表示されるUIデザインができるようになります。
更にはGUI以外のUIデザインも考えられるようになってきます。

レイアウトパターンを暗記したり、本を読んだりして学べることは、UIデザインを体得するためのきっかけにすぎないことに気付けるのではないでしょうか。いかがでしょうか？

機械と人間という正反対のものをつなげる橋をデザインするのがUIデザインなので、双方を理解する必要があります。
ですから学習には時間が相当必要であること、もっと言うと一生終わらない&極めきれない世界であろうと思います。

どんどん作ってどんどん試し、そして失敗して、ひとつひとつ磨いていくのが結局一番の近道かもしれません。

急がば回れであるのと同時に、てっぺんも無いのだろうと思います。
唯一の正解が無いから難しく、そして面白いのだと私は思っています。