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
22k
Flat Desginの裏にあるもの
Flat Designの背景で起きたこと、きっかけとなった歴史などキーワード別に話しました。
nakajijapan
October 18, 2014
Tweet
Share
More Decks by nakajijapan
See All by nakajijapan
サービスにおけるDesign Systemの構築
nakajijapan
6
3.2k
Markdownをリアルタイムに解析する
nakajijapan
4
4.1k
Firebase Authorization
nakajijapan
0
180
Intoducing Izumo
nakajijapan
1
1.6k
Practical CloudKit
nakajijapan
1
1.5k
Introducing to Ajimi - プロダクトを味見していこう
nakajijapan
0
1.9k
Shari
nakajijapan
1
2.5k
Japan Apple Pay Development
nakajijapan
0
230
業務で絶対必要にならない技術
nakajijapan
0
680
Other Decks in Design
See All in Design
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
500
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
570
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
970
#コムデナ vol.2 「初めてのデザインカンファレンス協賛!共有したい3つのやらかし」
kiyoshifuwa
1
340
MiKS inc. Company PR en_202404
zakkerooni
0
220
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
790
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
610
Ride or Die Animatics
warwatkar
0
140
The Fight
euralisw
0
120
文化に寄りそうデザイン
recruitengineers
PRO
4
920
顕在化されていない期待、デザインの灯台
daitorii
1
1.1k
TrollsTopia: Funtography- Part 1
kenijam
1
220
Featured
See All Featured
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Agile that works and the tools we love
rasmusluckow
325
20k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Infographics Made Easy
chrislema
238
18k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
66
14k
Happy Clients
brianwarren
92
6.4k
Adopting Sorbet at Scale
ufuk
69
8.6k
Debugging Ruby Performance
tmm1
70
11k
The Invisible Customer
myddelton
114
12k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
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