【事例から学ぶ!】聞いたことはあるけど「UIデザイン」とは?

初心者向けに「UIデザインとは」について解説。UIデザイナーを目指す上で参考になる勉強サイト等も紹介しています。アプリを作る上で欠かせないUIデザインのスキルですが、初心者からでも身につけられるようにまとめています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

「UIデザインとは」何なのか、歴史などを踏まえて解説しています。

そして、UIデザイナーを目指す上で参考になる勉強サイト等も紹介しています。初心者の方でこれからUIデザインを学習したいという方はぜひ参考にしてみてください。

 

なお本記事は、TechAcademyのUI/UXデザインオンラインブートキャンプの内容をもとに紹介しています。

 

そもそもUIとは

fig1-620x412

UIデザインの前に「UI」について確認しておきましょう。

UIとはUser Interface(ユーザー・インターフェイス)の略です。インターフェイスというと、最近ではUSBやHDMIなど、機器と機器をつなぐ仕組みを指す言葉としてお馴染みかと思います。

ユーザー・インターフェイスすなわちUIの場合は、機器(実際には、広く製品、システム、サービス全般)とそれを使うユーザーとの”つながり”を指します。

UIで言う「つながり」は、USBのような物理的な接続だけはなく、もっと抽象的、概念的な意味合いも含みます。機器を手に持つ、表示を読む、ボタンを押す、さらには、パッと見てかっこいいと感じるのも「つながり」の一種だと言えます。とにかく機器とユーザーが接したところで起こりうる関係性の全てがUIと言っていいでしょう。

 

UIデザインとその歴史

UIデザインとは、機器とユーザーの関係性をデザインするということです。その主な目的は、機器をユーザーにとってわかりやすく、使いやすくすることと、ユーザーに良い印象を与えることですが、後者はデザイン全般に言えることなので、UIデザイン独自の視点は前者になります。

fig2-620x465

そもそも、UIデザインなどという概念が生まれる前から私たちはUIデザインを行っていました。例えば石器時代の石斧は、人間の手で持ちやすいサイズや重さに調整され、持ち手には手で持ったときに滑りにくい木材が使われています。つまりユーザーにとって使いやすくデザインされていました。

家具や簡単な文房具など、道具がまだアナログでシンプルな時代は、基本的には石斧と同じように人間の解剖学的特性に合わせて設計することがUIデザインでした。やがて道具はどんどん多機能化、電子化、ネットワーク化された複雑な機器に進化していきましたが、その結果、その仕組みや構造、操作方法などがパッと見ただけでは理解しづらくなりました。

単に機能を実現するためだけに設計したのではユーザーが使いこなせないので、ユーザーがやりたいことを確実にできるように、”わかりやすさ”を意図的に設計してやる必要が生まれました。

 

そして登場した代表的な解決策がGUI(Graphical User Interface)です。

アイコンやウィンドウ、カーソルなど、機能や構造、データなどをビジュアルで示し、それをクリックしたりドラッグしたりすることで操作します。ユーザーが必要なことはすべてビジュアル化されて示されているので、完全に記憶していなくても簡単に思い出せます。

ファイルアイコンをゴミ箱アイコンにドラッグ&ドロップすれば捨てられるというように、現実世界のやり方をそのまま画面内に再現することで、新たな作法を覚えることなく直感的に操作できます。このように、GUIは記憶や学習など、人間の認知的特性に合わせて設計されています。

このGUIの考え方が、今もパソコン、スマートフォンなどのOSやアプリ、Webページ、ハードウェアの操作画面などに引き継がれています。

今では、UIデザインというとGUI画面のデザインを指す言葉として使われるケースも少なくありません。でも今後IoTが本格化してくれば、持ちやすさなどの解剖学的特性に合わせて設計することも、再び重要になってくるでしょう。

 

[PR] スマホアプリの開発で挫折しない学習方法を動画で公開中

UIデザインを学ぶには

UIデザインを学ぶには、いくつかのアプローチがあります。

一つは、人間の認知特性からのアプローチです。これまで述べた通り、UIデザインは人間の認知特性に合わせて設計することなので、認知特性がわかれば、おのずとデザインの方向性は決まってきます。

このアプローチは一見遠回りのようですが、より普遍的で本質的なので、デザインする対象がWebからスマートフォンアプリ、さらにはウェアラブルやバーチャル・リアリティなどと変化したとしても、応用が利きます。

認知特性とUIデザインを絡めて解説した書籍には、以下のようなものがあります。

 

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

 

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

 

UIデザインの心理学―わかりやすさ・使いやすさの法則

 

一方、比較的短期間で行うには、UIデザインルールを学ぶアプローチが考えられます。Apple、Google、Microsoftなどはいずれも、自社製OS上で動くアプリについてのデザインガイドラインをWeb上で公開しています。

各社ともガイドライン策定に当たってはUIのわかりやすさについても配慮してあるので、これらのガイドラインに従ってデザインすれば(100点満点とは言わないまでも)一定レベル以上のUIに仕上げることができるはずです。

Webについてはオープンな開発環境のため、どこかの企業がガイドラインを定めているわけではありませんが、自然淘汰的にデザインルールが生まれ、多くの書籍などで紹介されています。

 

その他、上記のようなアプローチの違いを区別せず、継続的にUIデザイン関連の様々な情報を発信しているサイトもいくつかありますので、参考にしてみてください。

 

UIデザイン周辺の概念

さて、「UIデザイン」に近いものとしてよく「UX(ユーザー・エクスペリエンス)」、「ユーザビリティ」、「人間中心設計」といった概念が扱われることがあります。これらの概念はそれぞれ異なる意味ですが、相互に密接に関係しています。

この場では詳しく触れませんが、興味があればぜひ調べてみてください。

[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。