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
SwiftUI で Neumorphism!!!
Search
Ryo Tsuzukihashi
April 27, 2020
Programming
2
1.9k
SwiftUI で Neumorphism!!!
SwiftUIでのNeumorphsim の実装方法
ライブラリとアプリの紹介
Ryo Tsuzukihashi
April 27, 2020
Tweet
Share
More Decks by Ryo Tsuzukihashi
See All by Ryo Tsuzukihashi
AlarmKitで実現する 新時代のシステム通知
tsuzuki817
0
760
SwiftUI Transaction を徹底活用!ZOZOTOWN UI開発での活用事例
tsuzuki817
1
2.4k
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
3
1.1k
二次元コードを読み取りやすくするために 画面を強制的に明るくするのは もうやめにしませんか?👀
tsuzuki817
0
450
動画だけじゃない!iOS 15のピクチャ・イン・ピクチャを使って好きなUIを表示させよう!
tsuzuki817
3
5.2k
iOS 16からのロック画面Widget争奪戦に備える
tsuzuki817
2
1.1k
Complications and widgets: Reloadedの要約
tsuzuki817
1
1.3k
Speech framework tips
tsuzuki817
1
2.8k
Build complication in SwiftUI の要約
tsuzuki817
0
730
Other Decks in Programming
See All in Programming
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
990
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
2025年版 サーバーレス Web アプリケーションの作り方
hayatow
23
25k
CSC305 Lecture 03
javiergs
PRO
0
230
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
330
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
660
CSC509 Lecture 01
javiergs
PRO
1
430
開発生産性を上げるための生成AI活用術
starfish719
1
170
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
550
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
910
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
120
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.5k
Building an army of robots
kneath
306
46k
Typedesign – Prime Four
hannesfritz
42
2.8k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Code Reviewing Like a Champion
maltzj
525
40k
RailsConf 2023
tenderlove
30
1.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
3ZP5TV[VLJIBTIJ 4XJGU6*Ͱ/FVNPSQIJTN <0/-*/&>QPUBUPUJQT
w ࣗݾհ w /FVNPSQIJTNͱʁ w 4XJGU6*Ͱͷ࣮ݱํ๏ w ϥΠϒϥϦ࡞Γ·ͨ͠ w /FVNPSQIJTNσβΠϯΛదԠͨ͠ΞϓϦϦϦʔε
ΞδΣϯμ
!UTV[VLJ w :BIPP+"1"/৽ଔ w 1BZ1BZϑϦϚJ04։ൃ w झຯ ݸਓΞϓϦ։ൃ ແਓౡ։ ࣗݾհ
Nuemorphism!!!
/FVNPSQIJTNͱʁ w ৽͍͠ ʮεΩϡʔϞϑΟζϜʯ w ໌Δ͍ӨΛࠨ্ʹɺ҉͍ӨΛӈԼʹ͢Δ w ͳΜ͔৽ͯ͘͠ྑ͍☺ Neumorphism in
user interfacesΑΓ ˠͦͦεΩϡʔϞϑΟζϜͱʁ
εΩϡʔϞϑΟζϜͱʁ w ݱ࣮ͷ࣭ʹࣅͤͯɺ Ϣʔβʹͳ͡Έ͘͢͠ɺ ײతʹૢ࡞Λཧղͤ͞Δ͜ͱ͕Ͱ͖Δ J04 ౾UJQT ΪϦγΞޠͷʮTLFPVTʯ ೖΕ
ͱʮNPSQIÊʯ ܗ ͱݴ͏୯ޠ͔Β࡞ΒΕͨΒ͍͠ɻ
4XJGU6*ͰͲ͏࣮͢Δͷ͔ʁ w $PMPSͷ&YUFOTJPOͰϕʔεͷΧϥʔίʔυΛड͚औΔ $PMPS IFYl$%&#z w ϕʔεͷًͷΈΛม͑ͨͷͰ ӨΛ࡞Δ w
4XJGU)4#ͷΈରԠ w IFY3(#")4-")4# /FVNPSQIJTN 4PGU6* JO6TFSJOUFSGBDFEFTJHO5VUPSJBMΑΓ /FVNPSQIJTNྩ࣌ͷεΩϡʔϞʔϑΟζϜ @touyoubuntu
Ͳ͕ͬͪ/FVNPSQIJTN ౾UJQT ِ/FVNPSQIJTNʹҙʂ /FVNPSQIJTNനͱࠇͷӨΛ͚ͭΕྑ͍ͱݴ͏ Θ͚Ͱແ͍ͷͰ͢ɻ
4XJGU6*ͰͲ͏࣮͢Δͷ͔ʁ TIBEPX DPMPSSBEJVTYZ ;4UBDL\ $PMPS IFY$%&# FEHFT*HOPSJOH4BGF"SFB BMM $JSDMF
pMM $PMPS IFY$%&# GSBNF XJEUI IFJHIU TIBEPX DPMPS$PMPS IFY$%&# EBSLFS$PMPS SBEJVT Y Z TIBEPX DPMPS$PMPS IFY$%&# MJHIUFS$PMPS SBEJVT Y Z ^ ͍͢͝؆୯ʂ ͚ͩͲɺͬͱศརʹ͍ͨ͠ʂ
ϥΠϒϥϦ࡞Γ·ͨ͠ let neumorphism = NeumorphismManager( isDark: false, lightColor: Color(hex: “C1D2EB"),
darkColor: Color(hex: "2C292C") ) let contentView = ContentView() .environmentObject(neumorphism) import NeumorphismUI ZStack { neumorphism.color.edgesIgnoringSafeArea(.all) Circle() .fill(neumorphism.color) .frame(width: 200, height: 200) .neumorphismShadow() } 4DFOF%FMFHBUF $POUFOU7JFX ࣮࣭͜ͷߦʹूʂ
ϥΠϒϥϦ࡞Γ·ͨ͠ extension View { func neumorphismShadow() -> some View {
self.modifier(NeumorphismShadowModifier()) } } 7JFX.PEJpFSͷ func body(content: Self.Content) -> Self.Body func body(content: Content) -> some View { content .shadow(color: darkShadowColor, radius: radius, x: x, y: y) .shadow(color: lightShadowColor, radius: radius, x: -x, y: -y) }
ϥΠϒϥϦ࡞Γ·ͨ͠
/FVNPSQIJTNσβΠϯΛదԠͨ͠ΞϓϦϦϦʔε #FGPSF "GUFS #PPL#BOL
GJO ࢀߟ63- https://note.com/hironobukimura/n/n0431c73714e8 https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6 https://qiita.com/touyoubuntu/items/bf887093ec7265efe201 https://qiita.com/MasasaM_shi/items/4b86622bd95fd48deb76 ࡞ͬͨϥΠϒϥϦ(ϓϧϦΫͬͯ·͢ʂʂʂ) https://github.com/tsuzukihashi/NeumorphismUI ϦϦʔεͨ͠ΞϓϦ(ΞυόΠεͬͯ·͢ʂʂʂ) https://apps.apple.com/jp/developer/ryo-tsudukihashi/id1320583602?l