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.jphttp://webcre8.jp/think/meaning-all-design.html■I‘m just another scarecrow.http://yohei.posterous.com/92159990