UIデザインとUXの超基礎「UI Design & UX for ENGINEER」

UI Design and UX
for Engineer
Powered by
26/3/2014 @Lightningspot Shibuya / Kazuki Yamashita Designed by IMPATH

山下一樹
インフォメーションアーキテクト

アプリ開発
Web、スマフォアプリの設計/開発
プロトタイプ設計
UI改善コンサルティング
Webサイト制作
Webサイトの企画、UXデザイン

UI/UX? UIとUXの関連は？

“ユーザーとサービス、商品の
相互作用すべてで、 
混乱や面倒なしで顧客の的確
なニーズを満たし、所有する 
楽しさ、使用する楽しさを 
生み出す「簡潔さと優雅さ」”
http://www.nngroup.com/about-user-experience-deﬁnition/
Donald Norman
UX“User Experience”とは？

ISO 13407（1999）人間中心設計が定義
ISO 9241-210（2010）UXについても定義
UX“User Experience”とは？
製品やシステム、サービスの利用、及び／もしくは
予想された使い方によってもたらされる人々の知覚と反応

暑い日、のどが渇いた人が自販機で水を買う。
!
その買い方がよく分からなかったり、
いくらの値段で販売しているのか分かりにくく、
なかなか水が買えずイライラした。
!
暑い日なのに、せっかく買えた水がぬるい、
もう二度とこの自販機で買おうとは思わない。
UI
UI
UX UX
UX

多くのモノを作れば売れた
良いモノを作ればもっと売れた
モノからコトへ
モノがあふれている時代
デザインや機能だけでは売れない
モノ→コト
大量
生産
スペック
デザイン

趣味
食事
旅行
外食
貯金書籍家電
車
何にお金をかけていますか？
2010年4月経産省消費者購買動向調査
自身の「経験や体験」

体験とは？
期待
予感
もらう
出会う
触れる使う
記憶
思い出
触れる前から思い出までのストーリー
時間の流れ

視覚、聴覚、触覚、味覚、嗅覚
五感もUXをもたらす

UX（体験）をデザインするとは？

時間の流れ
顧客の思考・感情
顧客接点
サービス要素

人間工学
ユーザビリティ工学
工業デザイン
インタラクションデザイン
UXデザイン
マーケティング
情報アーキテクチャ
コンピューター工学
ライティング
コミュニケーション
デザイン
http://www.designingforinteraction.com/
音響デザイン
モーションデザイン
UIデザイン

UXデザインのフローとアウトプット（アプリの場合）
ユーザー・環境の理解
ユーザー調査
コンテキスト
ペルソナ定義
ユーザーのゴールと機能
メンタルモデル
エクスペリエンスマップ
UIのイメージ化
画面遷移
UIワイヤーフレーム
プロトタイピング機能要件

UIが良いとUXが向上？
良いUIがUXをもたらすとは限らない

良いUXとは？
役に立つ
使いやすい
見つけやすい
価値がある
信頼できる
魅力的
誰でも見れる
http://semanticstudios.com/publications/semantics/000029.php

良いUXとは？
Web以前のデザインから 
重視されている
Webによって
重視されるようになった
これまでのデザイン手法だけ
では実現不可能
役に立つ
使いやすい
見つけやすい
価値がある
信頼できる
魅力的
誰でも見れる

ユーザーはモノより経験に関心がある。
!
クリエイターはストーリーと世界観をつくり、
良い始まりと結末によって
ユーザーの記憶に残す使命がある。
!
機能以上に価値のあるコトをつくる。

Design＝設計とは？
http://www.jjg.net/elements/pdf/elements.pdf
ビジュアル
構造化
表現方法

近接
整列
コントラスト
反復
レイアウトの原則デザインの概念
デザインパターン
アフォーダンス
メタファ
構造化の手法
論理的に解決する

近接
情報の関連性を視覚化する（見やすくする）
効果：ユーザーの理解を助ける
手法：導線を考慮しスペースを調整する

商品A
商品B
商品C
¥2,000
¥1,500
¥3,000
購入
購入
購入
商品A
¥2,000 購入
商品B
¥1,500 購入
商品C
¥3,000 購入

整列
要素を組織的に構造化する（見やすくする）
効果：統一感を持たせる
手法：基準となる線を引いて配置する

左揃え
左揃えは複数行にわたる長い文章を読みやすくします。
主に見出しでは左揃えが用いられます。
中央寄せ
中央に寄せることで、要素の近接関係を強める
右揃え続きはここをクリック
ボタンなど、ユーザーに「次の」操作を促す場合は右に
揃える場合があります。

コントラスト
異なる要素の差異を強める（注意をひく）
効果：ユーザーを意図して誘導できる
手法：濃淡やサイズなどを調整する

商品A
¥2,000 購入
商品B
¥1,500 購入
商品C
¥3,000 購入
商品A
¥2,000 購入
商品B
¥1,500 購入
商品C
¥3,000 購入

反復
レイアウトの原則を繰り返すこと
効果：一貫性を持たせ、文化を生む
手法：原則をガイドラインとして表出する

近接
整列
コントラスト
反復
タイポグラフィ
レイアウトの原則デザインの概念
メタファ
構造化の手法
論理的に解決する

既存のパターンを逸脱しない
−
追加？削除
テキストで見かけるアンカーリンクです。
多くの人はこちらのリンクをクリックします。
×＋

ユーザーが次に何をすれば良いのか明示する

メタファ
ユーザーが馴染んでいるものを継承する
Apple Inc. iOS 7 Human Interface

ビジュアルデザインは構造化の後で行う。
!
ユーザーの理解を助け、正しく、意図した通りに
導くためのインタフェースを「設計」する。
!
各々のガイドラインに忠実であること。

①クライアントの真の声を聴く
クライアント
「商品名が見にくいので少し目立つようにしてください」
ユーザーは写真が見たいのかもしれない
仕様が知りたいのかもしれない
配送料が知りたいのかもしれない
クライアント→ユーザーの真のニーズ

②UIは慣れると間違いに気付かなくなる
ビジュアルよりも配置や構成、構造化

アプリケーション定義ステートメント
アプリケーションの主要な目的とその対象を、
簡潔かつ具体的に宣言したもの
https://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf
③機能やコンセプトが一言で言えるかどうか
1. ユーザに好まれる可能性のあるすべての機能の洗い出し
ex. ○○○を○○○できる
2. 対象ユーザの決定
→ユーザーのライフスタイル
3. 対象ユーザの定義による機能の絞り込み
4. このアプリではしないこと

④ユーザーのコンテキストをいかに描けるか
運賃表：駅名と料金
お金を入れて下さい
切符？カード？
路線を選択
ここで選択
ユーザーの行動を想像してシステムに落とし込む

⑤すべてのユーザーを幸せにするUIはない
対象を広げず真のユーザーにまっすぐであること

UIデザインとUXの超基礎「UI Design & UX for ENGINEER」

UIデザインとUXの超基礎「UI Design & UX for ENGINEER」

More Related Content

What's hot

Viewers also liked

Similar to UIデザインとUXの超基礎「UI Design & UX for ENGINEER」

UIデザインとUXの超基礎「UI Design & UX for ENGINEER」