見出し画像

アプリ・ウェブUIデザインをざっくり理解できる書籍/サイトリスト

以前から「どうやってUI勉強してますか?」「UIデザイナーと働く時に最低限理解しておくと良い知識はありますか?」という質問をよく受けます。そこで、書籍とサイトをまとめてみました。

この記事は
- デザインの知識や概念を浅く広く理解したい方
- UIデザインに興味を持っている他の職業の方(例えばPMやエンジニアなど)
- UIデザインざっくり知りたいけどけど本ありすぎて…現役デザイナーおすすめある?

という方に向けて書いてみます。
すでにUIデザインに関する優れたまとめ記事が多く存在しますが、私がオススメするリストを自分なりに作ってみようと思います。

デザイン始めたい・ノンデザイナー向け5つのサイト

UIデザイナーと一緒に働く際に最低限理解しておくと良い知識を共有したいと思いますが、「分厚い書籍はハードルが高い!」と感じる方に向けて、まずインターネット上でアクセスできる情報を紹介してみます。ネットの記事は書籍を買うよりもハードルが低く、いつでも参照できるので便利ですよね。

U-Site UIデザインの指標・ユーザビリティとは

U-Site様のコラムはどれも参考になります。特にユーザーインタフェースデザインのための10ユーザビリティヒューリスティックスは有名で、デザイナーだけではなく企画職の方が知っていても役にたつ原則かと思います。

また、デザイン指標をまとめたページがあります。UI改善に携わる方がこれを参照すると、意思決定がスムーズになるかもしれません。私自身も、この機会に振り返ってみたいと思います。

Sociomedia ヒューマンインターフェース ガイドライン

ソシオメディア様といえば後にご紹介するOOUI本で有名なコンサルティング会社ですが、サイトもナレッジが溜まっており素晴らしいのでぜひ。
こちらのページでは複数の文献やデザインコンサルティングで得た知見をもとに、ヒューマンインターフェースをデザインする際の指針をまとめてくださっています。
掲載されている指針は継続的に追加・更新されているので、常に最新の情報を学ぶことができます。


UIデザイナーが働きやすい環境づくりについて:Goodpatch Blog 一貫性のある体験をすばやく届ける。使いやすさを向上させるデザイン基盤とは

ブログ全体もトレンド発信など内容がしっかりしてて大変勉強になります。今回は、デザイナーと協力していく上で非常に役立つ内容が含まれているため、こちらの記事をご紹介させていただきます。
余談ですが、ブログ名がメモパッチだと思ってたら改名してました(古参アピール)。

ザ・ダークパターン ユーザーの心や行動をあざむくデザイン

サービス開発は慈善事業ではないので、利益を生むために日々一生懸命開発しています。全力で利益を追求した結果、企業は利用者の不利益を無視して巧妙に「だます」しビジネス目標を達成しようとすることがあります。その手法を「ダークパターン」と言います。
ビジネス目標を達成すると評価され、評価は自分たちの給料にも直結するので、倫理的な問題を後回しにしてしまうことは容易に想像がつきます。しかし、利用者の信頼を損なり中長期的にはマイナスな影響がでます。
知見を得て職種関わらず相互的に防ぐことで、より良いサービス開発につながると思います。

概要
そのデザイン、
顧客の信頼を失っていませんか?
欧米で規制強化が進む、
ディセプティブ・デザインの実態と脱却の道筋

「退会方法がわかりにくい」
「勝手にメルマガに登録されている」
「消費者を煽るカウントダウンタイマー」
「期限のない在庫一掃セール」……
こうしたユーザーを意図的にだますデザイン
(=ダークパターン)の乱用が増えています。

ダークパターンをネット上で参照したい、という方は「ダークパターン デザイン」などで確認してみてください。また日本でも消費者庁がダークパターンに対するドキュメントを出しています。

消費者庁 ダークパターン その構造と向き合い方

インターフェースデザインの基礎のための4冊

誰のためのデザイン?

UIデザイナーがほぼ全員読んでいるとも思える定番の本です。それでも良書なので紹介。結構厚みがあるうえに文字が細かい本なので、ハードルはやや高めに感じるかと思います。ただ、ある程度手を動かして感覚が掴めたタイミングで読むと、これまでなんとなく体得してきたものが言語化されているので理解しやすいかもと思います。

概要
MITの博士でさえ戸惑う悪しきデザインの例,例,例…。日常の道具から巨大装置まで,使いにくく,ミスを生みやすいデザインが満ちあふれているのはなぜか。それをどう改善すべきか。第一級の認知心理学者がユーモアたっぷりに論じた痛快な本。心理学からデザイン・建築など応用範囲がひろく、読み物としても楽しめます。心理学・デザイン・建築などのテキストとしても好評の一冊です。

https://www.kinokuniya.co.jp/f/dsg-01-9784788503625

デザイナー以外の方や、とりあえず内容の要約読みたい!という方はこちらの記事が本当にわかりやすいのでみてみてください。

はじめてのUIデザイン

今まで読んでなかったのですが、なんと2023/05 現在100円!でした!!!読んでみたらとても丁寧で素晴らしい本でした。
UIUXデザイナーの定義・仕事内容の説明もあり、画面の組み方まで体系化されているので、まさにUIデザイナーを始めたばかりの方におすすめです。
UI設計の仕方はOOUIの本とほぼ同じ内容のみが紹介されていますが、それ以外の設計方法もあると思うのでそこは注意かもとおもいます。
ややハードルが高いかもしれませんが、他職種の方がパラみしても参考になるかもしれません。

概要
「UIデザインを学びたい、すべての人へ」
UIデザイナーを目指している人に渡せる最初の1冊を作りたい。この本は、そんな想いから作られました。
本書は2019年4月にPEAKSより発売された『はじめてのUIデザイン』に、一部加筆修正を加えた改訂版です。「はじめての」と付いているように、デジタルプロダクトのUIデザインを学びたい人を対象に、基本的な知識や考え方がひととおり身につくことを目指して書かれました。第一線で活躍されているデザイナーの方々にお声がけをし、みなさんの経験や考え方を交えつつ、各章を執筆していただきました。ぜひ、プロフェッショナルの生の考えや視点を取り入れてみてください。

https://www.amazon.co.jp/dp/B087BMJ1Q6

なお、UIデザインとWEBデザイナーの違いは以下の記事が大変わかりやすかったので、どう違うの?と思った方や、UIデザイナーと働くぞ!というかたは是非。

UI GRAPHICS 成功事例と思想から学ぶ、これからのインターフェイスデザインとUX

2018/10/19発行なので少し古いかもしれませんが、優れたスマホアプ位のデザインについて解説が豊富な図説とともに載っています。以前書いた記事で、最近のデザインの流れのコラムについて、などこの本で勉強したことを取り上げたことがありました。図説が多いので理解しやすく眺めているだけでも学びがあります。

概要
本書は、デザイナーたちの実践と思考を記録した2015 年刊行の書籍『UI GRAPHICS』の改訂版となります。制作にあたり、新たな視点ですべての事例を選び直すとともに、この領域に携わる研究者および実践者の方々に、新たな執筆者を迎えて、現在の地点から多様な可能性についての知見を書き下ろしていただきました。巻末には、以前に刊行された『UI GRAPHICS』に収録されていたテキストも再録しています。

https://www.amazon.co.jp/dp/4802511051


ビジネスを変える「ゲームニクス」

もしかしたらあまり知られてないかもしれませんが、とても良書なのでおすすめです。
ゲーム開発から得たUIデザインの基本的な画面設計の知見が体系的にまとめて書いてあります。ゲームだけではなく、一般的なウェブデザインやアプリデザインにも十分に通用するナレッジで私のUIデザイン基礎知識はこれ!という感じです。図説がゲーム画面なのでゲーム好きさんはより楽しめるかと思います。
前職のUIデザインを専門で扱う部署では必読書のうちの1つでした。

概要
「説明書を読まなくても楽しめた」「あっという間に数時間が経過していた」――。ビデオ・ゲームをプレイしたときに、こうした経験をしたことはないだろうか。ゲームは、「人を思わず夢中にさせる仕組み」や「快適で使いやすいユーザー・インタフェース(UI)」などを実現することに長けている。
そんなゲーム制作のノウハウを体系化した理論が、「ゲームニクス」である。立命館大学教授のサイトウ氏が、20年以上ゲーム・クリエーターとして活動している経験を基にまとめ上げたものだ。
ゲームニクスは、「直感的なUI」「マニュアル不要の操作理解」「はまる演出」「段階的な学習効果」「仮想世界と現実世界のリンク」の五つを実現するノウハウ集である。こうしたノウハウは、日本人の根底にある「おもてなしの文化」の集大成とも言える。(略)

https://www.amazon.co.jp/dp/B087BMJ1Q6


UIデザインの裏付け・説明する時に役立つ4冊

デザイン作成時に目的・意図を持ってデザインすることは大事ですよね。この時点で大変です。しかもそれを言語化して説明することはとても難しいことです。さらに、他職種の人に理解してもらうことはもっと難しいことだと思います。
私は以下の本を先輩に教えてもらい、思考の練習をしました。

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

電子書籍よりも紙の本向けのレイアウトです。図説が多く、理解しやすいのが特徴です。定量データだけでなく、心理学を用いることで、主観的な判断から客観的な判断に近いところでデザインを決定することができます。人がどのように物事を認識し判断をするか、を知っておくことはUIデザインの設計過程でとても役に立ちます。
私の使い方としては、1回頑張って全編を読み、困った時に読んで参照する、辞書のようなスタイルで手元に置いています。

概要
インタフェース設計に心理学を活かす米国ベストセラーの第2版。
UIデザインコンサルタントによるデザイン原則の科学!

途方もないデザイン指示を整理できるように、
相反するデザイン目標の妥協点を見い出せるように、
UIデザイン原則と心理学上の根拠がわかる一冊。

https://www.amazon.co.jp/dp/4844337718/

インタフェースデザインの心理学

こちらの本もデザイン中に迷ったときの辞書的な使い方をしています。続編もシリーズも出ているのでそちらもおすすめです。

内容(Amazonより引用)
人々の心を捉えるにはどうすればよいのか?長年にわたりインタフェースデザインに携わってきた心理学者が「よりよいデザインに役立つポイント」を科学的な研究によって明らかにされた事実とともにウェブやアプリのデザインに応用できる形でわかりやすく解説。

ノンデザイナーズ・デザインブック

ド定番すが、他ではあまり見ないおすすめ理由としては「デザインの説明に使える」点です。
事業部付きデザイナーの場合、デザインを説明する相手はデザイナーではない事が圧倒的に多いです。この本はノンデザイナー向けに書かれているため、専門用語は少なく、デザイナー職以外の方とのコミュニケーション例文がたくさん載っているため、あえておすすめしています。

概要
4つの基本原則。これを知るだけで、あなたのデザインはずっとぐっと、良くなります。プロで無くても、読みやすいデザイン、伝わるプレゼン資料、わかりやすいレイアウトを作りたい。そんなあなたのための、デザインの基本書。日本語版補足。日本語によるデザインサンプル、和文タイポグラフィ。18年ずっと売れ続けているロングセラー、待望の第4版。


デザインの伝え方

手を動かすことと同じくらい、なぜそのデザインにしたのかを説明する事が大事だなと思うので紹介。この本は「良好なコミュニケーション」のとり方が書いてあります。
クライアントワークの方に特におすすめですが、事業会社の方にも役立つと思います。

概要
クライアントや上司、チームメンバーなどデザインを取り囲むステークホルダーにデザインの意図を正しく伝え、承認や合意を得ることは最適なUXを実現するうえで必須です。本書は、デザイナーが、デザイナー以外の人に、デザインに関わる様々な事柄を効果的に説明できるようになるための考え方やテクニックを紹介します。(中略)デザインが承認されるまでの手順や合意しておきたい事柄を順を追って解説しているため、デザイナー以外の人にも役立ちます。

https://www.amazon.co.jp/dp/4873117798

他の方のおすすめ書籍系記事・人

吉橋昭夫先生 「UIデザインのためのブックリスト(2020, 追記あり)」

私の母校(といっても私は油画だったので教わったことはないのですが…)多摩美の吉橋昭夫先生の書かれたこちらの記事は、すでに多くの方に読まれていますが、現役デザイナーとして本当におすすめの本ばかりなので貼っておきます。私もこのリストからいくつか本を購入しました。

吉橋先生のサイトはこちら:https://lit.link/akyoshi

Yasuhisa Hasegawaさん 「UXの夢は覚めたが失望はしていない」

長谷川さんのサイトは、記事の数も種類も豊富で、どれも学び深いものです。会社のSlcakでサイトURLを検索したところ、社内でいろいろな記事が共有されていることがわかりました。
今回は「UXの夢は覚めたが失望はしていない」という記事を紹介します。

私はデザインを専門に扱うコンサルのような会社から、現在の事業会社に転職しました。前職ではUIUXの良い部分をたくさん学び、事業会社ではビジネスの中でのデザインに出会いました。その経験から、この記事に書かれたギャップに共感を覚えました。特にグッときたのは以下の文です。

『デザイン』の殻を破り、ビジネスや自分が属している組織の理解を深めることで仕事のアプローチも変わります。

https://yasuhisa.com/could/article/hello-again-ux/

本当にこの言葉の通りです。転職してすぐの時はデザインの殻にこもってしまていて、仕事が全くうまくいきませんでした。
私の教訓として「デザイナーがこのリストの本を読むはいいとは思うが、それ以上に仕事場の他職種の人と話す時間を多く取ることをお勧めする」です。

ここまで読んでくださったデザイナー以外の職種の方、よかったら「デザイナーに読んでおいて欲しいブック(情報)リスト」の作成をぜひお願いいたします!

長谷川さんのサイトはこちら:https://yasuhisa.com/

終わりに

今回のブックリスト作成には時間がかかりました。文章を書くことや自分の思考に向き合うことも久しぶりだったため、上司にこの機会をくださったことに感謝しています。
紹介している本のほとんどが10年前に発行されたものであるのは、私がデザインを始めたのが約10年前だからです。月日の流れの速さに大変驚きました。百年はもう来ていたんだな、と言う感じです。

ブックリスト作成にあたり多数のUI本リスト記事を参照しました。未読の有名な本がたくさんありましたが、ひとまずは積読にしておき、他職種の方が勧めてくれる情報に触れようと思います。

最後までお付き合いいただき、ありがとうございました。


この記事が参加している募集

サポートしてくれたら嬉しいです。書いてる間のコーヒー代にしたいです。