Advertisement

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

川原田このみデザイン事務所
May. 1, 2012
Advertisement

More Related Content

Slideshows for you(20)

Advertisement

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

  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
Advertisement