Home
Explore
Submit Search
Upload
Login
Signup
Advertisement
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
Report
Konomi Kawaharada
Follow
川原田このみデザイン事務所
May. 1, 2012
•
0 likes
87 likes
×
Be the first to like this
Show More
•
90,698 views
views
×
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Check these out next
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
Hiroki Takaba
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
UIデザインの基本
Roy Kim
はじめてのUXとUIの話
Kazuki Yamashita
UX Design とは何か?
Hiroshi Obayashi
体験のモデリングとコンセプトデザイン
Masaya Ando
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato
1
of
52
Top clipped slide
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
May. 1, 2012
•
0 likes
87 likes
×
Be the first to like this
Show More
•
90,698 views
views
×
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download Now
Download to read offline
Report
Design
スマフォアプリ・サイトを制作する際に、 当たり前を当たり前だと思ってはいけない UIの基礎をスライドにしました。
Konomi Kawaharada
Follow
川原田このみデザイン事務所
Advertisement
Advertisement
Advertisement
Recommended
UXの考え方とアプローチ
Masaya Ando
103.7K views
•
52 slides
[UX]は投げ捨てろ!
c-mitsuba
74.6K views
•
126 slides
デザイン基礎 UXとUI
Saki TANAAMI
5.4K views
•
112 slides
UI設計の土台になる考え方-インテリジェントネット社内勉強会
INI株式会社
170.3K views
•
167 slides
コンテンツで改善する UI デザインの極意
Yasuhisa Hasegawa
385.5K views
•
76 slides
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
Masaya Ando
88.4K views
•
24 slides
More Related Content
Slideshows for you
(20)
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
Hiroki Takaba
•
69.1K views
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
•
202.5K views
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
•
551K views
UIデザインの基本
Roy Kim
•
155.7K views
はじめてのUXとUIの話
Kazuki Yamashita
•
65.7K views
UX Design とは何か?
Hiroshi Obayashi
•
16.5K views
体験のモデリングとコンセプトデザイン
Masaya Ando
•
2.4K views
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato
•
179.7K views
UX設計の第一歩-インテリジェントネット社内勉強会
INI株式会社
•
13.6K views
あたかもプロのようにプロトタイプを活用する方法
Yasuhisa Hasegawa
•
11.5K views
【社内勉強会資料】自社サービスエンジニアの為の「UX設計と情報設計」
paiza
•
41K views
UXはじめの一歩
井上 誠
•
115K views
UX - 業務システムにも感動を
Yasunobu Kawaguchi
•
4K views
ユーザーエクスペリエンスの分解
Takehisa Gokaichi
•
28.7K views
人と向き合うプロトタイピング
wariemon
•
103.7K views
スマートフォン・タブレット UIガイドライン
MultiDeviceLab
•
13.2K views
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
Yu Morita
•
18.7K views
アプリデザインのお勉強 UI/UXのお話
shinta rock
•
24.9K views
心地よいUIの温度 - 言葉と気遣いで高めるUI -
wariemon
•
274.3K views
Practical ux4publish
ncdc_jp
•
6K views
Similar to 当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
(20)
スマートフォンUIデザイン
Konomi Kawaharada
•
2.1K views
当たり前を当たり前だと思ってはいけない!スマートフォンフォンUIデザイン
Konomi Kawaharada
•
737 views
Schoo講演資料130409
schoowebcampus
•
1.1K views
Schoo講演資料130409
schoowebcampus
•
474 views
Schoo講演資料130409
Ryosuke Matsumoto
•
1.4K views
20090527 Gurunavi Wba
武 河野
•
824 views
私の考える視覚障害者向けスマートフォン
繁夫 武藤
•
1.9K views
Cedec keynote02
Sayuri Nagayoshi
•
709 views
2012年9月南青山it女子会(動画ぬき)
良威 日野
•
644 views
Bambina20120927
良威 日野
•
299 views
南区タブレット教室
高見 知英
•
907 views
カンファレンス販売店教育施策配布用
Appliya Tokyo
•
1.1K views
LINE dev meetup
Hirotaka Niisato
•
345 views
UIの色のコントラスト比十分ですか?
Kasumi Morita
•
184 views
20120416 3年後のeラーニング予想大会 中嶋さん
Visso株式会社
•
1K views
Collaborative design abc2014winter
Kinya Hiramatsu
•
816 views
タブレット端末を学習に活かすさまざまなアイデア
Naoya Sangu
•
8.2K views
Rainbow appsshonanseminar20121222
Haruyoshi Kuwamura
•
500 views
デザイン型人材育成のために
TENTO_slide
•
3.6K views
ペルソナシナリオとプロトタイプ
Shuhei Iitsuka
•
3K views
Advertisement
Recently uploaded
(20)
#全套原版1:1精仿Biola学位证成绩单
mejadib55aviom
•
2 views
★可查可存档〖制作南达科他大学文凭证书毕业证〗
fgfg45
•
2 views
#全套原版1:1精仿Trent学位证成绩单
pivepar3oflipcom
•
2 views
#国外文凭办理太平洋学位证成绩单
losapab511ockdiaom
•
0 views
#学位证靠谱办Windsor文凭证书全套
76p522i4nqmocom
•
2 views
#学位证靠谱办Capilano文凭证书全套
76p522i4nqmocom
•
2 views
#国外文凭办理Adelaide学位证成绩单
08e9d7528d5drman
•
0 views
★可查可存档〖制作中央兰开夏大学文凭证书毕业证〗
vgfg1
•
2 views
★可查可存档〖制作杨百翰大学文凭证书毕业证〗
vvvvv24
•
2 views
Massey University 梅西大学毕业证成绩单添加q薇634068167#留信入库#学历购买#学生卡#雅思托福#offer
AlifAle
•
5 views
#国外文凭办理AC学位证成绩单
08e9d7528d5drman
•
0 views
BIZ UDゴシック.pdf
ssuser716ba8
•
0 views
★可查可存档〖制作诺丁汉大学文凭证书毕业证〗
vgfg1
•
2 views
#全套原版1:1精仿奥克兰大学学位证成绩单
b6f0190421d1rma
•
2 views
539新西兰奥克兰理工大学_副本.pdf
08e9d7528d5drman
•
0 views
M PLUS 1.pdf
ssuser716ba8
•
7 views
#专业办证《Soton毕业证学位证原版精仿》
mibiri4418mevor
•
2 views
ヒラギノ角ゴ.pdf
ssuser716ba8
•
0 views
IBM Plex Sans JP.pdf
ssuser716ba8
•
5 views
#全套原版1:1精仿DePaul学位证成绩单
mejadib55aviom
•
2 views
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
自己紹介 Twitter :
cotora_design グラフィックデザイナー 主にiPhoneAppのUIやIFデザイン Webデザインを制作しています
UIとは ユーザーインターフェースの略
UIとは ユーザーインターフェースの略
UIとは
インターフェイスの グラフィックデザインのこと
UIとは
インターフェイスの グラフィックデザインのこと
UIとは グラフィックはもちろん アクション、画面遷移なども
ふまえた設計のこと
ユーザーを想像してみよう • いつ(When) •
どこで(Where) • 誰が(Who) • 何を(What) • なぜ(Why) • どうやって(How)
いつ?
運転中 就寝前 仕事中 暇なとき 移動中
パッと見て いつ?
わかりやすいもの 目が覚めない 優しい色使い 運転中 就寝前 仕事中 暇なとき 移動中 片手
どこで?
車の中で 会社で カフェで 電車の中で いい雰囲気の BARで
シンプルな
画面遷移 どこで? 目につかない ビジネスの雰囲気 車の中で 会社で カフェで 電車の中で いい雰囲気の BARで シックな色調
だれが?
文字を読めない オシャレな こどもが 女性が おかあさんと たくましい こどもが 目の悪い 男性が おばあちゃんが
ピクトグラムで だれが?
文字のないデザイン 文字を読めない オシャレな こどもが 女性が 指太い? おかあさんと たくましい こどもが 目の悪い 男性が おばあちゃんが 文字を 読みやすく
なにを?
アプリを (ゲーム・動画・SNS) スマートフォンサイトを (ショッピング・アニメ) 家電・占いなど)
なにを? 画面は傾けると縦と横 どちらにも対応
アプリを (ゲーム・動画・SNS) スマートフォンサイトを (ショッピング・アニメ) 家電・占いなど) 画面を固定できる
なぜ?
生活のため 勉強するため コミュニケー ションのため 暇つぶしの こどもを ため あやすため
寒色のほうが なぜ?
覚えがいい? 生活のため 勉強するため コミュニケー ションのため 暇つぶしの こどもを ため あやすため ターゲットは 広いかもしれない
どうやって?
仕事を 走りながら しながら 寝ている 寝転がり 最中に 運転する ながら かたわら
どうやって?
ユーザーは こだわりが 仕事を ありそう 走りながら しながら 寝ている 寝転がり 最中に 運転する ながら かたわら 大きく はっきりと 視認性が重要?
これらをふまえると… どんなUIであるべきか
わかってくる
ボタンについて
ボタンについて
最低サイズは 88px (3Gの場合は44px)
ボタンについて 片手?両手?どう持つのか? 押し間違えのない配置
送信 削 除
ボタンについて 片手?両手?どう持つのか? 押し間違えのない配置
送信 削 除
ボタンについて ・隣のボタンとの間隔に注意 ・片手でも押しやすい配置 ・押し間違いを避けたいボタンは 遠くへ配置する
など
ボタンについて 例:おしゃれな女性がターゲット
↓
ボタンについて 例:おしゃれな女性がターゲット
↓ 縦の幅を持たせる (ネイルをしているかもしれない)
ボタンについて ゲームや読み物の時は注意
思っているよりも 手や指で隠れる範囲は大きい
ボタンについて
ボタンについて
2009年にFirefoxが ブラウザをDLするボタンで どの色が一番押されるかテスト
ボタンについて
ボタンについて
緑 (930,752)DL 青 (256,344)DL 紫 (255,894)DL 橙 (255,811)DL
ボタンについて
現在でも緑が使われている。 ボタンひとつにしてもとても重要
画面について
画面について ヘルプがなくても
使い方がわかる設計
画面について ・文字をやめてピクトグラムを使用 (↑ こども、各国のローカライズにも◎)
画面について ・文字をやめてピクトグラムを使用 (↑ こども、各国のローカライズにも◎) ・リンクは青で表示する(※サイト)
画面について ・文字をやめてピクトグラムを使用 (↑ こども、各国のローカライズにも◎) ・リンクは青で表示する(※サイト) ・ヘッダーのlogoをタップ→Homeに戻る
画面について ・文字をやめてピクトグラムを使用 (↑ こども、各国のローカライズにも◎) ・リンクは青で表示する(※サイト) ・ヘッダーのlogoをタップ→Homeに戻る ・次の動作を予測させるデザイン
画面について ・文字をやめてピクトグラムを使用 (↑ こども、各国のローカライズにも◎) ・リンクは青で表示する(※サイト) ・ヘッダーのlogoをタップ→Homeに戻る ・次の動作を予測させるデザイン
ローカライズ(おまけ)
ローカライズ(おまけ) ・ローカライズとは
言語だけの対応ではなく、 メニュー表示や その言語特有の処理を 追加すること
英語版App
日本語版App
外国と日本での違い
外国と日本での違い
まとめ
まとめ
感覚の構造に 素直に合わせて設計する
まとめ 日々使っているけど
当たり前だと 思ってはいけない
まとめ
必要な要素を 「目的」に合わせて 最良な方法で配置、 装飾すること
ありがとうございました 【参考サイト】 ■WEBCRE8.jp http://webcre8.jp/think/meaning-all- design.html ■I‘m just another
scarecrow. http://yohei.posterous.com/92159990
Advertisement