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
150
UI/UXをないがしろにしない「きもちのいい」Webサービスの作り方
Gunma.web #42
Tsubasa SEKIGUCHI
PRO
December 07, 2022
Tweet
Share
More Decks by Tsubasa SEKIGUCHI
See All by Tsubasa SEKIGUCHI
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
Gunma.web #55
tinykitten
PRO
0
200
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
tinykitten
PRO
0
110
AWS/GCPで始める 生成AI入門
tinykitten
PRO
0
140
Rustとtonicで始める gRPC入門(GENIEE Edit)
tinykitten
PRO
0
42
スモールスタートで始める フィードバック管理システム開発入門
tinykitten
PRO
0
280
Rustとtonicで始める gRPC再入門
tinykitten
PRO
0
910
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
PRO
0
270
ノンデザイナーが 多少マシな見た目の資料を作る方法
tinykitten
PRO
0
200
Other Decks in Programming
See All in Programming
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
460
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
170
童醫院敏捷轉型的實踐經驗
cclai999
0
200
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
110
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
100
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
GoのGenericsによるslice操作との付き合い方
syumai
3
690
NPOでのDevinの活用
codeforeveryone
0
420
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
990
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
860
エラーって何種類あるの?
kajitack
5
310
Featured
See All Featured
Faster Mobile Websites
deanohume
307
31k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Designing for humans not robots
tammielis
253
25k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Docker and Python
trallard
44
3.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
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