現場のプロがわかりやすく教えるUI/UXデザイナー養成講座
書籍情報
発売日 : 2023/03/28
著者／編集 : 本末英樹
出版社 : 秀和システム
発行形態 : 単行本
ページ数 : 304p
書籍説明
内容紹介
あらゆるサービスが、Webサイトやアプリを通じて提供されるようになってきました。それにしたがって、操作性やデザイン、ユーザー体験の重要性がますます高まり、同時に「UI/UX」というキーワードが、ビジネスの現場でも多く使われるようになりました。また、DXの取り組みが各分野で加速していますが、それを実現する人材として「UI/UXデザイナー」が挙がっています。では、「UI」や「UX」とは何でしょうか。どうやって学べばよいのでしょうか。
本書では、ユーザーインターフェイス／ユーザーエクスペリエンス（UI/UX）で必要となる多くの分野の情報を有機的に紐付けて1つの地図のように並べ、UIデザインやUXデザインを学ぶ最初の一歩として、全体像を理解できる内容になっています。UIデザイナーとして15年、講師として10年以上のキャリアを持つ著者が、「自分が初心者のときに、こんな本がほしかった」「こんな本があればよかったのに」を形にしたものです。
それだけではなく、UIデザインの現場に立ったときに必要となる「データ作成」のコツ、エンジニアとの「ハンドオフ」の方法などについても説明しています。そして、UI/UXデザイナーとしてのキャリア設計やスキル習得方法についても取り上げています。
本書で最初の一歩を踏み出し、そして次はどこに向かうべきなのかの羅針盤として役立ててください。
○本書の内容
Chapter 1 UI/UXデザインとは
UIデザインやUIデザインとは何か、まずは基本的な部分を説明します。
Chapter 2 デザインプロセス
「デザイン思考」という考え方に沿って、UI/UXデザインのプロセスを紐解きます
Chapter 3 ナビゲーションとインタラクション
UIパーツの扱い方やルールについて、具体的な例を見ながら学んでいきます。
Chapter 4 デザインシステム
使い勝手がよく、わかりやすいUIとするための「仕組み」と「見た目」を解説します。
Chapter 5 データ作成とエンジニア連携
「プロトタイプ」の作り方、データを渡す「ハンドオフ」の方法について説明します。
Chapter 6 キャリアと勉強方法
今後のキャリア設計やスキル習得方法、参考書籍やリソースを取り上げます。
本書では、ユーザーインターフェイス／ユーザーエクスペリエンス（UI/UX）で必要となる多くの分野の情報を有機的に紐付けて1つの地図のように並べ、UIデザインやUXデザインを学ぶ最初の一歩として、全体像を理解できる内容になっています。UIデザイナーとして15年、講師として10年以上のキャリアを持つ著者が、「自分が初心者のときに、こんな本がほしかった」「こんな本があればよかったのに」を形にしたものです。
それだけではなく、UIデザインの現場に立ったときに必要となる「データ作成」のコツ、エンジニアとの「ハンドオフ」の方法などについても説明しています。そして、UI/UXデザイナーとしてのキャリア設計やスキル習得方法についても取り上げています。
本書で最初の一歩を踏み出し、そして次はどこに向かうべきなのかの羅針盤として役立ててください。
○本書の内容
Chapter 1 UI/UXデザインとは
UIデザインやUIデザインとは何か、まずは基本的な部分を説明します。
Chapter 2 デザインプロセス
「デザイン思考」という考え方に沿って、UI/UXデザインのプロセスを紐解きます
Chapter 3 ナビゲーションとインタラクション
UIパーツの扱い方やルールについて、具体的な例を見ながら学んでいきます。
Chapter 4 デザインシステム
使い勝手がよく、わかりやすいUIとするための「仕組み」と「見た目」を解説します。
Chapter 5 データ作成とエンジニア連携
「プロトタイプ」の作り方、データを渡す「ハンドオフ」の方法について説明します。
Chapter 6 キャリアと勉強方法
今後のキャリア設計やスキル習得方法、参考書籍やリソースを取り上げます。
目次
はじめに
Chapter 1 UI/UXデザインとは
1-1 UIとUXの違い
UI/UXの必要性
UIとは
UXとは
1-2 UIデザイナーの仕事
UIデザイナーの仕事
いろいろなデザイナー
Chapter 2 デザインプロセス
2-1 デザインプロセス
時代の変化
デザイン思考
人間中心設計
2-2 デザインリサーチ
デザインリサーチ
インタビュー
アンケート
2-3 定義
定義するとは
ペルソナモデル
価値マップ
カスタマージャーニーマップ
2-4 アイデア・コンセプト
アイデアの出し方、まとめかた
コンセプト
シナリオ
2-5 プロトタイピング
プロトタイプとは
ペーパープロトタイプ
ラピッドプロトタイピング（デザインプロトタイピング）
2-6 評価
ユーザビリティテスト
ヒューリスティック評価
Chapter 3 ナビゲーションとインタラクション
3-1 環境
Webブラウザ、iOS、Androidの違い
画面サイズと解像度
3-2 インタラクション
アフォーダンスとシグニファイヤ
メンタルモデル
フラットデザイン
ジェスチャー
インタラクションと状態
3-3 ナビゲーション
ナビゲーション設計
ボタンの階層構造
iOSとAndroid
3-4 UIパーツ名称と用途
UIコンポーネント名称と用途
その他
3-5 アニメーション
アニメーション
トランジション
イージング
3-6 認知心理学、行動経済学
認知心理学
行動経済学
Chapter 4 デザインシステム
4-1 デザインシステム
デザインシステムとは
国内、海外のデザインシステム
ビジュアルアイデンティティ（VI）
「Human Interface Guidelines」と「Material Design Guideline」
4-2 タイポグラフィ
タイポグラフィに必要なスキル
タイポグラフィの基礎
4-3 カラー
テーマカラー
カラーイメージ
コントラスト
ダークモード
4-4 レイアウト
レイアウト
スペーシング
グリッドデザイン
4-5 アイコン
プロダクトアイコン
システムアイコン
事例から解説
Chapter 5 データ作成とエンジニア連携
5-1 デザインツール紹介
デザインツール
UIデザインのトレンド
ペアデザイン
5-2 UIデザインデータの作り方
Figmaについて
スタイル
コンポーネントとインスタンス
オートレイアウト
プラグイン・テンプレート
5-3 エンジニアとの連携
エンジニアと共有する資料
デザイン指示書
遷移図
UIスタック
エンジニアとのコミュニケーション
Chapter 6 キャリアと勉強方法
6-1 キャリア
自分のことを知る
スキルマップ
スキルの選択方法
会社選びと働き方
将来のイメージを描く
6-2 参考書籍・リソース
おわりに
索引
Chapter 1 UI/UXデザインとは
1-1 UIとUXの違い
UI/UXの必要性
UIとは
UXとは
1-2 UIデザイナーの仕事
UIデザイナーの仕事
いろいろなデザイナー
Chapter 2 デザインプロセス
2-1 デザインプロセス
時代の変化
デザイン思考
人間中心設計
2-2 デザインリサーチ
デザインリサーチ
インタビュー
アンケート
2-3 定義
定義するとは
ペルソナモデル
価値マップ
カスタマージャーニーマップ
2-4 アイデア・コンセプト
アイデアの出し方、まとめかた
コンセプト
シナリオ
2-5 プロトタイピング
プロトタイプとは
ペーパープロトタイプ
ラピッドプロトタイピング（デザインプロトタイピング）
2-6 評価
ユーザビリティテスト
ヒューリスティック評価
Chapter 3 ナビゲーションとインタラクション
3-1 環境
Webブラウザ、iOS、Androidの違い
画面サイズと解像度
3-2 インタラクション
アフォーダンスとシグニファイヤ
メンタルモデル
フラットデザイン
ジェスチャー
インタラクションと状態
3-3 ナビゲーション
ナビゲーション設計
ボタンの階層構造
iOSとAndroid
3-4 UIパーツ名称と用途
UIコンポーネント名称と用途
その他
3-5 アニメーション
アニメーション
トランジション
イージング
3-6 認知心理学、行動経済学
認知心理学
行動経済学
Chapter 4 デザインシステム
4-1 デザインシステム
デザインシステムとは
国内、海外のデザインシステム
ビジュアルアイデンティティ（VI）
「Human Interface Guidelines」と「Material Design Guideline」
4-2 タイポグラフィ
タイポグラフィに必要なスキル
タイポグラフィの基礎
4-3 カラー
テーマカラー
カラーイメージ
コントラスト
ダークモード
4-4 レイアウト
レイアウト
スペーシング
グリッドデザイン
4-5 アイコン
プロダクトアイコン
システムアイコン
事例から解説
Chapter 5 データ作成とエンジニア連携
5-1 デザインツール紹介
デザインツール
UIデザインのトレンド
ペアデザイン
5-2 UIデザインデータの作り方
Figmaについて
スタイル
コンポーネントとインスタンス
オートレイアウト
プラグイン・テンプレート
5-3 エンジニアとの連携
エンジニアと共有する資料
デザイン指示書
遷移図
UIスタック
エンジニアとのコミュニケーション
Chapter 6 キャリアと勉強方法
6-1 キャリア
自分のことを知る
スキルマップ
スキルの選択方法
会社選びと働き方
将来のイメージを描く
6-2 参考書籍・リソース
おわりに
索引
著者情報
本末英樹
デジタルプロダクトデザイナーとして、Webサイトやモバイルアプリを含むサービス全体のUX設計とUIデザインを行う。 Adobe MAXやデジタルハリウッド、Schooなどで講師も務める通称「オロちゃん先生」。Web制作会社とフリーランスを経て、2017年7月C Channel株式会社入社。2021年5月より株式会社フライヤーにデジタルプロダクトデザイナーとしてジョイン。共著に『絵で見てわかるWebアプリ開発の仕組み』（翔泳社 刊）がある。大阪成蹊大学芸術学部卒、朗文堂・新宿私塾第27期修了、Xデザイン学校2021年マスターコース卒、人間中心設計スペシャリスト、グロービス経営大学院在学中。
