ノンデザイナーでもわかる UX＋理論で作るWebデザイン
- Tweet
- mixiチェック
内容紹介
ユーザー視点で「目的を達成できる」「使いやすい」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章 ユーザーの感性に訴えるデザイン
充実のラインナップに加え、割引セールも定期的に実施中！
商品を選択する
| フォーマット | 価格 | 備考 | |
|---|---|---|---|
| 書籍 | 2,739円 | ||
備考
●川合 俊輔（かわい しゅんすけ）
UXデザイナー
芝浦工業大学 デザイン工学部 卒業。UXデザイン研究室(吉武研究室)に所属。ユーザー中心のプロセス、ユーザビリティ評価手法、UIデザインの研究をする。
2014年に株式会社ジャストシステムに入社。UXデザイナーとして、B2B、B2CのモバイルアプリやソフトウェアなどのUXデザイン・UIデザインに従事。
2017年7月からはTigerspike株式会社でUXデザイナーとして活躍中。
●大本 あかね（おおもと あかね）
allWebクリエイター塾 代表
デジタルマーケティング コンサルタント
Web教育の黎明期から10年以上に渡り短期集中型のカリキュラムを持つスクールを運営。
Webサイトだけで受講生を集客しプローモーションを行い、業界では堅実の内容で定評がありのべ1万人が受講している。プロジェクト単位でディレクター、UX設計、企画、マーケティング、検索エンジン対応などで多くのプロジェクトに参画している。
●菊池 崇（きくち たかし）
Web Directions East LLC 代表
allWebクリエイター塾 講師
大手IT企業、システム会社、Web制作会社のコンサルティングや、企業研修、イベント出演、執筆などを行う。自身でもアプリUI、システム案件のUIを担当。
モバイルファースト、レスポンシブWebデザインなど最新情報を日本のWebメディアにいち早く寄稿し話題を提供している。またUX＆UIの分野において下記の資格を保持している。
ニールセン・ノーマングループ UXサーティファイド
ニールセン・ノーマングループ モバイルデザイン スペシャリスト
目次
第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サイトの色の指定方法
色が与える印象
計画的な配色をしよう
メインカラー、ベースカラー、アクセントカラーを決める
ボタン、テキストリンク、テキストの配色
アクセシビリティに配慮した配色
フォントが与える印象を考える
文字のジャンプ率でメリハリをつける
情報量が多くても見やすくする工夫をする
余白（マージン）をデザインする
最後に
