Soumettre la recherche
Mettre en ligne
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
•
Télécharger en tant que PPTX, PDF
•
88 j'aime
•
91,237 vues
Konomi Kawaharada
Suivre
スマフォアプリ・サイトを制作する際に、 当たり前を当たり前だと思ってはいけない UIの基礎をスライドにしました。
Lire moins
Lire la suite
Design
Signaler
Partager
Signaler
Partager
1 sur 52
Télécharger maintenant
Recommandé
UXの考え方とアプローチ
UXの考え方とアプローチ
Masaya Ando
[UX]は投げ捨てろ!
[UX]は投げ捨てろ!
c-mitsuba
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
INI株式会社
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
Yasuhisa Hasegawa
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
Masaya Ando
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
Masaya Ando
テックヒルズ
テックヒルズ
tomo tsubota
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
Hiroki Takaba
Recommandé
UXの考え方とアプローチ
UXの考え方とアプローチ
Masaya Ando
[UX]は投げ捨てろ!
[UX]は投げ捨てろ!
c-mitsuba
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
INI株式会社
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
Yasuhisa Hasegawa
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
Masaya Ando
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
Masaya Ando
テックヒルズ
テックヒルズ
tomo tsubota
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
Hiroki Takaba
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
UIデザインの基本
UIデザインの基本
Roy Kim
はじめてのUXとUIの話
はじめてのUXとUIの話
Kazuki Yamashita
UX Design とは何か?
UX Design とは何か?
Hiroshi Obayashi
体験のモデリングとコンセプトデザイン
体験のモデリングとコンセプトデザイン
Masaya Ando
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato
UX設計の第一歩-インテリジェントネット社内勉強会
UX設計の第一歩-インテリジェントネット社内勉強会
INI株式会社
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
Yasuhisa Hasegawa
【社内勉強会資料】自社サービスエンジニアの為の「UX設計と情報設計」
【社内勉強会資料】自社サービスエンジニアの為の「UX設計と情報設計」
paiza
UXはじめの一歩
UXはじめの一歩
井上 誠
UX - 業務システムにも感動を
UX - 業務システムにも感動を
Yasunobu Kawaguchi
ユーザーエクスペリエンスの分解
ユーザーエクスペリエンスの分解
Takehisa Gokaichi
人と向き合うプロトタイピング
人と向き合うプロトタイピング
wariemon
スマートフォン・タブレット UIガイドライン
スマートフォン・タブレット UIガイドライン
MultiDeviceLab
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
Yu Morita
アプリデザインのお勉強 UI/UXのお話
アプリデザインのお勉強 UI/UXのお話
shinta rock
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
wariemon
Practical ux4publish
Practical ux4publish
ncdc_jp
企画したUXをプロダクトに反映するディレクション
企画したUXをプロダクトに反映するディレクション
LINE Corporation
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
schoowebcampus
Contenu connexe
Tendances
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
UIデザインの基本
UIデザインの基本
Roy Kim
はじめてのUXとUIの話
はじめてのUXとUIの話
Kazuki Yamashita
UX Design とは何か?
UX Design とは何か?
Hiroshi Obayashi
体験のモデリングとコンセプトデザイン
体験のモデリングとコンセプトデザイン
Masaya Ando
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato
UX設計の第一歩-インテリジェントネット社内勉強会
UX設計の第一歩-インテリジェントネット社内勉強会
INI株式会社
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
Yasuhisa Hasegawa
【社内勉強会資料】自社サービスエンジニアの為の「UX設計と情報設計」
【社内勉強会資料】自社サービスエンジニアの為の「UX設計と情報設計」
paiza
UXはじめの一歩
UXはじめの一歩
井上 誠
UX - 業務システムにも感動を
UX - 業務システムにも感動を
Yasunobu Kawaguchi
ユーザーエクスペリエンスの分解
ユーザーエクスペリエンスの分解
Takehisa Gokaichi
人と向き合うプロトタイピング
人と向き合うプロトタイピング
wariemon
スマートフォン・タブレット UIガイドライン
スマートフォン・タブレット UIガイドライン
MultiDeviceLab
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
Yu Morita
アプリデザインのお勉強 UI/UXのお話
アプリデザインのお勉強 UI/UXのお話
shinta rock
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
wariemon
Practical ux4publish
Practical ux4publish
ncdc_jp
企画したUXをプロダクトに反映するディレクション
企画したUXをプロダクトに反映するディレクション
LINE Corporation
Tendances
(20)
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UIデザインの基本
UIデザインの基本
はじめてのUXとUIの話
はじめてのUXとUIの話
UX Design とは何か?
UX Design とは何か?
体験のモデリングとコンセプトデザイン
体験のモデリングとコンセプトデザイン
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
UX設計の第一歩-インテリジェントネット社内勉強会
UX設計の第一歩-インテリジェントネット社内勉強会
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
【社内勉強会資料】自社サービスエンジニアの為の「UX設計と情報設計」
【社内勉強会資料】自社サービスエンジニアの為の「UX設計と情報設計」
UXはじめの一歩
UXはじめの一歩
UX - 業務システムにも感動を
UX - 業務システムにも感動を
ユーザーエクスペリエンスの分解
ユーザーエクスペリエンスの分解
人と向き合うプロトタイピング
人と向き合うプロトタイピング
スマートフォン・タブレット UIガイドライン
スマートフォン・タブレット UIガイドライン
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
アプリデザインのお勉強 UI/UXのお話
アプリデザインのお勉強 UI/UXのお話
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
Practical ux4publish
Practical ux4publish
企画したUXをプロダクトに反映するディレクション
企画したUXをプロダクトに反映するディレクション
En vedette
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
schoowebcampus
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
Yu Morita
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
yosuke sato
UXのためのUIデザイン
UXのためのUIデザイン
Hironobu Aoki
UXとブランド
UXとブランド
Takehisa Gokaichi
UIの話は会議室でするな
UIの話は会議室でするな
Shingo Katsushima
ShibuyaUX - UX and Analytics
ShibuyaUX - UX and Analytics
Makoto Shimizu
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
Katsuhito Okada
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig24/7
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
Kenichi Suzuki
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
Katsumi Mizushima
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Kazuki Yamashita
0528 kanntigai ui_ux
0528 kanntigai ui_ux
Saori Matsui
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
Roy Kim
なぜUXをデザインしているのか
なぜUXをデザインしているのか
Mikihiro Fujii
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
En vedette
(17)
確実に良くするUI/UX設計
確実に良くするUI/UX設計
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
UXのためのUIデザイン
UXのためのUIデザイン
UXとブランド
UXとブランド
UIの話は会議室でするな
UIの話は会議室でするな
ShibuyaUX - UX and Analytics
ShibuyaUX - UX and Analytics
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
0528 kanntigai ui_ux
0528 kanntigai ui_ux
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
なぜUXをデザインしているのか
なぜUXをデザインしているのか
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Similaire à 当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
スマートフォンUIデザイン
スマートフォンUIデザイン
Konomi Kawaharada
当たり前を当たり前だと思ってはいけない!スマートフォンフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンフォンUIデザイン
Konomi Kawaharada
Schoo講演資料130409
Schoo講演資料130409
schoowebcampus
Schoo講演資料130409
Schoo講演資料130409
Ryosuke Matsumoto
Schoo講演資料130409
Schoo講演資料130409
schoowebcampus
20090527 Gurunavi Wba
20090527 Gurunavi Wba
武 河野
私の考える視覚障害者向けスマートフォン
私の考える視覚障害者向けスマートフォン
繁夫 武藤
Cedec keynote02
Cedec keynote02
Sayuri Nagayoshi
2012年9月南青山it女子会(動画ぬき)
2012年9月南青山it女子会(動画ぬき)
良威 日野
Bambina20120927
Bambina20120927
良威 日野
南区タブレット教室
南区タブレット教室
高見 知英
カンファレンス販売店教育施策配布用
カンファレンス販売店教育施策配布用
Appliya Tokyo
LINE dev meetup
LINE dev meetup
Hirotaka Niisato
UIの色のコントラスト比十分ですか?
UIの色のコントラスト比十分ですか?
Kasumi Morita
20120416 3年後のeラーニング予想大会 中嶋さん
20120416 3年後のeラーニング予想大会 中嶋さん
Visso株式会社
Collaborative design abc2014winter
Collaborative design abc2014winter
Kinya Hiramatsu
タブレット端末を学習に活かすさまざまなアイデア
タブレット端末を学習に活かすさまざまなアイデア
Naoya Sangu
Rainbow appsshonanseminar20121222
Rainbow appsshonanseminar20121222
Haruyoshi Kuwamura
デザイン型人材育成のために
デザイン型人材育成のために
TENTO_slide
ペルソナシナリオとプロトタイプ
ペルソナシナリオとプロトタイプ
Shuhei Iitsuka
Similaire à 当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
(20)
スマートフォンUIデザイン
スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンフォンUIデザイン
Schoo講演資料130409
Schoo講演資料130409
Schoo講演資料130409
Schoo講演資料130409
Schoo講演資料130409
Schoo講演資料130409
20090527 Gurunavi Wba
20090527 Gurunavi Wba
私の考える視覚障害者向けスマートフォン
私の考える視覚障害者向けスマートフォン
Cedec keynote02
Cedec keynote02
2012年9月南青山it女子会(動画ぬき)
2012年9月南青山it女子会(動画ぬき)
Bambina20120927
Bambina20120927
南区タブレット教室
南区タブレット教室
カンファレンス販売店教育施策配布用
カンファレンス販売店教育施策配布用
LINE dev meetup
LINE dev meetup
UIの色のコントラスト比十分ですか?
UIの色のコントラスト比十分ですか?
20120416 3年後のeラーニング予想大会 中嶋さん
20120416 3年後のeラーニング予想大会 中嶋さん
Collaborative design abc2014winter
Collaborative design abc2014winter
タブレット端末を学習に活かすさまざまなアイデア
タブレット端末を学習に活かすさまざまなアイデア
Rainbow appsshonanseminar20121222
Rainbow appsshonanseminar20121222
デザイン型人材育成のために
デザイン型人材育成のために
ペルソナシナリオとプロトタイプ
ペルソナシナリオとプロトタイプ
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
1.
2.
自己紹介 Twitter :
cotora_design グラフィックデザイナー 主にiPhoneAppのUIやIFデザイン Webデザインを制作しています
3.
UIとは ユーザーインターフェースの略
4.
UIとは ユーザーインターフェースの略
5.
UIとは
インターフェイスの グラフィックデザインのこと
6.
UIとは
インターフェイスの グラフィックデザインのこと
7.
UIとは グラフィックはもちろん アクション、画面遷移なども
ふまえた設計のこと
8.
ユーザーを想像してみよう • いつ(When) •
どこで(Where) • 誰が(Who) • 何を(What) • なぜ(Why) • どうやって(How)
9.
いつ?
運転中 就寝前 仕事中 暇なとき 移動中
10.
パッと見て いつ?
わかりやすいもの 目が覚めない 優しい色使い 運転中 就寝前 仕事中 暇なとき 移動中 片手
11.
どこで?
車の中で 会社で カフェで 電車の中で いい雰囲気の BARで
12.
シンプルな
画面遷移 どこで? 目につかない ビジネスの雰囲気 車の中で 会社で カフェで 電車の中で いい雰囲気の BARで シックな色調
13.
だれが?
文字を読めない オシャレな こどもが 女性が おかあさんと たくましい こどもが 目の悪い 男性が おばあちゃんが
14.
ピクトグラムで だれが?
文字のないデザイン 文字を読めない オシャレな こどもが 女性が 指太い? おかあさんと たくましい こどもが 目の悪い 男性が おばあちゃんが 文字を 読みやすく
15.
なにを?
アプリを (ゲーム・動画・SNS) スマートフォンサイトを (ショッピング・アニメ) 家電・占いなど)
16.
なにを? 画面は傾けると縦と横 どちらにも対応
アプリを (ゲーム・動画・SNS) スマートフォンサイトを (ショッピング・アニメ) 家電・占いなど) 画面を固定できる
17.
なぜ?
生活のため 勉強するため コミュニケー ションのため 暇つぶしの こどもを ため あやすため
18.
寒色のほうが なぜ?
覚えがいい? 生活のため 勉強するため コミュニケー ションのため 暇つぶしの こどもを ため あやすため ターゲットは 広いかもしれない
19.
どうやって?
仕事を 走りながら しながら 寝ている 寝転がり 最中に 運転する ながら かたわら
20.
どうやって?
ユーザーは こだわりが 仕事を ありそう 走りながら しながら 寝ている 寝転がり 最中に 運転する ながら かたわら 大きく はっきりと 視認性が重要?
21.
これらをふまえると… どんなUIであるべきか
わかってくる
22.
ボタンについて
23.
ボタンについて
最低サイズは 88px (3Gの場合は44px)
24.
ボタンについて 片手?両手?どう持つのか? 押し間違えのない配置
送信 削 除
25.
ボタンについて 片手?両手?どう持つのか? 押し間違えのない配置
送信 削 除
26.
ボタンについて ・隣のボタンとの間隔に注意 ・片手でも押しやすい配置 ・押し間違いを避けたいボタンは 遠くへ配置する
など
27.
ボタンについて 例:おしゃれな女性がターゲット
↓
28.
ボタンについて 例:おしゃれな女性がターゲット
↓ 縦の幅を持たせる (ネイルをしているかもしれない)
29.
ボタンについて ゲームや読み物の時は注意
思っているよりも 手や指で隠れる範囲は大きい
30.
ボタンについて
31.
ボタンについて
2009年にFirefoxが ブラウザをDLするボタンで どの色が一番押されるかテスト
32.
ボタンについて
33.
ボタンについて
緑 (930,752)DL 青 (256,344)DL 紫 (255,894)DL 橙 (255,811)DL
34.
ボタンについて
現在でも緑が使われている。 ボタンひとつにしてもとても重要
35.
画面について
36.
画面について ヘルプがなくても
使い方がわかる設計
37.
画面について ・文字をやめてピクトグラムを使用 (↑ こども、各国のローカライズにも◎)
38.
画面について ・文字をやめてピクトグラムを使用 (↑ こども、各国のローカライズにも◎) ・リンクは青で表示する(※サイト)
39.
画面について ・文字をやめてピクトグラムを使用 (↑ こども、各国のローカライズにも◎) ・リンクは青で表示する(※サイト) ・ヘッダーのlogoをタップ→Homeに戻る
40.
画面について ・文字をやめてピクトグラムを使用 (↑ こども、各国のローカライズにも◎) ・リンクは青で表示する(※サイト) ・ヘッダーのlogoをタップ→Homeに戻る ・次の動作を予測させるデザイン
41.
画面について ・文字をやめてピクトグラムを使用 (↑ こども、各国のローカライズにも◎) ・リンクは青で表示する(※サイト) ・ヘッダーのlogoをタップ→Homeに戻る ・次の動作を予測させるデザイン
42.
ローカライズ(おまけ)
43.
ローカライズ(おまけ) ・ローカライズとは
言語だけの対応ではなく、 メニュー表示や その言語特有の処理を 追加すること
44.
英語版App
45.
日本語版App
46.
外国と日本での違い
47.
外国と日本での違い
48.
まとめ
49.
まとめ
感覚の構造に 素直に合わせて設計する
50.
まとめ 日々使っているけど
当たり前だと 思ってはいけない
51.
まとめ
必要な要素を 「目的」に合わせて 最良な方法で配置、 装飾すること
52.
ありがとうございました 【参考サイト】 ■WEBCRE8.jp http://webcre8.jp/think/meaning-all- design.html ■I‘m just another
scarecrow. http://yohei.posterous.com/92159990
Télécharger maintenant