inflearn logo
inflearn logo

Figmaใ‚’ๆดป็”จใ—ใŸUIใƒ‡ใ‚ถใ‚คใƒณๅ…ฅ้–€ใ‹ใ‚‰ๅฎŸ่ทตใพใงA to Z

ใƒ‡ใ‚ถใ‚คใƒณใ‚’ๅญฆใ‚“ใ ใ“ใจใŒใชใ„้žๅฐ‚ๆ”ป่€…ใฎๆ–นใ€…ใ€ไปŠใพใ•ใซUXใƒ‡ใ‚ถใ‚คใƒณใฎๅ‹‰ๅผทใ‚’ๅง‹ใ‚ใŸใฐใ‹ใ‚Šใฎๅญฆ็”Ÿใ€UXใŠใ‚ˆใณUIใƒ‡ใ‚ถใ‚คใƒณใฎๅฐฑๆดป็”Ÿใฎๆ–นใ€…ใฎใŸใ‚ใซๆบ–ๅ‚™ใ—ใŸใ€ŒFigmaใงUIใƒ‡ใ‚ถใ‚คใƒณใ™ใ‚‹ A to Zใ€ๆŽˆๆฅญใงใ™ใ€‚Photoshopใชใฉไป–ใฎใƒ„ใƒผใƒซใ‚’ๅ…จใ็Ÿฅใ‚‰ใชใ„ๆ–นใงใ‚‚ใ€Figmaใ ใ‘ใ‚’ๆดป็”จใ—ใฆUIใƒ‡ใ‚ถใ‚คใƒณใฎๅฐ‚้–€ๅฎถใซใชใ‚Œใ‚‹ใ‚ˆใ†ใ€ๅŸบ็คŽใ‹ใ‚‰้ซ˜ๅบฆใชๆฉŸ่ƒฝใพใงๆ•™ใˆใพใ™ใ€‚

้›ฃๆ˜“ๅบฆ ๅ…ฅ้–€

ๅ—่ฌ›ๆœŸ้–“ 36ใ‹ๆœˆ

Figma
Figma
Web Design
Web Design
Mobile App Design
Mobile App Design
product design
product design
Figma
Figma
Web Design
Web Design
Mobile App Design
Mobile App Design
product design
product design
uxeric๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

UX/UIๅˆๅฟƒ่€…/ๅฐฑๆดป็”ŸใŒใƒฌใ‚นใƒใƒณใ‚ทใƒ–ใƒ‡ใ‚ถใ‚คใƒณใ‚’ใƒžใ‚นใ‚ฟใƒผใ™ในใ็†็”ฑ๏ผˆFt. ใƒฌใ‚นใƒใƒณใ‚ทใƒ–ใƒ‡ใ‚ถใ‚คใƒณ่ฌ›ๅบงใƒญใƒผใƒณใƒๅŠใณใ‚ขใƒผใƒชใƒผใƒใƒผใƒ‰50%ๅ‰ฒๅผ•ๆกˆๅ†…๏ผ‰

ๆœ€่ฟ‘ไผš็คพใซๅ…ฅ็คพใ™ใ‚‹ๆ–ฐๅ…ฅ็คพๅ“กใ‚„ใ‚ธใƒฅใƒ‹ใ‚ขใ€ใƒ‡ใ‚ถใ‚คใƒŠใƒผใŸใกใ‚’่ฆ‹ใ‚‹ใจใ€ใ„ใใคใ‹ใฎใƒ‘ใ‚ฟใƒผใƒณใ‚’่ฆ‹ใ‚‹ใ“ใจใŒใงใใพใ™ใ€‚ไธ€ใคใฏใƒ‡ใ‚ถใ‚คใƒณใ‚ทใ‚นใƒ†ใƒ ใซๅฏพใ™ใ‚‹ๅŸบ็คŽๅŠ›ใจ็ฎก็†่ƒฝๅŠ›ใŒใ‚ใ‚‹ใจใ„ใ†ใ“ใจใงใ€ใ‚‚ใ†ไธ€ใคใฏFigmaใงใƒฌใ‚นใƒใƒณใ‚ทใƒ–ใƒ‡ใ‚ถใ‚คใƒณใŒใงใใ‚‹่ƒฝๅŠ›ใ‚’่บซใซใคใ‘ใฆใ„ใ‚‹ใจใ„ใ†ใ“ใจใงใ™ใ€‚

ใใฎ็†็”ฑใฏใจใฆใ‚‚็ฐกๅ˜ใ ใจๆ€ใ„ใพใ™ใ€‚ใ“ใฎ่ƒฝๅŠ›ใŒใ‚ใ‚Œใฐใ€Œ็พๅ ดใซใ™ใๆŠ•ๅ…ฅใ€ใŒๅฏ่ƒฝใ ใจใ„ใ†ใ“ใจใงใ™ใ€‚้€†ใซใƒ‡ใ‚ถใ‚คใƒณใ‚ทใ‚นใƒ†ใƒ ใ€ใƒฌใ‚นใƒใƒณใ‚ทใƒ–ใƒ‡ใ‚ถใ‚คใƒณ่ƒฝๅŠ›ใŒใชใ„็Šถๆ…‹ใงๅ…ฅ็คพใ™ใ‚‹ใ“ใจใซใชใ‚‹ใจใ€ไผš็คพใฎ็ซ‹ๅ ดใ‹ใ‚‰ใฏๆœฌๅฝ“ใซๅคšใใฎใ‚ณใ‚นใƒˆใจๆ™‚้–“ใ‚’ๆŠ•่ณ‡ใ—ใฆๆ•™่‚ฒใ‚’ใ—ใชใ‘ใ‚Œใฐใชใ‚‰ใชใ„ใฎใงใ™ใŒใ€ใ“ใ‚Œใฏๆฑบใ—ใฆ็ฐกๅ˜ใชใ“ใจใงใฏใ‚ใ‚Šใพใ›ใ‚“ใ€‚

ใจใฏใ„ใˆใ€ใ™ในใฆใฎๅฟœๅ‹Ÿ่€…ใŒใ“ใฎ่ƒฝๅŠ›ใ‚’่บซใซใคใ‘ใฆใ„ใ‚‹ใ‚ใ‘ใงใฏใ‚ใ‚Šใพใ›ใ‚“ใ€‚็งใฎ็ตŒ้จ“ไธŠใ€ๅฐ‘ๆ•ฐใฎไบบใ ใ‘ใŒใ“ใฎ่ƒฝๅŠ›ใ‚’่บซใซใคใ‘ใฆใ„ใพใ—ใŸใ€‚ใคใพใ‚Šใ€่ƒฝๅŠ›ใ‚’่บซใซใคใ‘ใ‚Œใฐใ™ใใซ็›ฎ็ซ‹ใกใ€้ขๆŽฅใซ้€ฒใ‚€ๅฏ่ƒฝๆ€งใ‚‚้ซ˜ใใชใ‚‹ใจใ„ใ†ใ“ใจใ‚’ๆ„ๅ‘ณใ—ใพใ™ใ€‚

ใใฎใŸใ‚ๆœ€่ฟ‘ใ€UX/UIใƒ‡ใ‚ถใ‚คใƒณๅ…ฅ้–€่€…ใ‚„ๅฐฑๆดป็”Ÿใฎ็š†ใ•ใ‚“ใซๅฟ…ใš่บซใซใคใ‘ใ‚‹ใ‚ˆใ†ๅผท่ชฟใ—ใฆใ„ใ‚‹ใ“ใจใฎไธ€ใคใŒใƒฌใ‚นใƒใƒณใ‚ทใƒ–ใƒ‡ใ‚ถใ‚คใƒณใงใ™ใ€‚ใ“ใฎ่ƒฝๅŠ›ใ‚’่บซใซใคใ‘ใ‚Œใฐใ€ๅฐฑ่ทๅธ‚ๅ ดใงๅคงใใช็ซถไบ‰ๅŠ›ใ‚’ๆŒใคใ“ใจใŒใงใใพใ™ใ€‚

ใใ—ใฆใ€ใ‚ธใƒฅใƒ‹ใ‚ขใƒ‡ใ‚ถใ‚คใƒŠใƒผใฎๆ–นใ‚„็พๅ ดใงๅƒใ„ใฆใ„ใ‚‰ใฃใ—ใ‚ƒใ‚‹ๆ–นใงใƒฌใ‚นใƒใƒณใ‚ทใƒ–ใƒ‡ใ‚ถใ‚คใƒณใŒใงใใชใ„ๅ ดๅˆใฏใ€ใœใฒ่บซใซใคใ‘ใ‚‹ใ“ใจใ‚’ใŠๅ‹งใ‚ใ—ใพใ™ใ€‚ใชใœใชใ‚‰ใ€ใ“ใฎ่ƒฝๅŠ›ใŒใ‚ใ‚Œใฐใ‚ˆใ‚Š่ฟ…้€Ÿใซๆฅญๅ‹™ใ‚’้€ฒใ‚ใ‚‹ใ“ใจใŒใงใใ€้–‹็™บ่€…ใจใฎใ‚ณใƒŸใƒฅใƒ‹ใ‚ฑใƒผใ‚ทใƒงใƒณใซใŠใ„ใฆๅŠน็އๆ€งใŒๅคงๅน…ใซๅ‘ไธŠใ™ใ‚‹ใ‹ใ‚‰ใงใ™ใ€‚

Frame 427322174.png.webp

ใ€Œใƒฌใ‚นใƒใƒณใ‚ทใƒ–ใƒ‡ใ‚ถใ‚คใƒณๅฎŒๅ…จๆ”ป็•ฅ with Figmaใ€่ฌ›ๅบงใ‚’ไปŠ้€ฑใƒญใƒผใƒณใƒใ—ใพใ™ใ€‚๏ผˆใ‚ขใƒผใƒชใƒผใƒใƒผใƒ‰50%ๅ‰ฒๅผ•ใ‚ฏใƒผใƒใƒณใ‚’ใƒ—ใƒฌใ‚ผใƒณใƒˆใ—ใพใ™ใ€‚๏ผ‰

ๅ…ˆใปใฉใƒฌใ‚นใƒใƒณใ‚ทใƒ–ใƒ‡ใ‚ถใ‚คใƒณใฎ้‡่ฆๆ€งใซใคใ„ใฆใŠ่ฉฑใ—ใ—ใพใ—ใŸใŒใ€Figmaใ‚’ๆดป็”จใ—ใฆใƒฌใ‚นใƒใƒณใ‚ทใƒ–ใ‚ขใƒ—ใƒชใ‹ใ‚‰ใ€ใ‚ฆใ‚งใƒ–ใ€ใ‚ซใƒผใƒ‰ใ€ใ‚ณใƒณใƒใƒผใƒใƒณใƒˆใชใฉๅคšใใฎใ‚‚ใฎใ‚’็›ดๆŽฅไฝœใ‚Œใ‚‹ใ‚ˆใ†ใ€ใƒฌใ‚นใƒใƒณใ‚ทใƒ–ใƒ‡ใ‚ถใ‚คใƒณใ‚’้›†ไธญ็š„ใซๆ‰ฑใฃใŸ่ฌ›ๅบงใ‚’ไปŠ้€ฑใƒญใƒผใƒณใƒใ—ใพใ™ใ€‚๏ผˆๆฐดๆ›œๆ—ฅๅ‰ๅพŒ๏ผ‰ใƒฌใ‚นใƒใƒณใ‚ทใƒ–ใƒ‡ใ‚ถใ‚คใƒณใจใฏไฝ•ใ‹ใ€ใฉใฎใ‚ˆใ†ใซๅง‹ใ‚ใ‚Œใฐใ‚ˆใ„ใ‹ๅˆ†ใ‹ใ‚‰ใชใ‹ใฃใŸๆ–นใซใฏใ€ไปŠๅ›žใฎ่ฌ›ๅบงใŒ่‰ฏใ„ใ‚นใ‚ฟใƒผใƒˆๅœฐ็‚นใซใชใฃใฆใใ‚Œใ‚‹ใงใ—ใ‚‡ใ†ใ€‚

ๅŸบ็คŽๆฆ‚ๅฟตใ‹ใ‚‰ๅฎŸ็ฟ’ใพใงไธ€ใคไธ€ใคไธๅฏงใซใ€Figmaใ‚’ๆดป็”จใ—ใฆใƒฌใ‚นใƒใƒณใ‚ทใƒ–ใƒ‡ใ‚ถใ‚คใƒณใฎๅŽŸ็†ใ‚’็›ดๆŽฅไฝ“ๅพ—ใ—ใ€ๅฎŸๆˆฆ่ƒฝๅŠ›ใ‚’่บซใซใคใ‘ใ‚‰ใ‚Œใ‚‹ใ‚ˆใ†ๆง‹ๆˆใ—ใพใ—ใŸใ€‚

  • ใƒฌใ‚นใƒใƒณใ‚ทใƒ–ใƒ‡ใ‚ถใ‚คใƒณใฎๆ ธๅฟƒๆฆ‚ๅฟตๆ•ด็†

  • Auto Layoutใ€Constraintsใ€Layout Gridใฎ็†่งฃใจๆดป็”จ

  • ๅฎŸๅ‹™ใงใ‚ˆใไฝฟใ‚ใ‚Œใ‚‹ๅ†…ๅฎนใงๆง‹ๆˆ

  • ใƒฌใ‚นใƒใƒณใ‚ทใƒ–Webใจใ‚ขใƒ—ใƒชใฎไธกๆ–นใ‚’ใƒžใ‚นใ‚ฟใƒผ

่ฌ›็พฉใฎ่ฉณ็ดฐใชใ‚ซใƒชใ‚ญใƒฅใƒฉใƒ ใจๅ†…ๅฎนใŒๆฐ—ใซใชใ‚‹ๆ–นใฏใ€ใ“ใฎใƒชใƒณใ‚ฏใ‚’ใ‚ฏใƒชใƒƒใ‚ฏใ—ใฆใ”็ขบ่ชใใ ใ•ใ„ใ€‚

โœจ ใ‚ขใƒผใƒชใƒผใƒใƒผใƒ‰50%ๅ‰ฒๅผ•ใฎใ”ๆกˆๅ†…ใŠใ‚ˆใณใŠ็”ณ่พผๆ›ธ

่ฌ›็พฉใซ่ˆˆๅ‘ณใ‚’ใŠๆŒใกใฎๆ–นใฎใŸใ‚ใซใ€ไปŠๅ›žใฏ็‰นๅˆฅใซใ‚ขใƒผใƒชใƒผใƒใƒผใƒ‰็‰นๅ…ธใ‚’ใ”็”จๆ„ใ„ใŸใ—ใพใ—ใŸใ€‚ไธ‹่จ˜ใƒชใƒณใ‚ฏใฎ็ฐกๅ˜ใชใ‚ขใƒณใ‚ฑใƒผใƒˆใซใ”ๅ‚ๅŠ ใ„ใŸใ ใ‘ใ‚Œใฐใ€ใƒชใƒชใƒผใ‚นๆ™‚ใซ50%ๅ‰ฒๅผ•ไพกๆ ผใงๅ—่ฌ›ใงใใ‚‹ใ‚ฏใƒผใƒใƒณใ‚’ใŠๆธกใ—ใ™ใ‚‹ไบˆๅฎšใงใ™ใ€‚

>> ใ‚ขใƒผใƒชใƒผใƒใƒผใƒ‰็”ณ่พผ๏ผˆ50%ๅ‰ฒๅผ•๏ผ‰๏ผšhttps://forms.gle/reSTKbdhMn1Yo6ni8

ใ‚ขใƒผใƒชใƒผใƒใƒผใƒ‰ๅ‰ฒๅผ•็‰นๅ…ธใ‚’ๅ—ใ‘ใŸใ„ๆ–นใฏใ€ไปŠ้€ฑๆœจๆ›œๆ—ฅ๏ผˆ6ๆ—ฅ๏ผ‰ใพใงใซใŠ็”ณใ—่พผใฟใใ ใ•ใ„ใ€‚

ใ‚ใ‚ŠใŒใจใ†ใ”ใ–ใ„ใพใ™ใ€‚

ใ‚ณใƒกใƒณใƒˆ
ใพใ ใ‚ณใƒกใƒณใƒˆใŒใ‚ใ‚Šใพใ›ใ‚“

๏ฟฅ10,256