本書は、JavaScript標準であるECMAScri pt 6以降に対応した、完全かつ簡潔なガイドブックです。古いバージョンについては解説をスキップし、現在のはるかに強力なモダンJavaScriptの中核技術からスタートできます。関数型／オブジェクト指向／非同期プログラミングのテクニックやヒントを本書で習得し、開発生産性の飛躍的な向上をぜひ目指してください。Java、C#、C/C++など他言語の経験者、初中級者がモダンJavaScriptを本格的に学べる一冊です。

フロントエンド ド初心者へのススメ

JavaScriptモダンプログラミング完全ガイド　堅牢なコードを効率的に開発できる！

オブジェクト指向ユーザーインターフェース（OOUI）とは、オブジェクト（もの、名詞）を起点としてUIを設計すること。タスク（やること、動詞）を起点としたUIに比べて、画面数が減って作業効率が高まり、また開発効率や拡張性も向上する、いわば「銀の弾丸」的な効果を持つ。ブログや雑誌記事などで大きな反響を得たこの設計手法について、前半部では理論やプロセスを詳説。そして後半部の「ワークアウト（実践演習）」では18の課題に読者がチャレンジ。実際に考え、手を動かし、試行錯誤をすることにより、OOUIの設計手法を体得できる。

何となく好きだと思っていたUIデザインと1から向き合う

はじめに

■1 オブジェクト指向UIとは何か
1-1 目当ての現し
	ユーザー要求とタスク
	目当て＝オブジェクト
1-2 お金が先か、商品が先か
	明らかにおかしなUI
	テストするまでもない問題
1-3 オブジェクト指向UI
	オブジェクト指向UIの原則
	オブジェクトを知覚でき直接的に働きかけられる
	オブジェクトは自身の性質と状態を体現する
	オブジェクト選択→アクション選択の操作順序
	すべてのオブジェクトが互いに協調しながらUIを構成する
1-4 オブジェクト指向か？ タスク指向か？
	対象オブジェクトを選ぶところから操作が始まる
	タスク指向UIの問題
	オブジェクト指向UIとタスク指向UIの対比
	タスク指向UIを改善する　ビデオカメラ画面
	タスク指向UIを改善する　フードデリバリーサービス
	オブジェクトを前面に出す
1-5 UIがタスク指向になってしまう背景
	業務分析では「やること」がまとめられる
	利用手続きをデザインしようとする
	タスクに必要な情報オブジェクトを定義する

■2 オブジェクト指向UIの設計プロセス
2-1 デザインプロセスのミッシングリンクをつなぐ
2-2 アプリケーションの手掛かり
	タスクを手掛かりにすると
	オブジェクトを手掛かりにする
2-3 ユーザー、タスク、オブジェクトの関係
2-4 ソフトウェアデザインのレイヤー
	UIは複数のオブジェクトを構造的に表象した合成物
	モデル　ユーザーの関心対象の模式
	インタラクション　構造と機能
	プレゼンテーション　スタイルやレイアウト
2-5 デザインの究極の目的は形である
	デザイナーのアブダクション
	一貫して作用する「原理」を備える
	道具の抽象性
2-6 オブジェクト指向UI設計の基本ステップ
	ステップ1. オブジェクトの抽出
	ステップ2. ビューとナビゲーションの検討
	ステップ3. レイアウトパターンの適用

■3 オブジェクト指向UI設計の実践
3-1 オブジェクト指向UIの設計ステップ
3-2 本章でデザインするものの全体像
3-3 ステップ1. オブジェクトの抽出
	「名詞」を抽出する
	「名詞」とそれらの関係を抽出する
	「名詞」を汎化し、粒度を揃える
	「名詞」の関係性をつなげ、オブジェクトを特定する
	オブジェクトの中で「メインオブジェクト」になるものを特定する
	メインオブジェクトの多重性を特定する
	メインオブジェクトに付随するオブジェクトをプロパティとする
		コラム　メインオブジェクト選びのポイント
	タスクからアクションを見つける
		コラム　タスク、オブジェクト、プロパティ、アクション
3-4 ステップ2. ビューとナビゲーションの検討
	基本のビュー形式
	メインオブジェクトに「コレクション」と「シングル」のビューを与える
		コラム　シングルビューとコレクションビューの省略
	コレクションビューとシングルビューの呼び出し関係を検討する
	メインオブジェクトの中からルートナビゲーション項目を選定する
		コラム　ルートナビゲーションの項目、アイコン、ラベリング
3-5 ステップ3. レイアウトパターンの適用
	ルートナビゲーションの配置パターン
	ビューの配置パターン
	メインオブジェクト同士の参照関係を踏まえて配置パターンを適用する
		コラム　ビューの配置パターン適用のポイント
	コレクションビューの表示形式のパターン
		コラム　オブジェクトへのフォーカスとコレクションビュー
	コレクションの性質や用途に合わせて表示形式を決定する
	コレクションのフィルタリングのパターン
	シングルビューの表示形式のパターン
		コラム　シングルビューの表示内容
	シングルビューの性質や用途に合わせて表示形式を決定する
	アクションの性質や用途に合わせて表示形式を決定する
	Create（作成）アクションのパターン
	Delete（削除）アクションのパターン
	Update（更新）アクションのパターン
	ビジュアルデザイン
3-6 タスクをどう扱うか
	タスクの特徴
	タスクはどこへ行くのか?

■4 ワークアウト：基礎編
進め方
レベル1 メモアプリケーション
	ヒント・チャレンジ
	解説
レベル2 社員名簿アプリケーション
	ヒント・チャレンジ
	解説
レベル3 イベント店舗管理アプリケーション
	ヒント・チャレンジ
	解説
レベル4 会議室予約アプリケーション
	ヒント・チャレンジ
	解説
レベル5 家族で遊べる場所を探すアプリケーション
	ヒント・チャレンジ
	解説
レベル6 商品管理アプリケーション
	ヒント・チャレンジ
	解説
レベル7 商品管理アプリケーション
	ヒント・チャレンジ
	解説
レベル8 商品管理アプリケーション
	ヒント
	解説
レベル9 商品管理アプリケーション
	ヒント
	解説

■5 ワークアウト：応用編
進め方
レベル10 スマートフォン用の営業支援アプリケーション
	ヒント
	解説
レベル11 イベント管理アプリケーション
	ヒント
	解説
レベル12 保険契約の顧客管理アプリケーション
	ヒント
	解説
レベル13 アセット管理アプリケーション
	ヒント
	解説
レベル14 サイト管理アプリケーション
	ヒント
	解説
レベル15 出張申請・精算アプリケーション
	ヒント
	解説
レベル16 契約管理アプリケーション
	ヒント
	解説
レベル17 通貨換算アプリケーション
	ヒント
	解説
レベル18 販売実績照会アプリケーション
	ヒント
	解説

■6 オブジェクト指向UIのフィロソフィー
6-1 オブジェクトの原義
6-2 オブジェクト指向
	クラスとインスタンス
	イデア論
	GUIにおけるオブジェクト
	プログラミングにおける記述法
6-3 GUI
	マンマシン インターフェースからユーザーインターフェースへ
	インターフェースはユーザーとオブジェクトを接着する
	Whirlwind　GUIという発想の原型
	SAGE　防空システムに組み込まれた最初期のGUI
	Sketchpad　グラフィック言語による対話型コンピューター
	NLS　知的生産活動のためのコンピューター
	Smalltalk　誰もが使えるパーソナルコンピューター
	TUI　テキストベースのUI
	Star　GUIベースのビジネス用ワークステーション
	Macintosh　商業的に成功した最初のGUIシステム
	iPhone　パーソナルコンピューターの新しいフォームファクター
	メタメディアとしてのオブジェクト指向UI
6-4 モードレス
	モードレスネスを信奉しなさい
	ラリー・テスラー　テキスト編集のモードレス化
	ドナルド・ノーマン　モードエラーの分析
	ジェフ・ラスキン　モードレスにすることで劇的に使いやすくなる
	モードレスにする方法
6-5 オブジェクト指向UIについての文献
	『Object-Oriented User Interfaces and Object-Oriented Languages』
	『Object-Oriented Interface Design』
	『Designing Object-Oriented User Interfaces』
	『The Elements of User Interface Design』
	『Designing for the User with OVID』

おわりに
参考文献
索引
あとがき

オブジェクト指向UIデザイン──使いやすいソフトウェアの原理

体験のデザインって、こういうことか！
8ステップではじめるWebのUXデザイン！

本書は、実際に大手デジタルマーケティング会社でUXデザインを実践してきた執筆陣が、
Web制作者が知っておくべき、UXデザインの「基本」から
「ユーザビリティ評価」「プロトタイピング」「構造化シナリオ」「ユーザー調査」
「カスタマージャーニーマップ」「ユーザーモデリング」「組織導入」までを、
8つの章に分けて解説していきます。

実際に導入するためのテクニックや大小2つのプロジェクトのモデルケースを収録し、
理想論でなくあくまで現実的、実践的な方法を一冊にまとめました。

また、本書は想定読者として「白石由香」というWebデザイナーのペルソナを作り、
彼女に向けて書かれているので、臨場感をもって読み進めることができるはずです。

さらに、テンプレートもダウンロードできるので、理解するだけでなく、
すぐに試すこともできます。まさに、UXデザインの「現場叩き上げ」の教科書です。

◎読者対象：
Webに関わる企画・開発者、ディレクター、プロデューサー、デザイナー、エンジニア 


◎特典：
テンプレートがダウンロードできる

◎収録内容： 
1章　UXデザインとは?
2章　ユーザビリティ評価からはじめる
3章　プロトタイピングで設計を練りあげる
4章　ペルソナから画面までをシナリオで繋ぐ
5章　ユーザー調査を行う
6章　カスタマージャーニーマップで顧客体験を可視化する
7章　共感ペルソナによるユーザーモデリング
8章　UXデザインを組織に導入する

1章　UXデザインとは?

1-1　UXデザインの理想と現実のギャップ 
1-2　UX、UXデザインとは? 
1-3　UXデザインを仕事で行うときの現実 
1-4　そんな中どうUXデザインをやるべく攻めるか? 
1-5　UX デザインを学習し、実践していく 

2章　ユーザビリティ評価からはじめる

ユーザビリティとは? 
2-1　Webではユーザビリティ評価のチャンスは多い 
2-2　Webの現場でのユーザビリティ評価とは? 
2-3　ユーザビリティ評価の方法
2-4　ユーザビリティ評価の実施手順
2-5　ユーザーを呼んでこない「専門家評価」
2-6　便利なユーザビリティ評価手法のいろいろ
仕事として実施するための機会の作り方

3章　プロトタイピングで設計を練りあげる

プロトタイピングとは?
3-1　プロトタイピングの種類
3-2　ワイヤーフレームを評価する
3-3　ペーパープロトタイピング
3-4　プロトタイピングを実施する際の注意点
3-5　プロトタイピングツール
仕事として実施するための機会の作り方

4章　ペルソナから画面までをシナリオで繋ぐ

構造化シナリオ法とは?
4-1　ペルソナがユーザー目線を教えてくれる
4-2　当事者の思い込みから逃れるための構造化シナリオ法
4-3　価値のシナリオ
4-4　行動のシナリオ
4-5　操作のシナリオ
4-6　シナリオを考える練習
4-7　構造化シナリオ法のツールキット
4-8　シナリオは誰かに読んでもらい客観性を保つ
仕事として実施するための機会の作り方

5章　ユーザー調査を行う

ユーザー調査とは?
5-1　データ収集を行う
5-2　ユーザーに「弟子入り」してインタビューを行う
5-3　データ収集の練習
5-4　データ分析を行う
5-5　親和図法について
5-6　親和図法による分析の練習
5-7　データ分析のツールキット
仕事として実施するための機会の作り方

6章　カスタマージャーニーマップで顧客体験を可視化する

カスタマージャーニーマップとは?
6-1　カスタマージャーニーマップが求められるわけ
6-2　カスタマージャーニーのための調査
6-3　カスタマージャーニーを作ってみる
6-4　“現状の姿”を課題解決するカスタマージャーニー
6-5　カスタマージャーニーマップのツールキット
仕事として実施するための機会の作り方

7章　共感ペルソナによるユーザーモデリング

7-1　プロジェクトメンバーの目線を揃える
7-2　ペルソナとは?
7-3　最終段階：ユーザーに共感できるか

8章　UXデザインを組織に導入する

8-1　UX デザインへの組織的な取り組み
8-2　UXデザインステージ
8-3　ステークホルダーマップ
8-4　UXデザイン導入シナリオ

順位	23位
総合点	3点
Qiitaの記事での点数	2点
Twitterでの点数	1点

【フロントエンド】オブジェクト指向UIデザイン──使いやすいソフトウェアの原理の評価
2022-04-15更新

フロントエンド分野での評価

【フロントエンド】オブジェクト指向UIデザイン──使いやすいソフトウェアの原理の評価2022-04-15更新

フロントエンド分野での評価

【フロントエンド】オブジェクト指向UIデザイン──使いやすいソフトウェアの原理の評価
2022-04-15更新