書籍概要

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

著者
発売日
更新日

概要

昨今の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 シェイク
  • [章末コラム] 見た目と動きをセットで考える

サポート

現在サポート情報はありません。

商品一覧