スマフォアプリ・サイトを制作する際に、 当たり前を当たり前だと思ってはいけない UIの基礎をスライドにしました。

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