このページを見ていただきありがとうございます。本書は「個人開発をするときに、デザイナーがいなくても、それなりにかっこいいプロダクトを作りたい！」というエンジニアに向けて、デザインを行う際のプロセスを解説する本です。

前著との違い
前著では、コンピュータを題材とした”ものづくり”におけるデザインとは何かから、デザインをプロダクトに反映させるまでという幅広いトピックを網羅的に説明しました。一方で本書は、実装前のデザインを行うプロセスにフォーカスし、具体例を挙げながら説明を行います。

誰に向けた本か
「デザイナー不在で個人開発を行うエンジニア」または、「デザインに興味関心が出てきたエンジニア」のような方々に向けた本です。以下のような挫折体験を持っているとなお良いです。
・CSS・HTMLの写経本を買ってみたが、分厚く手につかない
・興味関心はあるが、敷居が高く何年も始められていない

この本を読むメリット
個人開発の際に、少しかっこいいプロダクトが作れるようになります。デザインを行う時にそもそも何を考えれば良いのか、トピックを網羅的に解説します。

この本でやらないこと

• ツールの具体的な使い方
• ECなど複雑なシステムの具体的なデザインプロセス

この本の特徴
　単純なTodoアプリを例に説明をしています。ECサイトや企業ホームページなど、デザインする必要がある部品が多いプロダクトであればあるほど、説明が煩雑になります。今回はデザインの下地がない状態から理解しやすいように、プログラミングのチュートリアルと同様、シンプルなプロダクトを題材に、理解しやすい切り口で説明を行います。

目次
第1章 Todoアプリのデザイン

• 使っているツールの紹介
• テーマを決める
• ユースケースを決める
• オブジェクトの役割を整理する
• 色・フォント・余白などで画面をデザインする

第2章 シグニファイアとアフォーダンス
2-1 シグニファイアとアフォーダンス：定義
2-2 シグニファイアとWebデザイン
2-3 アフォーダンスとWebデザイン
2-4シグニファイアとアフォーダンスの重要性
2-5 まとめ

第3章 デザイン原則
3-1 整列 (Alignment)
3-2 近接 (Proximity)
3-3 コントラスト (Contrast)
3-4 反復 (Repetition)
3-5 デザイン原則の統合

第4章 余白
4-1 余白の重要性
3-2 余白の種類
3-3 余白の効果的な利用
3-4 余白のバランス
3-5 余白と視認性
3-6 余白の設計におけるヒント

第5章 色
5-1配色の重要性
5-2色の選択
5-3カラーパレットの使用
5-4配色の効果的な利用
5-5ユーザビリティとアクセシビリティ
5-6配色におけるまとめ

第6章 フォント
6-1 フォントの重要性
6-2 フォントの選択
6-3 フォントの使用における権利
6-4 フォントの効果的な使用

おわりに

目次
はじめに
第1章 デザインとは何か
1-1 情報化社会とデザイン
1-2 デザインとエンジニアリングの役割
1-3 デザインは一切をデザイナーに任せればいい？
第2章 カッコイイデザインが作れない！-プロダクトのデザインプロセスとデザイン原則-
2-1 プロダクトの企画
2-2 ワイヤーフレームのプロトタイプの作成
2-3 画面レイアウト
2-4 4つのデザイン原則
2-5 他のサービスを参考する
第3章 デザインを実装できない！-デザインの実装-
3-1 UIコンポーネントライブラリの選定
3-2 特に注目するべきプロパティ
第4章 ほんとにかっこよくできたの？-フィードバックを受ける-
4-1 身近な友人に素朴に使ってもらう
4-2 デザインに精通した人に見てもらう
4-3 広く様々な人に使ってもらう
第5章 よくわかんないけど、とりあえずカッコイイデザインを教えろ!-今から使えるデザインTips-
5-1 ヘッダーのデザイン
5-2 ログイン画面のデザイン
5-3 ボタンのデザイン
5-4 カードデザイン
おわりに