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.3k
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
250
理想のカラーパレットをもとめて / color-palette-name-convention
hiloki
2
7.8k
Other Decks in Design
See All in Design
ZKK_001.pdf
nicholaspegu
0
1.5k
How to go from research data to insights?
mastervicedesign
0
220
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
110
NAHO SHIMONO_Portfolio2025
nahohphp
0
120
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
810
Personal Story Sequence - Vendetta(WIP)
elrns88
0
400
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3k
最速[要出典]アクセシビリティチェック
magi1125
2
200
LLMによるRAG評価用合成テストデータの生成
licux
6
660
Les petites aventures de CSS, saison 2025
goetter
3
3.9k
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
330
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
360
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6.2k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
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