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.5k
Other Decks in Design
See All in Design
202409_会社概要資料_Englishver.pdf
zakkerooni
0
200
Commune_Brand_Guideline_JA
commune
1
150
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
4
790
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
1
480
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
2k
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
160
Night Shift (beginning sequence)
cpineda57
0
870
Slip N Slime - Character Design Ideation
thebogheart
0
300
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
140
ito aya|Portfolio2409
itoaya116
0
250
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
1
1.1k
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
460
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
4 Signs Your Business is Dying
shpigford
180
21k
GitHub's CSS Performance
jonrohan
1030
460k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
A Modern Web Designer's Workflow
chriscoyier
692
190k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Building an army of robots
kneath
302
42k
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