どんな本？

Webサイトを制作・デザインする上で必要な考え方や法則を理論的にまとめた本です。1章から3章まではUXについて理論的に、4章から9章までは実践的な内容が書かれています。

デザイン思考とWebデザイン

1章では問題をデザインで解決させる思考やプロセスを指す「デザイン思考」について書かれています。（ここでいうデザインとは見た目や雰囲気などの世界観を指すのではなく、ユーザーの行動、思考に関わる部分、ユーザーに影響を与える色や形、情報、ネーミングを含めたものを言います。）

WebデザインとUX

2章では、Webの特徴を理解することで、問題のない実装を行うことについて書かれています。機種依存やHTML、CSSについても書かれていますが、ここではさほど深掘りされていません。

Webサイト制作におけるPDCAも具体的な例とともにまとめられています。

Plan（計画）＝ユーザーリサーチ、インタビュー、ペルソナ設定、UX設計Do（実行）＝UXを元にUIデザインを行う（シナリオ、ストーリーボード、カスタマージャーニーを利用）
Check（評価）＝デザインしたものをユーザビリティテストでチェックAct（改善）＝公開後のアクセス解析と合わせたユーザビリティテストの検証の結果を元にPlanで設定した仮説も含めて改善

ビジネスモデルのデザイン

3章では2章に登場したペルソナ設定、カスタマージャーニー、ストーリーボードの作り方、それらを使ったUX設計の確認方法もまとめられています。これらを作ったことがない人は参考になると思います。

章のタイトルが「ビジネスモデルのデザイン」ですが、ペルソナ設定、カスタマージャーニー、ストーリーボードの作り方の方がメインです。

サイト構成のデザイン

4章ではサイトを構成するナビゲーションやレイアウト、UIパターン、各種パーツについての役割や実例などがまとめられています。

情報のデザイン

5章では複雑な情報を届けることで「使いやすい」「分かりやすい」Webサイトに繋げる為に、ストーリーボードやシナリオを利用して情報設計（複雑な情報をわかりやすく伝える設計技術）を行う方法が、グループ化やラベルづけ、分類の方法、キャッチコピーなど具体的な実践方法とともにまとめられています。

キャッチコピーというと大げさに捉えてしまいますが、ページのタイトルや料理名など、小さな範囲でのキャッチコピーをここでは指しています。

ユーザー導線のデザイン

6章ではユーザーのWebサイト内での動き（ユーザー導線）を設計する方法をまとめています。ユーザー導線を設計する方法だけでなく、ワイヤーフレームの描き方、プロトタイプとユーザビリティテストの方法も書かれています。

ユーザビリティテスト、昔やったことありますが、結構大変ですよね。。。無駄に緊張してしまう。（被験者じゃないのに）

画面設計のデザイン

7章は人の知覚や認知にもとづいたデザイン理論について書かれています。

近接：関連している情報は距離を近づけてグループ化＝関係があるもの
整列：「透明な線」を用いて要素を意図的に配置＝スムーズな視線導線と統一感を生み出す
反復：同じデザインの要素やグループを繰り返す＝一貫性や安定感を生む
コントラスト：書体・線の太さ・色・形・サイズ・余白などの差＝他の要素より強調されユーザーの目を引く

他にもいくつかの法則やアイコンの役割、レイアウトや視線の動き、配色についても書かれています。

ユーザー操作とモバイルのデザイン

8章ではマウス操作、フォームデザイン、モバイルデザインについて書かれています。画面領域が狭いスマートフォンの特性を知った上でのUIデザインについてまとめられています。

Webデザインについての本なので、モバイルデザインについてはあまり多く書かれていませんが、モバイルのポイントはまとめられていると思います。

ユーザーの感性に訴えるデザイン

9章は色とフォントについて書かれています。色が与える印象やメインカラー、ベースカラー、アクセントカラーの意味、フォントの与える印象や余白についてまとめられています。

ここが好き

ペルソナ設定、カスタマージャーニー、ストーリーボードは作ったことあるけれど、その方法について再確認できたのと、それらを使ったUX設計の確認方法が書かれていた点。

ナビゲーションやレイアウト、UIパターン、各種パーツについて、なんとなくで使っていた箇所のおすすめのデザインポイントや避けたいポイントが書かれていた点。

まとめ

初心に帰って、当たり前と思っている事・なんとなくでやっている事を再確認するのって大事！！