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.2k
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
240
理想のカラーパレットをもとめて / color-palette-name-convention
hiloki
2
7.3k
Other Decks in Design
See All in Design
Sci-Fi: Descenso
elrtovar
0
200
Sunny Day Storyboard
ctagulao98
0
190
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.7k
PdMというキャリアがUXデザイナーの頭によぎったとき スポットライトをどう当て、 どうシステムを見つめるか
muture
0
490
accfes2024_torque_yamasaki
yuuyamasakiyuu
2
710
企業やプロダクトにおける "らしさ"を分析する | UXリサーチャー/デザイナーはもっとAIを触って欲しいシリーズ
iflection
0
220
Baby Bear Genius
yvonnehsuanho
PRO
0
600
Les petites aventures de CSS, saison 2024
goetter
2
3.7k
For My Dad- teaser
pdqsketch
PRO
0
170
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
1.3k
UXデザイナーが肩書きの私がいまUXデザインにそんなに興味がない理由 #uxd2024(字幕入り配布版)
versionfive
7
2k
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
9.1k
Featured
See All Featured
Unsuck your backbone
ammeep
666
57k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Designing with Data
zakiwarfel
96
5k
Bash Introduction
62gerente
607
210k
Documentation Writing (for coders)
carmenintech
63
4.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Infographics Made Easy
chrislema
238
18k
Designing the Hi-DPI Web
ddemaree
276
34k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Automating Front-end Workflow
addyosmani
1362
200k
How to Think Like a Performance Engineer
csswizardry
4
590
Web development in the modern age
philhawksworth
203
10k
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