SlideShare ist ein Scribd-Unternehmen logo
1 von 31
UX / UIデザインって何?
JustSystems UXデザイングループ / TAGUCHI
UXとUI。
セットでよく耳にするようになったワードです。
最近ではUIデザインが
何を指しているのか明確になりました。
アイコンやバナーだったり、画面レイアウトだったり、画面遷移だったり。
でもUXデザインが指している内容は
曖昧な事が多くて困っている人も多いのでは?
言ったら何でもUX(ユーザー体験)ですからね。
・ティッシュで鼻をかんだ → すっきりした
・素敵なレストランで美味しいご飯を食べた → 楽しい時間を過ごせた
・遊園地で遊んだ → 好きなキャラクターや乗り物に囲まれて幸せだった
業界やモノの数だけUXデザインはあるということかと。
ジャストシステムはソフトウェア業界の会社です。
じゃあソフトウェアのUXって?
ひとまず、ソフトウェア業界においては
主に3つだけ理解しておくと良いと思います。
User Interface(UI)
Interaction
User Experience(UX)
+ Design
まずはそれぞれのワードについて簡単に。
天才ケンケンパ
出典:チームラボ http://www.team-lab.com/hopscotchforgeniuses
○△□ によるケンケンパです。
○△□にうまく乗ることができると、音が出て、映像によって映し出された床は、
美しくなります。
同じ形や色など、関連性のある○△□に連続して飛び乗ると、さらに美しくなります。
例えば、□同士だと、□のエフェクトが溢れ、赤色同士だと、赤色のエフェクトが溢れます。
子どもたちは、おもいっきり身体を動かしながら、遊ぶことができます。そして、より上級者は、
遊びながら瞬時に、空間を抽象化し関連性を見つけ出す訓練になります。
User Interface(UI) Design
・画面内の要素やパーツはどんなか
・それらのレイアウトや遷移はどうしたらいいか
出典:チームラボ http://www.team-lab.com/hopscotchforgeniuses
Interaction Design
・操作(着地)した結果、どんな反応を返すか
・その反応は理解を助けるか
・心地よいか
出典:チームラボ http://www.team-lab.com/hopscotchforgeniuses
User Experience(UX) Design
UI / Interaction を介してどんな体験をさせるか
夢の世界にいるみたい!
楽しい!
面白そう!
私もやってみたいなぁ!
出典:チームラボ http://www.team-lab.com/hopscotchforgeniuses
つまりUXって?
= UXのためのUIとInteraction
楽しい、嬉しい、感動、悲しい、切ない、良かった!
ユーザーにとって価値あること
では、今度は実例で見てみましょう。
ATOK Pad
・iOS App。
・ATOKという高精度な日本語変換がウリで
 サクサクとメモがかけるApp。
ATOK Padを構成している最低限の要素
超賢い変換システムとキーボード メモ帳
+
User Experience(UX) Design
・サクサク思い通りにアイデアを残せて気持ちが良い!
・メモを同期して色んな場所やデバイスで活かせて嬉しい!
こんな体験を実現するUIとInteractionを考えていく。
めちゃくちゃざっくり言うと…
User Interface(UI) Design
集中できるようにシンプルなメモ帳 iOSに違和感がないキーボード 操作を促すアイコン など
Interaction Design
スライドして変換候補全画面表示 長押しして拡張機能のガイド表示 iPhoneを振って共有や同期
ざっくりと要点だけ絞ると案外単純ですよね。
(もちろん厳密に言えばもっと違う解釈があったりしますが)
まとめ
ソフトウェアのUX / UIデザイン
Appやサービスを通じて、
どんな体験(UX)をユーザーに提供できるかを考える
(もちろんリリース後も継続的に!)
それを実現するためのUIとInteraction
というわけで
わたしたちと一緒に
面白い・新しい体験価値を考えてみませんか?
エントリーはコチラから!
こちらのスライドもどうぞ!
訴求ファースト。キービジュアル。
UXデザイナー1年生の1年間

商品力強化ワークショップ
UX / UIデザインって何?

Weitere ähnliche Inhalte

Was ist angesagt?

企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
Katsumi Mizushima
 
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
Roy Kim
 
UX白書サマリー資料20111015
UX白書サマリー資料20111015UX白書サマリー資料20111015
UX白書サマリー資料20111015
hcdvalue
 
ユーザーエクスペリエンスの分解
ユーザーエクスペリエンスの分解ユーザーエクスペリエンスの分解
ユーザーエクスペリエンスの分解
Takehisa Gokaichi
 

Was ist angesagt? (20)

サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
 
体験のモデリングとコンセプトデザイン
体験のモデリングとコンセプトデザイン体験のモデリングとコンセプトデザイン
体験のモデリングとコンセプトデザイン
 
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができることいいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
 
デザインの要件定義
デザインの要件定義デザインの要件定義
デザインの要件定義
 
つくり込むUX・うみ出すUX・うまれるUX
つくり込むUX・うみ出すUX・うまれるUXつくり込むUX・うみ出すUX・うまれるUX
つくり込むUX・うみ出すUX・うまれるUX
 
UXデザインが大事なのはわかるけど エンジニアの私ができることってなんでしょう?
UXデザインが大事なのはわかるけどエンジニアの私ができることってなんでしょう?UXデザインが大事なのはわかるけどエンジニアの私ができることってなんでしょう?
UXデザインが大事なのはわかるけど エンジニアの私ができることってなんでしょう?
 
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
 
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
 
確実に良くするUI/UX設計
確実に良くするUI/UX設計確実に良くするUI/UX設計
確実に良くするUI/UX設計
 
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
 
『UXデザインの教科書』を書きました
 『UXデザインの教科書』を書きました 『UXデザインの教科書』を書きました
『UXデザインの教科書』を書きました
 
“UI/UX”?~恥をかかないための15分UXD入門
“UI/UX”?~恥をかかないための15分UXD入門“UI/UX”?~恥をかかないための15分UXD入門
“UI/UX”?~恥をかかないための15分UXD入門
 
Protocol
ProtocolProtocol
Protocol
 
UX白書サマリー資料20111015
UX白書サマリー資料20111015UX白書サマリー資料20111015
UX白書サマリー資料20111015
 
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
 
ユーザーエクスペリエンスの分解
ユーザーエクスペリエンスの分解ユーザーエクスペリエンスの分解
ユーザーエクスペリエンスの分解
 
UIデザインの基本
UIデザインの基本UIデザインの基本
UIデザインの基本
 
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFEUX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
 
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClipアプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
 

Andere mochten auch

Andere mochten auch (20)

UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
 
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
 
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
 
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループアプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
 
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
 
UXのためのUIデザイン
UXのためのUIデザインUXのためのUIデザイン
UXのためのUIデザイン
 
UXデザイナー1年生の1年間
UXデザイナー1年生の1年間UXデザイナー1年生の1年間
UXデザイナー1年生の1年間
 
IOT and Lean Manifacturing
IOT and Lean ManifacturingIOT and Lean Manifacturing
IOT and Lean Manifacturing
 
イラストレーターでイラストを作成する方法
イラストレーターでイラストを作成する方法イラストレーターでイラストを作成する方法
イラストレーターでイラストを作成する方法
 
ドット絵でイラストのコツを学ぶ!アイロンビーズを使ってドット絵をつくろう!【とのさまラボ】
ドット絵でイラストのコツを学ぶ!アイロンビーズを使ってドット絵をつくろう!【とのさまラボ】ドット絵でイラストのコツを学ぶ!アイロンビーズを使ってドット絵をつくろう!【とのさまラボ】
ドット絵でイラストのコツを学ぶ!アイロンビーズを使ってドット絵をつくろう!【とのさまラボ】
 
訴求ファースト。キービジュアル。
訴求ファースト。キービジュアル。訴求ファースト。キービジュアル。
訴求ファースト。キービジュアル。
 
スマホゲームのUI仕様書
スマホゲームのUI仕様書スマホゲームのUI仕様書
スマホゲームのUI仕様書
 
Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1
 
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザインアクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザイン
 
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015 UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
 
Sketchで変わるワークフロー
Sketchで変わるワークフローSketchで変わるワークフロー
Sketchで変わるワークフロー
 
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方
 
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれレスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
 
インタフェースデザインの心理学 まとめ
インタフェースデザインの心理学 まとめインタフェースデザインの心理学 まとめ
インタフェースデザインの心理学 まとめ
 
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
 

Ähnlich wie UX / UIデザインって何?

第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923
Hub DotnetDeveloper
 
DevLOVEkosien2014_itow_ponde
DevLOVEkosien2014_itow_pondeDevLOVEkosien2014_itow_ponde
DevLOVEkosien2014_itow_ponde
英明 伊藤
 

Ähnlich wie UX / UIデザインって何? (20)

開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
 
はじめてのUXとUIの話
はじめてのUXとUIの話はじめてのUXとUIの話
はじめてのUXとUIの話
 
「UXって何?」オンラインセミナー資料
「UXって何?」オンラインセミナー資料「UXって何?」オンラインセミナー資料
「UXって何?」オンラインセミナー資料
 
UXデザインとは 現状の私見
UXデザインとは 現状の私見UXデザインとは 現状の私見
UXデザインとは 現状の私見
 
タッグ開発の現場 【エンジニアとデザイナー編】
タッグ開発の現場 【エンジニアとデザイナー編】タッグ開発の現場 【エンジニアとデザイナー編】
タッグ開発の現場 【エンジニアとデザイナー編】
 
UX設計の第一歩-インテリジェントネット社内勉強会
UX設計の第一歩-インテリジェントネット社内勉強会UX設計の第一歩-インテリジェントネット社内勉強会
UX設計の第一歩-インテリジェントネット社内勉強会
 
第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923
 
モバイルのためのUXデザイン
モバイルのためのUXデザインモバイルのためのUXデザイン
モバイルのためのUXデザイン
 
LiBRA 09.2021 / 総集編 1/2
LiBRA 09.2021 / 総集編 1/2LiBRA 09.2021 / 総集編 1/2
LiBRA 09.2021 / 総集編 1/2
 
LiBRA_210201/New_emploee
LiBRA_210201/New_emploeeLiBRA_210201/New_emploee
LiBRA_210201/New_emploee
 
赤点を減らすためのウェブサイトUI設計
赤点を減らすためのウェブサイトUI設計赤点を減らすためのウェブサイトUI設計
赤点を減らすためのウェブサイトUI設計
 
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
 
DevLOVEkosien2014_itow_ponde
DevLOVEkosien2014_itow_pondeDevLOVEkosien2014_itow_ponde
DevLOVEkosien2014_itow_ponde
 
SchooUX授業1/2_松本_mercari
SchooUX授業1/2_松本_mercariSchooUX授業1/2_松本_mercari
SchooUX授業1/2_松本_mercari
 
UX研修「UXからサイトを考える!」2013新卒向け
UX研修「UXからサイトを考える!」2013新卒向けUX研修「UXからサイトを考える!」2013新卒向け
UX研修「UXからサイトを考える!」2013新卒向け
 
『デザイニング・インターフェース』読書会資料
『デザイニング・インターフェース』読書会資料『デザイニング・インターフェース』読書会資料
『デザイニング・インターフェース』読書会資料
 
UX actually is all around us. - UXを感じよう -
UX actually is all around us. - UXを感じよう -UX actually is all around us. - UXを感じよう -
UX actually is all around us. - UXを感じよう -
 
体験をデザインするとは何か
体験をデザインするとは何か体験をデザインするとは何か
体験をデザインするとは何か
 
UXデザイン×ヒューリスティック評価
UXデザイン×ヒューリスティック評価UXデザイン×ヒューリスティック評価
UXデザイン×ヒューリスティック評価
 
UXデザインの居場所:UXなまトーク資料
UXデザインの居場所:UXなまトーク資料UXデザインの居場所:UXなまトーク資料
UXデザインの居場所:UXなまトーク資料
 

Mehr von JustSystems Corporation

Mehr von JustSystems Corporation (20)

Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
 
「技術内閣制度」〜2年間やってきて得られた事とこれから〜 #devsumi
「技術内閣制度」〜2年間やってきて得られた事とこれから〜 #devsumi「技術内閣制度」〜2年間やってきて得られた事とこれから〜 #devsumi
「技術内閣制度」〜2年間やってきて得られた事とこれから〜 #devsumi
 
事業に貢献する商品開発と その成長の仕組み作り ~これからのエンジニアに必要とされるスキルとは~
事業に貢献する商品開発と その成長の仕組み作り ~これからのエンジニアに必要とされるスキルとは~事業に貢献する商品開発と その成長の仕組み作り ~これからのエンジニアに必要とされるスキルとは~
事業に貢献する商品開発と その成長の仕組み作り ~これからのエンジニアに必要とされるスキルとは~
 
現役23名のPM:タイプ別マネジメントパターン
現役23名のPM:タイプ別マネジメントパターン現役23名のPM:タイプ別マネジメントパターン
現役23名のPM:タイプ別マネジメントパターン
 
JavaでインメモリSQLエンジンを作ってみた
JavaでインメモリSQLエンジンを作ってみたJavaでインメモリSQLエンジンを作ってみた
JavaでインメモリSQLエンジンを作ってみた
 
DDDとクリーンアーキテクチャでサーバーアプリケーションを作っている話
DDDとクリーンアーキテクチャでサーバーアプリケーションを作っている話DDDとクリーンアーキテクチャでサーバーアプリケーションを作っている話
DDDとクリーンアーキテクチャでサーバーアプリケーションを作っている話
 
JustTechTalk#11_スマイルゼミ顧客満足度への貢献
JustTechTalk#11_スマイルゼミ顧客満足度への貢献JustTechTalk#11_スマイルゼミ顧客満足度への貢献
JustTechTalk#11_スマイルゼミ顧客満足度への貢献
 
ピュアJavaだと思った?残念androidでした~いつからAndroidをJavaだと錯覚していた?~
ピュアJavaだと思った?残念androidでした~いつからAndroidをJavaだと錯覚していた?~ピュアJavaだと思った?残念androidでした~いつからAndroidをJavaだと錯覚していた?~
ピュアJavaだと思った?残念androidでした~いつからAndroidをJavaだと錯覚していた?~
 
最新のJava言語仕様で見るモジュールシステム #jjug
最新のJava言語仕様で見るモジュールシステム #jjug最新のJava言語仕様で見るモジュールシステム #jjug
最新のJava言語仕様で見るモジュールシステム #jjug
 
「書ける」から「できる」になれる! ~Javaメモリ節約ノウハウ話~
「書ける」から「できる」になれる! ~Javaメモリ節約ノウハウ話~「書ける」から「できる」になれる! ~Javaメモリ節約ノウハウ話~
「書ける」から「できる」になれる! ~Javaメモリ節約ノウハウ話~
 
JustTechTalk#10 React開発における自動テスト実践
JustTechTalk#10 React開発における自動テスト実践JustTechTalk#10 React開発における自動テスト実践
JustTechTalk#10 React開発における自動テスト実践
 
JustTechTalk#10windowsアプリでのテスト自動化事例
JustTechTalk#10windowsアプリでのテスト自動化事例JustTechTalk#10windowsアプリでのテスト自動化事例
JustTechTalk#10windowsアプリでのテスト自動化事例
 
インパス! あのこれダメッス! ~Javaコードレビューの指摘ポイント10選~
インパス! あのこれダメッス! ~Javaコードレビューの指摘ポイント10選~インパス! あのこれダメッス! ~Javaコードレビューの指摘ポイント10選~
インパス! あのこれダメッス! ~Javaコードレビューの指摘ポイント10選~
 
AWS運用における最適パターンの徹底活用
AWS運用における最適パターンの徹底活用AWS運用における最適パターンの徹底活用
AWS運用における最適パターンの徹底活用
 
ジャストシステムのDevOps実例 今後の取り組み
ジャストシステムのDevOps実例 今後の取り組みジャストシステムのDevOps実例 今後の取り組み
ジャストシステムのDevOps実例 今後の取り組み
 
Javaチョットデキルへの道〜JavaコアSDKに見る真似したいコード10選〜
Javaチョットデキルへの道〜JavaコアSDKに見る真似したいコード10選〜Javaチョットデキルへの道〜JavaコアSDKに見る真似したいコード10選〜
Javaチョットデキルへの道〜JavaコアSDKに見る真似したいコード10選〜
 
Kotlin is charming; The reasons Java engineers should start Kotlin.
Kotlin is charming; The reasons Java engineers should start Kotlin.Kotlin is charming; The reasons Java engineers should start Kotlin.
Kotlin is charming; The reasons Java engineers should start Kotlin.
 
CSSレイアウトでなぜ失敗するか?
CSSレイアウトでなぜ失敗するか?CSSレイアウトでなぜ失敗するか?
CSSレイアウトでなぜ失敗するか?
 
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化
 
TypeScriptの大規模開発への適用
TypeScriptの大規模開発への適用TypeScriptの大規模開発への適用
TypeScriptの大規模開発への適用
 

UX / UIデザインって何?