Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flat Desginの裏にあるもの
Search
nakajijapan
October 18, 2014
Design
2
23k
Flat Desginの裏にあるもの
Flat Designの背景で起きたこと、きっかけとなった歴史などキーワード別に話しました。
nakajijapan
October 18, 2014
Tweet
Share
More Decks by nakajijapan
See All by nakajijapan
サービスにおけるDesign Systemの構築
nakajijapan
10
3.7k
Markdownをリアルタイムに解析する
nakajijapan
5
4.4k
Firebase Authorization
nakajijapan
0
260
Intoducing Izumo
nakajijapan
1
1.9k
Practical CloudKit
nakajijapan
1
1.7k
Introducing to Ajimi - プロダクトを味見していこう
nakajijapan
0
2.2k
Shari
nakajijapan
1
2.7k
Japan Apple Pay Development
nakajijapan
0
270
業務で絶対必要にならない技術
nakajijapan
0
830
Other Decks in Design
See All in Design
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
7 Core Values of Round-L
wired888
0
150
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
1.2k
今日から意識できるアクセシビリティ
fumiko
0
250
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
480
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
180
CMS管理画面のアクセシビリティ
magi1125
7
2.1k
sachi_y_portfolio
sachi337
0
270
AIで加速するアクセシビリティのこれから
magi1125
3
560
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
2.1k
AI動画生成ガチャ紹介
piyo7
1
120
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
1.7k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Fireside Chat
paigeccino
37
3.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Raft: Consensus for Rubyists
vanstee
140
7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Transcript
J044XJGUΤϯδχΞษڧձˏϠϑʔ !OBLBKJKBQBO Flat Design ͷཪʹ͋Δͷ
!OBLBKJKBQBO 4PGUXBSF&OHJOFFS (.01&1"#0JOD J04.BD0498FC
None
J04"OESPJE ϋϯυϝΠυɺख࡞Γ࡞ͷ௨ൢɾൢചαΠτ NJOOF
৺ྶಈըΞϓϦ͏Ұ͝ཡ͍ͨͩ͜͏ IUUQPXLSJOGPNPWJF ৺ྶࣸਅΞϓϦ͓Θ͔Γ͍͚ͨͩͨͩΖ͏͔ IUUQPXLSJOGP J1IPOFήʔϜதౡਗ਼ہ GSVTUSBUJPONF IUUQWBDVVNOBLBKJKBQBOOFU IUUQGSVTUSBUJPONF
ൃදͷલʹ
Apple ͯ͠·͔͢ʁ
None
Jenkins
͏Ұͭʂ
ՆٳΈͷ՝Ͱ CloudKit ௐͯΈ·ͨ͠
https://speakerdeck.com/nakajijapan/introducing-cloudkit
ࠓ Flat Design ͷͰ͢
͋ͷ͍ͨΒͳ ͭͰ͠ΐʁ
ࠓFlat Designͱ Կ͔ͱ͍͏ΑΓ ͦͷഎܠྺ࢙తͳ ͷΛͯ͠ΈΑ͏ͱ ࢥ͍·͢….
Flat Design
Flat Design
• Grid • Typography • Minimalism Flat Design
• Skeuomorphism • Apple • Material Honesty • Minimalism Flat
Design
Skeuomorphism
Skeuomorphism ίϯϐϡʔλͷػೳʹରͯ͠ɺݱ࣮ʹ͋Δ࣮Λ ͦͷ··Πϝʔδͤ͞Δදݱํ๏
Skeuomorphism
Skeuomorphism
Skeuomorphism vs Flat
• ݱ࣮ੈքͷͷͱػೳͷΪϟοϓ • εϚϑΥͱͯ͠Ұ؟Ϩϑͱͯ͠ͷΧϝϥ • ܗଶ͕ػೳΛදݱ͠ͳ͍ • ਓͷशख़ • ֵ໋
-> ൟӫ Skeuomorphismͷݶք
Apple
• ϑϥοτσβΠϯͱ͍͍ͬͯͳ͍ • ͋͘·ͰʮίϯςϯπΛॏཁࢹͨ͠ʯσβΠϯ • Designing for iOS Apple
• Deference • Clarity • Depth Designing for iOS
• Deference • ߇͑ΊͰ͋Δ͜ͱ • Clarity • ໌ྎͰ͋Δ͜ͱ • Depth
• Ԟߦ͖͕͋Δ͜ͱ Designing for iOS
• UIʹͦͷ༰Λ͔Γ͘͢ද ࣔ͠ɺϢʔβͱΓऔΓ͢Δಇ͖ ͕͋Γ·͕͢ɺͦΕࣗͷํ͕ ཱͭΑ͏Ͱ͋ͬͯͳΓ·ͤΜɻ Designing for iOS Deference
• จࣈͲͷେ͖͞ͰಡΈ͘͢ɺ ΞΠίϯత֬໌ྎͰɺ০߇͑ ΊͰదɺ͞ΒʹͦͷػೳΛ໌֬ ʹද͢Α͏Ͱͳ͚ΕͳΓ·ͤΜɻ Designing for iOS Clarity
• ࢹ֮తͳॏͳΓຊΒ͍͠ಈ͖ ͕͋Δͱɺָ͔͠͞Γ͢͞ ্͕͠·͢ɻ Designing for iOS Depth
Material Honesty
Material Honesty ۀૉࡐʹ࣮Ͱ͋Δ͖ͩ
• ۀૉࡐʹ࣮Ͱ͋Δ͖ͩ • ੲʮ০ʯ͢Δ͜ͱͰػೳΛײ͡ͳͤ͘͞Δ͜ͱ͕ඒ ಙͩͬͨ • ʮܗଶػೳʹै͏ʯ • ߏͦͷͷͷඒ͕͠͞ධՁ͞Εͯ͘ΔΑ͏ʹͳΔ •
࣭ଞͷͳʹ͔Λ͢ΔΑΓɺͦΕࣗͰ͋Δ͖ͩ Material Honesty
Material Honesty φϙϨΦϯͷҜࢠ
Material Honesty ޫݯΛσΟεϓϨΠͷதͰදݱͨ͠ํ๏ ຊདྷͷσΟεϓϨΠͷදݱํ๏Ͱͳ͍ ྫɿޫݯ
Minimalism
• ඞཁ࠷ݶͷཁૉ͚ͩ͠ɺͯ͢Λഉআ͢Δ • ϢʔβͷҙࣝΛ࠷ॏཁͳ෦ʹϑΥʔΧεͤ͞Δ Minimalism
Minimalism International Klein Blue 191 (1962, Yves Klein) http://en.wikipedia.org/wiki/Yves_Klein
Minimalism എܠͰͳͯ͘ɺҰͭͷʮֆʯΒ͍͠Ͱ͢ɻɻɻ International Klein Blue 191 (1962, Yves Klein) http://en.wikipedia.org/wiki/Yves_Klein
·ͱΊ
·ͱΊ • εΩϡʔϞʔϑΟζϜͷݶք • ϑϥοτσβΠϯҰͭͷΞϓϩʔν • ਓʑͷਐԽशख़ʹΑͬͯσβΠϯมΘ͖ͬͯͨ • ίϯςϯπΛॏࢹͨ͠σβΠϯʹͳΓͭͭ͋Δʁ •
σβΠϯղܾ͢Δͷͬͯߟ͑ΔͱΘ͔Γ͍͢
ࢀߟจݙ ϑϥοτσβΠϯͷجຊϧʔϧ
ࢀߟจݙ • iOS Human Interface Guidelines • https://developer.apple.com/jp/devcenter/ios/library/ documentation/userexperience/conceptual/mobilehig/ DesigningForiOS7/DesigningForiOS7.html
5IBOLT