1984
System 1
初代Macintosh GUI / Macintosh
デスクトップ、ウインドウ、メニューバー、アイコン、ゴミ箱を一貫した白黒画面へ統合した。
1-bit graphics / Chicago typeface / desktop metaphor / Susan Kare icons
辞典上の意味：AppleのGUI語彙の出発点。制約の強い白黒画面が、明快な記号体系を生んだ。
関連：Web 1.0 / Skeuomorphism
系譜
系譜資料 30 件。各時代を孤立した見た目ではなく、前後の変化がわかる系譜として収録。辞典へ戻る
Apple OSデザイン史
System 1からLiquid Glassまで。 各時代を孤立した見た目ではなく、前後の変化がわかる系譜として収録。
1991
System 7
カラー化したClassic Mac OS / Macintosh
カラー、立体的なコントロール、拡張されたアイコンを導入しながら、初代Macの構造を保った。
color icons / 3D controls / Chicago typeface / desktop metaphor
辞典上の意味：白黒の記号体系から、色と奥行きで状態を伝えるGUIへ移行した。
関連：Skeuomorphism / Web 1.0
1997
Platinum
Mac OS 8の外観 / Classic Mac OS
グレーの立体部品、細い溝、角の立ったウインドウで、システム全体を統一した。
beveled controls / neutral gray / pinstripes / dense chrome
辞典上の意味：後のAqua以前に、デスクトップUIを一つの外観テーマとして揃えた時代。
2001
Aqua
Mac OS Xの初期デザイン言語 / Mac OS X
半透明、光沢、丸いボタン、強い影、ストライプで、デジタル部品を触れそうな物体として見せた。
candy-colored controls / translucency / drop shadows / pinstripes
辞典上の意味：計算機の画面へ物理感と感情的な魅力を持ち込み、2000年代UIへ大きな影響を与えた。
関連：Skeuomorphism / Web 2.0 Gloss / Y2K
2003
Brushed Metal
金属質のアプリ外観 / Mac OS X Panther era
iTunesやSafariなどで、横方向の金属テクスチャと一体化したウインドウを採用した。
brushed texture / unified toolbar / rounded window / material metaphor
辞典上の意味：アプリの用途を素材で語るスキューモーフィズムの代表的な分岐。
関連：Skeuomorphism / Chromecore
2007
iPhone OS
マルチタッチと写実的UI / iPhone
指で直接触れる操作を、光沢アイコン、実物に似たアプリ、弾性のある動きで理解させた。
direct manipulation / glossy icons / real-world metaphors / elastic motion
辞典上の意味：物理ボタンから全面タッチ画面への移行を、既知の物体表現で橋渡しした。
2013
iOS 7
薄い文字・平面・透明レイヤー / iPhone / iPad
写実的な装飾を外し、鮮色、細い文字、半透明、奥行きを示すモーションへ転換した。
flat surfaces / thin typography / translucency / depth through motion
辞典上の意味：スキューモーフィズムからフラットデザインへの業界規模の転換点。
関連：Flat Design / Vector Minimalism / Glassmorphism / Minimalism
2014
OS X Yosemite
MacとiOSの視覚統合 / Mac
Macの立体部品を簡略化し、明るい色、薄い線、半透明サイドバーを導入した。
flattened controls / translucent sidebars / simplified icons / iOS alignment
辞典上の意味：Aqua以来のMac固有表現を整理し、iOSと共通する視覚言語へ近づけた。
2020
macOS Big Sur
Appleプラットフォームの再統合 / Mac
広い余白、角丸、浮いたサイドバー、統一されたアイコン形状でMacを再設計した。
rounded geometry / layered materials / unified icons / spacious controls
辞典上の意味：iPhone、iPad、Macを同じ設計原則へ寄せつつ、Macの操作体系を残した。
関連：Glassmorphism / Neumorphism / Flat Design / Vector Minimalism
2023
visionOS
空間コンピューティングUI / Apple Vision Pro
半透明の窓、自然光に反応する素材、視線・手・声による入力で、画面を空間へ拡張した。
spatial windows / glass materials / eye tracking / natural shadows
辞典上の意味：表示面の内側ではなく、現実空間の距離・光・身体をUI構造へ組み込んだ。
関連：Glassmorphism / Minimalism
2025
Liquid Glass
全OS共通の動的素材 / iOS / iPadOS / macOS / watchOS / tvOS
周囲を反射・屈折し、内容や操作に応じて変形する透明素材を、ナビゲーションと操作層へ適用した。
refraction / adaptive translucency / dynamic shape / cross-platform language
辞典上の意味：Aqua、iOS 7、visionOSで培った透明・光・流動性を、Apple全体の共通言語として統合した。
関連：Glassmorphism / Skeuomorphism / Minimalism
Microsoft UIデザイン史
Windows 1.0からFluentとWindows 11まで。 各時代を孤立した見た目ではなく、前後の変化がわかる系譜として収録。
1985
Windows 1.0
タイル型GUI / Microsoft Windows
MS-DOS上に、重ならないウインドウ、メニュー、スクロールバー、標準アプリを導入した。
tiled windows / limited color / bitmap icons / MS-DOS shell
辞典上の意味：Windowsの基本部品を初めて一式にした出発点。
関連：Web 1.0 / Skeuomorphism
1990
Windows 3.0
Program Manager時代 / Microsoft Windows
立体的なボタン、16色アイコン、Program Managerで、業務用GUIを広く普及させた。
Program Manager / 16-color icons / beveled controls / gray chrome
辞典上の意味：PCの標準的なGUI像を形成した。
関連：Skeuomorphism / Web 1.0
1995
Windows 95
Startメニューとタスクバー / Microsoft Windows
Startボタン、タスクバー、デスクトップを一つの持続的なナビゲーション構造へまとめた。
Start menu / taskbar / desktop icons / Chicago-like gray UI
辞典上の意味：現在まで続くWindowsの操作骨格を確立した。
関連：Web 1.0 / Skeuomorphism
2001
Luna
Windows XPの外観 / Windows XP
青いタスクバー、緑のStartボタン、丸い角、明るい風景壁紙で、家庭向けの親しさを強めた。
saturated blue / rounded controls / glossy buttons / Bliss wallpaper
辞典上の意味：企業的な灰色UIから、感情的で消費者向けのOS表現へ転換した。
関連：Web 2.0 Gloss / Y2K
2006
Windows Aero
Vista / 7の透明UI / Windows Vista / 7
半透明ガラス、光、奥行き、ライブサムネイルと滑らかなアニメーションを採用した。
glass frames / blur / light streaks / live thumbnails
辞典上の意味：GPUによる合成を、OSの見た目と操作理解へ積極的に使った。
関連：Glassmorphism / Y2K / Web 2.0 Gloss
2010
Metro
Windows PhoneのタイポグラフィUI / Windows Phone 7
大きな文字、平面色、ライブタイル、画面外へ続く構成で、アイコン中心のUIから離れた。
bold typography / live tiles / flat color / content before chrome
辞典上の意味：iOS 7以前にフラットデザインをOS規模で提示した。
2017
Fluent Design
光・奥行き・動きの設計体系 / Windows / Microsoft products
Light、Depth、Motion、Material、Scaleを共通原則として、2D画面から複数デバイスへ広げた。
acrylic material / reveal light / connected motion / depth
辞典上の意味：Metroの平面性へ素材と空間を戻し、適応的なデザインシステムへ発展させた。
2021
Windows 11
中央配置と柔らかな形 / Windows
中央寄せのStart、角丸、Mica素材、簡略化したアイコンでFluentを日常的なデスクトップへ統合した。
centered taskbar / rounded corners / Mica material / soft geometry
辞典上の意味：従来のWindows構造を保ちながら、視覚密度を下げて現代化した。
関連：Glassmorphism / Minimalism
Googleデザイン言語史
検索画面、Android、Material Designの変化。 各時代を孤立した見た目ではなく、前後の変化がわかる系譜として収録。
1998
Google Search
検索だけを残したホーム画面 / Web
ロゴ、検索欄、二つのボタンを中心に、ポータルサイト全盛期とは逆の単純さを選んだ。
white space / single task / blue links / minimal chrome
辞典上の意味：機能を絞ること自体をブランド表現にした代表例。
関連：Minimalism / Web 1.0
2008
Android 1.0
オープンなスマートフォンUI / Android
通知ドロワー、ホーム画面ウィジェット、物理キーとタッチを組み合わせた。
status drawer / widgets / mixed input / utilitarian icons
辞典上の意味：iPhoneとは異なる拡張性と情報密度をモバイルUIの軸にした。
2014
Material Design 1
紙と光のデザイン言語 / Android / Web
紙のような面、階層を示す影、意味を運ぶモーション、強い色とグリッドを体系化した。
digital paper / elevation / meaningful motion / bold color
辞典上の意味：複数製品と開発環境を統一する、公開型デザインシステムの代表となった。
2018
Material Design 2
ブランド適応型Material / Google products / third-party apps
コンポーネントを拡充し、色・形・文字で各ブランドの個性を載せられる体系へ改良した。
theming / coded components / accessibility / brand flexibility
辞典上の意味：一つの見た目から、共通部品を使う多様な製品群へ方針を広げた。
2021
Material You / Material 3
個人適応するデザインシステム / Android / Google products
壁紙から生成する動的配色、大きく可変する形、表情豊かな文字と動きで、利用者ごとの差を取り込んだ。
dynamic color / personalization / expressive shape / adaptive components
辞典上の意味：一貫性を同一の見た目ではなく、変化を受け止める規則として再定義した。
関連：Generative Design / Flat Design / Vector Minimalism / Modular Type System
Webデザイン史
HTML文書からレスポンシブとデザインシステムまで。 各時代を孤立した見た目ではなく、前後の変化がわかる系譜として収録。
1991
The First Web
文書とリンクのWeb / World Wide Web
見出し、本文、箇条書き、リンクという文書構造だけで情報を結んだ。
semantic HTML / hyperlinks / browser defaults / document flow
辞典上の意味：Webを画面装飾ではなく、相互参照可能な文書として始めた。
関連：Web 1.0 / Minimalism
1993
Mosaic Era
画像が本文へ入ったWeb / Web browsers
テキストと画像を同じページに表示し、研究用ネットワークを一般向けの視覚媒体へ近づけた。
inline images / gray browser chrome / blue links / document layout
辞典上の意味：Webデザインに画像という主要素材を加えた転換点。
関連：Web 1.0 / Editorial Collage
1996
CSS
内容と見た目の分離 / Web
文書構造から色、文字、余白、配置を分離し、複数ページへ同じ視覚規則を適用可能にした。
style sheets / cascade / reusable rules / separation of concerns
辞典上の意味：Webサイトを継続的に設計・管理できる媒体へ変えた。
2004
Web 2.0 Era
参加型サービスと光沢UI / Web applications
グラデーション、反射、丸いボタンとともに、投稿・共有・更新され続けるサービスが増えた。
glossy controls / rounded tabs / social participation / AJAX
辞典上の意味：Webを読む文書から、常時操作するアプリケーションへ変化させた。
2010
Responsive Web Design
画面幅へ適応するWeb / Web
流動グリッド、柔軟な画像、メディアクエリにより、一つのページを複数画面へ適応させた。
fluid grids / media queries / flexible images / mobile first
辞典上の意味：固定幅のページから、環境に応じて再構成されるレイアウトへ移行した。
2014
Design System Era
部品と規則で運用するUI / Web / apps
コンポーネント、デザイントークン、アクセシビリティ規則を共有し、大規模製品を継続的に更新する。
components / design tokens / documentation / cross-team governance
辞典上の意味：完成画面ではなく、画面を生み続ける仕組みそのものをデザイン対象にした。