今回は、GoodpatchのUIデザイナーにヒアリングし、UIデザインを理解するためのおすすめ本をまとめました。

次のような人に特におすすめです。

  • UIデザイナーになったばかりの人
  • もっとUIデザインについて勉強したい人
  • サービス、アプリ開発に携わるエンジニア・ディレクターの人

目的別に6つのカテゴリに分けてご紹介します。あなたの関心に沿ったトピックから、 気になる本を見つけていただけると嬉しいです。

 

1. UIデザインを基礎から理解する

ユーザーインターフェース（UI）とは何なのか、どんなデザイン要素があるのか、UIが機能する環境とは？、どうやって作ってリリースするのか…UIデザインを始めるために、まずは基礎知識を網羅しましょう。

■ はじめてのUIデザイン 改訂版

この本は、著者の1人である吉竹遼さんが「UIデザインを体系的に学ぶための本が少ない」という課題感から企画されました。そのため、タイトルの通り、UIデザイナーを目指す人の最初の1冊にぴったりの本です。

UIデザインの最前線で活躍するデザイナー6人が各章を担当し執筆しており、プロフェッショナル6人分の経験や視点が贅沢に詰め込まれています。

とても体系的にわかりやすく書かれているので、UIデザインを学び始める人はもちろん、既にUIデザインに取り組んでいる人にも、基礎知識の整理ができる点でおすすめです。

また「1人でも多く届けたい」という思いから、このたび価格改定がされ、2021年3月現在、Kindle版は100円で販売されています。これは読むしかないですね！

2. 人間の認知とデザインの関係

ユーザーが触れるものをデザインするには、それが「どう受容されるのか」を知ることが重要です。人間の認知とデザインの関係を考慮しなければ、心地いい体験をつくることは難しく、むしろユーザーを混乱させるUIができてしまう可能性が高いでしょう。デザインに関連する人間の認知ついてわかりやすく読める本をご紹介します。

■ 誰のためのデザイン?―認知科学者のデザイン原論

ものづくりに関わる人は必ず読んだ方がいい！と紹介されたのが、この本です。

作り手の都合や機械のための設計ではなく、人間中心の設計をせよ、と初めてユーザビリティに重きを置いた提唱をしたD.A.ノーマンの著書です。

デザイナーは、起こり得るエラーが実際に起こることを想定した上で、そのエラーが起こる確率と、エラーが起こった時の影響が最小になるようにデザインしなければならない

本書のこの言葉からも、本来デザイナーとは見た目の良いものを作る職業ではなく、ユーザーを思いやった設計をする職業なのだと教えてくれる本だということが分かりますね。

本質的なものづくりとして、UXを勉強するためにも、エンジニアやプロジェクトマネージャーの人に読んでいただきたい内容だと思いました。

 

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

複数名のデザイナーから名前が挙がったのがこちらの本でした。

インターフェイスデザインと人間の行動原理に関して、すべてのデザイナーが知るべき100の指針を示している本書。GoodpatchのUIデザイナーからも、チームの共通知識として持っておきたい本質的な内容が詰まっていて、何度も読み返したいという声が上がりました。

数々の参考文献をまとめた本なので、論文を引いたり、参照元から内容を深掘りできる点も重宝されているようです。

 

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

また、この本には続編も存在します。

ベストセラー書『インタフェースデザインの心理学』の続編。本書では、デザイナーが心に留めておくべき指針を、最新の研究で明らかになった事実とともに紹介します。

とのことで、より時代背景が反映された内容になっているようです。2冊合わせて読んでみたいですね。

 

3. ユーザーとのやりとりをデザインする方法

ソフトウェアなどが使われる際の「ユーザーとのやりとり」、つまりユーザー側の操作とシステム側の反応をデザインすることを「インタラクションデザイン」といいます。ユーザーが知覚し操作する対象を、情報技術を駆使してどう設計していくのか、国内外の専門家による本をご紹介します。

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

以前、デザイナー志望ならフォローするべき！おすすめTwitterアカウント【日本人編】でもご紹介した、渡邊恵太さんの著書。

情報技術の発展に伴い、日々進化する私たちの生活。そんな生活の中に融けるように馴染むインターフェイスデザインを丁寧に紐解き、情報を中心とした設計の発想手法を解き明かしています。

「インターフェイス」「体験」「自己帰属感」など一見捉えにくい概念について、豊富な具体例と筆者の研究成果を用いて明快に語られているため、専門的な知識がなくても、インターフェイスデザインの奥深さに触れることができます。

これから先、UIデザインを知りたい人には、ぜひ読んでいただきたい一冊です。

 

■ About Face 3 インタラクションデザインの極意

著者のアラン・クーパー氏は、先駆的なソフトウェア発明家であり、プログラミング言語「Visual Basic」や、今では欠かせないデザイン手法である「ペルソナ法」を生み出しました。

そんなクーパー氏が、インタラクションデザインのデザイン原則、プロセス、パターンについて統合的に解説した世界で唯一の本。

ユーザーのニーズに合致した製品を世に送り出すためには、非常に多くの人々の苦労を慎重に調整することが必要になる。私たちが経験から学んだことによれば、インタラクションデザイナとして力を発揮するためには、製品に四方八方からかかってくるさまざまな力の間でバランスをとるための責任のかなりの部分を自ら担うつもりにならなければならない。
（本書より）

同氏らの豊富な経験から導かれたソフトウェアデザインの方法論が、500ページ以上に渡って解説されており、現場でUIデザインを実践する人にとてもおすすめです。

 

■ ヒューメイン・インタフェース−人に優しいシステムへの新たな指針

著者のジェフ・ラスキンは、AppleのMacintoshインタフェースのコンセプトを方向づけた人物で、“Macintosh”の名付け親でもあるコンピューター技術者です。

この本で用いられる「ヒューメイン」とは、真に「人にやさしい」ということ。認知心理学や人間工学の成果を用いることで、初心者でもベテランでも戸惑ったり間違えたりせず、ごく自然に操作できるインタフェースの在り方が語られています。

本書は、Appleが提唱するデザインガイドライン「Human Interface Guidelines」とも通ずる内容となっており、UIデザインに関わる人は必読と言えるでしょう。

 

4. UIデザインの事例集

■ デザイニング・インターフェース

たくさん小説を読むと語彙が増えることと同じように、この本を読むことでUIについて理解がしやすくなり、アイデアを出しやすくなるそうです。

この本で紹介されている「パターン」とは、UIを構成する具体的な要素のことで、UIデザインを経験したことがある人にとっては当たり前のように使っているものばかりかもしれません。しかしこの本は、実務経験が浅い人の学習用、チームでUIを話し合う機会や仕様書を書く際の用語集として使用例を想定しています。

・開発中のソフトウェアのUIを自分でデザインする必要があるソフトウェア開発者

・新人のインターフェースデザイナおよびユーザビリティスペシャリスト

・優れたインターフェースデザインの本質を理解したいと考えるマネージャ

このような人が、「本書の読者層」として序章で挙げられてもいます。初心者なら持っておくことで、辞書のように使える心強い存在となりそうですね。

 

■ 失敗から学ぶ ユーザインターフェース

事例集といっても、この本は、「洗面所のユーザインターフェース」「エレベーターのユーザインターフェース」など、身近でよく見かける「使いにくい」UIの写真付き事例集です。

さまざまな身近にあるBAD UIから、「使いにくさの原因は何なのか・どうすれば使いやすくできるのか」まで解説してくれるので、UIデザイナーになりたての人にとっては、特に読む価値のある本ではないでしょうか。写真や図解も多く、読みやすい文体なので、勉強を始める導入にぴったりだと感じます。

プロローグに「BAD UIの世界入場申請書」が載っていたのでご紹介します。

記入に困ってしまうポイントがたくさん見つかり、思わず笑ってしまいました。このように「使いにくさ」について面白く学べる1冊です。

 

5. デザインを美しく見せる方法

UIデザインでは、情報設計やソフトウェア設計の観点だけでなく、整っていてわかりやすいビジュアル、ときには人の心を惹きつける表現を作れることが重要です。デザインを美しく見せるために、知っておきたい知識がたくさんあります。

■ グリッドシステム　グラフィックデザインのために

統制の取れたデザインを作るためのもっとも簡単な方法のひとつが、「グリッドシステム」です。この本では、主に欧文の印刷物を対象として、グリッドを用いたテキストや図版の組版について解説しています。

元々は印刷レイアウトのために考えられたグリッドシステムですが、Webデザインを含むUIデザインにももちろん汎用されています。

ビジュアルコミュニケーションの歴史的視野のもとグリッドシステムの方法と思想を解説しています。グラフィックデザイナーに限らず、デザインを志す全ての人のための基本書の1つといえるでしょう。

 

■ Balance in Design［増補改訂版］- 美しくみせるデザインの原則

「正直、自分にはビジュアルデザインの才能がないと思う…」そんな人に読んでもらいたいのがこの本です。

冒頭で、画家、彫刻家であり建築家のマックス・ビルの言葉が引用されています。

私が思うに、ほとんど数学的思考だけを頼りに芸術を生み出すことは可能である。（マックス・ビル）

この言葉のように本書では、自然物、絵画、幾何学図形、ピクトグラム、家具や建築などあらゆるものの分析から、直感によらない、美しいデザインにおける「バランスの原則」を導き出しています。

たくさんの写真や図案が載っているため、知識を頭にインプットできるだけでなく、「美しいデザインの秘訣」を視覚的に覚え、見る目を鍛えることができます。

 

■ 要点で学ぶ、色と形の法則150

視覚に関する錯覚のことを「錯視」といいます。「人の目は色や形をどのように捉えているのか」を解説したのが本書です。

例えば、1つの色でも隣接する色によって違う色に見える「色の対比」や、実際は同じ長さの線に外向きと内向きの矢印をつけることで異なる長さに見える「ミュラーリヤー錯視」など、デザイナーが知っておきたい法則が150項目も収録されています。

見開きに1項目ずつわかりやすく解説されているので、辞書のように1冊持っておいて損はないと思います。

 

■ Vision ヴィジョン ーストーリーを伝える:色、光、構図ー

アニメーション映画のプロダクションデザイナーとして活躍するハンス・バッハーが書いた、画作りの教本と呼べる1冊。

「美女と野獣」「アラジン」「ライオン・キング」など超有名作を生み出してきた彼は、「色、光、構図、すべてはストーリーを伝えるためにある」と言います。

映画のビジュアルを、ライン、シェイプ、色、光、カメラといった構成要素に分解し1つずつ解説してくれるので、ビジュアルデザインに対する解像度が劇的に上がります。

映画をメインに取り扱っていますが、色や構図の知識はほかの様々なデザイン分野に応用できるでしょう。

 

6. UIデザインの関連分野

UIデザインをする上で重要になる「デザインシステム」と「インフォメーション・アーキテクチャ」これら2つの関連分野について、特におすすめの本を1冊ずつご紹介します。

デザインシステム

■ Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド

「デザインシステム」とは、デザインの原則、概念、ガイド、コンポーネントなど、デザインに関するあらゆるルールを定めたもののことです。デザインシステムは、きちんと管理することで、UIデザインにおいて重要な役割を果たします。

本書は大きく2つのパートで構成されています。前半の基本編では、デザインシステムの基礎である「パターン」、つまり、繰り返したり再利用できるインターフェースの部分を作成、保存、共有、使用する方法について解説しています。

後半の応用編では、デザインシステムを確立、および維持するための実用的な手順とテクニックが書かれています。

デザインシステムとは何かを知りたい初心者の方から、実際にデザインシステムを作成したり運用するデザイナーまで、多くの人に役立つと思える1冊です。

 

インフォメーション・アーキテクチャ（情報設計）

■ IAシンキング  Web制作者・担当者のためのIA思考術

情報アーキテクチャ（Information Architecture）は、いわゆるWeb屋用語としては、知識やデータの組織化を意味し、「情報をわかりやすく伝え」「受け手が情報を探しやすくする」ための表現技術といった意味である。ウェブデザインの発展に伴い、従来のグラフィックデザイン（平面デザイン）に加え、編集・ビジュアルコミュニケーション・テクノロジーを融合したデザインが要求されるようになった。情報アーキテクチャはこれらの要素技術を組み合わせた、わかりやすさのためのデザインである。ウェブ技術の発達に伴いその重要性が認識されているが、情報アーキテクチャの考え方自体は、紙面デザインの頃から変わらない。

Wikipedia – 情報アーキテクチャ

IAとは幅広い領域を指す言葉のようですが、この本では、webサイト設計におけるIAについてを学ぶことができます。

教科書のような構成なので、「最初は斜め読みして、気になった単語を調べていく使い方でもいいと思う！」とのことです。

「IAの情報構築プロセスは、webだけではなくアプリにも活用できるところがある」 とUIデザイナーが話していたことから、本質的なユーザー視点のデザインをするためにも、ぜひ読んでおきたいですね。

また、演習問題も入っているようなので、読んでいて退屈しない構成になっているようです。実際に問題を解きながら、情報を設計することがなぜ大切なのかを学んでみてはいかがでしょうか。

 

今回紹介した書籍一覧

 

  1. UIデザインを基礎から理解する
  1. 人間の認知とデザインの関係
  1. ユーザーとのやりとりをデザインする方法
  1. UIデザインの事例集
  1. デザインを美しく見せる方法
  1. UIデザインの関連分野

 

さいごに

いかがでしたか？今回は「GoodpatchのUIデザイナーのおすすめ本」を、6つのカテゴリに分けて本をご紹介しました。

おすすめ本の紹介を読むだけでも、UIデザインの過程には、人間の心の動きなど、抽象的な事象が密接に関わっていることがわかってくるのではないでしょうか。いつも使っているアプリやwebサービスも、デザイナーが私たちの感情や行動を分析・設計したものだと思うと、操作する時もなんだか新鮮な気持ちになります。

この記事が、UIデザインに興味のあるみなさんのお役に立つことを願っています！

 

最後になりますが、Goodpatch Blogでは、社内で話題になったアプリ、サービス、デザインのまとめ記事も発信しています。

新しいもの好きなメンバーによる今までのまとめは、こちらからご覧ください！

Share on

Kaori Sugimoto
2017年5月入社。元ライターインターン生。現在はグッドパッチのPRとPeople Experience Designを担当しています。お気に入りの社内Slackチャンネルは #pets_jiman 🐈