Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン

79,272 views

Published on

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

Published in: Design
  • 基本がわかりたすかりました。ありがとうございます。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ウェブやアプリとは業界違うけど、自動車関係の評価試験は大体欧米人基準で評価試験行う。
    そんな強くクラクションたたくやついねえだろっておもっても黒人のパンチ力にたえられる用評価試験をくりかえしてた。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン

  1. 1.  自己紹介Twitter : cotora_designグラフィックデザイナー主にiPhoneAppのUIやIFデザインWebデザインを制作しています
  2. 2.  UIとはユーザーインターフェースの略
  3. 3.  UIとはユーザーインターフェースの略
  4. 4.  UIとは インターフェイスの グラフィックデザインのこと
  5. 5.  UIとは インターフェイスの グラフィックデザインのこと
  6. 6.  UIとは グラフィックはもちろんアクション、画面遷移なども ふまえた設計のこと
  7. 7.  ユーザーを想像してみよう• いつ(When)• どこで(Where)• 誰が(Who)• 何を(What)• なぜ(Why)• どうやって(How)
  8. 8.  いつ? 運転中 就寝前 仕事中 暇なとき 移動中
  9. 9. パッと見て いつ? わかりやすいもの 目が覚めない 優しい色使い 運転中 就寝前 仕事中 暇なとき 移動中 片手
  10. 10.  どこで? 車の中で 会社で カフェで電車の中で いい雰囲気の BARで
  11. 11. シンプルな 画面遷移 どこで? 目につかない ビジネスの雰囲気 車の中で 会社で カフェで 電車の中で いい雰囲気の BARで シックな色調
  12. 12.  だれが? 文字を読めない オシャレな こどもが 女性が おかあさんとたくましい こどもが 目の悪い 男性が おばあちゃんが
  13. 13. ピクトグラムで だれが? 文字のないデザイン 文字を読めない オシャレな こどもが 女性が指太い? おかあさんと たくましい こどもが 目の悪い 男性が おばあちゃんが 文字を 読みやすく
  14. 14.  なにを? アプリを (ゲーム・動画・SNS) スマートフォンサイトを(ショッピング・アニメ) 家電・占いなど)
  15. 15.  なにを?画面は傾けると縦と横 どちらにも対応 アプリを (ゲーム・動画・SNS) スマートフォンサイトを(ショッピング・アニメ) 家電・占いなど) 画面を固定できる
  16. 16.  なぜ? 生活のため 勉強するため コミュニケー ションのため暇つぶしの こどもを ため あやすため
  17. 17. 寒色のほうが なぜ? 覚えがいい? 生活のため 勉強するため コミュニケー ションのため暇つぶしの こどもを ため あやすため ターゲットは 広いかもしれない
  18. 18.  どうやって? 仕事を 走りながら しながら 寝ている寝転がり 最中に 運転する ながら かたわら
  19. 19.  どうやって? ユーザーは こだわりが 仕事を ありそう 走りながら しながら 寝ている寝転がり 最中に 運転する ながら かたわら 大きく はっきりと 視認性が重要?
  20. 20.  これらをふまえると…どんなUIであるべきか わかってくる
  21. 21.  ボタンについて
  22. 22.  ボタンについて 最低サイズは 88px (3Gの場合は44px)
  23. 23.  ボタンについて 片手?両手?どう持つのか?押し間違えのない配置 送信 削 除
  24. 24.  ボタンについて 片手?両手?どう持つのか?押し間違えのない配置 送信 削 除
  25. 25.  ボタンについて・隣のボタンとの間隔に注意・片手でも押しやすい配置・押し間違いを避けたいボタンは 遠くへ配置する など
  26. 26.  ボタンについて例:おしゃれな女性がターゲット ↓
  27. 27.  ボタンについて例:おしゃれな女性がターゲット ↓ 縦の幅を持たせる(ネイルをしているかもしれない)
  28. 28.  ボタンについて ゲームや読み物の時は注意 思っているよりも手や指で隠れる範囲は大きい
  29. 29.  ボタンについて
  30. 30.  ボタンについて 2009年にFirefoxが ブラウザをDLするボタンで どの色が一番押されるかテスト
  31. 31.  ボタンについて
  32. 32.  ボタンについて 緑 (930,752)DL 青 (256,344)DL 紫 (255,894)DL 橙 (255,811)DL
  33. 33.  ボタンについて 現在でも緑が使われている。 ボタンひとつにしてもとても重要
  34. 34.  画面について
  35. 35.  画面について ヘルプがなくても 使い方がわかる設計
  36. 36.  画面について・文字をやめてピクトグラムを使用(↑ こども、各国のローカライズにも◎)
  37. 37.  画面について・文字をやめてピクトグラムを使用(↑ こども、各国のローカライズにも◎)・リンクは青で表示する(※サイト)
  38. 38.  画面について・文字をやめてピクトグラムを使用(↑ こども、各国のローカライズにも◎)・リンクは青で表示する(※サイト)・ヘッダーのlogoをタップ→Homeに戻る
  39. 39.  画面について・文字をやめてピクトグラムを使用(↑ こども、各国のローカライズにも◎)・リンクは青で表示する(※サイト)・ヘッダーのlogoをタップ→Homeに戻る・次の動作を予測させるデザイン
  40. 40.  画面について・文字をやめてピクトグラムを使用(↑ こども、各国のローカライズにも◎)・リンクは青で表示する(※サイト)・ヘッダーのlogoをタップ→Homeに戻る・次の動作を予測させるデザイン
  41. 41.  ローカライズ(おまけ)
  42. 42.  ローカライズ(おまけ)・ローカライズとは 言語だけの対応ではなく、 メニュー表示や その言語特有の処理を 追加すること
  43. 43.  英語版App
  44. 44.  日本語版App
  45. 45.  外国と日本での違い
  46. 46.  外国と日本での違い
  47. 47.  まとめ
  48. 48.  まとめ 感覚の構造に素直に合わせて設計する
  49. 49.  まとめ 日々使っているけど 当たり前だと 思ってはいけない
  50. 50.  まとめ 必要な要素を 「目的」に合わせて 最良な方法で配置、 装飾すること
  51. 51. ありがとうございました【参考サイト】■WEBCRE8.jphttp://webcre8.jp/think/meaning-all-design.html■I‘m just another scarecrow.http://yohei.posterous.com/92159990

×