技術評論社サイトのロゴ

フラットデザインで考える　新しいUIデザインのセオリー

「フラットデザインで考える　新しいUIデザインのセオリー」のカバー画像
著者
宇野雄（うのゆう）　著
定価
2,618円（本体2,380円＋税10%）
発売日
2014.11.21
判型
A5
頁数
192ページ
ISBN
978-4-7741-6954-5 978-4-7741-7045-9

サポート情報

概要

昨今のUIデザインのトレンドとして注目されている「フラットデザイン」は、シンプルであるが故にデザイナーにとっては基本的ではありながらもごまかしのきかない本質的なデザイン力が問われるものです。本書では、AppleのiOS 7＆8、GoogleのMaterial Design、MicrosoftのWindows8など、最新の「フラット」なUIデザインの動向を分析し、これからの時代に必要となる普遍的なデザインの考え方について掘り下げていきます。

こんな方にオススメ

  • Web・アプリデザイナー、UIデザイナー
  • 「フラットデザイン」に興味のある方

著者の一言

（「はじめに」より抜粋）
本書では特にWindows 8、iOS 7＆8、Material Designを題材として、なぜフラットデザインに注目が集まったのか、実際にデザインをするときにどんな問題があるのかを紹介するとともに、フラットデザインを通してUIデザインの本質を追求していきます。次の新しい流行が出てきた際にも対応できるような、デザインの普遍的な考え方を身に付けることを本書の一番の目的としています。
本書を通して「なぜフラットなデザインが求められているのか」「なぜ今までフラットなデザインが普及しなかったのか」「新しいデザインが生まれたときには何を注意してデザインをすべきなのか」といったような、流行にとどまらないデザインの考え方を学ぶきっかけを掴んでいただければ幸いです。

目次

CHAPTER 1　フラットデザインとは何なのか

1.1　代表的な会社のフラットデザインの考え方

  • 1.1.1　Microsoft　― Windows Phone＆Windows 8
  • 1.1.2　Google ― Material Design
  • 1.1.3　Apple ― iOS 7＆8
  • 1.1.4　昔からあるフラットデザイン

1.2　誰のための「フラットデザイン」？

  • 1.2.1　スキューモフィズムからの脱却
  • 1.2.2　フラットデザインを作るのは簡単なのか？
  • 1.2.3　フラットデザインはなぜわかりにくいのか
  • 1.2.4　わかりやすいデザインとは
  • 1.2.5　フラットデザインが目指すもの
  • ［章末コラム］　OSがフラットデザインを採用する意味とは

CHAPTER 2　フラットデザインの特徴をつかむ

2.1　フラットデザインの特徴

  • 2.1.1　質感を抑えた平面構成
  • 2.1.2　ルールに基づいた図形の整列
  • 2.1.3　エフェクトを極力抑えたデザイン
  • 2.1.4　線の利用を控える

2.2　配色

  • 2.2.1　フラットデザインっぽい色とは何なのか？
  • 2.2.2　色を限定したフラットデザイン

2.3　余白やフォントのルール

  • 2.3.1　フォントとフラットデザインの関係
  • 2.3.2　ジャンプ率を意識する
  • 2.3.3　余白によってコントロールできること
  • 2.3.4　角丸の持つ意味

2.4　コンテンツの表現方法

  • 2.4.1　表現方法が限られる難しさ
  • 2.4.2　わかりやすいコンテンツの見せ方
  • ［章末コラム］　日本と海外での考え方の差

CHAPTER 3　UIパーツの本質を考える

3.1　パーツの本質を意識する

  • 3.1.1　パーツのあり方／見せ方

3.2　UIパーツの本質

  • 3.2.1　ボタン
  • 3.2.2　チェックボックス
  • 3.2.3　ラジオボタン
  • 3.2.4　テキストフォーム
  • 3.2.5　トグルスイッチ
  • 3.2.6　スライダー
  • 3.2.7　セレクトボックス
  • 3.2.8　リスト
  • 3.2.9　メッセージバルーン
  • 3.2.10　ローディングインジケーター
  • 3.2.11　アイコン
  • ［章末コラム］　フラットデザインよりさらに新しいデザインへ

CHAPTER 4　トランジションを活用する

4.1　フラットデザインにおけるトランジション

  • 4.1.1　トランジションを使用する意味
  • 4.1.2　iOSのトランジション

4.2　トランジションの例

  • 4.2.1　オーバーレイ
  • 4.2.2　スライド
  • 4.2.3　フェイド
  • 4.2.4　ズーム
  • 4.2.5　シェイク
  • ［章末コラム］　見た目と動きをセットで考える

プロフィール

宇野雄（うのゆう）

ヤフー株式会社 所属 UIデザイナー

UIデザインマニア。芸術的な作品よりも、わかりやすさ・使いやすさを突き詰めた上の最終的な機能美を好む。右脳よりも左脳を使ってデザインを行う論理派デザイナー。

スマートフォンのWebやアプリのUI・UX設計／デザイン／コーディング／グロースハックまで幅広く担当。そのため講演やWeb連載の内容もUXの概念からCSSのコアな部分まで多岐にわたる。活動の中心はUIデザインであるが、多くの人に喜んでもらえる UIを提供するためであれば、自分自身のポジションにこだわりは持っていない。よくいえばフルスタックデザイナー、悪くいえば器用貧乏。

全く新しいモノづくりよりも、既にあるモノを新しい視点でとらえるデザインが好き。

今興味があるものはエアコンやトイレのリモコンのデザイン。普段あたりまえに使っているものを更に使いやすくすることで、新たな体験を生み出すことが一番のモチベーション。

「LESSで3倍ラクするスマートフォンコーディング」「ウェアラブル端末が与える新しいUX」などのgihyo.jpでのWeb連載や、『MacFan』（マイナビ）での連載「UI/UXのハニカム」を担当。