{"id":"flat-design","no":32,"name":"Flat Design / Vector Minimalism","ja":"フラットデザイン / ベクターミニマリズム","era":"2010s–","family":"UI表現","essence":"情報を単純な面と色へ還元し、画面や媒体を越えて扱いやすくする。","cues":["均一な面","単純図形","少ない影","明快な色"],"intents":["信頼","親密","遊び"],"works":["説明を軽くわかりやすくしたい","一貫した大量の図版が必要"],"recipe":{"type":"丸みのあるサンセリフ","layout":"単純なシルエットと明確な階層","material":"3〜5色、影は意味のある場合のみ"},"avoid":"人物表現が画一化しやすい。固有の比率・線・色ルールをつくる。","colors":["#e9f1e4","#ef6651","#3a68a8"],"motif":"flat","pair":["mid-century","grunge"],"study":["Material Design","modern vector illustration"],"kind":"スタイル","collection":"btrax 50","source":{"title":"Nielsen Norman Group — Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users","url":"https://www.nngroup.com/articles/flat-design/"},"reference":{"status":"verified","pageUrl":"https://www.nngroup.com/articles/flat-design/","credit":"Nielsen Norman Group — Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users","gallery":[{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/Material%20Design.svg?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:Material%20Design.svg","credit":"Google《マテリアルデザインのUIコンポーネント》2015 — Wikimedia Commons / Public domain"},{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/Chemistry%20Class%20in%20School.jpg?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:Chemistry%20Class%20in%20School.jpg","credit":"Preply《Chemistry Class in School》2021 — Wikimedia Commons / CC BY 2.0"},{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/7-arrazoi-Zergatik-erabili-ikasgelan-software-librea-CEDEC.png?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:7-arrazoi-Zergatik-erabili-ikasgelan-software-librea-CEDEC.png","credit":"CEDEC《学校で自由ソフトウェアを使う7つの理由》インフォグラフィック 2018 — Wikimedia Commons / CC BY-SA 4.0"}]},"addedAt":"2026-08-16","en":{"essence":"Reduces information to plain planes and color, portable across screens and media.","cues":["Uniform planes","Simple shapes","Few shadows","Clear color"],"works":["Light, understandable explanation","Large sets of consistent figures"],"recipe":{"type":"A rounded sans-serif","layout":"Simple silhouettes and clear hierarchy","material":"Three to five colors; shadows only when they mean something"},"avoid":"Figures easily become generic. Define your own ratios, lines and color rules."},"links":{"page":"https://indexstyle.org/styles/flat-design","json":"https://indexstyle.org/api/styles/flat-design","designSpec":"https://indexstyle.org/styles/flat-design/design.md","imagePrompt":"https://indexstyle.org/styles/flat-design/prompt.txt"},"usage":{"license":"CC-BY-4.0","licenseName":"Creative Commons Attribution 4.0 International","licenseUrl":"https://creativecommons.org/licenses/by/4.0/","attribution":"IndexStyle — https://indexstyle.org","attributionUrl":"https://indexstyle.org","scope":"Original IndexStyle text and structured data. Reference images, quoted works, and third-party material are excluded and retain their own rights."}}