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
SPA/PWA時代のWebデザインのお作法 / Stateful Web Design
Search
hiloki
February 15, 2020
Design
10
3.4k
SPA/PWA時代のWebデザインのお作法 / Stateful Web Design
DIST.31 「DIST 6周年記念イベント」
hiloki
February 15, 2020
Tweet
Share
More Decks by hiloki
See All by hiloki
私はいかにしてUXエンジニアになったのか / ux_engineer_meetup
hiloki
4
17k
理想のカラーパレットをもとめて / color-palette-name-convention-at-wic
hiloki
3
260
理想のカラーパレットをもとめて / color-palette-name-convention
hiloki
2
8.1k
Other Decks in Design
See All in Design
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
380
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
Installing and Running decksh/pdfdeck
ajstarks
1
830
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
220
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
100
AI動画生成ガチャ紹介
piyo7
1
200
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
160
minpaku-community-scrum-patterns
norinity1103
1
230
#Dubois Challenge 2025: Economics
ajstarks
0
160
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
UXデザインはなぜ定着しないのか?
designstudiopartners
0
900
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
360
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Documentation Writing (for coders)
carmenintech
73
5k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Agile that works and the tools we love
rasmusluckow
329
21k
RailsConf 2023
tenderlove
30
1.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
4 Signs Your Business is Dying
shpigford
184
22k
A better future with KSS
kneath
239
17k
GitHub's CSS Performance
jonrohan
1031
460k
Transcript
2020.02.15 DIST.31 HIROKI TANI 18"儗➿ך8FCرؠ؎ٝךֶ⡲岀 41"
None
Web App
͑͜ͷϒϩά
CyberAgent, Inc. UX Engineer / Developer Experts Hiroki Tani
PWA Progressive Web Apps
Progressive Web Apps | Google Developers Reliable ⥋걾䚍 Fast 鸞ׁ
Engaging ؒٝ٦آ
App ؔؿٓ؎ٝ فحءُ鸐濼 杝甧׃6* ؙٔٝ〳腉 涪鋅䚍 ؎ٝأز٦ٕ♶銲 ˟أز،ַךتؐٝٗ٦سה؎ٝأز٦ٕ ˟ Web
+
SPA Single Page Application
HTML ϦΫΤετ Ϩεϙϯε
JSON ex. ϦΫΤετ Ϩεϙϯε
SPA PWA
ꨇ׃ְֿהְכ䘌ת׃׳ֲ
朐䡾䭯א8FCرؠ؎ׅٝ Design for “Stateful Web”
How to fix a bad user interface
UIσβΠϯͷόάΛݮΒͨ͢Ίͷࢪࡦ : could
UI Stack 瑞涯 铣鴥 鿇ⴓ涸 ؒٓ٦ 椚䟝
UI Stack 瑞涯 铣鴥 鿇ⴓ涸 ؒٓ٦ 椚䟝 ֿֿח鸐濼ָ 邌爙ׁתׅ !
UI Stack 瑞涯 铣鴥 鿇ⴓ涸 ؒٓ٦ 椚䟝 鸐濼כ֮תׇ "
UI Stack 瑞涯 铣鴥 鿇ⴓ涸 ؒٓ٦ 椚䟝
瑞涯 铣鴥 鿇ⴓ涸 ؒٓ٦ 椚䟝 UI Stack
瑞涯 铣鴥 鿇ⴓ涸 ؒٓ٦ 椚䟝 UI Stack
瑞涯 铣鴥 鿇ⴓ涸 ؒٓ٦ 椚䟝 UI Stack ل٦آָ 鋅אַתׇ #
瑞涯 铣鴥 鿇ⴓ涸 ؒٓ٦ 椚䟝 UI Stack 铣鴥㣟侁 $
瑞涯 铣鴥 鿇ⴓ涸 ؒٓ٦ 椚䟝 UI Stack
չ㛇劤涸ח⦐ד㣐♱㣗דׅպ 㣐♱㣗ׄׯזְ
None
☠ Layout shift & Fixed Ξϝϒϩ2016 ~ React/ReduxͰͭ͘ΔIsomorphic web app
~
UI Stack 瑞涯 铣鴥 鿇ⴓ涸 ؒٓ٦ 椚䟝
Google χϡʔε
None
None
None
ٗ٦ر؍ؚٝرؠ؎ׅٝ וֲ䖉ַׇ
None
None
䞔㜠ך《䖤ח儗ַַָגְתׅ˘
Loading cat by domaso on Dribbble
Progress indicators - Material Design
Loading – Carbon Design System
None
None
WinTicket(Οϯνέοτ)
window.addEventListener( “offline", function(e){console.log("offline");} ); window.addEventListener( “online", function(e){console.log("online");} );
Network ؔؿٓ؎ٝ ⡚鸞橆㞮 鸞䏝ⵖꣲ ر٦ةإ٦ـ %
Technology Feature
None
ύʔϛογϣϯͷ UX | Web Fundamentals | Google Developers
رؠ؎ش٦ך罋ִֿה㢳ֻזְ رؠ؎ٝה׃ג
Design Engineering
Design System
Jesse James Garrett 劤䔲ך؝ٓنٖ٦ءّٝהכ رؠ؎ٝ㠖馉׃ח䫎־ֿהדכ֮תׇկ כرؠ؎ش٦ծؒٝآص،ծ ך➭ךث٦يًٝغ٦ד 넝ㅷ颵ךفٗتؙز 圓眠ׅ顑⟣Ⱏ剣ֿׅהדׅɻ How
to empower designers to code ― Diana Mounter, GitHub
Thank you @hiloki Special thanks: @shiba_mamehiko