当たり前を当たり前だと思ってはいけない！スマートフォンUIデザイン
•Download as PPTX, PDF•
88 likes•91,571 views
スマフォアプリ・サイトを制作する際に、 当たり前を当たり前だと思ってはいけない UIの基礎をスライドにしました。
当たり前を当たり前だと思ってはいけない！スマートフォンUIデザイン
- 2. 自己紹介 Twitter : cotora_design グラフィックデザイナー 主にiPhoneAppのUIやIFデザイン Webデザインを制作しています
- 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. ボタンについて 片手？両手？どう持つのか？ 押し間違えのない配置 送信 削 除
- 28. ボタンについて 例:おしゃれな女性がターゲット ↓ 縦の幅を持たせる （ネイルをしているかもしれない）
- 29. ボタンについて ゲームや読み物の時は注意 思っているよりも 手や指で隠れる範囲は大きい
- 30. ボタンについて
- 31. ボタンについて 2009年にFirefoxが ブラウザをDLするボタンで どの色が一番押されるかテスト
- 32. ボタンについて
- 33. ボタンについて 緑 (930,752)DL 青 (256,344)DL 紫 (255,894)DL 橙 (255,811)DL
- 34. ボタンについて 現在でも緑が使われている。 ボタンひとつにしてもとても重要
- 35. 画面について
- 36. 画面について ヘルプがなくても 使い方がわかる設計
- 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