Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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.3k
<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
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
1k
これからの「Webデザイン」の話をしよう~デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値~
ds35mm
0
420
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
120
佐藤千晶|ポートフォリオ
chimi_chia
0
380
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
9
2.8k
What makes a great Director?
_limex_
0
350
CursorでAI活用のナレッジベースを構築する
kanzaki
0
1k
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
670
kintone_aroma
kintone
0
920
図じゃなく言語で描く - Common Ground for Design AI Operations.
kazukiikeda
1
520
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
mkasumi
0
980
Installing and Running decksh/pdfdeck
ajstarks
1
900
Featured
See All Featured
BBQ
matthewcrist
89
9.9k
Building Flexible Design Systems
yeseniaperezcruz
330
39k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
1k
How to Think Like a Performance Engineer
csswizardry
28
2.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
700
Become a Pro
speakerdeck
PRO
31
5.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.4k
A Modern Web Designer's Workflow
chriscoyier
698
190k
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 ͥͻ༡ΜͰͶ