#フラットデザインを読み解く
##スキュアモーフィズム
###定義
機能的に必要であるないに関わらず、似たような人工物・工芸品・芸術品からコピーされたデザイン。
- 革の重厚感、ガラスの透明感、金属の光沢感
- 紙を千切ったあとのようなデザイン
- カメラのレンズの光沢
###メリット&デメリット
####メリット
メタファとなる現実世界のインターフェイスを知っていれば迷うことなくアプリを操作できる。
####デメリット
ユーザーと世代に左右されやすく、陳腐化する可能性がある。
##フラットデザイン
###由来
スイスデザイン
- スイスデザインの特徴
- 配置 (安定感をもたらす)
- 黄金比、幾何学などの数式基準に基づいたレイアウト。
- あるルールに基づいて格子状にキャンパスを分割
- グリッドシステム
- タイポグラフィ
- 活字を適切に配置し、その媒体で美しく見えるように整える技法
- スイスデザインでは"Helvatica"が採用されている
- 配置 (安定感をもたらす)
###で、フラットデザインって？
スイスデザインの発展形
- 角にエッジ
- 塗りはベタ塗り
- ドロップシャドウ・テクスチャは使わない
- 色彩によって印象的に仕上げる
- 情報設計に基づいてコンテンツを整理し、ユーザーが一目で情報を認識し、最短経路で求めている情報にたどり着けることを目的としている。
- 細部にこだわりを持ち、アプリ全体に統一感を出すことによって、世界観が生まれ、よりよいフラットデザインになる。
###メリット&デメリット
####メリット
コンテンツを全面に出すことができる。ユーザーが求めている情報に最短経路で辿り着けるようにできる。
####デメリット
「ボタンがボタンに見えない」「タップ可能かどうかがわからない」などが起こりうる。
(フラットデザインの由来であるスイスデザインはインタラクティブなものではないので。)
##FlatUI
フラットデザインで構成されたユーザーインターフェイス
###特徴
1.タイポグラフィ
フォントの種類、サイズ、レイアウトに配慮する。一貫性を心がける。
2.プリミティブな図形での表現
フラットデザインは線と面で構成されることが多い。
3.情報の記号化
インフォグラフィック：情報や知識を整理したものを視覚的に表現し、ひと目で伝える。(例：路線図、アイコン)
iOS 7のフラットデザイン
様々なFlat UI
###Microsoft Design Style (Modern UI)
- 旧称：Metro UI
- Microsoftが提唱したデザイン言語
- 対象：Windows Phone, Windows8/8.1
####設計原則
| 原則 | 内容 | アプリ例 |
|---|---|---|
| 作品へのこだわりを示す | 細部にこだわる | ストアアプリ |
| 軽快かつ柔軟 | タッチ操作に適したレイアウトを採用する | Cocktail Flow |
| 真のデジタル化を心がける | デジタルの利点を最大限活用 | 駅すぱあと Personal |
| より少ない要素でより大きな効果を上げる | コンテンツが前に出るようにする | ニュース |
| 全体で勝つ | 他のアプリやシステムとの連携を生かす | - |
###Android Design (Holo)
####特徴
- デジタル+適度な現実感
- Holoにおける「ディティール」：最小限の構成でありながらもそれと分かる要素を残して色彩やレイアウトに注意を払う。
- アイコンを使ったコントロール
- 「アイコンだけでコントロールを完結させる」
####設計原則
| 原則 | 内容 |
|---|---|
| Enchant me (ユーザーを魅了する) | 美しい外観、アニメーション、サウンド。コンテンツに直接触れて操作。 |
| Simplify my life (生活をシンプルに) | 写真で表現することを検討。必要なときに必要なものを出す。同一のUIは同一の振る舞いを。 |
| Make me amazing (驚かせる) | ユーザーの代わりに困難な仕事を行う。重要なアクションはすぐ完了できるように。 |
iOS 7はフラットではない。
単なるFlat UIではない。
(Appleは公式では「フラット」という単語を使っていない)
###iOS 7の哲学
- 新のシンプルさは、単に不要なものや装飾を省くだけでは生まれない。
- 機能毎にわかれたレイヤーは、階層や順序を作り出す。
- デザインの主張を抑えると、コンテンツが引き立つ。
- 誰もがよく知っている体験に、新しいものを加えて更に使いやすく、もっと楽しめるものにする。
###iOS 7の特徴
- タイポグラフィと色彩
- アプリケーションアイコンの変化
- 線によるアイコン
###ヒューマンインターフェースガイドライン
以下の様な内容を記載
- Appleが定めたiOSの設計思想
- モバイルアプリとして順守すべき仕様
- 各UIについての解説
####3つの方針+α
| 方針 | 内容 |
|---|---|
| 控えめであること | ”UIにはその内容をわかりやすく表示し、ユーザーとやり取りする働きがありますが、それ自身の方が目立つようであってはなりません。” |
| 明瞭であること | ”文字はどのような大きさでも読みやすく、アイコンは的確で明瞭な、装飾は控えめで適度、さらにその機能を明確に表すようでなければなりません。” |
| 奥行きを与える | ”視覚的な重なりや本物らしい動きがあると、楽しさやわかりやすさが向上します。” |
- コンテンツを尊重する
- 画面全体を有効活用
- 質感や本物らしさを考えなおす
- 明瞭性を与える
- 何もない空間を活用
- 簡潔な色使いにする
- システムフォント／境界なしのボタンを活用
- 奥行きを利用して情報を伝える
###他プラットフォームとiOS 7の比較
- 類似点
- コンテンツが中心
- 明るい色彩
- タイポグラフィを全面に
- 相違点
- 単なるフラットではない
- シンプルにしながらもディティールを考慮
- 主張を抑えた繊細なデザイン
- アイコンの線やフォントの細さ
- 質感
- 必要であれば、緻密なアニメーションやブラー効果によるぼかしなどの質感を全面に
- 単なるフラットではない
#iOS 7のタイポグラフィ
##タイポグラフィの基礎
- タイポグラフィ = 文字組の技法
- 可読性・視認性に優れたレイアウトにするために、書体を選び、サイズを考え、字間や行間に気を使う。
- 写真やグラフィックとのバランスを考える。
- iOSではタイポグラフィを大切にしている(OSに約70種類の書体を搭載)
###モバイルアプリにおけるタイポグラフィ
モバイルアプリにおける適切なタイポグラフィとは？
- 文字を認識できる
- どうすれば読みやすいか。
- 適切なフォントカラー／サイズを選択。優先順位をつけることも有効。
- 文字が読める
- どうすれば読んでもらえるか。
- ユーザーがその画面で何を必要としているかを汲み取り、情報を的確に配置する。
- 文字がわかる
- ユーザーにとって馴染みのない言葉を使うのは避ける。ユーザーに不要な情報まで見せて不安にさせる必要はない。
- ユーザーに語りかけるような口調がユーザーに受け入れられる場合もある。(アプリのユーザー層に応じて適切な文字表現を探し出すことが大切。)
- 文字をタップできる
- モバイルアプリ上では文字がボタンになったり、特別な意味を持ったりする。
- タップ可能であることを伝える手段：マージンを取る、色を変える、太さを変える。
- モバイルアプリ上では文字がボタンになったり、特別な意味を持ったりする。
##iOS 7につなげるためのタイポグラフィ
iOS 7上で動くアプリに合ったタイポグラフィの特徴とは。
###ガイドラインを作る
標準アプリをいくつかサンプリングすることで、法則が見えてくる。
- 「メール」「App Store」「カレンダー」を分析した結果
| フォントサイズ | |
|---|---|
| タイトルやリストなど、目につきやすい箇所 | 17pt |
| Subhead(小見出し)に相当する箇所 | 15pt or 14pt |
| AppStoreのカテゴリ名などFootnote(補足情報) | 12pt |
| Footnote以下の重要でない箇所 | 10pt |
- ただし、和文の場合は調整が必要。
##グリッドシステムとマージン
グリッドシステム = 水平垂直に引かれた架空のガイド上に要素を配置
####マージン(余白)の重要性
マージンをどのように使えば情報の整理ができ、ユーザビリティの向上に繋がるのかを理解する必要がある。
####基準を作る
マージンをうまく扱うのに最も簡単で確実な方法は「基準を作ること」
- 例
- 5の倍数だけで構成
- 半分、倍、３倍を用いる
- (パターンは増やし過ぎないようにする)
####関係性を考慮する
マージンを使って関係性を作り出す。(グルーピング)
###iOS 7とグリッドシステム
- 「メール」「App Store」「カレンダー」を分析した結果
- 基準となる左右のマージンは30px、あるいは32px
- 関係性が濃いマージンは基準の半分となる16px〜20pxの範囲
- 上下のマージンは24pxが基準で、境界線を挟んで50px程度になると関係性が希薄になる
####デバイスごとのレイアウト
- 間延びするレイアウトへの対応
- 画面下部のマージンをそのまま空ける
- 各要素のマージンを少しずつ空けていい感じに調整する
- 各要素をセンターに置いて上下にマージンを空ける
- 要素の高さ自体を変える
###アプリケーションアイコン
アプリケーションアイコンでもグリッドシステムが使われている。
アプリ参考事例と参考書籍
###参考事例
- Green Kichin
- Currency
- Cafe+
- SmartNews (http://www.find-job.net/startup/smartnews-great-ui-ux)
###参考書籍
-
タイポグラフィの基本ルール
- タイポグラフィの基本を学べる。
-
Layout Rule Index レイアウトデザイン、新・100の法則
- レイアウトについての基本を学べる。
-
モバイルデザインパターン
- デザイン全般について。
#iOS 7の色彩
##iOS 7のColor
「色のおかげで使いやすい」とユーザーが気づくまでもなく、当たり前のように使えて「なんとなく良いかも」と思ってもらえるUIを実現するために色彩を駆使しましょう
- 参考書籍
###キーカラー
タップ領域に割り当てられ、「どこをタップすればいいのか」をサジェスト
| OS | |||||
|---|---|---|---|---|---|
| iOS 7 | ■ #5ac8fa | ■ #5856d6 | ■ #4cd964 | ■ #ffcc00 | ■ #ff2d55 |
| Android | ■ #51b7ec | ■ #b851d1 | ■ #84d500 | ■ #f5ba47 | ■ #e93f37 |
| Windows Phone | ■ #45a2e2 | ■ #ae51f7 | ■ #a4c53b | ■ #f0a443 | ■ #e63e36 |
キーカラーそのものの色味や全体の色彩を決めるには、色相・彩度・明度についての簡単な知識が必要
###色相と彩度と明度
- 色の三属性
- 色相：色合い
- 彩度：鮮やかさ
- 明度：明るさ
####色相
- その色がどんな意味を持っているか
- どんな意味を持たせるか
- メインカラー
- iOS 7におけるベースカラー。
- 全体のトーンを決める基準となる色
- 白やピンク：女性らしさ
- 暗い色：重く暗い雰囲気に
- サブカラー
- iOS 7におけるキーカラー。
- ボタンなどのUIや文字色などの細かい箇所に使われる色
- 補色
####彩度と明度
iOS 7ではきわめて彩度と明度の高い色を採用している。
扱いには慎重さが必要。(視認性に影響)
##色彩表現
###色に意味を持たせる
iOS 7らしく、シンプルに削ぎ落とす過程で、本当にその色は必要なのか、どんな意味を持っているのか、これまで以上に考えていく必要がある。
- キーカラー
- アプリの目的やユーザー層を文字に起こすことで、そこから色を想起する方法がある。
- 色の面積を考慮
- 余裕があれば、アプリのデザインに関するガイドラインを作成する
- 作業の備忘録、クライアントとの認識の摺り合わせ
- iOS 6アプリのiOS 7対応へのヒント
- キーカラーを抽出する
- グラデーションを消してみる
- 色の意味を再考する
- 余計な色を使っていないか探す
- 例:Reed Designs (http://ios7redesigns.tumblr.com/)
###配色補助ツール
- Adobe Kular (https://kuler.adobe.com/)
- Color Scheme Designer (http://colorschemedesigner.com/)
- colourcode (http://colourco.de/)
- NIPPON COLORS (http://nipponcolors.com/)
###現実世界のプロダクトを参考にする
- 現実世界のプロダクトも、ユーザーにどうすれば正しく情報を届けられるかを考えてデザインされている。
- 家電には白や黒を基調とした製品も数多くあるので、iOS 7の色彩を考えるヒントになるかも？
参考書籍
書き足していきます。
詳細は書籍をお読みください→ iOSフラットデザインの作法
