inflearn logo
็Ÿฅ่ญ˜ๅ…ฑๆœ‰
inflearn logo

GSAPใฎScrollTriggerใ‚’ๆดป็”จใ—ใŸใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ชๅˆถไฝœ

GSAPใฎScrollTriggerใ‚’ๆดป็”จใ—ใฆใ€ใ‚นใ‚ฏใƒญใƒผใƒซใซๅๅฟœใ™ใ‚‹ใ‚คใƒณใ‚ฟใƒฉใ‚ฏใƒ†ใ‚ฃใƒ–ใชใƒฌใ‚นใƒใƒณใ‚ทใƒ–ใ‚ฆใ‚งใƒ–ใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ชใ‚’ไฝœใฃใฆใฟใพใ—ใ‚‡ใ†๏ผ

้›ฃๆ˜“ๅบฆ ๅˆ็ดš

ๅ—่ฌ›ๆœŸ้–“ ็„กๅˆถ้™

HTML/CSS
HTML/CSS
scrolltrigger
scrolltrigger
gsap
gsap
Portfolio
Portfolio
Responsive Web
Responsive Web
HTML/CSS
HTML/CSS
scrolltrigger
scrolltrigger
gsap
gsap
Portfolio
Portfolio
Responsive Web
Responsive Web

ใŠ็Ÿฅใ‚‰ใ›

2 ไปถ

  • jyoung๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ใ“ใ‚“ใซใกใฏ ๐Ÿ˜Š
    ่ฌ›ๅธซใฎ J.Young ใงใ™ใ€‚

    ใคใ„ใซๆ–ฐใ—ใ„่ฌ›็พฉใงใ”ๆŒจๆ‹ถใ™ใ‚‹ใ“ใจใซใชใ‚Šใพใ—ใŸใ€‚


    ๐Ÿš€ [Figma MCP ร— AIใง4ๆ™‚้–“ใงๅฎŒๆˆใ•ใ›ใ‚‹ใƒฌใ‚นใƒใƒณใ‚ทใƒ–Webใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ช]

    ไปŠๅ›žใฎ่ฌ›็พฉใฏใ€ๅ˜ใชใ‚‹ใ€Œใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐ่ฌ›็พฉใ€ใงใฏใ‚ใ‚Šใพใ›ใ‚“ใ€‚

    AIใŒ็†่งฃใ™ใ‚‹ใƒ‡ใ‚ถใ‚คใƒณ่จญ่จˆใ‹ใ‚‰ใ€
    AIใ‚’ๆดป็”จใ—ใŸใƒใ‚คใƒ–ใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐใ€
    ใใ—ใฆๅฎŸ้š›ใฎใƒ‡ใƒ—ใƒญใ‚คใพใงใคใชใŒใ‚‹ใƒ•ใƒซใ‚นใ‚ฟใƒƒใ‚ฏๅฎŒๆˆใƒ—ใƒญใ‚ปใ‚น
    ใงใ™ใ€‚


    ๐ŸŽฏ ใ“ใฎ่ฌ›็พฉใงๅญฆใถๆ ธๅฟƒ

    โœ”Figma AutoLayoutใ‚’ๆดป็”จใ—ใŸไฝ“็ณป็š„ใช่จญ่จˆ
    โœ”ใƒฌใ‚นใƒใƒณใ‚ทใƒ–ๆง‹้€ ใฎ่จญ่จˆๆ‰‹ๆณ•
    โœ”Variable็™ป้Œฒ โ†’ ใƒˆใƒผใ‚ฏใƒณๅŒ– โ†’ AIใŒ็†่งฃใ™ใ‚‹ใƒ‡ใ‚ถใ‚คใƒณๆง‹้€ ใฎๆง‹็ฏ‰
    โœ”Figma MCPใ‚ตใƒผใƒใƒผ้€ฃๆบใซใ‚ˆใ‚‹AIใƒใ‚คใƒ–ใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐ
    โœ”่‡ชๅˆ†ใฎใƒ‡ใ‚ถใ‚คใƒณใ‚’1ใƒ”ใ‚ฏใ‚ปใƒซใฎ็‹‚ใ„ใ‚‚ใชใๅฎŸ่ฃ…ใ™ใ‚‹ๆ–นๆณ•
    โœ”ใƒ‡ใƒ—ใƒญใ‚คใพใง็น‹ใŒใ‚‹ๅฎŸ่ทตใƒ—ใƒญใ‚ปใ‚น

    ๅ˜ใซใ€ŒAIใŒใ‚ณใƒผใƒ‰ใ‚’ไปฃใ‚ใ‚Šใซๆ›ธใ„ใฆใใ‚Œใ‚‹ใ€ใจใ„ใ†ใ“ใจใงใฏใ‚ใ‚Šใพใ›ใ‚“ใ€‚

    AIใฎใƒŸใ‚นใพใง่‡ชใ‚‰่ฆ‹ใคใ‘ๅ‡บใ—ใ€ๆง‹้€ ใ‚’็†่งฃใ—ใ€
    ๆœ€้ฉๅŒ–ใ•ใ‚ŒใŸใƒฌใ‚นใƒใƒณใ‚ทใƒ–ใ‚ฆใ‚งใƒ–ใธใจใƒชใƒ•ใ‚กใ‚ฏใ‚ฟใƒชใƒณใ‚ฐใ™ใ‚‹่ƒฝๅŠ›ใพใงใ€ๅ…ฑใซ่จ“็ทดใ—ใพใ™ใ€‚


    ๐Ÿ‘ฉโ€๐Ÿ’ป ใ“ใฎใ‚ˆใ†ใชๆ–นใซใŠใ™ใ™ใ‚ใงใ™

    • ๐ŸŽจ ่‡ชๅˆ†ใฎใƒ‡ใ‚ถใ‚คใƒณใ‚’ใใฎใพใพVibe Codingใงๅ…ท็พๅŒ–ใ—ใŸใ„ๆ–น

    • ๐Ÿง  ใƒ‡ใ‚ถใ‚คใƒณใ‹ใ‚‰้–‹็™บใƒปใƒ‡ใƒ—ใƒญใ‚คใพใงๅฏ่ƒฝใชใƒ•ใƒซใ‚นใ‚ฟใƒƒใ‚ฏใƒ‡ใ‚ถใ‚คใƒŠใƒผใซใชใ‚ŠใŸใ„ๆ–น

    • ๐Ÿ”ฅ Figmaใฎ้ซ˜ๅบฆใชๆฉŸ่ƒฝใพใงใ—ใฃใ‹ใ‚ŠๅญฆใณใŸใ„ๆ–น

    • ๐Ÿ’ป HTML / CSS / JavaScript / Tailwind / Reactใพใง็Ÿฅใ‚ŠใŸใ„ใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰ๅ…ฅ้–€่€…

    • โœจ ใ‚คใƒณใ‚ฟใƒฉใ‚ฏใƒ†ใ‚ฃใƒ–ใงๅฎŒๆˆๅบฆใฎ้ซ˜ใ„ใƒฌใ‚นใƒใƒณใ‚ทใƒ–Webใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ชใ‚’ไฝœใ‚ŠใŸใ„ๆ–น

    • โšก AIใ‚’ๆดป็”จใ—ใฆๆฅญๅ‹™็”Ÿ็”ฃๆ€งใ‚’5ๅ€ไปฅไธŠๅ‘ไธŠใ•ใ›ใŸใ„ๆ–น


    ๐Ÿ“˜ ๅญฆ็ฟ’ๆ–นๆณ•

    ใ™ในใฆใฎ้Ž็จ‹ใฏNotionใงไฝ“็ณป็š„ใซๆ•ด็†ใ•ใ‚Œใฆใ„ใพใ™ใ€‚
    ่จญ่จˆ โ†’ ๅฎŸ่ฃ… โ†’ ไฟฎๆญฃ โ†’ ใƒ‡ใƒ—ใƒญใ‚คใพใง
    ็š†ใ•ใ‚“ใŒ่‡ชใ‚‰ๅพฉ็ฟ’ใ—ใ€็นฐใ‚Š่ฟ”ใ—ๅญฆ็ฟ’ใงใใ‚‹ใ‚ˆใ†ใซๆง‹ๆˆใ—ใพใ—ใŸใ€‚


    AIๆ™‚ไปฃใ€
    ใ“ใ‚Œใ‹ใ‚‰ใฏใ€Œใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐใŒๅพ—ๆ„ใชไบบใ€ใงใฏใชใ
    AIใจๅ…ฑใซๆœ€ใ‚‚้€Ÿใ็ตๆžœใ‚’ๅ‡บใ›ใ‚‹ไบบใŒ็ซถไบ‰ๅŠ›ใจใชใ‚Šใพใ™ใ€‚

    4ๆ™‚้–“ไปฅๅ†…ใซใ€
    ็š†ใ•ใ‚“ใฎใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ชใ‚’ไธ€ๆฎต้šŽๅผ•ใไธŠใ’ใฆใฟใฆใใ ใ•ใ„ใ€‚

    ่ฌ›็พฉใงใŠไผšใ„ใ—ใพใ—ใ‚‡ใ†ใ€‚

    ใ‚ใ‚ŠใŒใจใ†ใ”ใ–ใ„ใพใ™ใ€‚
    ่ฌ›ๅธซ J.Youngใ‚ˆใ‚Š

    0
  • jyoung๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ๏ฝฅ

    ไฟฎๆญฃๆธˆใฟ

    ใ“ใ‚“ใซใกใฏ๏ผŸใ‚คใƒณใ‚นใƒˆใƒฉใ‚ฏใ‚ฟใƒผJ.youngใงใ™ใ€‚

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

    J.youngใƒ‰ใƒชใƒผใƒ 

    ใ‚ขใƒƒใƒ—ใƒ‡ใƒผใƒˆๆ˜ ๅƒ็ตๆžœ=>
    - 2ๆฌก๏ผšใ‚ขใƒƒใƒ—ใƒ‡ใƒผใƒˆๆ˜ ๅƒๅๅฟœๅž‹ใ‚ฒใƒซใƒฉใƒชใƒผ่ฟฝๅŠ ๅˆถไฝœ
    image
    -3ๆฌก๏ผšY่ปธใซใ‚นใ‚ฏใƒญใƒผใƒซใ™ใ‚‹ใ‚ฒใƒฉใƒชใƒผ่ฃฝไฝœimage

    -4ๆฌก๏ผšใƒžใ‚ฆใ‚นใƒใ‚คใƒณใ‚ฟใซๅพ“ใ†ใ‚คใƒกใƒผใ‚ธๅˆถไฝœ
    image

    -5ๆฌก๏ผšๅ›บๅฎšใ‚ปใ‚ฏใ‚ทใƒงใƒณใซY่ปธใซใ‚ตใƒ–ใ‚ปใ‚ฏใ‚ทใƒงใƒณใ‚นใ‚ฏใƒญใƒผใƒซใ™ใ‚‹ใ‚คใƒณใ‚ฟใƒฉใ‚ฏใƒ†ใ‚ฃใƒ–ๅˆถไฝœ
    image
    - 6ๆฌก๏ผšX่ปธใงๅทฆๅณใซๆบใ‚Œใ‚นใ‚ฏใƒญใƒผใƒซใ™ใ‚‹ใ‚ฒใƒซใƒฉใƒชใƒผ่ฃฝไฝœ
    image

    7ๆฌก๏ผšใ‚นใ‚ฏใƒญใƒผใƒซๆ™‚ใซๆŒจๆ‹ถใ™ใ‚‹ใ‚ญใƒฃใƒฉใ‚ฏใ‚ฟใƒผ/ใƒžใ‚ฆใ‚นใซใ‚ˆใฃใฆใ‚ซใƒฉใƒผใŒๅก—ใ‚Šใคใถใ•ใ‚Œใ‚‹ใƒ†ใ‚ญใ‚นใƒˆ/ๆณขใƒ†ใ‚ญใ‚นใƒˆไฝœๆˆ
    image

    3

๏ฟฅ8,507