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 can play golf.
Search
akwkm
June 27, 2023
Design
0
870
<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.5k
デザイングループのデザイン / Designing Design Organizations
akwkm
0
6.7k
Other Decks in Design
See All in Design
Designship 2023|想いを可視化するデザインの力
weddingpark
0
250
丸井グループが取り組むエンタープライズアジャイルと プロダクトマネージャーの役割
muture
0
210
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
370
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.8k
3D空間を扱うUI表現とユーザビリティ
akinen
0
460
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
240
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
180
デザインシステムで解消するさまざまな分断
hirataaa0220
1
170
実務のための マイクロ インタラクション入門
shingo2000
0
370
UX/UI改善に貢献するユーザーテストとは? 基礎知識から実施のプロセスまで解説
ncdc
0
340
1人歩きする営業資料作成
yutoshukuya
2
150
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
400
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
331
56k
How STYLIGHT went responsive
nonsquared
92
4.8k
Teambox: Starting and Learning
jrom
128
8.4k
Designing for humans not robots
tammielis
248
25k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
14
1.5k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
How to name files
jennybc
65
93k
Code Review Best Practice
trishagee
56
15k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
13
8.3k
Side Projects
sachag
451
41k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
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 ͥͻ༡ΜͰͶ