1.
 自己紹介
Twitter : cotora_design
グラフィックデザイナー
主にiPhoneAppのUIやIFデザイン
Webデザインを制作しています

2.
 UIとは
ユーザーインターフェースの略

3.
 UIとは
ユーザーインターフェースの略

4.
 UIとは
インターフェイスの
グラフィックデザインのこと

5.
 UIとは
インターフェイスの
グラフィックデザインのこと

6.
 UIとは
グラフィックはもちろん
アクション、画面遷移なども
ふまえた設計のこと

7.
 ユーザーを想像してみよう
• いつ（When）
• どこで（Where）
• 誰が（Who）
• 何を（What）
• なぜ（Why）
• どうやって（How）

8.
 いつ？
運転中
就寝前
仕事中
暇なとき
移動中

9.
パッと見て
 いつ？ わかりやすいもの 目が覚めない
優しい色使い
運転中
就寝前
仕事中
暇なとき
移動中
片手

10.
 どこで？
車の中で
会社で
カフェで
電車の中で いい雰囲気の
BARで

11.
シンプルな
画面遷移
 どこで？ 目につかない
ビジネスの雰囲気
車の中で
会社で
カフェで
電車の中で いい雰囲気の
BARで
シックな色調

12.
 だれが？
文字を読めない
オシャレな
こどもが 女性が
おかあさんと
たくましい こどもが 目の悪い
男性が おばあちゃんが

13.
ピクトグラムで
 だれが？ 文字のないデザイン
文字を読めない
オシャレな
こどもが 女性が
指太い？
おかあさんと
たくましい こどもが 目の悪い
男性が おばあちゃんが
文字を
読みやすく

14.
 なにを？
アプリを
（ゲーム・動画・SNS）
スマートフォンサイトを
（ショッピング・アニメ）
家電・占いなど）

15.
 なにを？
画面は傾けると縦と横
どちらにも対応 アプリを
（ゲーム・動画・SNS）
スマートフォンサイトを
（ショッピング・アニメ）
家電・占いなど）
画面を固定できる

16.
 なぜ？
生活のため
勉強するため
コミュニケー
ションのため
暇つぶしの こどもを
ため あやすため

17.
寒色のほうが
 なぜ？ 覚えがいい？
生活のため
勉強するため
コミュニケー
ションのため
暇つぶしの こどもを
ため あやすため
ターゲットは
広いかもしれない

18.
 どうやって？
仕事を
走りながら しながら
寝ている
寝転がり 最中に 運転する
ながら かたわら

19.
 どうやって？
ユーザーは
こだわりが 仕事を
ありそう
走りながら しながら
寝ている
寝転がり 最中に 運転する
ながら かたわら
大きく
はっきりと
視認性が重要？

20.
 これらをふまえると…
どんなUIであるべきか
わかってくる

21.
 ボタンについて

22.
 ボタンについて
最低サイズは
88px
（3Gの場合は44px）

23.
 ボタンについて
片手？両手？どう持つのか？
押し間違えのない配置
送信 削
除

24.
 ボタンについて
片手？両手？どう持つのか？
押し間違えのない配置
送信 削
除

25.
 ボタンについて
・隣のボタンとの間隔に注意
・片手でも押しやすい配置
・押し間違いを避けたいボタンは
遠くへ配置する
など

26.
 ボタンについて
例:おしゃれな女性がターゲット
↓

27.
 ボタンについて
例:おしゃれな女性がターゲット
↓
縦の幅を持たせる
（ネイルをしているかもしれない）

28.
 ボタンについて
ゲームや読み物の時は注意
思っているよりも
手や指で隠れる範囲は大きい

29.
 ボタンについて

30.
 ボタンについて
2009年にFirefoxが
ブラウザをDLするボタンで
どの色が一番押されるかテスト

31.
 ボタンについて

32.
 ボタンについて
緑 (930,752)DL
青 (256,344)DL
紫 (255,894)DL
橙 (255,811)DL

33.
 ボタンについて
現在でも緑が使われている。
ボタンひとつにしてもとても重要

34.
 画面について

35.
 画面について
ヘルプがなくても
使い方がわかる設計

36.
 画面について
・文字をやめてピクトグラムを使用
（↑ こども、各国のローカライズにも◎）

37.
 画面について
・文字をやめてピクトグラムを使用
（↑ こども、各国のローカライズにも◎）
・リンクは青で表示する(※サイト)

38.
 画面について
・文字をやめてピクトグラムを使用
（↑ こども、各国のローカライズにも◎）
・リンクは青で表示する(※サイト)
・ヘッダーのlogoをタップ→Homeに戻る

39.
 画面について
・文字をやめてピクトグラムを使用
（↑ こども、各国のローカライズにも◎）
・リンクは青で表示する(※サイト)
・ヘッダーのlogoをタップ→Homeに戻る
・次の動作を予測させるデザイン

40.
 画面について
・文字をやめてピクトグラムを使用
（↑ こども、各国のローカライズにも◎）
・リンクは青で表示する(※サイト)
・ヘッダーのlogoをタップ→Homeに戻る
・次の動作を予測させるデザイン

41.
 ローカライズ（おまけ）

42.
 ローカライズ（おまけ）
・ローカライズとは
言語だけの対応ではなく、
メニュー表示や
その言語特有の処理を
追加すること

43.
 英語版App

44.
 日本語版App

45.
 外国と日本での違い

46.
 外国と日本での違い

47.
 まとめ

48.
 まとめ
感覚の構造に
素直に合わせて設計する

49.
 まとめ
日々使っているけど
当たり前だと
思ってはいけない

50.
 まとめ
必要な要素を
「目的」に合わせて
最良な方法で配置、
装飾すること

51.
ありがとうございました
【参考サイト】
■WEBCRE8.jp
http://webcre8.jp/think/meaning-all-
design.html
■I‘m just another scarecrow.
http://yohei.posterous.com/92159990