Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

デザイン編 Hatena Engineer Seminar #19

Avatar for takuwolog takuwolog
April 01, 2022
Design
3
1.6k

デザイン編 Hatena Engineer Seminar #19

Avatar for takuwolog

takuwolog

April 01, 2022
Tweet

More Decks by takuwolog

See All by takuwolog
Hatena Engineer Seminar #33 チームと開発するためのモック
Avatar for takuwolog takuwolog
1
480

Other Decks in Design

See All in Design
ユーザー像を「みてね」らしく可視化する　家族アルバムみてねUXリサーチチームの取り組み
Avatar for MIXI DESIGN mixi_design
PRO
3
400
新卒の目から見たサイボウズのデザイン組織
Avatar for 小林諒大 ryota5884
0
260
AI業務アプリケーションの体験デザイン
Avatar for kim kazuhirokimura
0
230
Treasure_Hunting
Avatar for Sol Metts solmetts
0
110
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
1k
【MIXI MEETUP！ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ！生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
Avatar for MIXI DESIGN mixi_design
PRO
0
170
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
1.1k
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
Avatar for HIROYUKI SAITO crearedesign
0
370
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
Avatar for ため tame
0
320
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
0
110
高卒公務員から Webデザイナーになるまで
Avatar for kinomi kinomidesign
0
140
Findyのプロデチームの 歩みとこれから
Avatar for Satty satty9556
0
350

Featured

See All Featured
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.3k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.8k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
5k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
0
460

Transcript

  1. Hatena Engineer Seminar #19 id: σβΠϯฤ ΧΫϤϜͷ೥Λݟਾٕ͑ͨज़ takuwolog 2022.03.30

  2. id:takuwolog ҏ౻୓ ϊϕϧνʔϜϦʔυσβΠφʔ

  3. σβΠφʔ͕ΤϯδχΞͱ ڠۀͯ͠ίϯϙʔωϯτࢦ޲Ͱ 3FBDUҠߦͨ͠࿩ ࠓճͷ͓࿩

  4. ࿩ͷલఏ • ΧΫϤϜαϙʔλʔζύεϙʔτͷຊ֨తͳ։ൃ͕8݄͔Βελʔ τ • ͜ͷ։ൃ͔ΒReactҠߦΛ։࢝͠·ͨ͠ ◦ ಉ͡λΠϛϯάͰσβΠϯγεςϜͷߏங΋։࢝ • σβΠφʔ͸ۀ຿ͰHTMLͱCSSΛॻ͍͍ͯ·͢

    ◦ Ϣʔβʔͷ໨΍खʹ৮ΕΔσβΠϯΛ࠷ޙ·Ͱ࢓্͛Δ͜ͱ͕ ໨త • σβΠφʔ͸Reactʹ৮Δͷ͸΄΅ॳΊͯͰ͢

  5. ४උ͢Δ ڞ௨ೝࣝΛἧ͑Δ

  6. ϖʔδ͔Βίϯϙʔωϯτ΁ globalNav (header) footer sidebar heroHeader main globalNav (header) footer

    sidebar heroHeader main

  7. ͳͥڠۀͯ͠ίϯϙʔωϯτΛ࡞Δͷ͔ ίϯϙʔωϯτʹݟͨ໨ͱৼΔ෣͍ʹؔ͢Δ໾ׂ͕͋Δ৔߹ ͸ɺΤϯδχΞ͚ͩͰܾΊΕͳ͍ͷͰσβΠφʔ΋Ұॹʹ ͳͬͯߟ͍͑ͯ͘ɻ Ұॹʹͳͬͯߟ͍͑ͯ͘தͰϕετͳίϯϙʔωϯτͷ࢟Λ ໛ࡧ͢Δɻ

  8. ίϯϙʔωϯτͷ࢖͍ํΛ໌֬ʹ͢Δ ίϯϙʔωϯτ͕େ͖͘ͳΓ͗͢ͳ͍Α͏ʹɺ·ͨ͸૿ ͑͗͢ͳ͍Α͏ʹɺԿΛ͢Δίϯϙʔωϯτͳͷ͔ɺ νʔϜͰೝࣝΛἧ͑Δɻ

  9. UI Organisms etc… Ұ൪খ͍͞୯Ґ υϝΠϯʹґଘ͠ͳ͍ υϝΠϯݻ༗ͷ ػೳ΍σβΠϯ Icon, TemplateͳͲ ίϯϙʔωϯτͷ୯Ґ

  10. ڠۀ͢Δ ίϯϙʔωϯτ։ൃͷ ϫʔΫϑϩʔ

  11.  σβΠϯϞοΫ͔Β ίϯϙʔωϯτΛ෼ׂ͢Δ

  12. ϖʔδ͔Βίϯϙʔωϯτʹ

  13. ϖʔδ୯ҐͷϞοΫ

  14. ίϯϙʔωϯτʹ෼ׂ

  15. UI Organisms άϧʔϐϯά͢Δ

  16. ໋໊ɾґଘؔ܎

  17. variantΛग़͓ͯ͘͠

  18. σβΠϯπʔϧ্ͰίϯϙʔωϯτԽͯ͠λεΫʹ͢Δ

  19.  ૬ஊɺ࣮૷ɺڞ༗

  20. ࠔͬͨΒૉૣ͘૬ஊ • ϖΞϓϩ • ͨ͘͞Μ࣭໰ͯ͠ɺҙݟΛग़ ͠߹ͬͯɺ஌ݟΛͨΊΔ • ϨϏϡʔ΋૬ஊͷ৔

  21. • ໨Ͱݟͳ͕Βίϯϙʔωϯτ Λ࡞͍͚ͬͯΔͷͰσβΠ φʔϏϦςΟ͕ߴ͍ ◦ σβΠϯϨϏϡʔ΋ḿΔ • ͋Δఔ౓·Ͱ࡞ۀͯ͠ɺ࠷ऴ ௐ੔͸࣮ࡍͷը໘Λ࡞Γͳ͕ ΒਐΊͨ

    StotybookͰ֬ೝ͠ͳ͕ΒਐΊΔ

  22. ػೳͱݟͨ໨ͷ෼཭ σβΠϯͷ౎߹Ͱى͜ΔίϯϙʔωϯτͷංେԽΛ཈͑Δ <Link> <LinkAppearance variant=’underline’ hoverVariant=’blue’>ϦϯΫ</LinkAppearance> </Link> <Link> <a> <ButtonAppearance

    variant=’initial’>Ϙλϯ</ButtonAppearance> </a> </Link> LinkAppearanceͷvariants: ButtonAppearanceͷvariants:

  23. νʔϜͰڞ༗͢Δ • ৽͍ܾ͠·Γࣄ͸จॻԽ͢Δ • ෳ਺ਓͰಉ࣌ਐߦͰ࡞ۀͯ͠ΔͷͰɺࣗ෼ͷ஌Βͳ͍ͱ͜ΖͰ༷ʑͳ͜ ͱ͕ى͜Δ ◦ ஌Β͵ؒʹศརͳίϯϙʔωϯτ͕ര஀͢Δ͜ͱ΋͋Δ ◦ ίϯϙʔωϯτͷ࢖͍ํ͸Storybookʹॻ͍͓ͯ͘

    • ࡞ͬͨίϯϙʔωϯτΛνʔϜʹ঺հ͢Δ ◦ ϓϩδΣΫτΛ੝Γ্͛Δ׆ಈ

  24.  ঢ়گʹԠͯ͡ ৬छΛӽڥͯ͠։ൃ͢Δ

  25. σβΠφʔ ΤϯδχΞ ঢ়گʹΑͬͯɺσβΠφʔͷख͕଍Γͳ͍ɺ ·ͨ͸ΤϯδχΞͷख͕଍Γͳ͍͜ͱ͕͋Δɻ ͜Ε·Ͱͷ஌ݟΛ׆͔ͯ͠ӽڥͯ͠ΈΔɻ

  26. σβΠφʔ͕ΤϯδχΞྖҬʹೖͬͯΈΔ • ίϯϙʔωϯτΛ৽نͰ࡞Δ ◦ ίʔυҰൃͰ৽نͰίϯϙʔωϯτͷ਽ܗ͕࡞Εͨ ◦ ੩తͳDOMΛॻ͍ͯͦ͜ʹελΠϧΛ౰͍ͯͯ͘ • طଘͷίϯϙʔωϯτΛ֦ு͢Δ ◦

    σβΠϯʹؔ͢ΔProps΍VariantΛ૿΍͢ σβΠφʔ͚ͩͰͰ͖Δ͜ͱΛ૿΍ͯ͠଎౓ͱޮ཰Λ্͛ͨ

  27. ΤϯδχΞʹσβΠφʔྖҬΛ΍ͬͯ΋Β͏ • ίϯϙʔωϯτ͕ἧͬͯ͘ΔͱͦΕΛ૊Έ߹Θͤͯը໘Λ࡞Δ ͜ͱ͕Ͱ͖Δ ◦ σβΠϯͷ࠷ऴௐ੔͚ͩσβΠφʔ͕ೖΔ ◦ ࠷ऴௐ੔͚ͩͳͷͰ0͔Β࡞ΔΑΓ଎͍ ྟػԠมʹཱͪճΔ͜ͱͰϦιʔεΛ࠷େݶʹ׆͔͢

  28. ӽڥͷ৺ߏ͑ • ·ͣ͸ͱΓ͋͑ͣ΍ͬͯΈΔ • ඼࣭͸lint΍VRTɺϨϏϡʔͳͲͰ୲อ͢Δ • ৺ཧత҆શੑ͸σΠϦʔεΫϥϜͳͲͰ౎౓૬ஊ ্ख͍ͬͯ͘Δ৔߹͸ײँ͢Δɺͦͯ͠๙Ί߹͏ʂ

  29. ·ͱΊ

  30. • ڞ௨ೝࣝΛἧ͑ͯҰॹʹ࡞ۀͰ͖ΔΑ͏ʹ • ϞοΫ͔ΒίϯϙʔωϯτͷઃܭਤΛ࡞Δ • ஌ݟΛਂΊͯɺঢ়گʹԠͯ͡ӽڥͯ͠ΈΔ ΤϯδχΞͱڠۀͯ͠ίϯϙʔωϯτࢦ޲ͰReact Ҡߦ͢ΔͨΊʹ