今、身につけておきたいデザインのテクニックが論理的にしっかり学べる一冊 -Webクリエイティブの新しい考え方

ウェブデザインは、スマフォの普及、そしてフラットデザインを経て、ここ一年で大きく変わりました。
1カラムのレイアウト、スクロールを前提としたページ構成、半透明のパネルの効果的な使い方、囲みを使わずに情報を分類、大きな写真を使った魅力的なレイアウトなど、今押さえておきたいデザインのテクニックがしっかり学べるオススメの本を紹介します。

本書は先週、発売したばかり。
タイトルの「フラットデザインの基本ルール」はとてもあっさりしていますが、内容は濃いです。副題の「Webクリエイティブ&アプリの新しい考え方」の方がぴったりきます。

フラットデザインというトレンドにあわせて、どうページを作るかという制作の技術的な観点だけでなく、ユーザーとどのように向き合うべきかデザイン論としても楽しめる一冊です。

【追記】
と、あとで気がついたのですが、著者の佐藤 好彦さんはあの「デザインの教室」も書かれてる人なんですね。どうりで内容が濃い訳だ、納得。
デザインの教室は、以前の記事で紹介しています。こちらもオススメです。

• タイポグラフィを基本から学べるオススメの本

紙面のキャプチャで、中身を少しだけご紹介。

まずは目次、ここ一年で大きく変化したウェブデザインの全体像をつかみます。

第一章ではフラットデザインの背景など、デザインについて学びます。
キャプチャは典型的なフラットデザインの例。彩度を少し落としたカラーを使った広い色面、抽象化されたシンプルなメタファー、1カラムで長いレイアウト。

最近はシンプルなウェブデザインが増えており、スクロールを前提としたサイドバーの無い1カラムで、ブロックごとに色分けされています。

Appleのデザイン戦略も見逃せません。控えめであること、明瞭であること、奥行きをあたえること、この3つの方針を元にiOS 7は作られています。

工業製品、絵画、建築の観点から、またタイポグラフィやグラフィックデザインのなかにもウェブデザインのヒントがあります。

フラットデザインと相性が良いのが、最小限の表現を追求するミニマリズム。

フラットは海外だけではありません。和のデザインにも独自な美意識をもたせることができます。

ここから第二章で、実践編です。
フラットデザインで最初に目につくのがパネルでしょう。なぜパネルが使われるのか、どう使うのがよいのか、実例と共に学びます。

大きいサイズの写真も魅力的なアイテムです。どのように写真を使うのが効果的なのか、テキストやスペースの使い方、コントラストを生かしたレイアウトなど。

サイドバーの使い方もここ一年で大きく変わりました。デザイン的なイメージと実用性を兼ね備えています。

第三章は、構成のテクニック。
フラットデザインはコンテンツに意識を集中させることを目的としており、シンプルな構造が生きてきます。

デザインの現場ですぐに使えるテクニックも充実しています。情報の単位に囲みを使わないことで、レイアウトがすっきりします。

半透明のレイヤーも最近のトレンド。画面移動することなく、新しい情報を表示できる便利なUIです。

アニメーションも重要な要素。意味のないアニメーションを使うのではなく、ユーザーに何かを伝えることで、大きな存在意義が生じます。

そして、僕が楽しみにしてるコラムも章末ごとにあります。「論理への愛を」いいですね！

フラットデザインの基本ルールの目次

1. フラットデザインとその背景

   フラットデザインが注目されている

   スキューモーフィズムとその限界

   フラットデザインが望まれる環境的な要因

   ウェブサイトがシンプルになってきた

   フラットデザインを支える技術的な要因

   アップルのインターフェイスガイドライン

   フラットデザインの根拠としてのマテリアルオネスティ

   インターナショナルスタイルとしてのフラットデザイン

   視覚的表現における二つの方向性

   フラットデザインとミニマリズム

   自然界のなかで「異物」としてのフラット

   和のデザインの平面の生かし方

   フラットデザインは「流行」なのか？

   【コラム】目は無意識に、色を探している

2. フラットデザインのスタイル

   フラットデザインをタイプ別に分類する

   選択肢をわかりやすく提示する -パネル

   メッセージを確実に伝える -タイポグラフィ

   大きな写真で引きつける -ラージフォト

   フラットデザインらしさが表れる -イラスト

   情報の単位を示した -カード

   情報量の多いサイトに適した -サイドバー

   【コラム】引き算のデザインよりも、論理への愛を

3. フラットデザインの構成術

   フラットデザインのための情報の整理

   サイドバーを隠したワンカラムのレイアウト

   情報の単位を「囲み」を使わずに表現する

   色を分けずに広い色面を作る

   ボタンに「座布団」は必要なのか？

   無彩色を中心に構成し、色に意味を込める

   色で情報を分類し、ストーリー性を生みだす

   半透明レイヤーで画面を多様に活用する

   フラットデザインに適したアイコンのデザイン

   ロングシャドウのアイコンデザイン

   アニメーションが表現するインタラクション

   Googleのデザインガイドライン

   フラットデザインをもっと知るための情報源

   【コラム】フラットデザインはボサノヴァ

4. インターフェイスデザインの現在と未来

   ピュアなフラットデザインは信用していない
   インタビュー：深津 貴之 氏

   グローバル企業の正常進化の現れとしてのフラットデザイン
   インタビュー：インテリジェントネット株式会社

   機能がいったん成熟し、いまが「建て替え」のとき
   インタビュー：大谷 和利 氏

キャプチャでは触れませんでしたが、第四章のインタビューも興味深い内容でした。

献本の御礼

最後に、献本いただいたインプレスジャパンの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス