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
250
業務で絶対必要にならない技術
nakajijapan
0
780
Other Decks in Design
See All in Design
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4.1k
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
260
How to go from research data to insights?
mastervicedesign
0
210
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
600
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
0
190
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
230
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
110
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
580
実利の世界で、表現者である
kiyou77
2
400
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
250
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
280
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
1k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
230
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Fireside Chat
paigeccino
34
3.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
For a Future-Friendly Web
brad_frost
176
9.5k
How STYLIGHT went responsive
nonsquared
98
5.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
39
1.9k
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