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
160
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で始める リグレッションテスト概論
tinykitten
PRO
0
25
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
Gunma.web #55
tinykitten
PRO
0
210
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
tinykitten
PRO
0
120
AWS/GCPで始める 生成AI入門
tinykitten
PRO
0
150
Rustとtonicで始める gRPC入門(GENIEE Edit)
tinykitten
PRO
0
44
スモールスタートで始める フィードバック管理システム開発入門
tinykitten
PRO
0
290
Rustとtonicで始める gRPC再入門
tinykitten
PRO
0
930
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
PRO
0
270
Other Decks in Programming
See All in Programming
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
640
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
1
350
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
26
8k
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
670
TypeScriptでDXを上げろ! Hono編
yusukebe
3
860
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
140
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
150
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
440
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Pragmatic Product Professional
lauravandoore
35
6.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Why Our Code Smells
bkeepers
PRO
337
57k
Become a Pro
speakerdeck
PRO
29
5.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Done Done
chrislema
184
16k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Code Reviewing Like a Champion
maltzj
524
40k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
How GitHub (no longer) Works
holman
314
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