はじめてのiOSアプリデザイン

山本麻美

7

なまえ：山本麻美� !しごと：GoMA-apps� 　　 スマートフォンアプリやWebのデザイナー� 　　 商業高校と専門学校の講師 asamieee7

Wishscope� ※2012年5月に�

リリースされたバージョン

Carry Taptrip� ※2013年4月以前

ミイル-miil� ※一部の画面のみ

iOSアプリ Androidアプリ Windows8アプリ

PaintDrops

もくじ

1.印刷物やWebサイトとスマートフォンアプリの違い・印刷物の特徴・Webサイトの特徴 ・スマートフォンアプリの特徴�

2.iOSヒューマンインターフェイスガイドラインを読んで、デザインのルールを知ろう・iOS7向けの設計・バーの種類-ステータスバーについて・ビューの種類 ・コントロール部品の種類・一時ビュー・まとめと宿題�

3.質疑応答

15分

35分

10分

1.印刷物やWebサイトと　スマートフォンフォンアプリの違い

印刷物、Webサイト、スマートフォンアプリ、�

それぞれの特性を知らないと�

ちゃんとデザインできないですよね！�

「ちゃんと」というのは、�

どういうことなのか考えてみましょう。

印刷物の特徴• 機能や構造、ファイル容量にとらわれず、自由にグラフィカルにデザインできる�

• 人の行動のついで、なりゆきで見てもらえやすい（車内広告、街頭配布チラシ、通販カタログ、ポスター、新聞折込広告　等）�

• 停電、充電切れの影響がない�

• 情報は一方通行�

• 捨てられてしまうリスクがある�

• デザインするにはDTPの知識が必要

他にどんな特徴があるでしょうか？第1問

Webサイトの特徴• 情報の更新が容易なため、より早く最新情報を発信できる�

• 音や映像を掲載することもできる�

• 宣伝から商品販売まで一気にもっていける�

• アンケートや、お問い合わせを受け付けられる�

• より多くの人に見てもらえやすい�

• パソコンに向かってもらわないとなにもはじまらない�

• デザインするにはHTMLやCSSの知識が必要

第2問他にどんな特徴があるでしょうか？

スマートフォンアプリの特徴• ユーザーが積極的にアクションを起こし、なにかしらの目的を遂げるためのツールであることが多い�

• 移動中でも手軽に利用してもらえる�

• コンテンツの表示領域がチラシやパソコン画面と比べて極端に狭いしかも！その狭い領域を指で操作する�

• ダウンロードしないと使えない�

•デザインするにはiOSやAndroidの知識が必要

他にどんな特徴があるでしょうか？

第3問

印刷物 Webスマートフォン� アプリ

メディア（媒体）の性質が異なる

• 紙� • 情報は一方通行

• 広い画面� • 情報は双方向

• 狭い画面� • 何かを実行できる

DTP or� グラフィック� デザイナー

Web� デザイナー

スマートフォンアプリ� デザイナー

≠ ≠

それぞれの知識が必要

2.iOSヒューマンインターフェイス ガイドラインを読んで、　デザインのルールを知ろう

iOS7向けの設計

• 控えめであることUIにはその内容を分かりやすく表示し、ユーザとやり取りする働きがありますが、それ自身の方が目立つようであってはなりません。�

• 明瞭であること文字はどの大きさでも読みやすく、アイコンは的確明瞭で、装飾は控えめで適度、さらにその機能を明確に表すようでなければなりません。�

• 奥行きを与えること視覚的な重なりや本物らしい動きがあると、楽しさや分かりやすさが向上します。

-iOS Human Interface Guidelinesより-

どういうこと� なのか、� 具体的に� 見てみましょう

控えめであること

iOS6 iOS7やけに� 主張が強い� 太陽と雲

控えめな� 空の背景

スッと� 情報に� 目がいく

つやつや、もりもり、かげかげを多用しない。� ユーザーが見たいのは情報であるということを忘れない。

雨マークすごいw

明瞭であること 1

iOS6 iOS7

明確な� 色分け

淡い色� 質感&

立体感平面的

よけいな装飾や立体感を排除し、� はっきりした色分けでコンテンツをわかりやすくする。

明瞭であること 2

iOS6 iOS7

押せるところは色を統一。文字は読みやすい文字間、行間で。

鍵となる色で� 操作可能な� 場所を�

それとなく明示。

リアルな� 質感

境界線の� ないボタン

奥行きを与えること

iOS6 iOS7

他のリストは� ここにまとめた

リストを� 重ねて表示

奥行きを使うことにより、平面での画面遷移よりも� 現在の状態が瞬時にわかるようにできる。

各UIパーツ� を�

見てみよう

iOSアプリケーションの解剖

40px

88px

98px

116px

ステータスバー

ナビゲーションバー

タブバー ツールバー ボタン

スコープバー

検索バー

ステータスバー� ここのデザインは変えない� 以下の2種類

↑透明（デフォルト）

↑黒

高さは� 40px

さまざまなアプリのステータスバー透明 黒

facebook

evernote

LINE

Path

Pinterest Google+

ちょっと変わったステータスバー

circle

ガイドラインには、�

ステータスバーに背景を設定して、�

奥が透けて見えないようにしてください。�

と書いてあるけど…�

どうなってんの、これ？

「circle」のステータスバー

スクロール� すると…

コンテンツが� うしろに透けない� デザインに変わる！

そして！� !

ステータスバーは独自UIは作成しないほうがよいが、�

非表示にすることが可能。

全画面表示のメディアをユーザが意識的に見ているときには、ステータスバー（お

よびその他のUI要素）を非表示にすることも検討する。ステータスバーを非表示

にする場合は、1回タップするだけでステータスバー（および適切なアプリケーションUI）

を再表示できるようにしてください。よほどの理由がない限り、ステータスバーを再表示する

ためのカスタムジェスチャを定義するのは避けるのが最善です。ユーザがそのようなカスタム

ジェスチャに気付いたり、それを覚えたりしている可能性は低いからです。

iOS ヒューマンインターフェイスガイドラインにはこのように書いてあるのですが、、、

それは具体的には、どんな場合でしょうか？

第4問

-iOS Human Interface Guidelinesより-

ステータスバー非表示例　その1

『写真』

タップすると� ステータスバーを非表示にし� 全画面表示になる。�

もう一度タップすると元に戻る

ステータスバー非表示例　その2

『hulu』

通常ステータスバー非表示。� 画面タップでステータスバーと� コントローラーが表示される

ユーザに対する� 視聴の強制�

!告知を見てほしいからとか� そーゆーのはだめ。

すごく� 重要！

ユーザが自発的に� 意識的に視聴�

!全画面表示のメディアを�

見る場合。

ステータスバーの非表示○×

その他のバーの種類

ツールバー ボタン

スコープバー

検索バー

タブバー

ナビゲーションバー

ステータスバー

その他のバーの種類とカスタマイズ例1

タブバー

ナビゲーションバー

ステータスバー

ナビゲーションバー

ステータスバー

facebook

タブバー

その他のバーの種類とカスタマイズ例2

ツールバー

検索バー 検索バー

Google Maps

ツールバー(?)

マップ

その他のバーの種類とカスタマイズ例3

Carry

ボタン

スコープバー スコープバー

miil

ボタン

UI要素を� 見てみよう

• バー�

• コンテンツビュー�

• コントロール部品�

• 一時ビュー

UI要素は、大きく分類すると4つ

• アクティビティ�

• コレクションビュー�

• 画像ビュー�

• マップビュー�

• ポップオーバー（iPadのみ）�

• スクロールビュー�

• 分割ビューコントローラ（iPadのみ）�

• テーブルビュー（プレーンとグループ化）�

• テキストビュー�

• Webビュー

コンテンツビュー

Web� ビュー

Map� ビュー

• アクティビティインジケータ�

• 追加ボタン�

• ピッカー�

• ページコントロール�

• 進捗ビュー�

• セグメント化コントロール�

• スライダ�

• ステッパ�

• スイッチ�

• システムボタン�

• テキストフィールド

コントロール部品

スイッチ

ピッカー

「ドラムロール」と呼ぶ人もいる

アクティビティ� インジケータ�

（通称：ぐるぐる）

• アラート�

• アクションシート�

• モーダルビュー

アクション� シート

アラート

一時ビュー

モーダル� ビュー

アプリのテイストに合わせて� 全画面をフルカスタマイズ�

!開発コストがかかりすぎたり、� ユーザが見慣れている標準UIのほうがよい場合もある。�

すごく� 重要！

カスタマイズが必要かどうか、しっかり検討する�

!設定画面は標準UI、その他の画面はカスタマイズ、というように使い分ける。

コントロール部品や� 一時ビューのカスタマイズ

標準UI

『LINE』のUIを見てみよう

独自UI

iOSヒューマンインターフェイスガイドライン�

を読むべき理由�

!

• iOS7のUI方針を知る� • iOSのUIパーツの種類や目的を知る� • カスタマイズしない箇所と、その理由を理解する

まとめ

宿題� !

標準UIと独自UIをうまく使い分けている�

アプリの例を挙げてください。（『LINE』以外）�