UI/UX
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
-[[【今さら聞けない！】UI/UXデザインの違いとその学習方法...
-[[今さら聞けない！UI/UXを確実に学ぶオススメの良スライド1...
-[[ITエンジニアに易しいUI/UXデザイン:https://www.slidesha...
-[[『ノン・デザイナーズ・デザインブックを読み解く』スライ...
-[[プロダクト開発プロセスの改善におけるUXデザイナーの存在...
*UXとUI [#ef5e2e4e]
-使っていて「気持ちいい」を目指す
-デザイン ... 目的達成のため、対象（手段）をより気持ちよ...
-いいデザインをするには、まずユーザを正しく定義し、ユーザ...
-UXという分野は、システムの利用（あるいはシステムとの出会...
-UXは、あるシステムと接する前から使用中、使用後におけるユ...
--「いい経験」は何で判断する？ => ユーザの満足度
-UXの期間
--利用前 ... 予期的UX（体験を想像する）
--利用中 ... 一時的UX（体験する）
--利用後 ... エピソード的UX（ある体験を内省する）
--利用時間全体 ... 累積的UX（多種多様な利用期間を回想する）
-いいUXを実現するには？
--システムとユーザとの全ての「接点」でいい経験を提供でき...
--接点 = User Interface
-UI
--企業が制御できる UI ... 個々のシーンでいいUIを提供する...
---購入時のUI ... 販売サイト、販売店
---製品受領時のUI ... パッケージ
---使用中のUI ... HW&SW
---トラブル時のUI ... サポート
--企業を取り巻く環境が提供するUI ... 企業はマーケティング...
---情報 ... 雑誌など
---口コミ ... 他のユーザ
---イメージ ... 有名人が使っている etc
---比較 ... 競合製品
-UIはUXのために存在する
--UI = 手段
--UX = 結果
-目指すUX => 実現手段としてのUI => 結果としてのUX ... UX...
-目指すUXを明確にするのに必要なスキル
--人に対する理解（認知心理学）
--共感力（なりすまし力）
--分析力
--コミュニケーションスキル（インタビュー、ファシリテーシ...
*UI [#p81acb6a]
-[[Web/アプリのUIデザイン改善・UI設計を10分で把握! 基本と...
-[[UIの基本と、設計方法│UI改善で成果6倍！:https://liskul....
-[[UI設計の時に参考になるサイト:https://qiita.com/masahir...
-[[管理画面のUIデザインにおける20の改善ポイント:https://b...
-[[画面レイアウト設計の標準化:https://thinkit.co.jp/artic...
-[[UI 改善：優れたUIデザイン／UI 設計（ユーザーインターフ...
-[[画面をデザインするということ:https://qiita.com/megumu-...
*UX [#w3af4c4e]
-User Needs
-Site Objectives
-Functional Specifications
-Content Requirements
-Interaction Design
--ユーザのゴールを達成するためのソフトウェアの操作フロー...
--ユーザの操作に対するソフトウェアの反応を定義
-Information Architecture
--ユーザが直感的に分かりやすい情報構造の定義
-Information Design
--ユーザに分かりやすい情報の表現を考えること（文書／グラ...
-Interface Design
--ユーザに分かりやすく、使いやすいインタフェースを考える...
--メニュー、ボタン、画像の配置・サイズなど、UIの構成を考...
-Navigation Design
--ユーザが必要な情報にアクセスしやすいメニューの構成／配...
--必要な処理と情報を如何に簡単に見つけ出し、利用できるか...
-Visual Design
--GUIの美的表現で雰囲気を演出
--色、サイズ、形などの変化で各要素の意味とモードの変化な...
--ユーザの使用性の向上を考慮する
**Visual Design の基本要素 [#j852f0fd]
-近接
--関連が強いものを近くに配置する
--要素間の距離により各要素間の関係の強さを表現する
--情報を視覚的に構造化、組織化することによってユーザの理...
--空間（スペース）は近接の大事な要素
-整列
--画面内の全ての要素を意図をもって配置する
--内容が明快に伝わり、洗練されたイメージを与える
-反復
--画面内の要素を統一してそれを繰り返して使いことでパター...
--ユーザの学習コストを減らし、誤操作を防ぐ ... Saveなら青...
--ブランドや世界観を作り出す
-コントラスト
--画面の要素に特徴を与えて、他の要素と区別しやすくすること
--ユーザの注意を意図した方向に向かせるのに有効
--多様な要素を活用してコントラストを生成
---色
---サイズ
---形
---スペース など
-フォント
--画面に表示する書体で各要素の意味と要素間の関係を表現する
--フォントのイメージを理解し、適切に使うことが大事
--各環境で使用可能なフォントは異なるので注意
-メタファー
--現実のもの等、ユーザがその使用方法に慣れているものを真...
-アフォーダンス
--環境に対する人間の反応を利用する ... ボタンがあると押し...
-既存デザイン言語
--ユーザが既に慣れているUI要素を利用する ... リンクなら下...
**考慮すべきこと [#e9018f08]
-ユーザの特徴
-デバイスの特徴
-使われる環境
*UXデザインの方法論 [#r0e22c71]
**良いUXとは [#t0039d39]
-価値がある ... ユーザ満足度が高い
--役に立つ
--使いやすい
--魅力的
--信頼できる
--見つけやすい
--誰でも見れる
**ITとUXデザインのプロセス [#eaecde2a]
-プロセスの反復による改善が望ましい => アジャイル開発
**UXデザインのタスク [#d7a3ab8a]
***ユーザと環境の調査 [#r78d0ea9]
-ユーザ調査
--目的 ... 製品やサービスのユーザを正しく定義し、理解する
--手法 ... マーケット調査、サーベイ、ユーザインタビュー、...
--成果物 ... ペルソナ＋補足資料
-コンテキスト調査
--目的 ... 製品やサービスを囲む環境を理解する
--手法
---マーケット調査、サーベイ、ユーザインタビュー
---現場訪問、ユーザとの同行、ユーザが行う作業の体験
---画像／動画の入手
---既存システムの分析
---競合製品・サービスの分析
--成果物 ... ストーリーボード、メンタルモデル
***ユーザのゴールと対象範囲確定 [#r02b5f1f]
-ペルソナ定義
--目的 ... 対象ユーザをより具体的に定義し、理解する
--手法
---ユーザ調査から得た情報を元に代表的なユーザ像を決定
---対象製品／サービスと関係するユーザの特徴、環境、欲求を...
---必要に応じて写真、小物、道具を追加する
---複数のペルソナがある場合は優先順位を付ける（主役ペルソ...
-ストーリーボード作成
--目的 ... ユーザの行動を具体的に定義し、理解する
--手法
---製品／サービスと関わるユーザの行動を具体的に描写する
---その行動の前提条件、目的、結果の評価基準を具体的に記述...
---必要に応じて写真、動画、既存システムの資料を追加する
---複数のペルソナがある場合は、どのペルソナのストーリーか...
---ユーザを囲む環境を描写する（時間、明るさ、室内／屋外、...
---システムではなく、ユーザ視点で作成
---既存のストーリーボードと理想的なストーリーボードを書い...
---目標とするストーリーボードを作成する際は、技術的制約な...
-メンタルモデル作成
--目的 ... ユーザの認識を理解してデザインの正しい方向性を...
--手法
---ストーリーボードの行動をするときのユーザの心理状態、欲...
---ユーザの行動の原因を把握することで、ユーザの真のニーズ...
---ユーザに本当に価値があるのは何かを理解する
---ユーザの行動に対して「なぜ？」を確認する ... 5W1Hの手...
---ユーザが使っている既存の道具、システムについて他の代案...
***機能とデータの定義 [#r35451f9]
-機能一覧／データモデル作成
--目的 ... ストーリーボードの各ストーリーを実現するために...
--手法
---ストーリーボードの各ストーリーに対して必要な機能を定義...
---各機能で必要なデータを定義する
---複数のストーリーから抽出された機能とデータの一覧を作成...
--ユーザの視点での機能とデータの定義を行う
---ユーザに価値を提供する単位として機能とデータを定義する
---システムの実装方式は記述しない
--データモデルはインフォメーションアーキテクチャのレベル...
***UI作成 [#y327d68d]
-UIスケッチ／画面フロー作成
--目的 ... 各ストーリーを実現するために必要な画面と処理フ...
--手法
---紙とペンなど、できるだけ手軽く多量のアイデアを短時間で...
---Try&Errorの費用を最小化することで複数回反復する
---ユーザビリティテストはこの段階から始める
-UIプロトタイプ作成
--目的 ... 作成した画面スケッチと画面フローでストーリーを...
--手法
---ユーザあるいは被験者が実際に触りながら画面操作と画面の...
---最初はペーパープロトタイプでも良いが、ある程度アイデア...
---ユーザビリティテストを行い、改善作業を行う
---費用をあまりかけずにできる方法を探す（プロトタイピング...
***評価 [#k3160534]
-ユーザビリティテスト
--目的 ... 作成したプログラムが目的とした価値をユーザに提...
--手法
---ユーザテストおよび専門家によるヒューリスティックテスト
---定量的に評価可能なKPIの定義と測定
---初期テスト及びある程度期間を置いてのテストを行う
---できるだけ実環境と類似した状況でテストを行う
--近くのユーザを見つけてテストする
--「5人テスト」を行う
---5人までテストするとほとんどの問題が検出できる
--ヒューリスティックテストを行う ... 5人テストから得られ...
--データの収集はできるだけ早期から行う ... 比較できるデー...
**ポイント [#s39c7a67]
-UI/UXデザインに正解はない
--全ての面において最高なデザインはない
--ある部分を改善すると、他の部分は改悪になる
--適切に定義されたペルソナとUXデザイナーの判断でトレード...
-みんなを幸せにはできない
--人によってニーズは異なる
--対象を広げると質が落ちる
--製品やサービスのペルソナを定義し、そのペルソナの満足だ...
-部分だけでなく、全体に注目する
--一つの場面での最適解が UX全体の一貫性を壊す場合がある
--常に全体としての一貫性を意識するように気をつける
-顧客から製品やサービスを守る
--顧客とユーザを区別する
---ユーザのためにデザインする
---顧客のためにデザインしたものは結果的にうまく行かない
--顧客のエゴや思い込みから製品を守る
---ペルソナ定義とメンタルモデルの作成に顧客を参加させる
---ペルソナとメンタルモデルを活用して説得
---それでも納得させられない場合は、ユーザテストの結果で説得
-ユーザになりきる
--UI/UXについて考えたり議論したりするときには、必ずユーザ...
-みんなを専門家にする
--ヒューリスティックテストに必要な専門家の経験則を形式知...
--専門家の評価基準をガイドラインとして作成し、作業中に参...
--各プラットフォームベンダーが提供しているデザインガイド...
-ユーザテストは逃げ道ではない
--ユーザテストは仮説検証の場
---正しい仮説を持たずにユーザテストしても無駄
---まずはベストの案を出し、その後に検証するためにユーザテ...
--ユーザテストは複数の案が対立したときに有効
*関連ツール [#gb9733da]
-[[UI/UXデザインツール『Figma』入門:https://chot.design/f...
**プロトタイピングツール [#c81fa122]
-[[おすすめのプロトタイピングツール5選(2016年5月時点):htt...
-[[どれを使う？プロトタイピングツールの特徴・使用感まとめ...
-[[Flinto と Principleを比較～Web・アプリ開発にプロトタイ...
-[[プロトタイプやワイヤーフレーム作成ツールまとめ:http://...
***[[Prott:https://prottapp.com/ja/]] [#ia4fe47f]
***[[InVision:https://www.invisionapp.com/]] [#x7bd4332]
**UIデザインツール [#rb413500]
-[[2017年アツい！注目のUIデザインツール徹底比較:https://w...
**グラフィックレコーディング [#jfdd4d25]
-[[明日から使えるグラフィックレコーディング入門 How Graph...
-[[グラフィックレコーディングをやってみよう！ワークショッ...
*共通言語 [#eecce2ca]
-[[Tokens Studio for FigmaとStyle Dictionaryでデザインの...
*色 [#r61165f6]
-[[webデザインにおける背景のムフフな法則:https://noji.wpb...
終了行:
-[[【今さら聞けない！】UI/UXデザインの違いとその学習方法...
-[[今さら聞けない！UI/UXを確実に学ぶオススメの良スライド1...
-[[ITエンジニアに易しいUI/UXデザイン:https://www.slidesha...
-[[『ノン・デザイナーズ・デザインブックを読み解く』スライ...
-[[プロダクト開発プロセスの改善におけるUXデザイナーの存在...
*UXとUI [#ef5e2e4e]
-使っていて「気持ちいい」を目指す
-デザイン ... 目的達成のため、対象（手段）をより気持ちよ...
-いいデザインをするには、まずユーザを正しく定義し、ユーザ...
-UXという分野は、システムの利用（あるいはシステムとの出会...
-UXは、あるシステムと接する前から使用中、使用後におけるユ...
--「いい経験」は何で判断する？ => ユーザの満足度
-UXの期間
--利用前 ... 予期的UX（体験を想像する）
--利用中 ... 一時的UX（体験する）
--利用後 ... エピソード的UX（ある体験を内省する）
--利用時間全体 ... 累積的UX（多種多様な利用期間を回想する）
-いいUXを実現するには？
--システムとユーザとの全ての「接点」でいい経験を提供でき...
--接点 = User Interface
-UI
--企業が制御できる UI ... 個々のシーンでいいUIを提供する...
---購入時のUI ... 販売サイト、販売店
---製品受領時のUI ... パッケージ
---使用中のUI ... HW&SW
---トラブル時のUI ... サポート
--企業を取り巻く環境が提供するUI ... 企業はマーケティング...
---情報 ... 雑誌など
---口コミ ... 他のユーザ
---イメージ ... 有名人が使っている etc
---比較 ... 競合製品
-UIはUXのために存在する
--UI = 手段
--UX = 結果
-目指すUX => 実現手段としてのUI => 結果としてのUX ... UX...
-目指すUXを明確にするのに必要なスキル
--人に対する理解（認知心理学）
--共感力（なりすまし力）
--分析力
--コミュニケーションスキル（インタビュー、ファシリテーシ...
*UI [#p81acb6a]
-[[Web/アプリのUIデザイン改善・UI設計を10分で把握! 基本と...
-[[UIの基本と、設計方法│UI改善で成果6倍！:https://liskul....
-[[UI設計の時に参考になるサイト:https://qiita.com/masahir...
-[[管理画面のUIデザインにおける20の改善ポイント:https://b...
-[[画面レイアウト設計の標準化:https://thinkit.co.jp/artic...
-[[UI 改善：優れたUIデザイン／UI 設計（ユーザーインターフ...
-[[画面をデザインするということ:https://qiita.com/megumu-...
*UX [#w3af4c4e]
-User Needs
-Site Objectives
-Functional Specifications
-Content Requirements
-Interaction Design
--ユーザのゴールを達成するためのソフトウェアの操作フロー...
--ユーザの操作に対するソフトウェアの反応を定義
-Information Architecture
--ユーザが直感的に分かりやすい情報構造の定義
-Information Design
--ユーザに分かりやすい情報の表現を考えること（文書／グラ...
-Interface Design
--ユーザに分かりやすく、使いやすいインタフェースを考える...
--メニュー、ボタン、画像の配置・サイズなど、UIの構成を考...
-Navigation Design
--ユーザが必要な情報にアクセスしやすいメニューの構成／配...
--必要な処理と情報を如何に簡単に見つけ出し、利用できるか...
-Visual Design
--GUIの美的表現で雰囲気を演出
--色、サイズ、形などの変化で各要素の意味とモードの変化な...
--ユーザの使用性の向上を考慮する
**Visual Design の基本要素 [#j852f0fd]
-近接
--関連が強いものを近くに配置する
--要素間の距離により各要素間の関係の強さを表現する
--情報を視覚的に構造化、組織化することによってユーザの理...
--空間（スペース）は近接の大事な要素
-整列
--画面内の全ての要素を意図をもって配置する
--内容が明快に伝わり、洗練されたイメージを与える
-反復
--画面内の要素を統一してそれを繰り返して使いことでパター...
--ユーザの学習コストを減らし、誤操作を防ぐ ... Saveなら青...
--ブランドや世界観を作り出す
-コントラスト
--画面の要素に特徴を与えて、他の要素と区別しやすくすること
--ユーザの注意を意図した方向に向かせるのに有効
--多様な要素を活用してコントラストを生成
---色
---サイズ
---形
---スペース など
-フォント
--画面に表示する書体で各要素の意味と要素間の関係を表現する
--フォントのイメージを理解し、適切に使うことが大事
--各環境で使用可能なフォントは異なるので注意
-メタファー
--現実のもの等、ユーザがその使用方法に慣れているものを真...
-アフォーダンス
--環境に対する人間の反応を利用する ... ボタンがあると押し...
-既存デザイン言語
--ユーザが既に慣れているUI要素を利用する ... リンクなら下...
**考慮すべきこと [#e9018f08]
-ユーザの特徴
-デバイスの特徴
-使われる環境
*UXデザインの方法論 [#r0e22c71]
**良いUXとは [#t0039d39]
-価値がある ... ユーザ満足度が高い
--役に立つ
--使いやすい
--魅力的
--信頼できる
--見つけやすい
--誰でも見れる
**ITとUXデザインのプロセス [#eaecde2a]
-プロセスの反復による改善が望ましい => アジャイル開発
**UXデザインのタスク [#d7a3ab8a]
***ユーザと環境の調査 [#r78d0ea9]
-ユーザ調査
--目的 ... 製品やサービスのユーザを正しく定義し、理解する
--手法 ... マーケット調査、サーベイ、ユーザインタビュー、...
--成果物 ... ペルソナ＋補足資料
-コンテキスト調査
--目的 ... 製品やサービスを囲む環境を理解する
--手法
---マーケット調査、サーベイ、ユーザインタビュー
---現場訪問、ユーザとの同行、ユーザが行う作業の体験
---画像／動画の入手
---既存システムの分析
---競合製品・サービスの分析
--成果物 ... ストーリーボード、メンタルモデル
***ユーザのゴールと対象範囲確定 [#r02b5f1f]
-ペルソナ定義
--目的 ... 対象ユーザをより具体的に定義し、理解する
--手法
---ユーザ調査から得た情報を元に代表的なユーザ像を決定
---対象製品／サービスと関係するユーザの特徴、環境、欲求を...
---必要に応じて写真、小物、道具を追加する
---複数のペルソナがある場合は優先順位を付ける（主役ペルソ...
-ストーリーボード作成
--目的 ... ユーザの行動を具体的に定義し、理解する
--手法
---製品／サービスと関わるユーザの行動を具体的に描写する
---その行動の前提条件、目的、結果の評価基準を具体的に記述...
---必要に応じて写真、動画、既存システムの資料を追加する
---複数のペルソナがある場合は、どのペルソナのストーリーか...
---ユーザを囲む環境を描写する（時間、明るさ、室内／屋外、...
---システムではなく、ユーザ視点で作成
---既存のストーリーボードと理想的なストーリーボードを書い...
---目標とするストーリーボードを作成する際は、技術的制約な...
-メンタルモデル作成
--目的 ... ユーザの認識を理解してデザインの正しい方向性を...
--手法
---ストーリーボードの行動をするときのユーザの心理状態、欲...
---ユーザの行動の原因を把握することで、ユーザの真のニーズ...
---ユーザに本当に価値があるのは何かを理解する
---ユーザの行動に対して「なぜ？」を確認する ... 5W1Hの手...
---ユーザが使っている既存の道具、システムについて他の代案...
***機能とデータの定義 [#r35451f9]
-機能一覧／データモデル作成
--目的 ... ストーリーボードの各ストーリーを実現するために...
--手法
---ストーリーボードの各ストーリーに対して必要な機能を定義...
---各機能で必要なデータを定義する
---複数のストーリーから抽出された機能とデータの一覧を作成...
--ユーザの視点での機能とデータの定義を行う
---ユーザに価値を提供する単位として機能とデータを定義する
---システムの実装方式は記述しない
--データモデルはインフォメーションアーキテクチャのレベル...
***UI作成 [#y327d68d]
-UIスケッチ／画面フロー作成
--目的 ... 各ストーリーを実現するために必要な画面と処理フ...
--手法
---紙とペンなど、できるだけ手軽く多量のアイデアを短時間で...
---Try&Errorの費用を最小化することで複数回反復する
---ユーザビリティテストはこの段階から始める
-UIプロトタイプ作成
--目的 ... 作成した画面スケッチと画面フローでストーリーを...
--手法
---ユーザあるいは被験者が実際に触りながら画面操作と画面の...
---最初はペーパープロトタイプでも良いが、ある程度アイデア...
---ユーザビリティテストを行い、改善作業を行う
---費用をあまりかけずにできる方法を探す（プロトタイピング...
***評価 [#k3160534]
-ユーザビリティテスト
--目的 ... 作成したプログラムが目的とした価値をユーザに提...
--手法
---ユーザテストおよび専門家によるヒューリスティックテスト
---定量的に評価可能なKPIの定義と測定
---初期テスト及びある程度期間を置いてのテストを行う
---できるだけ実環境と類似した状況でテストを行う
--近くのユーザを見つけてテストする
--「5人テスト」を行う
---5人までテストするとほとんどの問題が検出できる
--ヒューリスティックテストを行う ... 5人テストから得られ...
--データの収集はできるだけ早期から行う ... 比較できるデー...
**ポイント [#s39c7a67]
-UI/UXデザインに正解はない
--全ての面において最高なデザインはない
--ある部分を改善すると、他の部分は改悪になる
--適切に定義されたペルソナとUXデザイナーの判断でトレード...
-みんなを幸せにはできない
--人によってニーズは異なる
--対象を広げると質が落ちる
--製品やサービスのペルソナを定義し、そのペルソナの満足だ...
-部分だけでなく、全体に注目する
--一つの場面での最適解が UX全体の一貫性を壊す場合がある
--常に全体としての一貫性を意識するように気をつける
-顧客から製品やサービスを守る
--顧客とユーザを区別する
---ユーザのためにデザインする
---顧客のためにデザインしたものは結果的にうまく行かない
--顧客のエゴや思い込みから製品を守る
---ペルソナ定義とメンタルモデルの作成に顧客を参加させる
---ペルソナとメンタルモデルを活用して説得
---それでも納得させられない場合は、ユーザテストの結果で説得
-ユーザになりきる
--UI/UXについて考えたり議論したりするときには、必ずユーザ...
-みんなを専門家にする
--ヒューリスティックテストに必要な専門家の経験則を形式知...
--専門家の評価基準をガイドラインとして作成し、作業中に参...
--各プラットフォームベンダーが提供しているデザインガイド...
-ユーザテストは逃げ道ではない
--ユーザテストは仮説検証の場
---正しい仮説を持たずにユーザテストしても無駄
---まずはベストの案を出し、その後に検証するためにユーザテ...
--ユーザテストは複数の案が対立したときに有効
*関連ツール [#gb9733da]
-[[UI/UXデザインツール『Figma』入門:https://chot.design/f...
**プロトタイピングツール [#c81fa122]
-[[おすすめのプロトタイピングツール5選(2016年5月時点):htt...
-[[どれを使う？プロトタイピングツールの特徴・使用感まとめ...
-[[Flinto と Principleを比較～Web・アプリ開発にプロトタイ...
-[[プロトタイプやワイヤーフレーム作成ツールまとめ:http://...
***[[Prott:https://prottapp.com/ja/]] [#ia4fe47f]
***[[InVision:https://www.invisionapp.com/]] [#x7bd4332]
**UIデザインツール [#rb413500]
-[[2017年アツい！注目のUIデザインツール徹底比較:https://w...
**グラフィックレコーディング [#jfdd4d25]
-[[明日から使えるグラフィックレコーディング入門 How Graph...
-[[グラフィックレコーディングをやってみよう！ワークショッ...
*共通言語 [#eecce2ca]
-[[Tokens Studio for FigmaとStyle Dictionaryでデザインの...
*色 [#r61165f6]
-[[webデザインにおける背景のムフフな法則:https://noji.wpb...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
