iPhoneのUIについての社内勉強会資料です。 1. iPhoneのパーツでよく使うものの説明 2. その他気を使うところ 3. モックアップ作成ツール・UIの参考サイトの紹介

1. iPhone UI勉強会
2012/4/27
ConnectStar 高橋真理

2. 勉強会の内容
1. iPhoneのパーツでよく使うものの説明
2. その他気を使うところ
3. モックアップ作成ツール・UIの参考サイ
トの紹介

3. ポイント
• iPhoneのパーツを知って、使いこなす
→慣習に沿うのはUX的によい
→エンジニアもコードを書きやすい
• モバイル特有の環境を考慮する

4. 必読！！

5. モバイル特有の環境
• 画面が小さい
• 屋外
• 動く、揺れる
• 他のことをしながら、片手間で見る

6. • 小さい文字
• 小さいボタン
• 彩度の低い色の組み合わせ

7. ○
• 早く目的を達成させる
• 大きい文字、大きいボタン
• 要素の重要度別の色や文字のメリハリ
• 無駄な表示要素、遷移をなくす
• テキスト入力を少なく

8. ファーストビューの話
• iPhoneは480px
• ファーストビューに詰め込んで見づらく
なるくらいなら縦に長い方がよい
• ただ、縦スクロールの操作がそこまで苦
じゃないとはいえ、ファーストビューも
やはり意識はしておきたい

9. 全然ちがう！
↑もし、ここで切れてたらこの ↑ポイント2、ポイント3がある
先に何があるか伝わらない。 ことも伝わる。

10. 縦長・ドリルダウンが基本
タイトル
写真
概要 拡大写真
概要
内容
概要

11. ナビゲーションバー
• 現在のビューのタイトルを使用する
• コントロールを追加しすぎない（戻る＋右側に一個
が吉）
• サイズ、色、背景画像、透明度のコントロールが可

12. カスタムナビゲーション
• Facebook風のが流行中
• タブバーのスペースを節約できる
• Facebookコネクトのアプリだと、ユーザがFacebookの
UIになれてる。

13. 下のバーが2種類。
タブバーとコントロールバー
• 現在のコンテキストにおいてユーザがとり得るアクショ
ンのセットを提供
• システムで用意されている項目を使用
• 異なるサブタスク間、ビュー間、またはノード間を切り替
える

14. 一番押してほしいタブを
強調するのがおしゃれ

15. テーブルビュー
平たいパターン 角丸パターン

16. テーブルビュー
• ユーザが選択できるオプションのリスト
• 階層構造の情報を表示
• 概念的にグループ化された情報を示す（スク
ロールしてった時にぱっと見でわかる）
• 1ページの中で要素が複数グループ出てくる
場合は角丸パターンが使われるよう。

17. 矢印紛らわしい
階層的に下の情報を表示
該当項目の詳細を表示

18. いろんなテーブル

19. セグメンテッドコントロール
• 異なるビューを表示するボタン
• 密接に関連しているが、相互に排他的な
選択肢を提供する

20. プルダウン
• ラベルの一覧性が損なわれる
• なんとなくの目的で見ているユーザを誘
導するのには向かない
• 押さないと気づかないのはださい
• 明確な目的が想定できる項目にはOK
• 報告、ブロック、設定変更など

21. アイコン
• 操作や情報そのものの内容を絵で表現し
たマーク
• 共通概念に沿った形をもつことが必要。
一般的な意味を踏襲すること。

22. ラベリング
• 抽象的で主観的な表現をなるべく避ける
• 短い言葉で、具体性を

23. ラベリング
悪い例 改善の余地 代替案 改善ポイント
「フォーム」が
何かわからない
フォーム お問い合わせ 目的で書く
人には全く伝わ
らない
自分にとって有
その他 益な選択肢かわ もっと見る 探究心がわく
からない

24. モックアップについて
• アジャイル開発では「ペーパープロトタ
イピング」が重要らしい
• コードを書かなくて済む部分は、書かな
い方が良い

25. モックアップ作成手法
1. 紙＋ペンの手書き
2. モックアップ作成ツール
3. デザインラフ
※個人的には1→3の順番で作業するのが
効率がいいと感じています

26. モックアップ作成ツール
• Balsamiq
• Interface HD
• Keynote
• Xcode？？？
NAVERにまとめたのでそちらを参照ください
http://matome.naver.jp/odai/2133675152451622601

27. おすすめ参考サイト
http://pttrns.com/

28. おすすめ参考サイト
http://mobile-patterns.com