iOSフラットデザインの作法 Appleガイドラインの理解とFlat UIの実践
AppleのiOS 7に採用され、注目をあつめているフラットデザインUIの解説書です。最近になり、ユーザーエクスペリエンス(UX)という考え方が一般にも普及し、ユーザーインターフェィス(UI)に大きな影響を与えています。そのなかでも特に注目されているUIがiOS7 Flat UIです。本書は、アプリ開発者やデザイナー向けにFlat UI/UXの思想とAppleのガイドラインをわかりやすく解説し、他のプラットフォームとの共通点や相違点を比較します。また、コンテンツを目立たせるUIにするための秘訣、インフォメーションアーキテクチャと画面設計、XcodeにおけるInterface Builderの使い方、UI開発の具体的な指針まで、すぐに役立つ知識が満載です。
【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/4001.html
【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/4001.html
1 フラットデザインを読み解く
1.1 フラットデザインの由来、そして未来
1.1.1 スキュアモーフィズムとリッチデザイン
1.1.2 フラットデザインの生まれについて
1.1.3 フラットデザインが目指すもの
1.1.4 フラットデザインとスキュアモーフィズムのメリット・デメリット
1.2 デザイン要素としてのFlat UI
1.2.1 Flat UIの3つの特徴
2 iOS 7のフラットデザイン
2.1 さまざまなフラットデザイン「Flat UI」
2.1.1 Microsoft Design Style
2.1.2 Holo
2.1.3 Webデザイン
2.2 iOS 7はフラットではない
2.2.1 iOS 7の哲学を読む
2.2.2 HIGから見るiOS 7
2.2.3 他プラットフォームとiOS 7の比較
3 iOS 7のタイポグラフィ
3.1 タイポグラフィの基礎
3.1.1 タイポグラフィはどこにでも存在する
3.1.2 国際タイポグラフィ様式
3.1.3 iOSとタイポグラフィ
3.1.4 モバイルアプリにおけるタイポグラフィ
3.2 iOS 7につなげるためのタイポグラフィ
3.2.1 ガイドラインを作る
3.3 グリッドシステムとマージン
3.3.1 iOS 7とグリッドシステム
3.3.2 アプリケーションアイコン
3.4 アプリ参考事例と参考書籍
3.4.1 アプリにおけるタイポグラフィの成功例
3.4.2 タイポグラフィの参考書籍
4 iOS 7の色彩
4.1 iOS 7のColor
4.1.1 キーカラー
4.1.2 色相と彩度と明度
4.2 色彩表現
4.2.1 色に意味を持たせる
4.2.2 iOS 6アプリのiOS 7対応へのヒント
4.2.3 配色を決めるには
4.2.4 現実世界のプロダクトを参考にする
5 iPhoneとiPadのフラットデザイン
5.1 iPhoneとiPad活用シーンの比較
5.2 iPhoneとiPadの標準アプリを比較する
5.2.1 メール（iPhone&iPad）
5.2.2 Safari（iPhone&iPad）
5.2.3 ミュージック（iPhone&iPad）
5.2.4 メッセージ（iPhone&iPad）
5.2.5 カレンダー（iPhone&iPad）
5.2.6 写真（iPhone&iPad）
5.2.7 カメラ（iPhone&iPad）
5.2.8 天気（iPhone）
5.2.9 時計（iPhone&iPad）
5.2.10 マップ（iPhone&iPad）
5.2.11 ビデオ（iPhone&iPad）
5.2.12 リマインダー（iPhone&iPad）
5.2.13 Game Center（iPhone&iPad）
5.2.14 メモ（iPhone&iPad）
5.2.15 iTunes Store（iPhone&iPad）
5.2.16 App Store（iPhone&iPad）
5.2.17 Passbook（iPhone）
5.2.18 連絡先（iPhone&iPad）
5.2.19 電話（iPhone）
5.2.20 FaceTime（iPhone）
5.2.21 計算機（iPhone）
5.2.22 コンパス（iPhone）
5.2.23 ボイスメモ（iPhone）
5.3 さまざまなサードパーティアプリ
5.3.1 Evernote
5.3.2 Facebook
5.3.3 Googleのアプリ群
5.3.4 オートマチックなUI（SparkとTick、ebay）
5.4 リデザイン
5.4.1 iOS 7対応のランク分け
5.4.2 もしもこのアプリがiOS 7対応になったら
6 インフォメーションアーキテクチャと画面設計
6.1 インフォメーションアーキテクチャ
6.1.1 情報の階層化
6.1.2 画面レイアウトからみるIA
6.2 iOS7でデザインされたIA
6.2.1 ステンシルから始めるレイアウトデザイン
6.2.2 レイヤー構造で表現されたナビゲーション
6.2.3 iOS7で採用されたさまざまなインフォグラフィック
6.3 さまざまなControl
6.3.1 Switch
6.3.2 Slider
6.3.3 Stepper
6.3.4 Text Field
6.3.5 Controlまとめ
6.4 意味のあるエフェクトと意味のないエフェクト
6.4.1 エフェクトとは
6.4.2 エフェクトによって向上するユーザービリティ
6.4.3 統一されたエフェクトから得られるユーザービリティ
6.5 メタファから考えるエフェクトと直感的操作
6.5.1 すべてをフラットにするのは難しい
6.5.2 コンテンツ中心デザインのためのエフェクト
7 Flat UIにオリジナリティを持たせる
7.1 アプリ企画からみるUI
7.1.1 育児アプリの企画提案
7.1.2 クライアントとの認識の合意
7.1.3 アイデアの固めかた
7.1.4 アイデアスケッチ
7.1.5 デザインカンプ
7.1.6 プロトタイピングで利用するツールの紹介
7.1.7 どこまでHIGに従うか
7.1.8カスタムUIの参考事例
7.2 カスタムUIの参考事例
8 XcodeにおけるInterface Builder基本操作
8.1 Interface Builder
8.2 XcodeとInterface Builderの基本
8.2.1 Xcodeの画面構成
8.2.2 Utilities Areaの使い方
8.2.3 Interface Builderを使った画面レイアウト
8.2.4 ユーザーからの入力を受け取る
9 実践UI開発
9.1 Navigation Controllerと画面遷移
9.1.1 Navigation Controllerを配置する
9.1.2 View Controllerを追加する
9.1.3 Root View Controllerを設定する
9.1.4 画面遷移を設定する
9.2 TableViewを使ったレイアウト
9.2.1 Navigation Controllerを配置する
9.2.2 Table ViewのAttributeを設定する
9.2.3 セクションヘッダを設定する
9.2.4 セルに表示する内容を設定する
9.3 Tabを使ったレイアウト
9.3.1 Tab Controllerを追加する
9.3.2 タブページにコントロールを配置する
9.3.3 Tab Bar Itemを設定する
9.4 ActionSheetでユーザーへ動作を求める
9.4.1 UIの作成とコードへの接続
9.4.2 UIActionSheetDelegateプロトコルを実装する
9.4.3 ActionSheetが選択された時のハンドラを設定する
9.4.4 ActionSheetを表示する
9.5 Page Controlによる複数ページの表現
9.5.1 Page Controlを配置する
9.5.2 Scroll Viewを配置する
9.5.3 Scroll ViewのAttributeを設定する
9.5.4 Scroll Viewへ表示するViewを作る
9.5.5 UIScrollViewDelegateプロトコルを実装する
9.5.6 サブビューの制御を実装する
9.5.7 Page ControlとScroll Viewのイベントをハンドリングする
9.6 スワイプで表示されるメニューを作る
9.6.1 必要なViewを配置する
9.6.2 ViewのAttributeを設定する
9.6.3 ユーザーの操作をハンドリングする
9.6.4 Container Viewに表示されるViewを設定する
9.6.5 UI要素をコードへ接続する
9.6.6 Table View Controllerを設定する
9.6.7 UIを制御するコードを記述する
9.7 TableViewの項目を検索する
9.7.1 Search Bar and Search Display Controllerを配置する
9.7.2 UISearchDisplayDelegateプロトコルを実装する
9.7.3 画面に表示するデータを準備する
9.7.4 データを画面に表示する
9.7.5 検索機能を実装する
9.8 Split Viewで画面を左右に分割する
9.8.1 Split View Controllerを配置する
9.8.2 Masterに表示するデータを設定する
9.8.3 Detailに表示するデータを設定する
9.8.4 常にMaster Viewが表示されるようにする
9.9 iPad独自の画面遷移
9.9.1 画面遷移に必要なUIを配置する
9.9.2 表示されたViewを閉じるコードを追加する
1.1 フラットデザインの由来、そして未来
1.1.1 スキュアモーフィズムとリッチデザイン
1.1.2 フラットデザインの生まれについて
1.1.3 フラットデザインが目指すもの
1.1.4 フラットデザインとスキュアモーフィズムのメリット・デメリット
1.2 デザイン要素としてのFlat UI
1.2.1 Flat UIの3つの特徴
2 iOS 7のフラットデザイン
2.1 さまざまなフラットデザイン「Flat UI」
2.1.1 Microsoft Design Style
2.1.2 Holo
2.1.3 Webデザイン
2.2 iOS 7はフラットではない
2.2.1 iOS 7の哲学を読む
2.2.2 HIGから見るiOS 7
2.2.3 他プラットフォームとiOS 7の比較
3 iOS 7のタイポグラフィ
3.1 タイポグラフィの基礎
3.1.1 タイポグラフィはどこにでも存在する
3.1.2 国際タイポグラフィ様式
3.1.3 iOSとタイポグラフィ
3.1.4 モバイルアプリにおけるタイポグラフィ
3.2 iOS 7につなげるためのタイポグラフィ
3.2.1 ガイドラインを作る
3.3 グリッドシステムとマージン
3.3.1 iOS 7とグリッドシステム
3.3.2 アプリケーションアイコン
3.4 アプリ参考事例と参考書籍
3.4.1 アプリにおけるタイポグラフィの成功例
3.4.2 タイポグラフィの参考書籍
4 iOS 7の色彩
4.1 iOS 7のColor
4.1.1 キーカラー
4.1.2 色相と彩度と明度
4.2 色彩表現
4.2.1 色に意味を持たせる
4.2.2 iOS 6アプリのiOS 7対応へのヒント
4.2.3 配色を決めるには
4.2.4 現実世界のプロダクトを参考にする
5 iPhoneとiPadのフラットデザイン
5.1 iPhoneとiPad活用シーンの比較
5.2 iPhoneとiPadの標準アプリを比較する
5.2.1 メール（iPhone&iPad）
5.2.2 Safari（iPhone&iPad）
5.2.3 ミュージック（iPhone&iPad）
5.2.4 メッセージ（iPhone&iPad）
5.2.5 カレンダー（iPhone&iPad）
5.2.6 写真（iPhone&iPad）
5.2.7 カメラ（iPhone&iPad）
5.2.8 天気（iPhone）
5.2.9 時計（iPhone&iPad）
5.2.10 マップ（iPhone&iPad）
5.2.11 ビデオ（iPhone&iPad）
5.2.12 リマインダー（iPhone&iPad）
5.2.13 Game Center（iPhone&iPad）
5.2.14 メモ（iPhone&iPad）
5.2.15 iTunes Store（iPhone&iPad）
5.2.16 App Store（iPhone&iPad）
5.2.17 Passbook（iPhone）
5.2.18 連絡先（iPhone&iPad）
5.2.19 電話（iPhone）
5.2.20 FaceTime（iPhone）
5.2.21 計算機（iPhone）
5.2.22 コンパス（iPhone）
5.2.23 ボイスメモ（iPhone）
5.3 さまざまなサードパーティアプリ
5.3.1 Evernote
5.3.2 Facebook
5.3.3 Googleのアプリ群
5.3.4 オートマチックなUI（SparkとTick、ebay）
5.4 リデザイン
5.4.1 iOS 7対応のランク分け
5.4.2 もしもこのアプリがiOS 7対応になったら
6 インフォメーションアーキテクチャと画面設計
6.1 インフォメーションアーキテクチャ
6.1.1 情報の階層化
6.1.2 画面レイアウトからみるIA
6.2 iOS7でデザインされたIA
6.2.1 ステンシルから始めるレイアウトデザイン
6.2.2 レイヤー構造で表現されたナビゲーション
6.2.3 iOS7で採用されたさまざまなインフォグラフィック
6.3 さまざまなControl
6.3.1 Switch
6.3.2 Slider
6.3.3 Stepper
6.3.4 Text Field
6.3.5 Controlまとめ
6.4 意味のあるエフェクトと意味のないエフェクト
6.4.1 エフェクトとは
6.4.2 エフェクトによって向上するユーザービリティ
6.4.3 統一されたエフェクトから得られるユーザービリティ
6.5 メタファから考えるエフェクトと直感的操作
6.5.1 すべてをフラットにするのは難しい
6.5.2 コンテンツ中心デザインのためのエフェクト
7 Flat UIにオリジナリティを持たせる
7.1 アプリ企画からみるUI
7.1.1 育児アプリの企画提案
7.1.2 クライアントとの認識の合意
7.1.3 アイデアの固めかた
7.1.4 アイデアスケッチ
7.1.5 デザインカンプ
7.1.6 プロトタイピングで利用するツールの紹介
7.1.7 どこまでHIGに従うか
7.1.8カスタムUIの参考事例
7.2 カスタムUIの参考事例
8 XcodeにおけるInterface Builder基本操作
8.1 Interface Builder
8.2 XcodeとInterface Builderの基本
8.2.1 Xcodeの画面構成
8.2.2 Utilities Areaの使い方
8.2.3 Interface Builderを使った画面レイアウト
8.2.4 ユーザーからの入力を受け取る
9 実践UI開発
9.1 Navigation Controllerと画面遷移
9.1.1 Navigation Controllerを配置する
9.1.2 View Controllerを追加する
9.1.3 Root View Controllerを設定する
9.1.4 画面遷移を設定する
9.2 TableViewを使ったレイアウト
9.2.1 Navigation Controllerを配置する
9.2.2 Table ViewのAttributeを設定する
9.2.3 セクションヘッダを設定する
9.2.4 セルに表示する内容を設定する
9.3 Tabを使ったレイアウト
9.3.1 Tab Controllerを追加する
9.3.2 タブページにコントロールを配置する
9.3.3 Tab Bar Itemを設定する
9.4 ActionSheetでユーザーへ動作を求める
9.4.1 UIの作成とコードへの接続
9.4.2 UIActionSheetDelegateプロトコルを実装する
9.4.3 ActionSheetが選択された時のハンドラを設定する
9.4.4 ActionSheetを表示する
9.5 Page Controlによる複数ページの表現
9.5.1 Page Controlを配置する
9.5.2 Scroll Viewを配置する
9.5.3 Scroll ViewのAttributeを設定する
9.5.4 Scroll Viewへ表示するViewを作る
9.5.5 UIScrollViewDelegateプロトコルを実装する
9.5.6 サブビューの制御を実装する
9.5.7 Page ControlとScroll Viewのイベントをハンドリングする
9.6 スワイプで表示されるメニューを作る
9.6.1 必要なViewを配置する
9.6.2 ViewのAttributeを設定する
9.6.3 ユーザーの操作をハンドリングする
9.6.4 Container Viewに表示されるViewを設定する
9.6.5 UI要素をコードへ接続する
9.6.6 Table View Controllerを設定する
9.6.7 UIを制御するコードを記述する
9.7 TableViewの項目を検索する
9.7.1 Search Bar and Search Display Controllerを配置する
9.7.2 UISearchDisplayDelegateプロトコルを実装する
9.7.3 画面に表示するデータを準備する
9.7.4 データを画面に表示する
9.7.5 検索機能を実装する
9.8 Split Viewで画面を左右に分割する
9.8.1 Split View Controllerを配置する
9.8.2 Masterに表示するデータを設定する
9.8.3 Detailに表示するデータを設定する
9.8.4 常にMaster Viewが表示されるようにする
9.9 iPad独自の画面遷移
9.9.1 画面遷移に必要なUIを配置する
9.9.2 表示されたViewを閉じるコードを追加する
