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
6
3.5k
Markdownをリアルタイムに解析する
nakajijapan
4
4.3k
Firebase Authorization
nakajijapan
0
230
Intoducing Izumo
nakajijapan
1
1.8k
Practical CloudKit
nakajijapan
1
1.7k
Introducing to Ajimi - プロダクトを味見していこう
nakajijapan
0
2.1k
Shari
nakajijapan
1
2.6k
Japan Apple Pay Development
nakajijapan
0
260
業務で絶対必要にならない技術
nakajijapan
0
790
Other Decks in Design
See All in Design
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
66k
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3k
Personal Story Sequence - Vendetta(WIP)
elrns88
0
400
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
230
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
140
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
110
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
150
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
230
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
550
Masked shaman-Storyboard 2025
ashley0521
0
160
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
490
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6.2k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Become a Pro
speakerdeck
PRO
26
5.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Facilitating Awesome Meetings
lara
51
6.2k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
RailsConf 2023
tenderlove
29
1k
Building Adaptive Systems
keathley
40
2.4k
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