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
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
550
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
620
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.9k
portfolio.pdf
onof003
0
190
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
190
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
270
ユーザー像を「みてね」らしく可視化する 家族アルバムみてねUXリサーチチームの取り組み
mixi_design
PRO
1
210
decksh object reference
ajstarks
2
1.3k
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.5k
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
130
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
120
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Why Our Code Smells
bkeepers
PRO
339
57k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
BBQ
matthewcrist
89
9.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
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 ͥͻ༡ΜͰͶ