SlideShare a Scribd company logo
株式会社オプティマ 渡辺 巧
・プログラマ
Java → C# → PHP(WordPress)
・好きな物
ゲーム(プレイ&作成)
・苦手な分野
デザイン系
自己紹介
• これからお話する内容は私個人の見解です。
• UIという正解の無い物に対しての、一つの
意見として受け取って頂けると幸いです。
• 間違いがありましたら、質疑応答で好きに
つついて頂いて大丈夫です。
はじめに
そもそも「UI」って何だろう
ユーザーインターフェース
直訳すると「ユーザー接点」
システムとユーザーとの接点。
(メニュー、ボタン、リンク、画像 etc…)
UIとは
UIに該当する物の例
ユーザーの目に映る画面
UIに該当しない物の例
システムを構成するソースコード
じゃあ、UXってなんだろう
• ユーザーエクスペリメンス
• UIを通じて得られた満足感を含むポジティ
ブな体験が「UX」といえる。
UXとは
UXの例
見る
操作する
この会社の製品
良さそうだなぁ
(良いUX)
ユーザー
良いUIって何だろう
• 直感的に使用できる
• 自己主張が激しくない。
• 一目で、用途がわかる。
良いUIとは(予想)
ゲームから学ぶUI/UX(二回目)
• 娯楽品なので、UIに対するユーザーの目線
が一般的なシステムに比べ厳しい。
• ゲームは一般的なシステムに比べ、非常に
インタラクティブなメディア
何故ゲームからUI/UXを学ぶのか
• ユーザーに体験してもらいたいことは「感動」
「ワクワク感」「達成感」等。
• ユーザーはこの体験を求めてゲームをプレイす
る為、UXの差が直に製品価値に繋がる。
• 単純な機能性やわかりやすさだけでなく「夢中
になる」「楽しくなる」要素が入っている。
・その他
インタラクティブデザイン
強化学習プロセス etc…
ゲームのUI/UXの特徴
ゲームのUX/UIへの追及
例えば・・・
• 当時としては画期的な「タッチパネル」に
よる操作。
• タッチ操作という「直観的な使いやすさ」
に加え今まで無い「新しい体験」を提供。
→瞬く間に大ヒットしました。
最近は・・・
次は別の方面から
例えば・・・
一個ずつ見ていきます。
他にも・・・
• UIは「わかりやすい」「見やすい」事も大
事ですが、一番大事なのはユーザー体験を
達成する事だと感じました。
• フレームワーク、デザイン言語にのっとっ
た整形されたUIも良いですが、少し定石か
ら外れたUIというのもユーザーに新しい体
験をもたらすかもしれません。
まとめ
「何のため」を考える
つまり・・・
事が大事
おしまい

More Related Content

Similar to ゲームから学ぶui ux

はじめてのUXとUIの話
はじめてのUXとUIの話はじめてのUXとUIの話
はじめてのUXとUIの話
Kazuki Yamashita
 
1222_ProconLT
1222_ProconLT1222_ProconLT
1222_ProconLT
ShomaKobayashi
 
Schoo講演資料130409
Schoo講演資料130409Schoo講演資料130409
Schoo講演資料130409schoowebcampus
 
Schoo講演資料130409
Schoo講演資料130409Schoo講演資料130409
Schoo講演資料130409schoowebcampus
 
第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923Hub DotnetDeveloper
 
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
neokigao
 
0から始めるUXデザイン(UXデザインを知る)
0から始めるUXデザイン(UXデザインを知る)0から始めるUXデザイン(UXデザインを知る)
0から始めるUXデザイン(UXデザインを知る)
Jiji Kim
 
『デザイニング・インターフェース』読書会資料
『デザイニング・インターフェース』読書会資料『デザイニング・インターフェース』読書会資料
『デザイニング・インターフェース』読書会資料
Noriyo Asano
 
インターフェイスという名の付く会社が考えるUX
インターフェイスという名の付く会社が考えるUXインターフェイスという名の付く会社が考えるUX
インターフェイスという名の付く会社が考えるUX
Yasushi Senda
 
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインRoy Kim
 
Practical ux4publish
Practical ux4publishPractical ux4publish
Practical ux4publish
ncdc_jp
 
UX / UIデザインって何?
UX / UIデザインって何?UX / UIデザインって何?
UX / UIデザインって何?
JustSystems Corporation
 
ユーザ体験ゼミ
ユーザ体験ゼミユーザ体験ゼミ
ユーザ体験ゼミ
Leonardo Ken Orihara
 
20140515 digital media publishing user interface design
20140515  digital media publishing user interface design20140515  digital media publishing user interface design
20140515 digital media publishing user interface design
Japan Electronic Publishing Association
 
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
 
UXとフラットデザイン
UXとフラットデザインUXとフラットデザイン
UXとフラットデザイン
Taiji Nakao
 
Designing UX Development
Designing UX DevelopmentDesigning UX Development
Designing UX Development
Mizushima Kazuhiro
 
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
Yoshiki Hayama
 
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
schoowebcampus
 

Similar to ゲームから学ぶui ux (20)

はじめてのUXとUIの話
はじめてのUXとUIの話はじめてのUXとUIの話
はじめてのUXとUIの話
 
1222_ProconLT
1222_ProconLT1222_ProconLT
1222_ProconLT
 
Schoo講演資料130409
Schoo講演資料130409Schoo講演資料130409
Schoo講演資料130409
 
Schoo講演資料130409
Schoo講演資料130409Schoo講演資料130409
Schoo講演資料130409
 
Schoo講演資料130409
Schoo講演資料130409Schoo講演資料130409
Schoo講演資料130409
 
第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923
 
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
 
0から始めるUXデザイン(UXデザインを知る)
0から始めるUXデザイン(UXデザインを知る)0から始めるUXデザイン(UXデザインを知る)
0から始めるUXデザイン(UXデザインを知る)
 
『デザイニング・インターフェース』読書会資料
『デザイニング・インターフェース』読書会資料『デザイニング・インターフェース』読書会資料
『デザイニング・インターフェース』読書会資料
 
インターフェイスという名の付く会社が考えるUX
インターフェイスという名の付く会社が考えるUXインターフェイスという名の付く会社が考えるUX
インターフェイスという名の付く会社が考えるUX
 
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
 
Practical ux4publish
Practical ux4publishPractical ux4publish
Practical ux4publish
 
UX / UIデザインって何?
UX / UIデザインって何?UX / UIデザインって何?
UX / UIデザインって何?
 
ユーザ体験ゼミ
ユーザ体験ゼミユーザ体験ゼミ
ユーザ体験ゼミ
 
20140515 digital media publishing user interface design
20140515  digital media publishing user interface design20140515  digital media publishing user interface design
20140515 digital media publishing user interface design
 
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
 
UXとフラットデザイン
UXとフラットデザインUXとフラットデザイン
UXとフラットデザイン
 
Designing UX Development
Designing UX DevelopmentDesigning UX Development
Designing UX Development
 
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
 
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
 

More from yumi_chappy

Why
WhyWhy
Itelt vol7 7
Itelt vol7 7Itelt vol7 7
Itelt vol7 7
yumi_chappy
 
Itelt vol7 1
Itelt vol7 1Itelt vol7 1
Itelt vol7 1
yumi_chappy
 
Itelt vol7 9
Itelt vol7 9Itelt vol7 9
Itelt vol7 9
yumi_chappy
 
Itelt vol7 8
Itelt vol7 8Itelt vol7 8
Itelt vol7 8
yumi_chappy
 
Itelt vol7 6
Itelt vol7 6Itelt vol7 6
Itelt vol7 6
yumi_chappy
 
Itelt vol7 2
Itelt vol7 2Itelt vol7 2
Itelt vol7 2
yumi_chappy
 
Itelt vol7 5
Itelt vol7 5Itelt vol7 5
Itelt vol7 5
yumi_chappy
 
Itelt vol7 4
Itelt vol7 4Itelt vol7 4
Itelt vol7 4
yumi_chappy
 
Itelt vol7 3
Itelt vol7 3Itelt vol7 3
Itelt vol7 3
yumi_chappy
 
理想の教育、上から見るか?下から見るか?
理想の教育、上から見るか?下から見るか?理想の教育、上から見るか?下から見るか?
理想の教育、上から見るか?下から見るか?
yumi_chappy
 
JAWS DAYS Report
JAWS DAYS ReportJAWS DAYS Report
JAWS DAYS Report
yumi_chappy
 
資料ビジュアル化のススメ
資料ビジュアル化のススメ資料ビジュアル化のススメ
資料ビジュアル化のススメ
yumi_chappy
 
美ら海水族館から考えるユーザー心理
美ら海水族館から考えるユーザー心理美ら海水族館から考えるユーザー心理
美ら海水族館から考えるユーザー心理
yumi_chappy
 
IoT製品の魅力
IoT製品の魅力IoT製品の魅力
IoT製品の魅力
yumi_chappy
 
新しい家族を紹介します~1台と1匹~
新しい家族を紹介します~1台と1匹~新しい家族を紹介します~1台と1匹~
新しい家族を紹介します~1台と1匹~
yumi_chappy
 
Windows10でword2vecを使ってみた
Windows10でword2vecを使ってみたWindows10でword2vecを使ってみた
Windows10でword2vecを使ってみた
yumi_chappy
 
色で伝えるイメージ
色で伝えるイメージ色で伝えるイメージ
色で伝えるイメージ
yumi_chappy
 
バランスを整える
バランスを整えるバランスを整える
バランスを整える
yumi_chappy
 
脆弱性のふさぎ方
脆弱性のふさぎ方脆弱性のふさぎ方
脆弱性のふさぎ方
yumi_chappy
 

More from yumi_chappy (20)

Why
WhyWhy
Why
 
Itelt vol7 7
Itelt vol7 7Itelt vol7 7
Itelt vol7 7
 
Itelt vol7 1
Itelt vol7 1Itelt vol7 1
Itelt vol7 1
 
Itelt vol7 9
Itelt vol7 9Itelt vol7 9
Itelt vol7 9
 
Itelt vol7 8
Itelt vol7 8Itelt vol7 8
Itelt vol7 8
 
Itelt vol7 6
Itelt vol7 6Itelt vol7 6
Itelt vol7 6
 
Itelt vol7 2
Itelt vol7 2Itelt vol7 2
Itelt vol7 2
 
Itelt vol7 5
Itelt vol7 5Itelt vol7 5
Itelt vol7 5
 
Itelt vol7 4
Itelt vol7 4Itelt vol7 4
Itelt vol7 4
 
Itelt vol7 3
Itelt vol7 3Itelt vol7 3
Itelt vol7 3
 
理想の教育、上から見るか?下から見るか?
理想の教育、上から見るか?下から見るか?理想の教育、上から見るか?下から見るか?
理想の教育、上から見るか?下から見るか?
 
JAWS DAYS Report
JAWS DAYS ReportJAWS DAYS Report
JAWS DAYS Report
 
資料ビジュアル化のススメ
資料ビジュアル化のススメ資料ビジュアル化のススメ
資料ビジュアル化のススメ
 
美ら海水族館から考えるユーザー心理
美ら海水族館から考えるユーザー心理美ら海水族館から考えるユーザー心理
美ら海水族館から考えるユーザー心理
 
IoT製品の魅力
IoT製品の魅力IoT製品の魅力
IoT製品の魅力
 
新しい家族を紹介します~1台と1匹~
新しい家族を紹介します~1台と1匹~新しい家族を紹介します~1台と1匹~
新しい家族を紹介します~1台と1匹~
 
Windows10でword2vecを使ってみた
Windows10でword2vecを使ってみたWindows10でword2vecを使ってみた
Windows10でword2vecを使ってみた
 
色で伝えるイメージ
色で伝えるイメージ色で伝えるイメージ
色で伝えるイメージ
 
バランスを整える
バランスを整えるバランスを整える
バランスを整える
 
脆弱性のふさぎ方
脆弱性のふさぎ方脆弱性のふさぎ方
脆弱性のふさぎ方
 

Recently uploaded

株式会社ジンザイベース/特定技能外国人紹介に関する提案資料/2024ver///
株式会社ジンザイベース/特定技能外国人紹介に関する提案資料/2024ver///株式会社ジンザイベース/特定技能外国人紹介に関する提案資料/2024ver///
株式会社ジンザイベース/特定技能外国人紹介に関する提案資料/2024ver///
DAISUKE NAKAMURA
 
株式会社種村建設_新卒向け会社紹介資料_____________________
株式会社種村建設_新卒向け会社紹介資料_____________________株式会社種村建設_新卒向け会社紹介資料_____________________
株式会社種村建設_新卒向け会社紹介資料_____________________
ssuser560305
 
株式会社ROMS採用候補者用説明資料。候補者の方向け事業概要・沿革・カルチャーをご紹介
株式会社ROMS採用候補者用説明資料。候補者の方向け事業概要・沿革・カルチャーをご紹介株式会社ROMS採用候補者用説明資料。候補者の方向け事業概要・沿革・カルチャーをご紹介
株式会社ROMS採用候補者用説明資料。候補者の方向け事業概要・沿革・カルチャーをご紹介
ssuserdc1268
 
The AI service "MMOL Pot (MMOT)" by MMOL Holdings
The AI service "MMOL Pot (MMOT)" by MMOL HoldingsThe AI service "MMOL Pot (MMOT)" by MMOL Holdings
The AI service "MMOL Pot (MMOT)" by MMOL Holdings
mikidaisuke
 
株式会社メンバーズ「脱炭素アクション100」2023年度実施レポート(2024年6月公開)
株式会社メンバーズ「脱炭素アクション100」2023年度実施レポート(2024年6月公開)株式会社メンバーズ「脱炭素アクション100」2023年度実施レポート(2024年6月公開)
株式会社メンバーズ「脱炭素アクション100」2023年度実施レポート(2024年6月公開)
Members_corp
 
【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪
【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪
【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪
ytakahashi4
 
kintone Café 山口 Vol.8 kintone×UiPath.pdf
kintone Café 山口 Vol.8 kintone×UiPath.pdfkintone Café 山口 Vol.8 kintone×UiPath.pdf
kintone Café 山口 Vol.8 kintone×UiPath.pdf
takashihashimoto14
 
【スポンサープラン】Marketing Native Fes 2024summer
【スポンサープラン】Marketing Native Fes 2024summer【スポンサープラン】Marketing Native Fes 2024summer
【スポンサープラン】Marketing Native Fes 2024summer
yutooyama
 
株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)
株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)
株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)
Members_corp
 
HRMOS-saiyo_overview_material_powred_by_bizreach
HRMOS-saiyo_overview_material_powred_by_bizreachHRMOS-saiyo_overview_material_powred_by_bizreach
HRMOS-saiyo_overview_material_powred_by_bizreach
gmiki1
 
【公開用】株式会社VISIONARY JAPAN_エンジニアチーム 採用資料(ver2.1)
【公開用】株式会社VISIONARY JAPAN_エンジニアチーム 採用資料(ver2.1)【公開用】株式会社VISIONARY JAPAN_エンジニアチーム 採用資料(ver2.1)
【公開用】株式会社VISIONARY JAPAN_エンジニアチーム 採用資料(ver2.1)
recruit9
 

Recently uploaded (11)

株式会社ジンザイベース/特定技能外国人紹介に関する提案資料/2024ver///
株式会社ジンザイベース/特定技能外国人紹介に関する提案資料/2024ver///株式会社ジンザイベース/特定技能外国人紹介に関する提案資料/2024ver///
株式会社ジンザイベース/特定技能外国人紹介に関する提案資料/2024ver///
 
株式会社種村建設_新卒向け会社紹介資料_____________________
株式会社種村建設_新卒向け会社紹介資料_____________________株式会社種村建設_新卒向け会社紹介資料_____________________
株式会社種村建設_新卒向け会社紹介資料_____________________
 
株式会社ROMS採用候補者用説明資料。候補者の方向け事業概要・沿革・カルチャーをご紹介
株式会社ROMS採用候補者用説明資料。候補者の方向け事業概要・沿革・カルチャーをご紹介株式会社ROMS採用候補者用説明資料。候補者の方向け事業概要・沿革・カルチャーをご紹介
株式会社ROMS採用候補者用説明資料。候補者の方向け事業概要・沿革・カルチャーをご紹介
 
The AI service "MMOL Pot (MMOT)" by MMOL Holdings
The AI service "MMOL Pot (MMOT)" by MMOL HoldingsThe AI service "MMOL Pot (MMOT)" by MMOL Holdings
The AI service "MMOL Pot (MMOT)" by MMOL Holdings
 
株式会社メンバーズ「脱炭素アクション100」2023年度実施レポート(2024年6月公開)
株式会社メンバーズ「脱炭素アクション100」2023年度実施レポート(2024年6月公開)株式会社メンバーズ「脱炭素アクション100」2023年度実施レポート(2024年6月公開)
株式会社メンバーズ「脱炭素アクション100」2023年度実施レポート(2024年6月公開)
 
【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪
【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪
【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪
 
kintone Café 山口 Vol.8 kintone×UiPath.pdf
kintone Café 山口 Vol.8 kintone×UiPath.pdfkintone Café 山口 Vol.8 kintone×UiPath.pdf
kintone Café 山口 Vol.8 kintone×UiPath.pdf
 
【スポンサープラン】Marketing Native Fes 2024summer
【スポンサープラン】Marketing Native Fes 2024summer【スポンサープラン】Marketing Native Fes 2024summer
【スポンサープラン】Marketing Native Fes 2024summer
 
株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)
株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)
株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)
 
HRMOS-saiyo_overview_material_powred_by_bizreach
HRMOS-saiyo_overview_material_powred_by_bizreachHRMOS-saiyo_overview_material_powred_by_bizreach
HRMOS-saiyo_overview_material_powred_by_bizreach
 
【公開用】株式会社VISIONARY JAPAN_エンジニアチーム 採用資料(ver2.1)
【公開用】株式会社VISIONARY JAPAN_エンジニアチーム 採用資料(ver2.1)【公開用】株式会社VISIONARY JAPAN_エンジニアチーム 採用資料(ver2.1)
【公開用】株式会社VISIONARY JAPAN_エンジニアチーム 採用資料(ver2.1)
 

ゲームから学ぶui ux

Editor's Notes

  1. ようやく本題。 忘れてそうなので、もう一回出す。
  2. ゲームのコンテンツは基本的に、ユーザーが 眺める・見る物ではなく実際に触れる物です。 そのため、一般的なシステムに比べユーザーが UIに触れている時間がとても長いです。
  3. つまり、UX重視してて、単純な機能性だけを求めてるわけじゃないって言いたい。 特に、UIが他サービスの差別化点の一つレベルになっている点。
  4. 新しいUIについて、といった形の流れ。
  5. 全体的に「布」をイメージした世界観となっている。 これであればメニューを見ただけでユーザーは「ぬいぐるみのメルヘンな世界観」を存分に体験できるだろう。 右下のボタン等、少々直感的でないボタンもありますが、「メルヘンの世界観を体験させる」というUXにもとづけば 良いUIだと考えられると思います。
  6. こちらは人気ゲーム「モンスターとストライク」の画面。 こちらは、あまり世界観に比重を置いていないゲームとなる。 この場合、各UIパーツは「わかりやすさ」を優先し、各ボタンには文字の注釈が入っている。 ゲームの交友名詞が、ボタンに使用されていない点も、「直観的」という面で優れている。
  7. これもとあるホラーゲームのアイテム一覧の写真。 ゲーム画面にウィンドウを作らず、あえて主人公の前に表示している。 これもメニューを開く行為をシステム的なものではなく、「世界観の中での出来事」だという事をユーザーに体験させている。