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
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
180
Masked shaman-Storyboard 2025
ashley0521
0
160
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.7k
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
380
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
810
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
140
aya_murakami_portfolio
ayakaimi1101
0
1.1k
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
510
Rayout Pattern 01
one0
0
1.5k
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
430
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
140
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
570
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Embracing the Ebb and Flow
colly
84
4.6k
A Tale of Four Properties
chriscoyier
158
23k
Agile that works and the tools we love
rasmusluckow
328
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
What's in a price? How to price your products and services
michaelherold
244
12k
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