フラットデザインの基本ルール Webクリエイティブ&アプリの新しい考え方。

著者 : 佐藤好彦

• インプレス (2013年11月22日発売)

作品紹介・あらすじ

iOS7で注目の「フラットデザイン」誕生の背景と将来をデザイン事例や先駆者インタビューから紐解く一冊。

感想・レビュー・書評

[カミイロさんの感想 · 2024年3月21日]

最近よく使われているデザインについて、画像などを用いて分かりやすく説明されている。
しかし発刊年が結構前なのもあり、今のトレンドに合っているか分からないのがマイナスポイント。

[mighioさんの感想 · 2017年1月23日]

欄外の注釈がありがたい、ステキな本。
アーリーアダプターはともかくとして、わりとふつうの人は物理的なハードの制約から絶対に離れられず、それを踏まえたインターフェイスをいかに考えていくのか。

[yoshiyukiiさんの感想 · 2016年1月28日]

フラットデザインが一般化してきた背景を、デザインの流行だけでなく、デバイスやOS、コンテキストへのフォーカスなど様々な角度から解説している。

改めて「フラットデザインとは何か」に向き合って、採用する際に考えるべき立ち位置を気づかせてくれる内容だった。

[jingles84さんの感想 · 2015年7月26日]

完全なフラットデザインは使いやすいのか？
この辺り、デザイナーさんに聞いてみたい。

[fujiok3さんの感想 · 2015年7月9日]

□フラットデザインと背景

フラットデザインとは。
・ドロップシャドウやベベル・グラデーションによって立体感を表現しない、
・グラデーションやテクスチャを使って素材感を表現せず、単色
・強いハイライトで光沢や反射を表現しない
・現実世界にあるものよりは、抽象的に
・枠線や囲みは使わず、余白の活用


これまでは素材や光の当たり方などを生かして凝った作りをしていて、リッチデザインと呼ばれていた。
現実世界のメタファーを取り入れてきていたのだが、習熟度や環境などが変化していく中で、本当に適したデザインなのか、問い直される段階に。

スキューモーフィズムと限界。
人は未知のものがあった場合、知っているものを基準に考える。
しかし、PC上では、データでしかない。
現実世界にあるものを当てはめることで、イメージしやすくなる。
現実にあるもののように、使えるということが伝わる。

スマホの普及で、今までのデザインが快適ではなくなってきた。
・スマホは画面げ小さい
・タッチで操作する
・PCに比べ、スクロールしやすい。
・ピンチアウトで拡大
・高解像度
・野外を含めて様々な場所で使用される

タッチの操作とマウスの操作は違う。
野外で操作することもあり得るので微妙な動作を求めることは合理できでない。
必然的にボタンが大きくなる。
また、今までのリッチなデザインがかなりの大きさで並ぶと暑苦しくなる。
その結果、すっきりとしたデザインとなってきた。


--
サイドバーがスマートフォンだとぱっと見で見れない。
代わりに、スクロールを前提としたサイト作りが増えてきた。
サイドバーを無くし、ワンカラムのレイアウトに。
今までサイドバーに置かれていた情報がページの下部に置くことが。
（コンテンツをすべて見た後に見ることになる。

映像を組み込むことで、端的に情報を表示することも。


---
画像解像度に依存しないインターフェースへ。
画像を使用したサイトだと、RETINAディスプレイなどだとぼやけてしまう。
また、かくだいすると画像はぼやける。
今まではphotoshopなどでビットマップで画像を作成していたのだが、見出しを画像で作成することが少なくなる。


WEBフォントを使用することが増えるかも。
まだ日本では十分ではないけど。
--
fonts.com（日本語あり）　有料・無料
fontspring（なし）有料・無料
font squirrel　（なし）無料（商用利用か
Edge web font（なし）無料
google fonts（なし）無料（商用利用可）
realtype Project（あり）有料
TypeSquare（あり）有料/無料（1書体1万PVまで）
アマナイメージズWEBフォント（あり）有料
デコもじ（あり）有料/無料
フォントぷらす（あり）有料
もじてぱ（あり）有料/無料（1書体1万PVまで）
----


アップルデザインとユーザーインターフェースの変遷

個人用PCを（アクア）を出した。
アクア風デザインは
・水のような透明感
・立体感のある表現
・ハイライトの強調
・リアルなアイコン

同時に、web2.0構想（受け手と送り手が流動化する）
その中で、アクア風デザインっぽいwebサイトが流行った。
＋印刷技術の変化で、グラデーションの表現が難しくなくなってきて、ロゴマークがグラデーション付きのものなどが増えた


macbook proからブラッシュドメタルというデザインとなった。
よりストイックな、UIが必要以上に目立たないものに。


2012年にフラットデザインのWINDOWS8が出てきた。



アップルの「iOS　ヒューマンインターフェースガイドライン」は目を通しておくべき。

・控えめであること（UIは内容を分かりやすく表示し、ユーザーとやりとりする働きがあるけど、それ自身が目立つようではダメ）
・明瞭であること（もじはどの大きさでも読みやすく、アイコンは的確明瞭であること）
・奥行きを与えること（視覚的な重なりや本物らしい動きがあると楽しさ・分かりやすさが向上する）


□工業デザインの分野では、工業製品は素材に忠実であるべきという考え方（マテリアルオネスティ）
19世紀までは、装飾が重要だった。しかし、バウハウス以降は形状は機能に従う、装飾よりも構造そのものの美しさが評価されるようになる。
ディスプレイ内に影はできない。
それを内部に持っている写真を配置すること自体が矛盾である。
アップルデザイナー、ジョナサンアイブは形態はきのうにしたがうというアプローチに限界を感じて、形状は意味に従うというスタンスらしい。

フラットデザインはメディアの特性を再考する機会。
写真の登場で、絵画の意味が変わったように。


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

バウハウスのデザインは、細部の装飾を排除してシンプルにしていくという意味では、フラットデザインはバウハウス以降のモダニズムデザインとの共通性を強く感じる。
鉄とコンクリートとガラスの立方体のような建設は、日本でもアフリカでもどこでも見かける形式になっている。その土地の文化的な特徴は反映されていない。
フラットデザインの方向性を見ると、地域性はあまり感じられない。
装飾を取り除いて理性的に整理していくと、つるっとした個性のないものになる、しかし世界中で受け入れられるようになる。


PCのカルチャーはシリコンバレー周辺でyahooのロゴをかっこいいよね、というようなコミュニティがあった。（かっこいいよね、と思う部分の根底には笑いがある）
しかし、スマホは誰でも使う。
マクドナルドが世界に出て行くときに、町のハンバーガーショップという体制ではなくなって行くように、ある種の感性の抽象化というものが行われることになる。

フラットデザインではタイポグラフィとスペースの使い方が重要。
50年代のスイススタイルのタイポグラフィは参考になる。

□視覚の方向性

二次元の中での視覚的表現は遠近法のように、現実の三次元世界をそのまま取り入れるか、2次元であることを特性として独自の表現をするか、どちらか。

今まで、何度か3dがブームになったが、長くつ付いたことはない。
地図でも、三次元の空間を抽象化して、2次元で表示されている方がすっと理解しやすい。


□フラットデザインとminimalism

まず、片付けて床を見えるようにするようなもの。
フラットデザインがフラットに見える理由は、色の面が見えるから。
画面がいっぱいのデザインの場合、画面を構成する要素はフラットなデザインだったとしても、あまりフラット感はない。

つまり要素があまり多すぎないサイトと相性が良い。

minimalism
必要最小限の表現に抑えたデザインをminimalismと表現することがある。表現を抑えて抑揚が少なく、淡々としている。繰り返しを基本として、部分が全体を表現しているという構成方法。
ミニマルなデザインだと、結果的にスペースが多くなり、フラットなデザインになってくる。表現を少なくすると、静かな図書館では小声で話していても聞こえるように、細部の表現の繊細な調整が必要になってくる。

□自然界の中での異物としてのフラット

フラットデザインは派手なのか。地味なのか？
そもそもフラットな面は自然には存在しない。影もあるし、汚れもある。
だからこそ、交通標識に使われたり、ポスターで使われたりする。
本来フラットな色というのは異常な状態。
写真の中にフラットな色を配置すると目立つのは自然の空間を写した写真の中で異物として見えるから。

□和のデザイン
タポグラフィを生かしたフラットデザインは日本語ではなかなか難しい。漢字は画数が多い、空間を埋める割合が高い。日本語を使った瞬間にフラットの良い部分が失われるように感じる。
日本的なデザインは、あまり立体感を強調することはなかった。
和風を意識したデザインには、今のフラットとは違う形でのフラットさのあるものが少なくない。
遠近感・立体感の捉え方や現実の世界をニジフェンンい鬱しとる方法

・そば処庄司屋
・ニッポニア・ニッポン

□フラットデザインは流行なのか？
フラットなデザインは、流行と言っても差し支えはない。
フラットデザインではコンテンツが大事。
PCなどでも、まずPCという機器が売れる段階、インターネットが普及するとなると、インターネットへの接続が商売になる。メディアが普及するとき、コンテンツ自体よりも製品やサービスなどの手段の方に目を奪われる。
web製作でも、どのようなサイト構造にすれば良いのか、というノウハウや技術を提供するが、何を伝えたいのか、ということはなかなか提供が難しい。
形にする技術は磨くことができるが、次の段階で伝えたかったことは何か？を考える段階に来る。
気がついたら、何を伝えるのかをあまり考えていないのではないか。
本来の目的に戻るにはどうしたらいいかが振り返られる段階に来たのではないだろうか。


----------
フラットデザインのタイプ
-多彩な情報を見せる-
・パネルタイプ
・カードスタイル
・サイドバー付き

-ストーリーで見せる-
・タイポグラフィスタイル
・ラージフォトスタイル
・イラストスタイル

--
・パネルタイプ

パネルタイプは、選択肢を明確に示すという意味ではとても良い。
フラットデザインでは1ページで多くのことを伝えようとしているが、このスタイルでは入り口としての機能を重視している。
パネル自体にある程度の大きさがあるので、内容の概要を表示することによって、入り口の内部をイメージさせることができる。
また、パネルごとに様々な情報を見せることができるので、視覚的にバラエティー豊かに見せることができる。

例：UT　POP−UP　TOKYO
　　知り100
　　https://www.northbounddesign.com/
　　http://builtbybuffalo.com/

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

コンテンツそのものが重要になる。
フラットデザインではほとんど、サンセリフ体のシンプルな書体が用いられる。
細い文字で、品よく。
例：手堅い仕事っぽい：http://www.envato.com/
色を使う部分と使わない部分でリズムを。日本語のサイト：https://codeprep.jp/
細い書体を上手に使っている：http://myclique.is/

・ラージフォトスタイル
写真を使うことで現実世界との接点となる。
フラットデザインの場合は、横幅いっぱいに使うことがおおい。

例：カード決済：https://squareup.com/jp/
トップの写真だけでやれることがわかる。あらかじめ、文字を乗せる場所などが計算されている。
アクションを起こす場所での色を統一。
写真の被写体深度をロゴの場所に：http://evablackdesign.com/

・イラストスタイル
フラットデザイン的なものは、いかにもイラストレータで書きました、みたいなグラデーションも、シャドウもない、単色の色を使ったものが多い。
問題は、イラストがボタンのように見えること。

例：イラストがいかにも：http://thedsgnblog.com/post/52898364529/applove
立体だけどフラット：http://kyan.com/
vineのアプリはカラフル

・カードスタイル
情報の単位をカードのような形で表現して、1px程度浮き上がらせたようなデザイン
youtube,facebook,twitter
薄いグレーと、白の差で、情報の単位を表現している。
gunosy,huffington post ,songrop,seene,vine

・サイドバースタイル
情報量の多いサイトに適している。

例：）
wacom:http://www.wacom.com/ja-jp
crevia：http://crevia-times.com/

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

シンプルな構造のものが多い。
まとまりのある内容はできるだけ1ページの中で伝えている。
その他の情報はブログやfacebook・
今まで文章や図版だったものがyoutubeなど。
本来、フラットデザインはコンテンツに意識を向けさせることを目的としている。
一旦ゼロにして構築した方が良いかもしれない。

参考サイト：ワノコト　http://www.wanokoto.jp/

□サイドバーを隠すレイアウト
メニューボタンを配置：http://squarespace.com/

□情報の単位を囲みを使わずに表現する
情報のデザインは情報を整理して見せることが重要。
囲みを作りたくなるが、作るとスペースが区切られてしまい、広がりを感じられないデザインになってしまう。
囲みを作ると、内側にも外側にも余白が必要になる。
角丸にすると内側の余白がさらに広く必要になる。

できるだけ少ない表現で情報の単位や位置付けを伝えることを心がける

例：http://adayinbigdata.com/

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

一つつながりになった広い色面を作ることが、画面を広く感じさせる
ステータスバーも、下の色が見えるように、とか。

□ボタンに座布団は必要か？
ボタンはボタンらしく、囲みを作ることがおおい。
これを座布団というのだが、今まではユーザビリティが叫ばれるごとに、ボタンを目立たせて、どんどん暑くなっていった。
iOS7からはボタンを文字だけで表現している。座布団は必要以上に目立ってしまう。
色や周囲のスペースの使い方によって、ボタンであることを伝えることができればUIの存在を少なくして見やすくすることができる。

ボタンとしては、以下の4段階でボタンであることを示すことが多い。
1.周囲に余白を取ったテキスト
2.単色の資格で囲む
3.フラットな図柄のアイコン
4.パネルのようにコンテンツを当てはめる
（windows8とか）

アイコンの例：http://moreair.co/process

□無彩色を中心に構成し。色に意味を込める
キーカラーを設定し、アプリ内においてキーカラーはすべてクリック可能。それ以外に色は使用しない。

□色で情報を分類し、ストーリー性を生み出す
上記とは逆のパターン、カラフルな色を使う。
とりとめのない長い話を聞いていると不安になる。
しかし、リズムのある話し方だと長くても聞いていることができる。
スクロールの場合も同じ。メリありがあっても長くスクロールしてても良い。
フラットデザインの場合、少しサイドを落とした色が使われていることが多い。

スマホサイト：https://www.copy.com/

□半透明レイヤーの使用

アプリ：無印良品。findays,KickStarter

□フラットデザインに適したアイコンデザイン
アイコンは、正面や斜め45度などから書いて、影を書くか書かないか、携帯もできるだけ抽象化する。
googleのアプリアイコンはレベル高い。

ロングシャドウアイコンなども今の流行りである。

□アニメーションで意味を暗示する

□フラットデザインをもっと検索するには
Dribbble:
https://dribbble.com/
behance:
https://www.behance.net/
フラットデザインなら：http://fltdsgn.com/

[enohさんの感想 · 2014年9月7日]

フラットデザインに着いて勉強ように買いました。ためになった。

[masamegukotaさんの感想 · 2014年9月3日]

なぜ今フラットデザインなのか、がしっかりと説明されており非常に参考になる。webサイトのデザインガイドライン企画をする上でのネタも多数あり。

[hiroshiさんの感想 · 2014年8月7日]

デザインの参考に非常になる本でした。フラットデザインを履き違えている人がちらほらいる世の中で、しっかりとした分析がなされていた。デザイン会社に一冊、という気がした。

[olfactogramさんの感想 · 2014年4月13日]

フラットデザインの現状についてまとめた著書。
フラットデザインでアプリデザインがしたくて購入しましたが、そのお作法的なところの事例がたくさんあり、ヒントになったように思います。

[tomoyukimさんの感想 · 2014年3月1日]

フラットデザインの流れを、情報デザインの今に至る思考をたどりながらひもとく良書。

著者プロフィール

Webデザイナー、グラフィックデザイナー。Webなどのデザイン・プランニングを中心に、デザイン関連の書籍や雑誌記事の執筆、講演なども手がけている。著書に『デザインの教室ー手を動かして学ぶデザイントレーニング』、『デザインの授業ー目で見て学ぶデザインの構成術』（以上MdN）、『ビジネス教養としてのデザイン』、『フラットデザインの基本ルール』（インプレス）、『ウェブサイト制作のワークフローと基礎技術』（技術評論社）など。東京造形大学非常勤講師。

「2016年 『ドリル式　やさしくはじめる　Webデザインの学校』 で使われていた紹介文から引用しています。」