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
UI/UXをないがしろにしない「きもちのいい」Webサービスの作り方
Search
Tsubasa SEKIGUCHI
PRO
December 07, 2022
Programming
0
110
UI/UXをないがしろにしない「きもちのいい」Webサービスの作り方
Gunma.web #42
Tsubasa SEKIGUCHI
PRO
December 07, 2022
Tweet
Share
More Decks by Tsubasa SEKIGUCHI
See All by Tsubasa SEKIGUCHI
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
tinykitten
PRO
0
44
AWS/GCPで始める 生成AI入門
tinykitten
PRO
0
45
Rustとtonicで始める gRPC入門(GENIEE Edit)
tinykitten
PRO
0
1
スモールスタートで始める フィードバック管理システム開発入門
tinykitten
PRO
0
240
Rustとtonicで始める gRPC再入門
tinykitten
PRO
0
550
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
PRO
0
210
ノンデザイナーが 多少マシな見た目の資料を作る方法
tinykitten
PRO
0
160
はじめての GitHub Actionsアクション開発
tinykitten
PRO
0
110
React Nativeではじめる ハイパフォーマンス スマホアプリ開発
tinykitten
PRO
0
91
Other Decks in Programming
See All in Programming
Workflow automationによるインシデント原因調査の自動化
showwin
1
100
(Deep|Web) Link support with expo-router
mrtry
0
190
MLOps in Mercari Group’s Trust and Safety ML Team
cjhj
1
130
Going Staff - Keynote edition
pragtob
0
340
モジュラモノリス、その前に / Modular monolith, before that
euglena1215
8
750
Повторное использование кода в ML: почему ML-пайплайны могут помочь?
lamodatech
0
370
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
390
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
140
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
7
1.9k
CSC509 Lecture 04
javiergs
PRO
0
160
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
220
本編では話さない Zig の話
andpad
2
120
Featured
See All Featured
Code Review Best Practice
trishagee
63
17k
Building Applications with DynamoDB
mza
90
6k
Code Reviewing Like a Champion
maltzj
519
39k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Happy Clients
brianwarren
97
6.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Faster Mobile Websites
deanohume
304
30k
Making Projects Easy
brettharned
115
5.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
40
2.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
23k
Transcript
UI/UXΛͳ͍͕͠Ζʹ͠ͳ͍ ʮ͖ͪͷ͍͍ʯWebαʔϏεͷ࡞Γํ Head fi rst UX- fi rst web development
Photo by cottonbro on Pexels Gunma.web #42 ϓϩδΣΫτཧ(πʔϧؚΉ) 2021.8.21 @ Online Tsubasa SEKIGUCHI
TinyKitten Freelance frontend engineer I 💖 Open source & Cat🐈
Born in Gunma🐴 Live in Tokyo🗼
Tsubasa SEKIGUCHI ϑϦʔϥϯεͷϑϩϯτΤϯυΤϯδχΞɻࣾͰͳ͍Ͱ͢ɻ ͖ͬͨΜͱݺΕ͍ͯ·͢ɻ ϓϩμΫτཧπʔϧZenHub͕͖Ͱ͢
TrainLCD ຊશࠃͷమಓ࿏ઢͰ͑Δ ৽ײ֮ͷφϏήʔγϣϯΞϓϦͰ͢ɻ
͜ͷεϥΠυɺ3FBDUKTͰϓϩμΫτΛ ։ൃ͍ͯ͠Δ͜ͱΛલఏͱ͍ͯ͠·͢ɻ ͓͜ͱΘΓ
ΤϯδχΞࢹͰ 6*69σβΠϯɺॱௐͰ͔͢ʁ
࣮ɺ͜Μͳ๊͑ͯ·ͤΜ͔ʁ σβΠφʔͱ িಥ͕ى͖Δʜ σβΠϯΛ࣮ʹ ࠶ݱͰ͖ͳ͍ ͳ͔ͥΞϓϦ͕ ͍ͮΒ͍ʜ
͜ΕΒͷɺ ਓྗͰͳ͘πʔϧͰղܾ͠·͠ΐ͏ʂ σβΠφʔͱ িಥ͕ى͖Δʜ σβΠϯΛ࣮ʹ ࠶ݱͰ͖ͳ͍ ͳ͔ͥΞϓϦ͕
͍ͮΒ͍ʜ
ͨͱ͑ʜ
Case 1 σβΠφʔͱিಥ͕ى͖Δʜ
σβΠφʔͱিಥ͕ى͖Δʜ σβΠφʔʮ͜ͷ࣮ͯ͠ΒͬͨσβΠϯɺ QYӈʹͣΕͯΔΜͰ͚͢Ͳɺमਖ਼ͯ͠Β͑·͔͢ʁʯ ΤϯδχΞʮʁͦΜͳͣͳ͍ʜʯ
σβΠφʔͱিಥ͕ى͖Δʜ QYͷζϨͰ࠷ॳʹσβΠφʔʹ ݕͯ͠Β͏ʹͲ͏͢Ε͍͍ΜͩΖ͏ʁ
σβΠφʔͱিಥ͕ى͖Δʜ StorybookΛ͏ͱɺ 6*ίϯϙʔωϯτ୯ҐͰσβΠϯΛ֬ೝͰ͖·͢ʂ
িಥ͕ى͖ΔͳΒɺ4UPSZCPPLΛ͓͏ Storybookͷಛ: - UIίϯϙʔωϯτΛ ϒϥβͰ֬ೝͰ͖Δ - PropsΛͯ͠ಈ࡞ΛݟͨΓ ΫϦοΫޙͷڍಈΛ֬ೝͰ͖Δ - ReactҎ֎ʹ͍Ζ͍Ζͳ
ϑϨʔϜϫʔΫʹରԠ
σβΠφʔͱিಥ͕ى͖Δʜ σβΠφʔʮ4UPSZCPPLݟͨΜ͚ͩͲɺ ɹɹɹɹɹɹ͍͍ײ͡ʹ࣮Ͱ͖ͯͯخ͍͠Αʂʯ ΤϯδχΞʮΑ͔ͬͨͰ͢ʂʯ
িಥ͕ى͖ΔͳΒɺ4UPSZCPPLΛ͓͏ Pro Tips: - ࣮ɺσβΠϯσβΠφʔ͚ͩͷࣄͰͳ͍͔͠Ε·ͤΜɻ ΑΓྑ͍ϓϩμΫτ։ൃͷͨΊʹɺࣗ͝σβΠϯΛษڧͯ͠ΈΔͱɺ ͬͱੈք͕͕Δ͔͠Ε·ͤΜ😲
Case 2 ͳ͔ͥΞϓϦ͕͍ͮΒ͍ʜ
ͳ͔ͥΞϓϦ͕͍ͮΒ͍ʜ 1E.ʮͳΜ͔͜ͷΞϓϦॏ͘ͳ͍ʁͳΜͱ͔Ͱ͖ͳ͍Ͱ͔͢ʁʯ ΤϯδχΞʮʁͦΜͳͣͳ͍ʜʯ
ͳ͔ͥΞϓϦ͕͍ͮΒ͍ʜ Ͱͳͯ͘ɺ ύϑΥʔϚϯεͷσάϨΛͲ͏ͬͯݕͰ͖Δ͔ʁ
ͳ͔ͥΞϓϦ͕͍ͮΒ͍ʜ ύϑΥʔϚϯενϡʔχϯάͷେݪଇͱͯ͠ʜ ܭଌͰ͖ͳ͍ͳΒ҆қʹ͞ͳ͍΄͏͕͍͍ʂ
ͳ͔ͥΞϓϦ͕͍ͮΒ͍ʜ ύϑΥʔϚϯεͷܭଌʹ৭ʑͱํ๏͕͋Γ·͕͢ʜ $ISPNF%FW5PPMT͕ޮՌతʂ
ͳ͔ͥΞϓϦ͕͍ͮΒ͍ʜ DevToolsͷϊϋ: - εϩοτϦϯάΛ͠Α͏ ΤϯυϢʔβʔʹ͍ۙܭଌΛߦ͏ͨΊʹɺ CPUɺωοτϫʔΫͳͲͷ εϩοτϦϯάΛ͠·͠ΐ͏ʂ -ܭଌ͠Α͏ ChromeʹϓϩϑΝΠϦϯάͷͨΊͷ πʔϧ͕ࡌ͞Ε͍ͯ·͢ɻ
Ͳͷॲཧ͕ॏ͍͔Λಛఆ͠·͠ΐ͏ɻ - User Timing APIΛ͏ Ͳͷൣғ͕ύϑΥʔϚϯε͕ ѱ͍͔͍ͬͯΔ߹ɺࢦఆൣғͷ ύϑΥʔϚϯεΛܭଌͰ͖·͢ɻ
ͳ͔ͥΞϓϦ͕͍ͮΒ͍ʜ 1E.ʮΤϯδχΞ͞Μ͕ ύϑΥʔϚϯενϡʔχϯάΛͬͯ͘Ε͓͔ͨ͛Ͱ ɹɹɹϢʔβʔ͞Μ͔Βͷධ্ʑͩΑʂʯ ΤϯδχΞʮେมͰ͕ͨ͠ɺύϑΥʔϚϯε͕վળͯ͠Α͔ͬͨʂʯ
ͳ͔ͥΞϓϦ͕͍ͮΒ͍ʜ Pro Tips: - ࠒ͔ΒύϑΥʔϚϯεʹΛޫΒͤ·͠ΐ͏🐈 ࠒ͔ΒύϑΥʔϚϯεͷࢹΛߦ͑ ͍ͭͷؒʹ͔ϓϩμΫτ͕ॏ͘ͳͬͯ͠·͏͜ͱΛճආͰ͖·͢😋 ύϑΥʔϚϯεΛࢹ͢Δ༗໊Ͳ͜ΖͷπʔϧͰɺ New RelicͳͲ͕͋Γ·͢Α😲
Case 3 σβΠϯΛ࣮ʹ࠶ݱͰ͖ͳ͍
σβΠϯΛ࣮ʹ࠶ݱͰ͖ͳ͍ σβΠφʔʮͬͺΓ͜͜σβΠϯͱҧ͍·͢Αʁʯ ΤϯδχΞʮʁͦΜͳͣͳ͍ʜʯ
σβΠϯΛ࣮ʹ࠶ݱͰ͖ͳ͍ ϐΫηϧύʔϑΣΫτͱݴΘͣͱɺ σβΠϯΛ࣮ʹ࠶ݱ͢Δํ๏ͳ͍͔ʁ
σβΠϯΛ࣮ʹ࠶ݱͰ͖ͳ͍ σβΠϯͷڞ௨ҙࣝΛ͢Γ߹ΘͤΔπʔϧʜ 'JHNB͕Ξπ͍ʂ
σβΠϯΛ࣮ʹ࠶ݱͰ͖ͳ͍ FigmaͷԿ͕Ξπ͍ͷʁ - σβΠϯ͔ΒCSSΛॻ͖ग़ͤΔ σβΠϯΛͦͷ··CSSʹམͱ͠ࠐΊΔͷͰɺ Web։ൃ͕ޮతʹͳΓ·͢ʂ - Webϒϥβ͔ΒͰ͑Δ ࣮Webϒϥβ͔Β͑·͢ʂ ΤϯδχΞͷPCʹΞϓϦΛೖΕͳͯ͘ɺ
σβΠϯΛ֬ೝͰ͖·͢ʂ -ҐஔΛURLͰ͢͜ͱ͕Ͱ͖Δ σβΠφʔ͕ݟ͍ͯΔҐஔΛͦͷ··ΤϯδχΞʹ URLʹͯ͠γΣΞ͢Δ͜ͱ͕Ͱ͖·͢ʂ
σβΠϯΛ࣮ʹ࠶ݱͰ͖ͳ͍ σβΠφʔʮΤϯδχΞ͞Μͷ࡞ͬͯ͘ΕͨσβΠϯɺ ɹɹɹɹɹɹͷ࡞ͬͨσβΠϯʹ࣮Ͱخ͍͠Αʂʯ ΤϯδχΞʮ'JHNBͷ͓͔͛ͰͳΜͱ͔࣮ʹσβΠϯΛ࠶ݱͰ͖·ͨ͠ɻʯ
σβΠϯΛ࣮ʹ࠶ݱͰ͖ͳ͍ Pro Tips: - ΤϯδχΞͰɺσβΠϯπʔϧʹΛͬͯΈͯʁ Figma͍ͭ·ͰΘΕΔ͔Θ͔Γ·ͤΜɻ σβΠφʔ͕͍ͭπʔϧΛม͙͑ͯ͢ʹॱԠͰ͖ΔΑ͏ʹɺ σβΠϯπʔϧʹΞϯςφΛཱͯͯΈΔͷ͍͔͕Ͱ͠ΐ͏͔ʁ
͜ΕΒͷɺ πʔϧΛָͬͯʹղܾ͠·͠ΐ͏ σβΠφʔͱ িಥ͕ى͖Δʜ σβΠϯΛ࣮ʹ ࠶ݱͰ͖ͳ͍ ͳ͔ͥΞϓϦ͕
͍ͮΒ͍ʜ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Thank you for listening! Photo by cottonbro on Pexels
Gunma.web #42 ϓϩδΣΫτཧ(πʔϧؚΉ) 2021.8.21 @ Online Tsubasa SEKIGUCHI