本文試作・代表作の個別監査中 / 画像未収録 · 2026-10-30
近年のUI・デジタルデザインのトレンド
フラットデザイン
Flat design
- 年代
- 2010年代に普及（NNGは2012年頃を指摘）
- 地域
- 今回の資料はMicrosoft・Appleの製品とNNGの分析が中心。利用地域や国際的広がりをこれだけで網羅しない。
すっきりした画面は、使いやすい？
画面のボタンが、本物の立体のように見えることがあります。
フラットデザインは、そうした立体らしさや、ぴかぴかした見た目を減らす方法です。
でも、すっきりさせるだけで使いやすくなるとは限りません。
どこを押せるのか、押すと何が変わるのかも、分かるようにする必要があります。
- 画面を見るなら、押せる場所と押せない場所を見分けられますか。
- ボタンを押したあと、何が変わったか分かりますか。
02 — REPRESENTATIVE WORKS この動きを知るために選んだ作品
作品から、もっと知る。
作品の知名度や画像の入手しやすさだけで選びません。紹介したい作品と、調べて分かったことをまとめました。画像を載せられるかどうかは、別に確かめています。画像の利用許諾を確認できていないものは掲載していません。
3件は歴史を考えるための候補で、確認をすべて終えた代表3点ではありません。iOS 7はフラットデザインに含めるかを考える境界の例です。Appleのサイトは第三者の観察によるもので、どの版・画面かの特定が不十分です。英語圏の大手製品が中心で、ほかの地域や、別の製品・サービスの仕組みまではカバーしていません。動作や実際の画面も、まだ検証していません。
01作品の内容を説明する見出し
アプリを開く前に新しい情報を知らせる画面
原題：Windows Phone 7 Series — Start / live tiles
アプリを開く前に、知らせる。
四角いタイルの中に、新しい情報が表示されます。
アプリを一つずつ開かなくても分かるようにした画面です。
作品の所蔵元・解説ページで見る ↗原作品：画面・UI資産の商用再利用条件未確認 / 複製：スクリーンショット自体の個別許諾未確認
商用利用：未確認・掲載不可 / 画像採用：未採用
作品の記録と、詳しい説明
モバイルUI・動的な情報表示
Microsoft（製品の提供元。個別画面のデザイナー帰属は未確認） / 2010-02-15発表版（発売日ではない）
Start画面のlive tiles（更新情報を表示するタイル）は、アプリを開く前にも新しい情報を伝えます。平らな四角形という見た目だけでなく、情報の見せ方と操作の関係を考える候補です。
Metroは固有のデザインの仕組みです。フラットデザインの別名でも、唯一の出発点でもありません。2011〜12年の記事にある原則を、2010年の特定の画面ですべて確かめたわけではありません。
画像を載せる前に、確かめたいこと
- 2010年の画面と後年のガイドの画面を区別する。
- 静止画像と更新・遷移時の状態を区別する。
作品の内容を説明する見出し
指を動かすと操作ボタンが現れる画面
原題：iOS 7 — Control Center
下から指を動かすと、道具が出てくる。
画面の下から指を動かすと、操作のためのボタンがまとまって現れます。
半透明の部分や重なりも、何が起きたかを伝えています。
作品の所蔵元・解説ページで見る ↗原作品：画面・UI資産の商用再利用条件未確認 / 複製：スクリーンショット自体の個別許諾未確認
商用利用：未確認・掲載不可 / 画像採用：未採用
作品の記録と、詳しい説明
モバイルUI・操作へのアクセスと階層
Apple（製品の提供元。個別画面の制作担当は未確認） / 2013-06-10発表／2013-09-18一般配信予定を9月10日告知
画面の下端からスワイプするとControl Centerが開きます。この操作と、半透明な表現や機能を伝える重なりを使った刷新を比べる候補です。飾りを減らしても、操作の手掛かりは伝わるでしょうか。
Appleの発表は、これをFlatに分類すると明記していません。奥行きや動きが完全になくなった例ではなく、流行との関係を慎重に考える境界の例です。発表時の版と一般向けに配信した版で、画面が同じかは未確認です。
画像を載せる前に、確かめたいこと
- 発表・ベータ・9月の一般配信版を分ける。
- 半透明、背景、操作中の状態を画像同定時に確認する。
作品の内容を説明する見出し
移動先を知らせる案内を比べたウェブサイトの記録
原題：Apple website — homepage navigation observed in 2015
どこを押せるか、見つけられる？
Appleのウェブサイトで、移動先を知らせる部分を比べた記録です。
調べた2015年の案内には、影や光った見た目を使っていないと記されています。
それでも押せる場所が分かるか、考える手がかりになります。
作品の所蔵元・解説ページで見る ↗原作品：画面・UI資産の商用再利用条件未確認 / 複製：スクリーンショット自体の個別許諾未確認
商用利用：未確認・掲載不可 / 画像採用：未採用
作品の記録と、詳しい説明
Webナビゲーション・クリック可能性
Apple（観察対象のサイト）。個別デザイナー・制作版は未確認 / 2015年の観察例／NNG記事2015-09-27
NNGは2007年・2012年・2015年の移動先を示す案内を比較しています。2015年の例には、影、質感、光の強調がないと指摘しました。操作できる場所を、何で見分けるかを考える候補です。
これは第三者であるNNGが当時観察した記録で、Appleの制作記録ではありません。正確な取得日、URL、地域版、画面の状態、作者は特定できていません。企業自身の資料があるほかの2候補と、同じ確かさでは扱いません。
画像を載せる前に、確かめたいこと
- NNGの比較図が示す版・範囲と正規ページを照合する。
- NNGの比較画像とAppleのUI双方の権利を確認する。
もう少し知る：時代や、つくり方の話
どんな時代に、何をつくった？
フラットデザインは、画面の光沢や立体的な飾りを抑える表現の傾向です。ここでは、画面などの使いやすさを調べるニールセン・ノーマン・グループ（NNG）の、2015年の分析を根拠にしています。すっきり見えるだけで使いやすいのでしょうか。押せる場所、情報の大切さの順番、操作した後の変化がわかることも重要です。
NNGは、控えめな影や重なりを使うFlat 2.0にも触れています。2017年には、操作できる部分とできない部分を、明確で一貫した方法で区別するよう求めました。企業の製品発表は、その製品の機能や版を確かめる資料です。世界的な流行全体の始まりを証明する資料ではありません。2010年の製品発表、2013年の刷新、2015年の観察を、そのまま流行の開始年や終了年にはできません。
01 — LOOKING CLOSELY 識別は、個別作品との照合から。
以下は観察のための問いです。すべての作品に共通する固定ルールや、未取得画像の実見結果ではありません。
COLOR色と、使った材料
単色や鮮やかな色を使っているだけでは、フラットデザインとは決められません。色が情報を分けたり、押せる場所を知らせたりする働きを見ます。具体的な配色は、実際の画面を確認してから記録します。
TYPE文字をどう見せる？
Metroの資料は、文字によって情報の大切さの順番を示すことと、余白を重視しています。共通のフォント名は決めず、見出し、本文、操作を示す文字がそれぞれ何をしているかを調べます。
FORMどんな形で、どうつくる？
飾りのための立体感を減らすことと、機能を伝える重なりや動きまでなくすことは別です。iOS 7には半透明な部分や、機能を伝えるための重なりがあります。文字どおり奥行きがない表現ではありません。
COMPOSITIONどこに、どう置く？
live tiles（更新情報を表示するタイル）、スワイプで開くControl Center、Webサイトの移動先を示す案内は、用途を分けて比べます。操作前後の状態、画面の切り替わり、クリックできるかどうかは、一枚の静止画像だけでは確かめられません。
COMPARE
似ているところ、違うところ。
フラットデザインと、要素を絞るMinimalism（ミニマリズム）は、一緒に使われることがあっても同じ意味ではありません。Metroも固有の仕組みです。Material Designは、面・光・影・意味を伝える動きを使う比較対象であり、単純なフラットデザインの実例とはしません。
m1の文書には2015〜17年の更新があり、2014年の固定された版としては扱えません。Googleの2014年6月25日の第一版発表にも、面・影・意味を伝える動きが明記されています。単に平面的にする考えとは異なります。
項目を横に並べる ↗READ TODAY
いまの画面の使いやすさを考える（現製品は未確認）
今のUI（ユーザーインターフェース、人が機器を操作する画面や仕組み）を見るときは、新しさや美しさに加え、操作する場所の見分けやすさ、情報の順番、状態の変化を確かめます。ここで使う2015年・2017年の分析だけでは、現在のすべての製品の作り方や性能まではわかりません。
