デザインを武器に戦えるエンジニアを目指す人が読むべき本


# はじめに
エンジニアの私が業務の中で **デザインに関わり**、**デザインを学び**、**デザインを武器** にするまでに読んだ本（と一部WEBコンテンツ）を紹介します。
既にデザインに関わっている方やこれから関わる方、デザインに興味がある方、それぞれ必要に応じて参考にして下さい。

（厳密には異なる部分もありますが）
私は以下の過程でデザイン関連の知識を広げていきました。なので本の順番はこの順番を意識した一覧になっています。

1. 画面設計でデザインに関わることになった 
1. デザイナーにUIデザインを提案したくなった
1. もっと上流工程からデザインに関わリたくなった
1. UIデザインが好きになった結果、CSSの設計が気になりだした
1. デザイナーと一緒にデザインシステムを作ることになった
1. UIデザインに詳しくなってくると同時に、UXデザインにも関わる機会が増えてきた

<br/>


## デザインの基本原則を学ぶために読んだ本
- 画面設計でデザインに関わることになった際、デザインの基本原則を学ぼうと読みました

### [ノンデザイナーズ・デザインブック [第4版] ](https://www.amazon.co.jp/%E3%83%8E%E3%83%B3%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%82%BA%E3%83%BB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%96%E3%83%83%E3%82%AF-%E7%AC%AC4%E7%89%88-Robin-Williams/dp/4839955557/ref=sr_1_1)
発行日|著者
:--|:--
2016年（初版：1998年）|Robin Williams  (著), 吉川 典秀 (翻訳)

<br/>


## UIデザインのパターンを学ぶために読んだ本
- より実践的なUIデザイン知識を学ぶために読みました
- エンジニアであれば完璧に覚えるというよりは何となく知っている、気になったときすぐに取り出せるくらいのインプットで良いかと思います

### [デザイニング・インターフェース 第2版 ―パターンによる実践的インタラクションデザイン](https://www.amazon.co.jp/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8B%E3%83%B3%E3%82%B0%E3%83%BB%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9-%E7%AC%AC2%E7%89%88-%E2%80%95%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E3%81%AB%E3%82%88%E3%82%8B%E5%AE%9F%E8%B7%B5%E7%9A%84%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%A9%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-Jenifer-Tidwell/dp/4873115310)
発行日|著者
:--|:--
2011年（初版：2007年）|Jenifer Tidwell (著), ソシオメディア株式会社 (監修), 浅野 紀予  (翻訳)

<br/>


## 各種デザインガイドライン
- 設計に詰まった際、デザイナーへ変わりのUIコンポーネントを提案できるようになりたくて読みました。有名所のデザインパターンやルールは一定把握しておくと良いと思います

### [Design - Material Design](https://material.io/design)
- Google が推奨するガイドライン

### [Human Interface Guidelines - Design - Apple Developer](https://developer.apple.com/design/human-interface-guidelines/)
- Apple が推奨するガイドライン

### [ソシオメディア | ヒューマンインターフェース ガイドライン](https://www.sociomedia.co.jp/category/shig)
- ソシオメディア が推奨するガイドライン

<br/>



## UIデザインの良し悪しを言語化するために読んだ本
- 「なぜこのコンポーネントを使うのか」「なぜそのUIがだめなのか」を言語化したくて読みました

### [インタフェースデザインの心理学 第2版 ―ウェブやアプリに新たな視点をもたらす100の指針](https://www.amazon.co.jp/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E5%BF%83%E7%90%86%E5%AD%A6-%E2%80%95%E3%82%A6%E3%82%A7%E3%83%96%E3%82%84%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AB%E6%96%B0%E3%81%9F%E3%81%AA%E8%A6%96%E7%82%B9%E3%82%92%E3%82%82%E3%81%9F%E3%82%89%E3%81%99100%E3%81%AE%E6%8C%87%E9%87%9D-Susan-Weinschenk/dp/4873115574)
発行日|著者
:--|:--
2021年|（初版：2012年）Susan Weinschenk (著), 武舎 広幸 (翻訳), 武舎 るみ (翻訳), 阿部 和也 (翻訳)


### [誰のためのデザイン？　増補・改訂版　―認知科学者のデザイン原論](https://www.amazon.co.jp/%E8%AA%B0%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%EF%BC%9F-%E5%A2%97%E8%A3%9C%E3%83%BB%E6%94%B9%E8%A8%82%E7%89%88-%E2%80%95%E8%AA%8D%E7%9F%A5%E7%A7%91%E5%AD%A6%E8%80%85%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%8E%9F%E8%AB%96-D-%E3%83%8E%E3%83%BC%E3%83%9E%E3%83%B3/dp/4788514346)
発行日|著者
:--|:--
2015年（初版：1990年）|D. A. ノーマン (著), 岡本明 (翻訳), 安村通晃 (翻訳), 伊賀聡一郎  (翻訳), 野島久雄 (翻訳)

<br/>


## 情報設計を身につけてアプリ全体のUIデザインを考えるために読んだ本
- 使う人にとって見つけやすく、理解しやすいアプリケーションを設計するためには情報設計について学ぶ必要があります

### [情報アーキテクチャ 第4版](https://www.amazon.co.jp/%E6%83%85%E5%A0%B1%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3-%E7%AC%AC4%E7%89%88-%E2%80%95%E8%A6%8B%E3%81%A4%E3%81%91%E3%82%84%E3%81%99%E3%81%8F%E7%90%86%E8%A7%A3%E3%81%97%E3%82%84%E3%81%99%E3%81%84%E6%83%85%E5%A0%B1%E8%A8%AD%E8%A8%88-Louis-Rosenfeld/dp/4873117720)
発行日|著者
:--|:--
2016年|Louis Rosenfeld (著), Peter Morville (著), Jorge Arango (著), 篠原 稔和  (監修), 岡 真由美 (翻訳)


### [オブジェクト指向UIデザイン──使いやすいソフトウェアの原理](https://www.amazon.co.jp/dp/B0893RK6WC/ref=dp-kindle-redirect)
発行日|著者
:--|:--
2020年|ソシオメディア株式会社 (著), 上野 学  (著, 監修), 藤井 幸多 (著)


### [ヒューメイン・インタフェース―人に優しいシステムへの新たな指針](https://www.amazon.co.jp/%E3%83%92%E3%83%A5%E3%83%BC%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%BB%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9%E2%80%95%E4%BA%BA%E3%81%AB%E5%84%AA%E3%81%97%E3%81%84%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%B8%E3%81%AE%E6%96%B0%E3%81%9F%E3%81%AA%E6%8C%87%E9%87%9D-%E3%82%B8%E3%82%A7%E3%83%95-%E3%83%A9%E3%82%B9%E3%82%AD%E3%83%B3/dp/4894714205)
発行日|著者
:--|:--
2001年|ジェフ ラスキン  (著), Jef Raskin (原著), 村上 雅章 (翻訳)


### [デザイニングWebアクセシビリティ: アクセシブルな設計やコンテンツ制作のアプローチ](https://www.amazon.co.jp/dp/B01N3CGZ7W/ref=dp-kindle-redirect)
発行日|著者
:--|:--
2015年|太田良典  (著), 伊原力也  (著)

<br/>


## 効果的なタイミングでデザインに関わるために読んだ本
- 正しいFBも適切なタイミングで伝えなければ効果は薄いです。UIデザインのパターンや良し悪しを言語化できるようになったタイミングで読んでみて下さい。私はこれでデザイナーとの距離がより縮まりました

### [みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善ガイド](https://www.amazon.co.jp/%E3%81%BF%E3%82%93%E3%81%AA%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%89%B9%E8%A9%95%E2%80%95%E7%9B%AE%E7%9A%84%E9%81%94%E6%88%90%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%82%B3%E3%83%A9%E3%83%9C%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3-%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E6%94%B9%E5%96%84%E3%82%AC%E3%82%A4%E3%83%89-%E3%82%A2%E3%83%BC%E3%83%AD%E3%83%B3%E3%83%BB%E3%82%A4%E3%83%AA%E3%82%B6%E3%83%AA%E3%83%BC/dp/4802510209)
発行日|著者
:--|:--
2016年|アーロン・イリザリー (著), アダム・コナー (著), 長谷川恭久 (その他), 安藤貴子 (翻訳)

<br/>


## 改めてCSS設計について学ぶために読んだ本
- こだわり抜いたUIデザインを正しく、美しく実装に落とし込みたくて読みました

### [HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方](https://www.amazon.co.jp/HTML5-CSS3%E3%83%A2%E3%83%80%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0-%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%8C%E6%95%99%E3%81%88%E3%82%8B3%E3%81%A4%E3%81%AE%E6%9C%AC%E6%A0%BC%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88-%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%80%E3%83%BC%E3%83%89%E3%83%BB%E3%82%B0%E3%83%AA%E3%83%83%E3%83%89%E3%83%BB%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%AB%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9-%E5%90%89%E7%94%B0%E7%9C%9F%E9%BA%BB-ebook/dp/B0176GNY26)
発行日|著者
:--|:--
2015年|吉田真麻  (著) 


### [Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法](https://www.amazon.co.jp/dp/B00M0ESXUI/ref=dp-kindle-redirect)
発行日|著者
:--|:--
2014年|谷 拓樹  (著) 


### [Every Layout](https://www.amazon.co.jp/dp/B09LQNQ7CW/ref=dp-kindle-redirect)
発行日|著者
:--|:--
2021年|ヘイドン・ピカリング  (著), アンディ・ベル (著), 安田祐平 (翻訳), 横内宏樹 (翻訳) 

<br/>


## デザイナーと協力してデザインシステムを構築する事になった際に読んだ本
- デザインシステムについて学ぶ前は、エンジニアのデザインシステムへの関わり方といえば、Storybook 等でコンポーネント集を作ることでした。  
しかし少しデザインシステムについて学べば、視野が広がりエンジニアにとっての有用性も理解できるため気になっている人は参考にしてみて下さい


### [Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド](https://www.amazon.co.jp/dp/B07PTXXK1S/ref=dp-kindle-redirect)
発行日|著者
:--|:--
2018年|Alla Kholmatova (著), 佐藤伸哉  (翻訳), 株式会社Bスプラウト (翻訳) 


### [Atomic Design ～堅牢で使いやすいUIを効率良く設計する](https://www.amazon.co.jp/dp/B07CJ5TLK2/ref=dp-kindle-redirect)
発行日|著者
:--|:--
2018年|五藤 佑典  (著) 

<br/>


## UXデザインの基本を学ぶときに読んだ本
- UXデザインは他のスキルと比べても経験することが大事だと考えています。しかしそれでも最低限の知識がないと業務機会に恵まれにくいので、多少は勉強しておいたほうがいいです
- 「UXデザインの教科書」の後半部分は手法の紹介が中心になっていますので、覚えるよりも引き出せるようにしておくことがおすすめです

### [Web制作者のためのUXデザインをはじめる本 ユーザビリティ評価からカスタマージャーニーマップまで](https://www.amazon.co.jp/Web%E5%88%B6%E4%BD%9C%E8%80%85%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AEUX%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%92%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E6%9C%AC-%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E8%A9%95%E4%BE%A1%E3%81%8B%E3%82%89%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%83%BC%E3%82%B8%E3%83%A3%E3%83%BC%E3%83%8B%E3%83%BC%E3%83%9E%E3%83%83%E3%83%97%E3%81%BE%E3%81%A7-%E7%8E%89%E9%A3%BC%E7%9C%9F%E4%B8%80-ebook/dp/B01N8TYF05/ref=sr_1_1)
発行日|著者
:--|:--
2016年|玉飼真一  (著), 村上竜介 (著), 佐藤哲 (著), 太田文明 (著), 常盤晋作 (著), 株式会社アイ・エム・ジェイ (著)


### [UXデザインの教科書](https://www.amazon.co.jp/dp/B09993DLMS/ref=dp-kindle-redirect)
発行日|著者
:--|:--
2016年|安藤昌也  (著) 


### [SPRINT 最速仕事術――あらゆる仕事がうまくいく最も合理的な方法](https://www.amazon.co.jp/SPRINT-%E6%9C%80%E9%80%9F%E4%BB%95%E4%BA%8B%E8%A1%93%E2%80%95%E2%80%95%E3%81%82%E3%82%89%E3%82%86%E3%82%8B%E4%BB%95%E4%BA%8B%E3%81%8C%E3%81%86%E3%81%BE%E3%81%8F%E3%81%84%E3%81%8F%E6%9C%80%E3%82%82%E5%90%88%E7%90%86%E7%9A%84%E3%81%AA%E6%96%B9%E6%B3%95-%E3%82%B8%E3%82%A7%E3%82%A4%E3%82%AF%E3%83%BB%E3%83%8A%E3%83%83%E3%83%97-ebook/dp/B06Y5NW5PQ)
発行日|著者
:--|:--
2017年|ジェイク・ナップ (著), ジョン・ゼラツキー (著), ブレイデン・コウィッツ (著), 櫻井祐子  (翻訳) 

<br/>






## ここまで学んできた知識では、全然言語化できない好き嫌いがあったときに読んだ本

- 機能美ではない、人が本能的に好きだと感じることについて考えるきっかけになりました
- 主観になりますが長く愛されるプロダクト（多くのファンを持つプロダクト）は、この部分のデザインが良い印象なので機会があれば一読してみてください

### [エモーショナル・デザイン―微笑を誘うモノたちのために](https://www.amazon.co.jp/%E3%82%A8%E3%83%A2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%AB%E3%83%BB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E2%80%95%E5%BE%AE%E7%AC%91%E3%82%92%E8%AA%98%E3%81%86%E3%83%A2%E3%83%8E%E3%81%9F%E3%81%A1%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AB-%E3%83%89%E3%83%8A%E3%83%AB%E3%83%89%E3%83%BB-%E3%83%8E%E3%83%BC%E3%83%9E%E3%83%B3/dp/4788509210)
発行日|著者
:--|:--
2004年|ドナルド・A. ノーマン (著), Donald A. Norman (原著), 岡本 明 (翻訳), 安村 通晃 (翻訳), 伊賀 聡一郎  (翻訳), 上野 晶子 (翻訳)

<br/>



## デジタル領域以外のビジュアルデザイン技法を学びたくて読んだ本
- デザイン知識を広げていく過程でデジタル領域以外のビジュアルデザイン技法にも興味を持ちました。割と役に立つこともあるので、その辺りの著書も少しだけ紹介しておきます


### [あるあるデザイン](https://www.amazon.co.jp/dp/B07MX8DCZJ/ref=dp-kindle-redirect)

- 各レイアウトやビジュアルの効果を端的に紹介してくれています。なのでUIデザインを言語化するときのボキャブラリーが増えました

発行日|著者
:--|:--
2019年|ingectar-e (著)


### [伝わるデザインの思考と技法 雑誌のデザイン](https://www.amazon.co.jp/%E4%BC%9D%E3%82%8F%E3%82%8B%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E6%80%9D%E8%80%83%E3%81%A8%E6%8A%80%E6%B3%95-%E9%9B%91%E8%AA%8C%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-%E8%A6%96%E8%A6%9A%E4%BC%9D%E9%81%94%E3%83%A9%E3%83%9C%E3%83%BB%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E8%A6%96%E8%A6%9A%E4%BC%9D%E9%81%94%E3%83%A9%E3%83%9C%E7%B7%A8%E9%9B%86%E9%83%A8/dp/4416716486/ref=sr_1_3)

- 雑誌はデジタルより歴史が長い分、参考にできるものがとても多いです。この本ではその雑誌のデザインができた背景や裏側が紹介されています
- 読み物としても単純に面白かったです

発行日|著者
:--|:--
2016年|視覚伝達ラボ編集部 (編集)


### [ミニマル・パッケージ・デザイン 美しさを際立たせるシンプルネス](https://www.amazon.co.jp/%E3%83%9F%E3%83%8B%E3%83%9E%E3%83%AB%E3%83%BB%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%83%BB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-%E7%BE%8E%E3%81%97%E3%81%95%E3%82%92%E9%9A%9B%E7%AB%8B%E3%81%9F%E3%81%9B%E3%82%8B%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%83%8D%E3%82%B9-%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E7%A4%BE/dp/4766133773)

- 「なぜシンプルである必要があるの？」と質問されたことがきっかけで読みました
- ミニマルにデザインすることの目的と本質や機能面との両立について、参考にできそうなパッケージデザインが多かったです（なにより魅力的なデザインが多いので見ていて楽しい）

発行日|著者
:--|:--
2020年|グラフィック社 (編集), Chris Huang (その他), 和田 侑子 (翻訳)


### [写真が上手くなりたいなら覚えるべき50の掟](https://www.amazon.co.jp/%E5%86%99%E7%9C%9F%E3%81%8C%E4%B8%8A%E6%89%8B%E3%81%8F%E3%81%AA%E3%82%8A%E3%81%9F%E3%81%84%E3%81%AA%E3%82%89%E8%A6%9A%E3%81%88%E3%82%8B%E3%81%B9%E3%81%8D50%E3%81%AE%E6%8E%9F-%E7%8E%84%E5%85%89%E7%A4%BEMOOK-%E7%A7%A6-%E9%81%94%E5%A4%AB/dp/4768305644)

- 被写体の引き立たせ方や空間の使い方、光の扱いなどUIデザインに通じる物があり勉強になりました

発行日|著者
:--|:--
2014年|秦 達夫  (著), 鹿野 貴司 (著)

<br/>


## おわりに
Qiitaのこの記事を見ているということはエンジニアの方が多いと思います。
エンジニアにとってデザイン知識は、まだまだプラスアルファの知識だと思いますので必要に応じて参考にしていただければと思います。