1. iOS 7
UIの考え方
ヤフー株式会社
CMO室 藤原 亮
ID:@ryospl
13年10月8日火曜日

2. Agenda
1. iOS 7デザイン理念
2. iOS 7 UIへのアプローチ
3. Yahoo! JAPANでのデザイン事例
13年10月8日火曜日

3. 1. iOS 7デザイン理念
13年10月8日火曜日

4. iOS 7 Design Resources
https://developer.apple.com/library/ios/design/
iOS 7 Design Resources - Apple Developer
13年10月8日火曜日

5. iOS 7 3つのテーマ
UIはユーザによるコンテンツの理解やコンテンツとの対話を助ける
が、コンテンツと競合しない。
テキストはどのサイズでも読みやすく、アイコンは精密で明快、
装飾は目立たず適切、そして機能性を重視したデザイン。
ヴィジュアルレイヤ（層化UI）と、そのリアルな動きがユーザの学
習に効果がある。
1. 控えめ(Deference)
2. 明瞭(Clarity)
3. 奥行き(Depth)
13年10月8日火曜日

6. 質感や本物らしさの再考
ベゼル、グラデーション、ドロップシ
ャドーを多用すると「重い」UI要素に
なり、コンテンツより目立つ。
1. Defer to Content
フルレイアウトを有効活用
装飾や枠の使い方を再考し、情報
内容を画面いっぱいに表示。
控えめ
半透明なUI要素を使って、
奥に何があるか見えるように
半透明な要素には、作業の流れを示
し、より詳しい内容があることを認識
させ、あるいは一時的な要素であるこ
とを明示する働きがあります。
13年10月8日火曜日

7. 2. Provide Clarity 明瞭
簡潔な色遣いにする。
となる色（たとえば「Notes」の黄
色）で、重要箇所を強調し、操作可能
な場所であることをそれとなく示すこ
とができます。また、一貫した視覚テ
ーマを与えることにもなります。
ホワイトスペースを活用。
うまく利用すると、重要な情報や機
能が目につき、理解しやすくなりま
す。また、穏やかで落ち着いた雰囲
気を作り、集中しやすくする効果も
あります。
システムフォントを使って読
みやすさを確保する。
境界なしのボタンを活用する。
状況によっては、際立たせることも
13年10月8日火曜日

8. 3. Use Depth to Communicate 奥行き
「Calendar(カレンダー)」は画面遷移の都度、年、月、日の間の階層関係を組み替える。
年単位のビュー（図）をスクロール
すると、即座に今日の日付を確認
し、カレンダーに関する他の作業が
できるようになっています
ある月を選択すると、年単位のビュ
ーが拡がるような動きの後、月単位
のビューが前面に出てきます。
月単位のビューを切り離し、現在の週
を画面の上方に追いやるような動きの
後、該当する日を表す時間単位のビュ
ーが現れます。
年 月 日
13年10月8日火曜日

9. 2. iOS 7 UIへのアプローチ
13年10月8日火曜日

10. iOS 7 UI
iOS 7Android 4.x
ミニマリズム＆レイヤーデザイン完全フラット
13年10月8日火曜日

11. 1. コンテンツファースト
2. 透過レイヤーUI
3. 非スキューモーフィズ
UI設計時のポイント
ラベル / レイアウト / アイコン 重要性増
Apple iOS7
http://www.apple.com/jp/ios/
13年10月8日火曜日

12. トランジション
（アニメーションエフェクト）
ビジュアル以外での
視覚効果によるユーザー学習。
Apple iOS7
http://www.apple.com/jp/ios/
13年10月8日火曜日

13. なぜ、フラットが流行？
13年10月8日火曜日

14. 現実社会に存在する物を模した
ユーザーインタフェース
Skeuomorphism Minimal Design
あまり使用しない機能のせいでシステ
ムが肥大化することを避け、必要最小
限の機能に絞って設計すること。
メタファの限界 メタファ ＝ 何かに例えた表現
13年10月8日火曜日

15. 3. Yahoo! JAPANでのデザイン事例
13年10月8日火曜日

16. iOS 7 Redesign iOS 6 Design
天気
Copyright (C) 2013 Yahoo Japan Corporation. All Rights Reserved.
13年10月8日火曜日

17. iOS 7 Redesign iOS 6 Design
知恵袋
Copyright (C) 2013 Yahoo Japan Corporation. All Rights Reserved.
13年10月8日火曜日

18. ユーザーセグメントなりの
ミニマルデザインを考える。
13年10月8日火曜日

19. ご清聴ありがとうございました。
13年10月8日火曜日