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
<form>があればゴルフもできる / If a <form> is there, you c...
Search
akwkm
June 27, 2023
Design
0
1.2k
<form>があればゴルフもできる / If a <form> is there, you can play golf.
https://tangolf.hatelabo.jp/
akwkm
June 27, 2023
Tweet
Share
More Decks by akwkm
See All by akwkm
いい感じのアニメーション研究会 / Good Feeling Animation Research Group
akwkm
0
1.9k
デザイングループのデザイン / Designing Design Organizations
akwkm
0
7.4k
Other Decks in Design
See All in Design
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
220
Liquid GlassとApp Intents
touyou
0
470
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
300
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
710
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
120
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
160
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
580
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
690
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
3
1.7k
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
580
「UXとUIの違い」v2
shirasu3
0
280
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
240
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
514
110k
RailsConf 2023
tenderlove
30
1.3k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Navigating Team Friction
lara
190
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Balancing Empowerment & Direction
lara
5
720
Making the Leap to Tech Lead
cromwellryan
135
9.6k
How GitHub (no longer) Works
holman
315
140k
Typedesign – Prime Four
hannesfritz
42
2.9k
Transcript
GPSN ͕͋Ε ΰϧϑ Ͱ͖Δ 🏆
None
None
୯ޠΛϕΫτϧԽ͠ ʮҙຯΛ͠Ҿ͖ʯͯ͠༡Ϳ ΰϧϑήʔϜ
͡·Γ
None
ΰϧϑͱԕ͗͢Δʜ
ΰϧϑͯ͠Δײ
ͯ͠Δײ 🎮
ը໘্ͷԿ͔Λૢ࡞Ͱ͖Δɻ ͨͩͦΕ͚ͩͰɺ ຊॏͨ͞Կͳ͍ͱ͜Ζʹ ੜཧײ֮Λ࡞Δɻ ʰࡩҪതͷήʔϜʹ͍ͭͯࢥ͏͜ͱʱΑΓ
ͯ͠Δײ ߦҝͱ֮ΛΈ߹ΘͤΔ͜ͱ Ͱٖࣅతͳମײ͕֮ಘΒΕΔ 🤜 💥
ಧ͘ ⛳ ඈͿ ଧͭ 🏌
ಧ͘ ඈͿ ଧͭ ݁Ռ͕දࣔ ૹ৴த ೖྗͯ͠ૹ৴
ଧͬͨײ 🏌
ϘʔϧΛଧͭ 🏌
ඈͿ ଧͭ ϘʔϧΛଧͭ ʴ ʔ
ൃࣹͨ͠Α͏ʹݟ͑Δ
͘ ଧͭ ʴ ʔ ඈͿ 💥 ϘʔϧΛଧͭ
JOQVUͰεΠϯά͢Δ @keyframes swing { 0% { transform: rotateX(0deg); } 80%
{ transform: rotateX(390deg); } 100% { transform: rotateX(360deg); } }
γϣοτͷಈ EFH EFH EFHΑΓ ༨ʹճసͤͯ͞ ͍ͯ͠Δ 💥
ଧͬͨײ φΠεγϣοτ
ඈΜͩײ
Ϙʔϧ͕ඈͿ 🏌 ⛳
Ϙʔϧ͕ඈͿ 🏌 ⛳ ඈڑ ߴ
@keyframes shot { 0% { transform: scale(180%) translateY(0); } 100%
{ transform: scale(0) translateY(-4000%); } } ೋ࣍ݩۭؒʹϘʔϧΛඈ͢
USBOTMBUF: USBOTMBUF: :࣠Ҡಈʹඈڑ
TDBMF TDBMF มഒʹٖࣅతͳߴ
TUBSU FOE BOJNBUJPOEVSBUJPO :࣠Ҡಈʷมഒ
ඈΜͩײ φΠεγϣοτ
ಧ͍ͨײ ⛳
Ϙʔϧ͕ಧ͘ ⛳
جͱඪͷؒʹ͋Δڑ Λೝࣝ͢Δ͜ͱͰʮಧ͘ʯײ֮ΛಘΔ 🏌 ⛳ Ϙʔϧ͕ಧ͘ ඪ
ࢹઢ͕͔͍͍͢ը໘தԝʹ γϯϘϧͱͯ͠ͷඪΛઃஔ ඪΛࣔ͢
ڑΛࢹ֮Խ͢Δ ඪ·ͰͷڑΛ ૬ରతʹදࣔ͢Δ͜ͱͰ ڑײΛ͔ͭΊΔΑ͏ʹ͢Δ
ඪ͕ઃఆ͞ΕΔ ͜Ε͘Β͍ Ε͍ͯΔ ͜͜ʹ ϘʔϧΛಧ͚Δ
෩ʹͨΊ͘ϐϯϑϥοά @keyframes flag { 0% { transform: scaleX(100%) skewY(0deg); }
20% { transform: scaleX(100%) skewY(-2deg); } 80% { transform: scaleX(96%) skewY(2deg); } 100% { transform: scaleX(100%) skewY(0deg); } }
ಈ͖ͷجʹϙʔϧଆ
USBOTGPSNPSJHJO DFOUFSMFGU ಈ͖ͷجʹϙʔϧଆ
:࣠ࣼʹ্Լͷಈ͖ USBOTGPSNPSJHJO DFOUFSMFGU TLFX: EFH TLFX: EFH
USBOTGPSNPSJHJO DFOUFSMFGU TLFX: EFH TLFX: EFH :࣠ࣼʹ্Լͷಈ͖
USBOTGPSNPSJHJO DFOUFSMFGU TLFX: EFH TLFX: EFH :࣠ࣼʹ্Լͷಈ͖
USBOTGPSNPSJHJO DFOUFSMFGU TDBMF 9࣠৳ॖʹલޙͷಈ͖
USBOTGPSNPSJHJO DFOUFSMFGU TDBMF 9࣠৳ॖʹલޙͷಈ͖
USBOTGPSNPSJHJO DFOUFSMFGU TDBMF TDBMF 9࣠৳ॖʹલޙͷಈ͖
ΧοϓΠϯ͢ΔϘʔϧ @keyframes cupIn { 0% { transform: translateY(0); } 20%
{ transform: translateY(-2px); } 50% { opacity: 1; transform: translateY(0px) scale(100%); } 100% { opacity: 0; transform: translateY(0px) scale(0); } }
TDBMF TDBMF มഒʹϘʔϧͷམԼ
ٵ͍ࠐ·ΕͨΑ͏ʹݟ͑Δ
ΧοϓΠϯͷϘʔϧͷಈ͖ ΧοϓͷͰਅԼʹམԼ͍ͯ͠Δ
ΧοϓΠϯͷϘʔϧͷಈ͖ ਐ͖ͯͨ͠Ϙʔϧʹ׳ੑ͕ಇ͘
TDBMF TDBMF USBOTMBUF: มഒʹϘʔϧͷམԼ USBOTMBUF: ׳ੑΛߟྀ͠
௨Γա͔͗ͯΒམԼͤ͞Δ
ಧ͍ͨײ φΠεγϣοτ
ΰϧϑײ 🏌🏌🏌
ಧ͘ ⛳ ඈͿ ଧͭ 🏌
ಧ͘ ⛳ ඈͿ ଧͭ 🏌 ଧͬͨײ0,
ಧ͘ ⛳ ඈͿ ଧͭ 🏌 ଧͬͨײ0, ඈΜͩײ0,
ಧ͘ ⛳ ඈͿ ଧͭ 🏌 ଧͬͨײ0, ඈΜͩײ0, ಧ͍ͨײ0,
ΰϧϑײ φΠεγϣοτ
·ͱΊ
ମײ֮Λઃܭ͢Ε GPSNΰϧϑʹͳΔ
IUUQTUBOHPMGIBUFMBCPKQ ͥͻ༡ΜͰͶ