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
11
3.7k
Markdownをリアルタイムに解析する
nakajijapan
5
4.4k
Firebase Authorization
nakajijapan
0
270
Intoducing Izumo
nakajijapan
1
1.9k
Practical CloudKit
nakajijapan
1
1.8k
Introducing to Ajimi - プロダクトを味見していこう
nakajijapan
0
2.2k
Shari
nakajijapan
1
2.8k
Japan Apple Pay Development
nakajijapan
0
270
業務で絶対必要にならない技術
nakajijapan
0
830
Other Decks in Design
See All in Design
The Spectacular Lies of Maps
axbom
PRO
1
240
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
140
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.6k
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
2.5k
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
360
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
200
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
140
sachi_y_portfolio
sachi337
0
470
CMS管理画面のアクセシビリティ
magi1125
8
2.4k
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
270
デザイナー向けフライル説明資料
toshiblues
0
100
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
The Language of Interfaces
destraynor
159
25k
Bash Introduction
62gerente
614
210k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Building an army of robots
kneath
306
45k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
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