iOS and Android UIデザインセオリー
PFUアプリケーションズ
第一システム事業部 応用システム部
大場知悟
2011.12.02
第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

All Rights Reserved, Copyright PFU LIMITED 2011

自己紹介


大場知悟（Tomonori Ohba）

PFUアプリケーションズ（株）所属 SE(株)PFU ScanSnap/KIOSK/HHKB iOS／Android／WPF／SilverilghtなどのUIアプリ設計／開発を担当


コミュニティー


新大阪IT勉強会 楽しいアプリ制作の会（代表）
http://tanoapp.tworks.jp/

Windows Phone Arch（関西地区スタッフ）
http://wp-arch.net/
第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

1
All Rights Reserved, Copyright PFU LIMITED 2011

アジェンダUser Interfaceの重要性
 User Interfaceガイドライン
 プラットフォームの特色を出すデザインiOS Android

User Experienceの重要性と定義


大手各社のUser Experienseガイドライン

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

2
All Rights Reserved, Copyright PFU LIMITED 2011

User Interfaceの重要性

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

3
All Rights Reserved, Copyright PFU LIMITED 2011

User Interfaceの浸透

スマートフォンやタブレットが身近に、触れる機会も増加

スマートフォンやRIA（Rich InternetApplication）案件も増加傾向 顧客もリッチなUIに慣れてきている

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

4
All Rights Reserved, Copyright PFU LIMITED 2011

SIの現場UIアプリの製造現場は...
機能（要件）を先に決める
 デザインは最後にFIX


12/5

12/6

...

12/19

12/2012/21

12/22

設計開発
テスト
デザイン



SIerは機能（設計）を重視したがる

これで円滑に進められるでしょうか...
第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

5
All Rights Reserved, Copyright PFU LIMITED 2011

例えば...コンロの話
コンロを構築してください
顧客が出した機能要件
1. ４つ口
2. 着火・消化スイッチは全面パネルに配置

X企業では、この機能をチームA、チームBで分担して構築することにしました

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

6
All Rights Reserved, Copyright PFU LIMITED 2011

SIerがデザインするコンロ
機能要件その1.
４つ口（チームAが担当）

1

3

2

4

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

7
All Rights Reserved, Copyright PFU LIMITED 2011

SIerがデザインするコンロ
機能要件その2.
着火・消化スイッチは全面パネルに配置（チームBが担当）

1

2

3

4

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

8
All Rights Reserved, Copyright PFU LIMITED 2011

SIerがデザインしたコンロ

どのスイッチがどこの口に？

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

9
All Rights Reserved, Copyright PFU LIMITED 2011

顧客が求めていたコンロ

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

10
All Rights Reserved, Copyright PFU LIMITED 2011

デザインファーストの必要性

デザインありきの考え
顧客、デザイナー、開発者の全員でデザインする
デザインも機能の１つと認識
UIアプリにおけるデザインは評価に直結
 「どのようなUIが好ましい」かを予め知っておく必要がある → UIガイドライン


第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

11All Rights Reserved, Copyright PFU LIMITED 2011

User Interfaceガイドライン

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

12
All Rights Reserved, Copyright PFU LIMITED 2011

iOS（フィードバック）
フィードバックは、アクションを受け付けたことをユーザに知らせたり、処理が発生していることをユーザに確信させたりします。
ユーザは、コントロールを操作しているときは即座のフィードバックを期待し、処理時間が長くかかっているときには状況の最新情報が得られると助かります。

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

13
All Rights Reserved, Copyright PFU LIMITED 2011

iOS（ユーザによる制御）
アクションは、アプリケーションではなく、ユーザが開始し、制御するべきです。アプリケーションはアクションの道筋を示唆したり、危険な影響に関して警告したりできますが、アプリケーションが意思決定をユーザから奪うことは通常、適切ではありません。
ユーザは、動作や制御になじみがあり、予測可能である場合に、よりアプリケーションを制御していると感じます。そして、アクションが単純かつ簡単なものであれば、ユーザはアクションを容易に理解し記憶できます。

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

14
All Rights Reserved, Copyright PFU LIMITED 2011

iOS（対象ユーザの決定）
ユーザが移動しながら利用する可能性や、美しいグラフィック、シンプルなやり取り、高いパフォーマン
スを期待する可能性はさておき、対象ユーザの特徴は何でしょうか。計画中のアプリケーションにおいて、対象ユーザにとって最も重要なものは何でしょうか。
対象ユーザの特徴をいくつか決めた後、いくつかの機能だけが残っていれば、正しい方向に進んでいるといえます。優れたiOSアプリケーションは、ユーザが達成したいタスクだけに焦点を合わせるものだからです。
第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

15
All Rights Reserved, Copyright PFU LIMITED 2011

iOS（UIパラダイムを採用）
コントロールはタップ可能な外観にする。
iOSのコントロール（ボタン、ピッカー、スライダなど）には、タッチ操作を誘う輪郭とグラデーションが付いています。

アプリケーションの構造はすっきりとして操作しやすくする。
iOSは、階層コンテンツをドリルダウンするためのNavigation
Barと、同系統のコンテンツや機能をまとめた別のグループを表示するTabBarを提供しています。

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

16
All Rights Reserved, Copyright PFU LIMITED 2011

iOS（トップダウンで考える）
最も頻繁に使用される情報（通常、より上位の情報）を最上部の近くに配置する。
最上部は最も見やすく、簡単に届く場所です。ユーザは画面の上から下へ目を動かすので、表示される情報は、概略的な情報から詳細な情報へ、上位の情報から下位の情報へ進むようにすべきです。

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

17
All Rights Reserved, Copyright PFU LIMITED 2011

iOS（簡単で分かりやすい使いかた）
アプリケーションの仕組みを理解する（または注意を払える）時間がユーザにあることを前提にはできないため、ユーザにすぐに理解してもらえるアプリケーションになるよう努力します。
 ユーザが選ぶ必要のあるコントロールの数を最小限にする
 標準のコントロールとジェスチャを適切かつ一貫性を保って使用し、ユーザの期待通りに動作させる
 コントロールの実行内容をユーザが正確に理解する
よう、分かりやすいラベルをコントロールに設定する
第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

18
All Rights Reserved, Copyright PFU LIMITED 2011

iOS（ターゲットを指先サイズにする）
iOSベースのデバイスの画面サイズはさまざまですが、指先の平均サイズは変わりません。アプリケーションを実行しているデバイスに関係なく、以下のガイドラインに従って、ユーザがアプリケーションを快適に使用できるようにします。
アプリケーション内のタップ可能な要素には、約44 x44ポイントのターゲット領域を割り当てる。
小さなコントロールが狭い間隔で配置されているゲー
ムは、ゲームをプレイすることではなく、インターフェイスに集中することをユーザに強いてしまいます。
第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

19
All Rights Reserved, Copyright PFU LIMITED 2011

iOS（まとめ）

上記の他「iOSヒューマンインターフェイスガイドライン」に非常に細かく、丁寧に解説が記載されています。
iOS開発以外にも適応できる要素が記載されており、非常に参考になりますので、ご一読をお勧めします。

■iOS ヒューマン・インターフェース・ガイドライン
http://developer.apple.com/jp/devcenter/ios/library/documentation/
MobileHIG.pdf

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

20
All Rights Reserved, Copyright PFU LIMITED 2011

Android（アイコン デザイン）
すべてのユーザインターフェイスを通して、統一されたルックアンドフィールを作成することにより、製品の価値が高まります。
グラフィックのスタイルを合理化させることによっても、よりプロフェッショナルな技術の UI をユーザに印象付けることになります。

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

21
All Rights Reserved, Copyright PFU LIMITED 2011

Android（アプリ ウィジェット デザイン）
典型的な Android アプリ ウィジェットには、境界ボックス、フレーム、およびウィジェットの 3 つの主なコンポーネントと他の要素があります。
きちんとデザインされたウィジェットには、境界ボックスの端とフレームとの間にいくらかのマージンと、フレームの内側の端とウィジェットのコントロールの間にいくらかのパディングが残してあります。
第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

22
All Rights Reserved, Copyright PFU LIMITED 2011

Android（まとめ）Android UIガイドラインには、事細い内容は記載されていない
エンドユーザー観点ではなく、開発者観点の内容iOSヒューマンインターフェイスガイドラインを参考にする（私の主観）AndroidとiOSのUIは思想が異なっているので、その点は意識すること
第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

23
All Rights Reserved, Copyright PFU LIMITED 2011

プラットフォームの違いを意識する

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

24
All Rights Reserved, Copyright PFU LIMITED 2011

プラットフォームの違い

ハードウェアキーの有無によるもの
戻るiOS ナビゲーションバー Android ハードウェアキーグローバルメニュー

アイコン

Action Bar
第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

25
All Rights Reserved, Copyright PFU LIMITED 2011

ハードウェアキーの違い
戻る
Androidでは「戻る」ハードウェアボタンがあるため、複数の手段を用意すると、操作体系がわかりにくくなってしまう

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

26
All Rights Reserved, Copyright PFU LIMITED 2011

グローバルメニュー
iOSはBottom、AndroidはTop
Androidは画面の下に「戻る」ボタンやメニューが表示されるため、グローバルなボタンが集中して使いにくくなる

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

27
All Rights Reserved, Copyright PFU LIMITED 2011

アイコン


iOSはiOSの、AndroidはAndroidのアイコンを使うこと、流用はしない

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

28
All Rights Reserved, Copyright PFU LIMITED 2011

Action Barを使う
利用頻度の高い機能は、上部に表示される
Action Barにまとめる（Google推奨） iOSのグローバルフッターメニューと同じ位置づけ

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

29
All Rights Reserved, Copyright PFU LIMITED 2011

プラットフォームの違い（まとめ）

使いやすいUIは「感覚・感性」ではなく、裏付けされた理論の元に構築される各プラットフォームのUI特徴を押さえること

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

30
All Rights Reserved, Copyright PFU LIMITED 2011

User Experienseの定義

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

31
All Rights Reserved, Copyright PFU LIMITED 2011

UXの定義「ユーザーエクスペリエンス」は、エンドユーザーと「会社、会社のサービス、商品」の相互作用の全ての側面を含んでいる。
第一の要件は、混乱や面倒なしで顧客の的確なニーズを満たす事。第二の要件は、所有する楽しさ、使用する楽しさを生み出す「簡潔さと優雅さ」である。
真のユーザーエクスペリエンスは、顧客が欲しいと言うものを与えたり、チェックリストに載っている機能を提供するだけでは十分ではない。提供するサービスや商品において、クオリティの高いユーザーエクスペリエンスを実現するためには、「多角的な専門分野のサービス」のシームレスな結合が必要である。
それらの分野とは、エンジニアリング、マーケティング、グラフィックデザイン、インダストリアルデザイン、インターフェイスデザインである。
■D.A.ノーマン博士の定義
http://www.nngroup.com/about/userexperience.html第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

32
All Rights Reserved, Copyright PFU LIMITED 2011

UXの概念図

役に立つ
好ましい

使える
価値探せるアクセス
信頼■Semantic Studios
http://semanticstudios.com/publications/semant
ics/000029.php■The Elements of User Experience
http://www.jjg.net/elements/pdf/elements.pdf

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

33
All Rights Reserved, Copyright PFU LIMITED 2011

なぜUXが重要視されるか

すでに画期的なテクノロジーは世の中にない

在りもののテクノロジーを、再編集、アレンジ、Mixture

コンペでは、値段も機能も横並びになる事が多く、フィーリングなどで採択されることがある
そんなときにUXが効く！
第1回「UX技術部会 & NDA部会 & キッフオフセミナー」34
All Rights Reserved, Copyright PFU LIMITED 2011

UXガイドライン
各社のUXガイドライン
 Windowsユーザーエクスペリエンスガイドラ
イン
http://msdn.microsoft.com/ja-jp/library/aa511258.aspx

Google ユーザー エクスペリエンス
http://www.google.com/corporate/ux.html

Apple iOSヒューマン・インターフェース・
ガイドライン
http://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf

第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

35
All Rights Reserved, Copyright PFU LIMITED 2011

まとめUI/UXデザインは「デザイナー」の専業ではない、アプリケーション開発者も責務を負っている
ガイドライン（理論）をよく知り自ら体験（Experience）することが近道

各プラットフォームの特徴を押さえ最適化し顧客満足度につなげる
第1回「UX技術部会 & NDA部会 & キッフオフセミナー」

36
All Rights Reserved, Copyright PFU LIMITED 2011

ご清聴ありがとうございました。