ノンデザイナーでもわかる UX+理論で作るWebデザイン

著者 : 川合俊輔 大本あかね

• マイナビ出版 (2017年9月26日発売)

作品紹介・あらすじ

本書は「UX」と「理論」という2つの側面から、Webサイトを制作・デザインするときに必要な考え方や法則をまとめました。
何かをデザインする際にツールを思いのままに使いこなせるようになることも重要ですが、デザインするための考え方や法則を学ぶことはさらに重要です。
なぜWebサイトが必要なのか、なぜこのレイアウトなのか、なぜこの色なのか……。このような問いに対して、ユーザー視点に立って根拠にもとづくデザインができるようになるための法則が、本書に簡潔にまとめられています。


本書は、「UX」とは何かを解説する章から始まり、徐々にUX設計の方法へと展開していきます。
そしてその設計したUXから、WebサイトのUI設計への話を進め、具体的なデザイン手法の解説を行っていきます。

【本書を読むメリット】
・理論に基づいたデザインが実装可能になる
・人間心理をベースに、デザインの良し悪しを判断することができる
・UX設計からUIデザインにする方法が学べる
・Webでのデザイン思考が身につく


【内容】
第1章　デザイン思考とWebデザイン
第2章　WebデザインとUX
第3章　ビジネスモデルのデザイン
第4章　サイト構成のデザイン
第5章　情報のデザイン
第6章　ユーザー導線のデザイン
第7章　画面設計のデザイン
第8章　ユーザー操作とモバイルのデザイン
第9章　ユーザーの感性に訴えるデザイン

感想・レビュー・書評

[bookperさんの感想 · 2019年9月1日]

Webデザインをする際の考え方や気を付けるべき点をまとめた本。タイトルにあるように、「ＵＸ」に焦点を当てて、「UXの理解」、「UX設計」、「UXからUI設計」、「具体的なデザイン」の４部立ての記載となっている。一つ一つの説明は深くないため、既に知識がある方には物足りないかもしれない。ただ記載された考え方の具体的実例が紹介されているので、「ここはこういう観点で作られていたのか」とか「ここはこいう意図があってこの色にしたのか」など発見があり楽しく読み進められるのではないかと思う。

[norikoniさんの感想 · 2023年4月21日]

読むべきだな

[ひかるさんの感想 · 2022年7月24日]

PDCAがウェブでは大事だと改めて認識できた。
todolistにテンプレを作って、早速実践する

定量分析（数字）と定性分析（理由）で制度をあげて行くことが大事

ペルソナ
写真を使う
ダミーの名前はダメ　実際の名前もだめ
年代はバツ
性別
職業
特徴　性格、行動
言いそうな言葉

[なおさんの感想 · 2020年6月2日]

UI・UXの基本が分かる本。
情報設計やデザインを論理的に考える方法を学べる。
デザインで適当な戻しがきた時も、この本で紹介されているような法則や論理をもとに考えて制作していれば、お客様を説得できそう。

[katoetuさんの感想 · 2020年5月8日]

難しい。実際やってみないと！という感じ。

UIとはUser interfaceのこと。ユーザーが操作するインターフェイスのこと。
説明しなくても理解できるようにUIはアフォーダンス利用して作成する。直感的に利用できないUIはユーザを迷わせるだけになる。
視線の流れは「Fの字」を描く。

UXとはユーザー体験。それぞれ違うのでパターンを見つけることが大切。

情報設計の基本はユーザーがどの様に考えるのか？どの様に伝えたら分かりやすいのか？を理解すること。
ユーザー視点で情報設計を行うために、ストーリーボードやシナリオを用いてユーザがよく利用する機能や要件等の情報を抽出します。
ストーリーボードはきれいに書く必要はなく表情やコンテキストが理解できればいい。
１、ユーザーが求めている情報の抽出（ストーリーボードやシナリオより）
２、情報の優先順を設計(求めている以外の情報も追加)
３、情報をより分かりやすく表現する

情報の整理の仕方（カードソーディング）
１、コンテンツの名称等の情報をカード化する
２、カードをグループ化する、グループにラベルをつける

デザインの基本原則
・近接→関連している情報は距離を近づけてグループ化する。人は距離が近い情報に「関係があるもの」と認識する習性がある。
・間隔を意識する
・整列→スムーズな視線移動と統一感を生み出す。項目間の関係を正しく認知する。（左揃え、中央寄せ、右揃え）
・反復→同じデザインの要素やグループを繰り返すこと。一貫性や安定感が生まれる。
・コントラスト→書体、線の太さ、色、形、サイズ、余白等の要素の視覚的な差。ユーザーの目を惹きつける。
・ミラーの法則→短期的に記憶できる量には限りがある。「マジカルナンバー7 ± 2 」15秒から30秒の塊に分ける。
・ヒックの法則→選択肢の数が多いほど意思決定に要する時間が長くなる。
・フィッツの法則→「対象に移動するために必要な時間」と「対象までの距離や対象のサイズ」の関係を数式で示した法則。

色が与える影響、印象
トーンから考える、色相を揃える
計画的な配色をしよう
メイン、ベース、アクセントのカラーを決める
ポジティブなボタンには暖色を使うと効果的
色弱の方にも配慮した配色（赤と緑が識別しにくい）
フォントが与える印象
余白をデザイン

[cooboo2011さんの感想 · 2020年3月4日]

UX理論について平易にWebデザインの具体例とともに
分かり易くまとめられていて有用です。

[nonoさんの感想 · 2019年6月13日]

HP作成でのUXを解説した良書

[k3nt0さんの感想 · 2019年4月7日]

UXの話とUIの話がバランスよく盛り込まれていて、webサービスを作るときに必要な思考の流れを掴めた。

単語としてのみ知っていた、ストーリーボードやカスタマージャーニーマップなど、UXを考える際の道具に関してもちゃんと説明されていた。

UIの例も図を駆使して説明してくれているので、UXデザイン初心者の自分としては実装時にどう落とし込まれるかが理解できて読みやすかった。

しかしUIとUXがどちらも語られているのでそれぞれの内容としてはそこまで深掘りされてないと思う。ここで知った内容を元に、ほかの書籍で深掘りしていくのが良さそう。

[Rio Azumaさんの感想 · 2019年3月4日]

UX/UIだけでなく、WEBデザインに関する知識も書いてあり、分かりやすかったです！

[吉川雅彦さんの感想 · 2019年2月18日]

よくまとめられてる、ウェブのデザイン。

著者プロフィール

●川合 俊輔［監訳］
株式会社STYZ Chief Design Officer
芝浦工業大学デザイン工学部卒。海外を拠点とするデザイン会社を経験した後、インクルーシブデザインスタジオ『CULUMU』を設立。多様なユーザー・生活者と共創するデザインプロジェクトをさまざまな業界・企業と取り組む。また、芝浦工業大学でUXデザイン演習等の非常勤講師を務め、人間工学をベースにユーザー中心のプロセス、デザイン評価手法、UXデザインの研究や教育に携わる。
共著書に『ノンデザイナーでもわかる UX+理論で作るWebデザイン』（2017, マイナビ出版）、『ウェブ解析士認定試験公式テキスト2019』（2019, マイナビ出版）、訳書に『UX戦略を組織に取り入れるための戦略的アプローチ』(2017, 自己出版)などがある。

「2023年 『ウェブ・インクルーシブデザイン』 で使われていた紹介文から引用しています。」