第1章 デザイン思考とWebデザイン
デザイン思考とは
Webサービスと操作性の重要度
WebサイトにおけるUIとコンテンツの重要性
サイトの種類によって制作スタイルは異なる
サイト制作現場でよくある問題
第2章 WebデザインとUX
Webの特徴を理解して制作する
Web制作の標準規格を理解する
Webサイトの目標を立てる
WebデザインはPDCAで成長させる
UXのデザインサイクル
データを理解してWebデザインに活かす
プロジェクトをより良く進めよう
第3章 ビジネスモデルのデザイン
UX設計とは
サイトの顧客像を設定する
ユーザーの行動を可視化する
UX設計ができているか確認する
ビジネスモデルをデザインする
マーケティングとUXを理解する
第4章 サイト構成のデザイン
サイトストラクチャとは
サイトストラクチャのパターン
ナビゲーション、ページレイアウト、UIのパターン
グローバルナビゲーション
ローカルナビゲーション
パンくずリスト
ステップナビゲーション
関連ナビゲーション
レイアウトパターン トップページ
レイアウトパターン 一覧ページ
レイアウトパターン 詳細ページ
レイアウトパターン アクセスページ
レイアウトパターン 入力フォーム/問い合わせページ
レイアウトパターン ウォークスルーページ/コーチマーク
レイアウトパターン 空のページ
UIパターン タブ
UIパターン カルーセル
UIパターン アコーディオン
UIパターン プッシュ通知
UIパターン モーダル
第5章 情報のデザイン
情報設計の概要
ユーザーの理解に基づく情報設計
ユーザーの理解に基づく情報設計の流れ
シナリオから情報設計要素を抽出
ストーリーボードからコンテンツ要素を抽出
カードソーティングで情報を整理する
情報を5つの分類方法で表現する
情報をわかりやすく表現する
キャッチコピーで魅力を伝える
ユーザー心理を考慮する
ユーザーが検討しやすいUIを考える
最適な分類方法を考える
ECサイトの情報設計を考える
第6章 ユーザー導線のデザイン
ユーザー導線を設計しよう
ユーザー導線のパターンの設計
ワイヤーフレームの描き方
プロトタイピングとWeb開発
プロトタイプをユーザビリティテストする
第7章 画面設計のデザイン
UI設計に役立つ原理・原則を知る
デザインの基本原則 近接
デザインの基本原則 整列
デザインの基本原則 反復
デザインの基本原則 コントラスト
ミラーの法則
ヒックの法則
フィッツの法則
アイコンの役割
効果的なアイコンを作成しよう
情報の見つけやすさ
視線の流れからUIを考える
三分割法を活用した写真の構図
ユーザーに情報を的確に伝える配色を考える
第8章 ユーザー操作とモバイルのデザイン
ヒューマンコンピューターインタラクションとは
マウス操作とインターフェース
フォームのデザインを考える
ラジオボタン、チェックボックス、ドロップダウンを使い分ける
スマートフォンのUXとUIからデザインする
限られた領域でデザインする
スマートフォンのUIを上手に設計する
スマートフォン独自のユーザー操作を理解する
UIは少しずつ進化させる
第9章 ユーザーの感性に訴えるデザイン
色が人に与える影響
色の基礎知識
Webサイトの色の指定方法
色が与える印象
計画的な配色をしよう
メインカラー、ベースカラー、アクセントカラーを決める
ボタン、テキストリンク、テキストの配色
アクセシビリティに配慮した配色
フォントが与える印象を考える
文字のジャンプ率でメリハリをつける
情報量が多くても見やすくする工夫をする
余白(マージン)をデザインする
最後に
本書は「UX」と「理論」という2つの側面から、Webサイトを制作・デザインするときに必要な考え方や法則をまとめました。
何かをデザインする際にツールを思いのままに使いこなせるようになることも重要ですが、デザインするための考え方や法則を学ぶことはさらに重要です。
なぜWebサイトが必要なのか、なぜこのレイアウトなのか、なぜこの色なのか……。このような問いに対して、ユーザー視点に立って根拠にもとづくデザインができるようになるための法則が、本書に簡潔にまとめられています。
本書は、「UX」とは何かを解説する章から始まり、徐々にUX設計の方法へと展開していきます。
そしてその設計したUXから、WebサイトのUI設計への話を進め、具体的なデザイン手法の解説を行っていきます。
【本書を読むメリット】
・理論に基づいたデザインが実装可能になる
・人間心理をベースに、デザインの良し悪しを判断することができる
・UX設計からUIデザインにする方法が学べる
・Webでのデザイン思考が身につく
【内容】
第1章 デザイン思考とWebデザイン
第2章 WebデザインとUX
第3章 ビジネスモデルのデザイン
第4章 サイト構成のデザイン
第5章 情報のデザイン
第6章 ユーザー導線のデザイン
第7章 画面設計のデザイン
第8章 ユーザー操作とモバイルのデザイン
第9章 ユーザーの感性に訴えるデザイン
・業務で使う知識のための教材をまとめる(Webアプリの0→1開発後の権限移譲のために欲しい知識)[2020-05-09に投稿]
・未経験だけど、ユーザビリティテストを導入してみた話(Photocreate Advent Calendar 21日目 )[2018-12-21に投稿]