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
マイクロインタラクションから考えるアニメーション
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
KeitaroOkamura
August 24, 2018
Design
300
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
マイクロインタラクションから考えるアニメーション
KeitaroOkamura
August 24, 2018
More Decks by KeitaroOkamura
See All by KeitaroOkamura
Suspenseのユースケースを探る
keitarookamura
1
320
ヤギでもわかるソフトウェアテスト
keitarookamura
0
140
ヤギでもわかるオブジェクト指向UIデザイン
keitarookamura
3
320
ヤギでもわかるGit入門
keitarookamura
1
280
ユースケースから考えるユーザビリティ
keitarookamura
1
230
サクッと簡単!お手軽 Scaffold
keitarookamura
1
320
自社サイトをPWA化した話
keitarookamura
0
130
CSS Animations vs WAAPI
keitarookamura
0
540
Vue.js+AtomicDesign
keitarookamura
2
2.8k
Other Decks in Design
See All in Design
つくり方を変えていく | change-how-we-build
mottox2
2
1.4k
図面資産×AI 眠れる資産を起こす挑戦
aonomasahiro
0
170
Accelerating performance improvement based on a software review evaluation matrix
kitanosirokuma
0
260
もう迷わない!“なんとなく”を卒業するフォントの選び方【村田俊英】
toshihidemurata
0
750
「使いやすさ」だけでは、「勝てる」サービスにはならない。〜KPIとUXの分断を埋める、サービス戦略という「指針」〜
nbkouhou
2
480
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
saka2jp
2
1.3k
Drawing for Animation
lynteo
2
310
Signull 団体説明資料
signull
0
700
Saving_the_King_-_Storyboard.pdf
terencebasart
0
140
染み出し好きの、 染み出しコントロール論
mukai_takeru
0
180
Figma MCPを活用するためのデザインハンドブック
vivion
8
19k
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは?~操作を減らし、成果を最大にするための設計~
ncdc
1
690
Featured
See All Featured
Unsuck your backbone
ammeep
672
58k
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.7k
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
470
Measuring & Analyzing Core Web Vitals
bluesmoon
9
880
RailsConf 2023
tenderlove
30
1.5k
Writing Fast Ruby
sferik
630
63k
Believing is Seeing
oripsolob
1
170
The Invisible Side of Design
smashingmag
301
52k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
2k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
2.1k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
200
Transcript
ϚΠΫϩΠϯλϥΫγϣϯ ͔Βߟ͑Δ Ξχϝʔγϣϯ 6*ΠϯλϥΫγϣϯɾΞχϝʔγϣϯ-5େձ
ࣗݾհ ,FJUBSP0LBNVSB ΧϥϏφςΫϊϩδʔגࣜձࣾ 'SPOUFOE&OHJOFFS ϑϩϯτΤϯυΤϯδχΞੜ @karaagekeitaroo
%BO4BGGFSஶʮϚΠΫϩΠϯλϥΫγϣϯʕʕ6*69σβΠϯͷਆ͕॓Δࡉ෦ʯ 03FJMMZ+BQBO ࠓͷ༰
ɾʮ͜Εࡉ͔͍͜ͱ͚ͩΕͲվྑ͢ΔՁ ͕ઈରʹ͋Δʂʂʂʯ ɾʮ͜ΕΛվળ͢Ε͕֨ஈʹΑ͘ͳ Δʂʂʂʯ ͱओுͯ͠ɺ ΫϥΠΞϯτ։ൃऀཧऀɺ1.Λઆಘ͠Α͏ͱۤ৺͖ͯͨ͠ਓ ͜Μͳํ͍·ͤΜ͔ʁ
%BO4BGGFSஶʮϚΠΫϩΠϯλϥΫγϣϯʕʕ6*69σβΠϯͷਆ͕॓Δࡉ෦ʯ 03FJMMZ+BQBO ͥͻಡΜͰ Έ͍ͯͩ͘͞
ϚΠΫϩΠϯλϥΫγϣϯͬͯԿʁ ϚΠΫϩΠϯλϥΫγϣϯͱʮͷ࠷খ୯ҐͷΠϯλ ϥΫγϣϯʯͱఆٛ͞Ε͍ͯΔɻ ͱͯখ͞ͳΓͱΓ
ΞϥʔτΛηοτ⏰ ύεϫʔυΛೖྗ✏ ϩάΠϯ͢Δ✅ ʮ͍͍Ͷʂʯ ϘλϯΛԡ͢ ୭͕ϚΠΫϩΠϯλϥΫγϣϯΛ ৗతʹߦͳ͍ͬͯΔ
“ ࡉ෦୯ͳΔࡉ෦ʹͱͲ·Γ·ͤΜɻࡉ෦ ͕ͦ͜Λ࡞Γ্͛ΔͷͰ͢” νϟʔϧζɾΠʔϜζ
τϦΨʔ ϧʔϧ ϧʔϓϞʔυ ϑΟʔυόοΫ ϚΠΫϩΠϯλϥΫγϣϯͭͷߏ
τϦΨʔ ϧʔϧ τϦΨʔϚΠΫϩΠϯλϥΫγϣϯΛ։࢝ͤ͞Δ͖͔͚ͬ ϚΠΫϩΠϯλϥΫγϣϯͷಈ࡞Λఆٛ͢ΔϧʔϧɻͲΜͳ࣌ʹɺԿΛରʹɺ ͲΜͳτϦΨʔͰΠϯλϥΫγϣϯ͕࢝·ΓɺͲͷΑ͏ʹϑΟʔυόοΫͤ͞ Δ͔ खಈτϦΨʔ γεςϜτϦΨʔ εϥΠυ͢Δ͜ͱͰ ిݯΛΔ
ॆి͕ҎԼʹͳΔ ͱɺলిྗϞʔυʹ Γସ͑Δ͔ΘΕΔ
ϑΟʔυόοΫ ϧʔϓϞʔυ ϧʔϧΛϢʔβʔʹ໌ࣔ͢ΔϑΟʔυόοΫɻϢʔβʔͷཧղΛॿ͚Δࢹ֮తɺ ௌ֮తɺ৮֮తͳཁૉ ϚΠΫϩΠϯλϥΫγϣϯͷϝλϧʔϧʢϧʔϧΛ੍ޚ͢Δϧʔϧʣ ϧʔϓͱɺఆΊΒΕ͚ͨؒͩ܁Γฦ͢αΠΫϧɻϞʔυͱϧʔϧ͕ೋވҎ ্ʹͳͬͨͷ ॆి͕ྃ͢ΔͱϞʔυ͕ऴྃ͢Δ
ϑΟʔυόοΫ ϧʔϓϞʔυ ϧʔϧΛϢʔβʔʹ໌ࣔ͢ΔϑΟʔυόοΫɻϢʔβʔͷཧղΛॿ͚Δࢹ֮తɺ ௌ֮తɺ৮֮తͳཁૉ ϚΠΫϩΠϯλϥΫγϣϯͷϝλϧʔϧʢϧʔϧΛ੍ޚ͢Δϧʔϧʣ ϧʔϓͱɺఆΊΒΕ͚ͨؒͩ܁Γฦ͢αΠΫϧɻϞʔυͱϧʔϧ͕ೋވҎ ্ʹͳͬͨͷ ॆి͕ྃ͢ΔͱϞʔυ͕ऴྃ͢Δ
%BO4BGGFSஶʮϚΠΫϩΠϯλϥΫγϣϯʕʕ6*69σβΠϯͷਆ͕॓Δࡉ෦ʯ 03FJMMZ+BQBO ৄ͘͠ ͪ͜Β
ɾԿ͔͕ى͖ͨ ɾϢʔβʔ͕Կ͔Λ࣮ߦͨ͠ ɾॲཧ͕࢝·ͬͨPSଓߦதPSऴྃͨ͠ ɾϢʔβʔʹʮͦΕͰ͖ͳ͍ʯͱΒͤΔ ϑΟʔυόοΫͰ͑Δ͜ͱ
͍͑ͨࣄฑ͕͖ͬΓͨ͠Βɺ ͦΕΛͲ͏දݱ͢Δ͔ΛܾΊ·͢ දݱ͢Δํ๏
ɾϑΟʔυόοΫͷେࢹ֮తͳͷ͕ଟ͍ ɾٿ্ͰࣈΛಡΊͳ͍ਓͷԯ ສਓ͍Δ ϑΟʔυόοΫΛࢹ֮తʹૌ͑Δํ ๏ɺͦΕ͕Ξχϝʔγϣϯɻ ΞχϝʔγϣϯΛ͏·͑͘ɺؔ৺ΛҾ͖ͭͭɺ ҙຯਖ਼֬ʹ͑Δ͜ͱ͕Ͱ͖Δ
ɾߴ ɾಈ࡞ΛԆͤ͞ͳ͍ ɾΒ͔ ɾ͗͘͠Όͨ͘͠ಈ͖ΞχϝʔγϣϯͷޮՌΛແ͠ʹͯ͠͠·͏ ɾࣗવ ɾॏྗ׳ੑͳͲࣗવͷ๏ଇʹै͍ͬͯΔΑ͏ʹݟ͑Δ ΞχϝʔγϣϯͰ͔ܽͤͳ͍͜ͱ ϚΠΫϩΠϯλϥΫγϣϯͷಈ࡞͕ෆ҆ఆͰ͋Δ͔ͷΑ ͏ͳҹΛ༩͑ͯ͠·͏
ɾγϯϓϧ ɾਤ͕Θ͔Γ͍͢ ɾత͕͋Δ ɾ୯ͳΔʮͷอཆʯʹͱͲ·Βͳ͍ ΞχϝʔγϣϯͰ͔ܽͤͳ͍͜ͱ Ϣʔβʔʹෛ୲Λ͔͚ͨΓɺϑΟʔυόοΫ͕త֎Εͳ ͷͰ͋ͬͯͳΒͳ͍
ϑΟʔυόοΫ ͷత ϧʔϧͷཧղΛ ॿ͚Δ͜ͱ ͭ·Γɾɾɾ
ϚΠΫϩΠϯλϥΫγϣϯͷϧʔϧΛϢʔβʔʹཧղͯ͠Β͏͜ͱ ɾԿ͕ߦΘΕ͔ͨ ɾͦͷ݁Ռͱͯ͠Կ͕ى͖͔ͨ Ξχϝʔγϣϯͤ͞Δత
ϚΠΫϩΠϯλϥΫγϣϯͷߏ͕Ͳ͏ͳ͍ͬͯΔ͔ɺ Կʹͨ͠ΒΑ͍ͷ͔ɺͲͷΑ͏ͳॲཧΛ͍ͯ͠Δ͔ ࠷ྑͷΞχϝʔγϣϯͱʁ ͦͷಈ͖ΛݟΕɺ Ͳ͏ػೳ͢Δ͔Λత֬ʹϢʔβʔʹ͍͑ͯΔ͜ͱ ʲ݁ʳ
%BO4BGGFSஶʮϚΠΫϩΠϯλϥΫγϣϯʕʕ6*69σβΠϯͷਆ͕॓Δࡉ෦ʯ 03FJMMZ+BQBO ৄ͘͠ ͪ͜Β
ྑ͍ΞχϝʔγϣϯΛ