Tortoise Shell

Webサービスの会社で働くデザイナーが、デザインやライフハックについてゆるく書き連ねるブログです。

UIデザインの定義と、その学び方について思うこと

最近、ふとUIデザインの定義について考えていて、何となく昔より解像度が上がったという実感があります。

わたしが初めてUIデザインの定義に触れたのは大学生のときで、3回生のときに受講した「ユーザーインタフェース」の講義がきっかけでした。

そのとき、教授から教わったのは、おおむね次のような内容でした。

ユーザーインタフェースという言葉を分解すると、「ユーザー」と「インタフェース」になります。

f:id:tamusan100:20190502235612j:plain

ユーザーは「使用者」のことで、「インタフェース」は「inter(内側)」と「face(外側)」が合わさった言葉であり、「境界」を意味している。

よって、ユーザーインタフェースのデザイン(UIデザイン)とは、人とシステムの境界をうまく接続する行為であると。

学生だった当時は、これらの言葉をうまく呑み込めていませんでしたが、今となっては少しは理解できてきたと思います。

UIデザインをどうやって学ぶか

しかし、それでも最近まで確信が持てなかったのが、UIデザインの学び方についてでした。

学生のときは、UIデザインだけを専門に勉強していたわけではなく、あくまでも工業デザインの文脈で一分野として触れていたに過ぎませんでした。

よって、実際にソフトウェアのUIデザインを仕事とするようになり、どうやって学び続けていくのか正解を持っていませんでした。

しかし、最近になって、ようやく1つの考え方にたどり着きました。

ヒントは言葉の成り立ちの中にあり、それらを分解することで見出せたのです。

UIデザインを分解する

UIデザインを学ぶといっても、そのままでは取っ掛かりがないため、分解してみたいと思います。

UIデザインの定義を、冒頭でも述べた「人とシステムの境界をうまく接続する行為」と仮定して、それを図に表したのが以下になります。

f:id:tamusan100:20190502235642j:plain

登場人物は「人」「システム」「人とシステムの境界」の3つになります。

これらを個別に学んでいくことで、UIデザインの力を高めていけるのではないでしょうか。

人について学ぶ

UIデザインは、多くの場合は、人(ユーザー)のために行われるものです。

よって、そもそも人について学ばない限り、何も始まらないといっても過言ではありません。

人について、UIデザインの文脈で学ぶのであれば、認知心理学に関する本は参考になります。

人は、物事をどのように認知し、処理するのか。その中で、どのような認知のバグが生じるのか。

こうした知見は、UIデザインにも活かすことができます。

もちろん、ユーザーインタビューを行って、実際のユーザーの話を聞くのも大いに役立つでしょう。

以前、参考になった本 ▼

ファスト&スロー(上) あなたの意思はどのように決まるか? (ハヤカワ・ノンフィクション文庫)

ファスト&スロー(上) あなたの意思はどのように決まるか? (ハヤカワ・ノンフィクション文庫)

 
影響力の武器[第三版]: なぜ、人は動かされるのか

影響力の武器[第三版]: なぜ、人は動かされるのか

 

システムについて学ぶ

人とシステムの境界を設計するのであれば、人とは反対側の、システムについても学ぶ必要があります。

システムの成り立ちや挙動、概念について理解していなければ、両者のより良い関係性に思いを巡らせることもできません。

もし、そのシステムがWebサービスなのであれば、デザイナーはWebサービスについて理解しなければならないでしょう。

システムについての学び方は、そのシステムが何であるのかによるので、明確に表すことはできません。

それでも、概念について分かりやすく書かれた本を読んだり、あるいは実際にコードを書いて作ってみるのが良いかもしれません。

わたし自身、Webサービスのデザインをしていくにあたり、Ruby on Railsで簡単なブログを作った経験はとても役に立っています。

立派な建物は作れなくても、せめて犬小屋くらいのレベルでもよいので、実際に作ってみると分かることがあるかもしれません。

以前、参考になった本 ▼

Ruby on Rails 5アプリケーションプログラミング

Ruby on Rails 5アプリケーションプログラミング

 
Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

 

人とシステムの境界について学ぶ

人とシステムについて、それぞれ理解を深めたら、その境界がどうあるべきかも考えやすくなりそうです。

例えば、Webサイトやスマートフォンアプリであれば、長い歴史を通して培われたグラフィックデザインの手法がそのまま活用できます。

人とシステムの境界が、スクリーンという2次元の中で表現されるという点では、共通する要素がたくさんあるからです。

タイポグラフィや色彩設計、平面構成(レイアウト)、写真の技術は、UIデザインの中でも重要になります。

また「誰のためのデザイン?」など、まさしく「人とシステムの関係性」について書かれたデザインの名著を読んでみるのも良いでしょう。

以前、参考になった本 ▼

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

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

 
融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論

融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論

 

流行の学習手法について

最近Twitterを見ていると、UIデザインの勉強方法にも、色々な流行があるなと感じます。

例えば、毎日お題に従ってアプリの画面をデザインする「Daily UI」や、既存サービスの画面を模写する「UI模写」などがあります。

これらの学習手法は、前述した図で表すと、システムの表面の部分で「表現」に特化していると言えそうです。

f:id:tamusan100:20190502235714j:plain

まずは上記の学習手法で、「自分にもかっこいい or かわいい画面が作れた」という成功体験を作れたら、人やシステムについて深堀って学んでいくと良いかもしれませんね。

おわりに

UIデザインの面白いところは、直接的なモノではなく「関係性」に着目しているところだと思います。

表面的には、画面の見た目をデザインしているだけに見えるかもしれませんが、それは本質ではありません。

デザインする対象となるシステムは、時代によって変化しますし、それだけ幅広く深堀っていく面白さがあるのではないでしょうか。

わたし自身は、ここ半年はずっとVRに興味を持ち続けているので、今後はVRのUIデザインに着目していきたいと思っています。

それでは、最後までお読みくださり、ありがとうございました。