スマートフォンUIデザイン

 自己紹介

Twitter : cotora_design

グラフィックデザイナー
主にiPhoneAppのUIやIFデザイン
Webデザインを制作しています

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

 UIとは

インターフェイスの
グラフィックデザインのこと

 UIとは

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

 ユーザーを想像してみよう

• いつ（When）
• どこで（Where）
• 誰が（Who）
• 何を（What）
• なぜ（Why）
• どうやって（How）

 いつ？

運転中
就寝前
仕事中

暇なとき
移動中

パッと見て
 いつ？わかりやすいもの目が覚めない
優しい色使い

運転中
就寝前
仕事中

暇なとき
移動中
片手

 どこで？
車の中で
会社で

カフェで
電車の中でいい雰囲気の
BARで

シンプルな
画面遷移
 どこで？目につかない
ビジネスの雰囲気

車の中で
会社で

カフェで
電車の中でいい雰囲気の
BARで
シックな色調

 だれが？

文字を読めない
オシャレな
こどもが女性が

おかあさんと
たくましいこどもが目の悪い
男性がおばあちゃんが

ピクトグラムで
 だれが？文字のないデザイン

文字を読めない
オシャレな
こどもが女性が
指太い？

おかあさんと
たくましいこどもが目の悪い
男性がおばあちゃんが
文字を
読みやすく

 なにを？

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

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

 なぜ？
生活のため
勉強するため
コミュニケー
ションのため

暇つぶしのこどもを
ためあやすため

寒色のほうが
 なぜ？覚えがいい？

生活のため
勉強するため
コミュニケー
ションのため

暇つぶしのこどもを
ためあやすため
ターゲットは
広いかもしれない

 どうやって？
仕事を
走りながらしながら

寝ている
寝転がり最中に運転する
ながらかたわら

 どうやって？
ユーザーは
こだわりが仕事を
ありそう
走りながらしながら

寝ている
寝転がり最中に運転する
ながらかたわら
大きく
はっきりと
視認性が重要？

 これらをふまえると…

どんなUIであるべきか
わかってくる

 ボタンについて

最低サイズは
88px
（3Gの場合は44px）


片手？両手？どう持つのか？

押し間違えのない配置

送信削除

・隣のボタンとの間隔に注意

・片手でも押しやすい配置

・押し間違いを避けたいボタンは
遠くへ配置する
など


例:おしゃれな女性がターゲット
↓


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


ゲームや読み物の時は注意
思っているよりも
手や指で隠れる範囲は大きい

【2009年 Firefox】
ブラウザをDLするボタンは
何色が一番押されるか？
テストを実施


緑 (930,752)DL
青 (256,344)DL
紫 (255,894)DL
橙 (255,811)DL


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

 画面について

ヘルプがなくても
使い方がわかる設計


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



・リンクは青で表示する(※サイト)



・ヘッダーのlogoをタップ→Homeに戻る



・ヘッダーのlogoをタップ→Homeに戻る
・次の動作を予測させるデザイン

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

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

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

 外国と日本での違い

 まとめ

感覚の構造に
素直に合わせて設計する

 まとめ

日々使っているけど
当たり前だと
思ってはいけない

 まとめ

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

ありがとうございました
【参考サイト】
■WEBCRE8.jp
http://webcre8.jp/think/meaning-all-
design.html

■I‘m just another scarecrow.
http://yohei.posterous.com/92159990

Recomendados