google developer day 2010 japan: ここちよい android - おもいやりの ui デザイン...
DESCRIPTION
プリの操作から醸し出されるつかいごこち-UX(ユーザ- エクスペリエンス)を生み出す手法を,具体的な事例を通して紹介します。 Android むけ日本語入力アプリケーション 「Simeji」 の UX を 1.アプリの世界観づくり 2.インタラクション 3.グラフィックデザインの 3 つの視点に分けて、制作者の立場から解説するセッションです。1 では世界観を作る意義を、2 では動きのデザインを作る理論の紹介や考え方の例を、3 ではグラフィックデザインの基礎的なセオリーや外観の整え方の基本、UX に与える効果についてお話しする予定です。TRANSCRIPT
![Page 1: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/1.jpg)
(c) adamrocker / rin yano 2010
#android3
ここちよいAndroid おもいやりのUIデザイン
adamrocker / 矢野りん
![Page 2: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/2.jpg)
(c) adamrocker / rin yano 2010
#android3
自己紹介• ソフトウエアの研究中
• Android向け日本語IMEのSimejiを開発中
• Sandboxに「ハラタケ目:BTk」出展中
• KDDI Mobile(US)のHTC HeroにSimejiがプリインストールされています
• 最近Sony EricssonのXperia X10のPOBoxと、Simejiの一部「マッシュルーム」が合体して「POBox Plug-in」に
![Page 3: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/3.jpg)
(c) adamrocker / rin yano 2010
#android3
自己紹介• ソフトウエアのビジュアルデザイン担当
• ブリリアントサービスの「ウキウキView」/ GClue「Blocco」/ 「オクトバ」アプリのデザインまわりを担当
• 10月9日と11月13日にWebまわりのビジュアルデザインのテクニックを磨くイベント「CSS Nite LP11 / LP12」をやります
• 物販アプリ「DropCart」Developer SandBoxのデ部ブースでみてね!
![Page 4: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/4.jpg)
(c) adamrocker / rin yano 2010
#android3
アジェンダ• UX(User eXperience)とは?
• SimejiにおけるUXの考え方
• SimejiのUXにおけるグラフィックデザイン面の工夫
![Page 5: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/5.jpg)
(c) adamrocker / rin yano 2010
UX(User eXperience)とは?
![Page 6: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/6.jpg)
(c) adamrocker / rin yano 2010
#android3
UXとは?
ユーザーがある製品やシステムを使ったときに得られる経験や満足など全体を指す用語。 (Wikipedia)
![Page 7: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/7.jpg)
(c) adamrocker / rin yano 2010
#android3
UXとは?製品やサービスの使用・消費・所有などを通じて、人間が認知する(有意義な)体験のこと。製品やサービスを利用する過程(の品質)を重視し、ユーザーが真にやりたいこと(本人が意識していない場合もある)を「楽しく」「面白く」「心地よく」行える点を、機能や結果、あるいは使いやすさとは別の“提供価値” として考えるコンセプト。 (@IT)@
![Page 8: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/8.jpg)
(c) adamrocker / rin yano 2010
#android3
UXとは?
ユーザへの“おもいやり”
![Page 9: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/9.jpg)
(c) adamrocker / rin yano 2010
#android3
おもいやり?
•気持ち良くさせる?楽しませる?‣ ターゲットユーザが決まっているなら可能かも…
‣ 毎日見ても、触っても飽きませんか?
‣ どういうシーンでも鬱陶しくありませんか?
![Page 10: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/10.jpg)
(c) adamrocker / rin yano 2010
#android3
おもいやり?
“気持ち良くさせる”というよりか
“不快ではない”ようにすること
![Page 11: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/11.jpg)
(c) adamrocker / rin yano 2010
#android3
おもいやり?
不快ではない=違和感がない
![Page 12: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/12.jpg)
(c) adamrocker / rin yano 2010
#android3
おもいやり?
静的・動的な視覚情報に対して「違和感のない」体験を提供する
‣ アニメーションを利用したインタラクション‣ グラフィックによる世界観
![Page 13: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/13.jpg)
(c) adamrocker / rin yano 2010
SimejiにおけるUXの考え方
![Page 14: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/14.jpg)
(c) adamrocker / rin yano 2010
#android3
SimejiにおけるUX
ユーザの脳への“おもいやり”
![Page 15: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/15.jpg)
(c) adamrocker / rin yano 2010
#android3
認識する
テスト- 設定を変更する -
![Page 16: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/16.jpg)
(c) adamrocker / rin yano 2010
#android3
認識する
![Page 17: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/17.jpg)
(c) adamrocker / rin yano 2010
#android3
何が変わったのかを認識するには時間が必要脳への負担
認識する
![Page 18: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/18.jpg)
(c) adamrocker / rin yano 2010
#android3
認識する
テスト- 設定を変更する -(ただしDialogなし)
![Page 19: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/19.jpg)
(c) adamrocker / rin yano 2010
#android3
認識する
![Page 20: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/20.jpg)
(c) adamrocker / rin yano 2010
#android3
認識する
どうやら比較対象が近いと簡単に認識できるらしい
![Page 21: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/21.jpg)
(c) adamrocker / rin yano 2010
#android3
認識する
Dialogがおじゃま?でも必要!
![Page 22: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/22.jpg)
(c) adamrocker / rin yano 2010
#android3
Simejiの解決策
Demo
![Page 23: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/23.jpg)
(c) adamrocker / rin yano 2010
#android3
おもいやり1
脳の処理負担を軽減するため変化は操作に対して
時間・距離的に 近くする
![Page 24: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/24.jpg)
(c) adamrocker / rin yano 2010
#android3
モバイルにおける課題
•ディスプレイが狭い‣ 親指での操作が基本‣ 右手操作なら右側が見えなくなる
手が邪魔
![Page 25: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/25.jpg)
(c) adamrocker / rin yano 2010
#android3
とある解決策
![Page 26: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/26.jpg)
(c) adamrocker / rin yano 2010
#android3
Simejiの解決策❖ 4次元の活用
Time
![Page 27: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/27.jpg)
(c) adamrocker / rin yano 2010
#android3
Simejiの解決策❖ 4次元の活用
Time
認識には時間が必要ユーザが認識するための
“ゆとり”
![Page 28: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/28.jpg)
(c) adamrocker / rin yano 2010
#android3
フリックの例
Demo
![Page 29: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/29.jpg)
(c) adamrocker / rin yano 2010
#android3
おもいやり2
脳が処理する余裕を与える
![Page 30: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/30.jpg)
(c) adamrocker / rin yano 2010
#android3
UXの方法‣ マンマシンインターフェース‣ ヒューマンファクター‣ 情報アーキテクチャ‣ インタラクションデザイン‣ ユーザインターフェースデザイン‣ ユーザビリティ‣ グラフィックデザイン
(Wikipedia)
‣ マンマシンインターフェース‣ ヒューマンファクター‣ 情報アーキテクチャ‣ インタラクションデザイン‣ ユーザインターフェースデザイン‣ ユーザビリティ‣ グラフィックデザイン
![Page 31: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/31.jpg)
(c) adamrocker / rin yano 2010
#android3
インタラクション?2つ以上の存在が互いに影響を及ぼし合うこと
Android(タッチディスプレイ)ではヒトがタッチすることでアプリが動く
❖UX視点を加えるヒトがタッチすることでアプリが
違和感なく動く
![Page 32: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/32.jpg)
(c) adamrocker / rin yano 2010
#android3
SimejiのSkinでは❖動作の言語化
“Skinをインストール”
![Page 33: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/33.jpg)
(c) adamrocker / rin yano 2010
#android3
インストールの表現
Demo
![Page 34: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/34.jpg)
(c) adamrocker / rin yano 2010
#android3
おもいやり3
自然な動作表現
![Page 35: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/35.jpg)
(c) adamrocker / rin yano 2010
#android3
Simejiのおもいやり
1.変化は時間・距離的に近く2.脳が処理する余裕3.自然な動作表現
どうやって?
![Page 36: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/36.jpg)
(c) adamrocker / rin yano 2010
#android3
おもいやりの思考ツール1•躍度(やくど)‣ 生物に不快感を与える評価値
j = Δa/Δtj:躍度, a:加速度, t:時間
jが大きいと不快感が増す加速度の変化(Δa)を小さくする
![Page 37: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/37.jpg)
(c) adamrocker / rin yano 2010
#android3
おもいやりの思考ツール2•フィッツの法則‣ 対象物を特定する予測時間
T = a + blog2(1 + D/W)T:時間, D:対象物までの距離, W:対象物の幅
距離(D)を小さく、モノ(W)を大きくする
![Page 38: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/38.jpg)
(c) adamrocker / rin yano 2010
#android3
おもいやりの思考ツール3,4
•ヒックの法則‣ 沢山あると選べない
T = a + blog2(1 + n)
•テスラーの複雑性保存の法則‣ 複雑な処理の総量は普遍‣ 複雑な処理はあっち(アプリ)が負担するかこっち(ヒト)が負担するか
![Page 39: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/39.jpg)
(c) adamrocker / rin yano 2010
SimejiのUXにおけるグラフィックデザイン面の工夫
![Page 40: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/40.jpg)
(c) adamrocker / rin yano 2010
#android3
アプリにとってグラフィックデザインは
•設計のあとの仕上げ•作り手にとっては最後の仕事•使い手にとっては最初の判断材料
![Page 41: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/41.jpg)
(c) adamrocker / rin yano 2010
#android3
![Page 42: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/42.jpg)
(c) adamrocker / rin yano 2010
#android3
アプリにとって グラフィックデザインのねらいは
•情報の理解を助ける•好きになってもらう
このふたつのマリアージュが世界観になる
(たぶん)
![Page 43: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/43.jpg)
(c) adamrocker / rin yano 2010
#gdd2010jp
わかりやすい?
![Page 44: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/44.jpg)
(c) adamrocker / rin yano 2010
#gdd2010jp
わかりやすい?
![Page 45: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/45.jpg)
(c) adamrocker / rin yano 2010
#android3
わかりやすい?
![Page 46: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/46.jpg)
(c) adamrocker / rin yano 2010
#android3
わかりやすい?
![Page 47: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/47.jpg)
(c) adamrocker / rin yano 2010
#android3
好き?
![Page 48: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/48.jpg)
(c) adamrocker / rin yano 2010
#android3
好き?
![Page 49: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/49.jpg)
(c) adamrocker / rin yano 2010
#android3
好き?
![Page 50: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/50.jpg)
(c) adamrocker / rin yano 2010
#android3
•情報の理解を助ける• 情報を整理して受け取りやすく
•好きになってもらう• 清潔感を出す
アプリにとって グラフィックデザインのねらいは
このふたつの条件さえ満たしていればOKだ!
![Page 51: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/51.jpg)
(c) adamrocker / rin yano 2010
#android3
SimejiのUXにおけるグラフィックデザイン面の工夫
•デザインの方針•ロゴのデザイン•Simejiサーバー(スキンアップロードページ)のレイアウト
![Page 52: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/52.jpg)
(c) adamrocker / rin yano 2010
#android3
Simejiデザインの方針
•フラットスタイルを単純にしてスキンを目立たせたい
•シンプルアイコンのもつ意味をストレートに伝えたい
•ラブリー毎日使う物だから、愛着を持って欲しい
![Page 53: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/53.jpg)
(c) adamrocker / rin yano 2010
#android3
Mies van der Rohe
“Less is more.”
![Page 54: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/54.jpg)
(c) adamrocker / rin yano 2010
#android3
フラット/シンプル
![Page 55: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/55.jpg)
(c) adamrocker / rin yano 2010
#android3
Simejiスキン
![Page 56: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/56.jpg)
(c) adamrocker / rin yano 2010
#android3
主役はスキン。UIの見栄えは単純に
![Page 57: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/57.jpg)
(c) adamrocker / rin yano 2010
#android3
フラット/ラブリー
![Page 58: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/58.jpg)
(c) adamrocker / rin yano 2010
#android3
フラット/シンプル/ラブリー
![Page 59: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/59.jpg)
(c) adamrocker / rin yano 2010
#android3
フラット/シンプル/ラブリー
![Page 60: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/60.jpg)
(c) adamrocker / rin yano 2010
#android3
ちなみに幅48ピクセルでもよめます
![Page 61: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/61.jpg)
(c) adamrocker / rin yano 2010
#android3
![Page 62: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/62.jpg)
(c) adamrocker / rin yano 2010
Simejiに使ったグラフィックデザイン理論
![Page 63: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/63.jpg)
(c) adamrocker / rin yano 2010
#android3
くらしに役立つデザイン理論
•そろえる•コントラストに気をつける
![Page 64: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/64.jpg)
(c) adamrocker / rin yano 2010
#android3
そろえる/ボリューム感をそろえる
ふとっちょは短めに
![Page 65: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/65.jpg)
(c) adamrocker / rin yano 2010
#android3
そろえる/ボリューム感をそろえる
幅のあるかたちは細めに
![Page 66: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/66.jpg)
(c) adamrocker / rin yano 2010
#gdd2010jp
円のおおきさが目安もともと丸いデザインは目安よりひとまわり小さく
GOOD
NOT SO GOOD
![Page 67: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/67.jpg)
(c) adamrocker / rin yano 2010
#android3
Mies van der Rohe
“God is in the detail.”
![Page 68: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/68.jpg)
(c) adamrocker / rin yano 2010
#android3
情報デザイン?
![Page 69: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/69.jpg)
(c) adamrocker / rin yano 2010
#android3
ローコントラスト
ハイコントラスト
![Page 70: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/70.jpg)
(c) adamrocker / rin yano 2010
#android3
大/小 サイズのコントラスト
![Page 71: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/71.jpg)
(c) adamrocker / rin yano 2010
#android3
Simejiデザインの方針
•フラット•シンプル•ラブリーこの3つが世界観を作っている(と、信じている)
![Page 72: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/72.jpg)
(c) adamrocker / rin yano 2010
まとめ
![Page 73: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/73.jpg)
(c) adamrocker / rin yano 2010
#android3
まとめ
SimejiのUX=おもいやり
‣ 不快にならないインタラクション
‣ 整理・整頓による清潔感
![Page 74: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/74.jpg)
(c) adamrocker / rin yano 2010
#android3
Louis Henry Sllivan
“Form follows function.”
![Page 75: Google Developer Day 2010 Japan: ここちよい Android - おもいやりの UI デザイン (adamrocker, 矢野りん)](https://reader034.vdocuments.site/reader034/viewer/2022051514/5483f82bb07959420c8b4a54/html5/thumbnails/75.jpg)
(c) adamrocker / rin yano 2010
#android3
throw lifehttp://www.adamrocker.com/
TwitterID:adamrockere-mail:[email protected]
adamrocker
ものづくりにっぽんhttp://yanorin.blogspot.com/
TwitterID:yanorine-mail:[email protected]
Rin Yano#andronjo