{"id":1185,"date":"2026-09-25T12:51:17","date_gmt":"2026-09-25T03:51:17","guid":{"rendered":"https:\/\/www.wetch.co.jp\/ai\/?p=1185"},"modified":"2026-09-25T12:51:17","modified_gmt":"2026-09-25T03:51:17","slug":"figma%e3%81%ae%e7%b4%b0%e9%83%a8%e6%94%b9%e5%96%84%e3%83%bb%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%abapi%e6%99%ae%e5%8f%8a%e3%83%bbai%e3%82%b5%e3%82%a4%e3%83%88%e3%83%93%e3%83%ab%e3%83%80%e3%83%bc","status":"publish","type":"post","link":"https:\/\/www.wetch.co.jp\/ai\/2026\/09\/25\/figma%e3%81%ae%e7%b4%b0%e9%83%a8%e6%94%b9%e5%96%84%e3%83%bb%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%abapi%e6%99%ae%e5%8f%8a%e3%83%bbai%e3%82%b5%e3%82%a4%e3%83%88%e3%83%93%e3%83%ab%e3%83%80%e3%83%bc\/","title":{"rendered":"Figma\u306e\u7d30\u90e8\u6539\u5584\u30fb\u30b9\u30af\u30ed\u30fc\u30ebAPI\u666e\u53ca\u30fbAI\u30b5\u30a4\u30c8\u30d3\u30eb\u30c0\u30fc\u9032\u5316\u2014\u20142026\u5e749\u6708\u7b2c3\u9031\u306eWeb\u30c7\u30b6\u30a4\u30f3\u00d7AI\u6ce8\u76ee\u307e\u3068\u3081"},"content":{"rendered":"

\u4eca\u9031\u306fWeb\u30c7\u30b6\u30a4\u30f3\u00d7AI\u306e\u5206\u91ce\u3067\u300c\u6d3e\u624b\u306a\u65b0\u88fd\u54c1\u300d\u3088\u308a\u3082\u300c\u7a4d\u307f\u91cd\u306d\u306e\u6539\u5584\u300d\u304c\u76ee\u7acb\u3063\u305f\u4e00\u9031\u9593\u3067\u3057\u305f\u3002Figma\u306e\u5730\u5473\u3060\u304c\u52b9\u304f\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3001CSS\u3060\u3051\u3067\u52d5\u304f\u30b9\u30af\u30ed\u30fc\u30eb\u6f14\u51fa\u306e\u5b9a\u7740\u3001Awwwards\u53d7\u8cde\u30b5\u30a4\u30c8\u306e\u6f6e\u6d41\u3001\u305d\u3057\u3066AI\u30b5\u30a4\u30c8\u30d3\u30eb\u30c0\u30fc\u304c\u300c\u79d2\u30671\u30da\u30fc\u30b8\u300d\u304b\u3089\u300c\u672c\u683c\u7684\u306a\u8907\u6570\u30da\u30fc\u30b8\u30b5\u30a4\u30c8\u300d\u3078\u9032\u5316\u3059\u308b\u52d5\u304d\u307e\u3067\u30014\u3064\u306e\u30c8\u30d4\u30c3\u30af\u306b\u7d5e\u3063\u3066\u632f\u308a\u8fd4\u308a\u307e\u3059\u3002<\/em><\/p>\n

\"AI\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u3068Web\u30c7\u30b6\u30a4\u30f3\u30c4\u30fc\u30eb\u306e\u30a4\u30e1\u30fc\u30b8\u30a4\u30e9\u30b9\u30c8\"\/<\/figure>\n

1. Figma\u3001\u5730\u5473\u3060\u304c\u52b9\u304f\u300c\u7a4d\u307f\u91cd\u306d\u300d\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8<\/h2>\n

Figma\u306e\u30ea\u30ea\u30fc\u30b9\u30ce\u30fc\u30c8<\/a>\u306b\u3088\u308b\u3068\u3001Auto Layout\u306e\u81ea\u52d5\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u306b\u300cAround\u300d\u300cEvenly\u300d\u3068\u3044\u3046\u65b0\u30aa\u30d7\u30b7\u30e7\u30f3\u304c\u8ffd\u52a0\u3055\u308c\u3001\u3053\u308c\u307e\u3067\u306e\u300cBetween\u300d\u3068\u5408\u308f\u305b\u3066CSS\u306ejustify-content\u76f8\u5f53\u306e\u6319\u52d5\u3092Figma\u4e0a\u3067\u305d\u306e\u307e\u307e\u518d\u73fe\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u30c7\u30b6\u30a4\u30f3\u3068CSS\u306e\u5bfe\u5fdc\u95a2\u4fc2\u304c\u307e\u305f\u4e00\u6b69\u8fd1\u3065\u3044\u305f\u5f62\u3067\u3059\u3002<\/p>\n

\u3042\u308f\u305b\u3066\u30019\u6708\u306eConfig\u3067\u767a\u8868\u3055\u308c\u305f\u300c\u30d7\u30ed\u30f3\u30d7\u30c8\u3067\u30b7\u30a7\u30fc\u30c0\u30fc\u3084\u751f\u6210\u7684\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u81ea\u4f5c\u3067\u304d\u308b\u300d\u6a5f\u80fd\u306b\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30fb\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3\u30fb\u516c\u958b\u6a5f\u80fd\u30fb\u30b3\u30fc\u30c9\u95b2\u89a7\u304c\u8ffd\u52a0\u3002\u3055\u3089\u306bFigma Weave<\/a>\u306b\u306f\u3001\u30d5\u30ec\u30fc\u30e0\u5358\u4f4d\u3067\u6620\u50cf\u306e\u30c8\u30fc\u30f3\u3092\u6307\u793a\u3067\u304d\u308b\u300cRunway Aleph 2.0\u300d\u304c\u7d71\u5408\u3055\u308c\u3001Figma\u306e\u30ad\u30e3\u30f3\u30d0\u30b9\u4e0a\u3067\u753b\u50cf\u30fb\u52d5\u753b\u751f\u6210\u3092\u3088\u308a\u7d30\u304b\u304f\u30c7\u30a3\u30ec\u30af\u30b7\u30e7\u30f3\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n

2. \u30d1\u30e9\u30e9\u30c3\u30af\u30b9\u304cJS\u4e0d\u8981\u306b\u306a\u3063\u305f\u3001\u30b9\u30af\u30ed\u30fc\u30eb\u6f14\u51fa\u306e\u300c\u666e\u53ca\u671f\u300d<\/h2>\n

\u3053\u3053\u6570\u5e74\u30cd\u30a4\u30c6\u30a3\u30d6\u5b9f\u88c5\u304c\u9032\u3093\u3067\u3044\u305fCSS Scroll-Driven Animations API<\/a>\uff08animation-timeline<\/code>\u3084scroll()<\/code>\/view()<\/code>\u95a2\u6570\uff09\u304c\u30012026\u5e74\u306b\u5165\u3063\u3066\u5b9f\u52d9\u3067\u306e\u63a1\u7528\u4e8b\u4f8b\u304c\u4e00\u6c17\u306b\u5897\u3048\u3066\u3044\u307e\u3059\u3002\u30b9\u30af\u30ed\u30fc\u30eb\u4f4d\u7f6e\u306b\u5fdc\u3058\u305f\u30d1\u30e9\u30e9\u30c3\u30af\u30b9\u3084\u753b\u50cf\u30ea\u30d3\u30fc\u30eb\u3001\u8981\u7d20\u306e\u51fa\u73fe\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092JavaScript\u306a\u3057\u3067GPU\u99c6\u52d5\u3067\u5b9f\u88c5\u3067\u304d\u308b\u306e\u304c\u7279\u5fb4\u3067\u3001Core Web Vitals\u3092\u6c17\u306b\u3059\u308b\u5236\u4f5c\u73fe\u5834\u3068\u306e\u76f8\u6027\u306e\u826f\u3055\u304c\u8a55\u4fa1\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u4ed5\u69d8\u306e\u4f7f\u7528\u4f8b\u306fscroll-driven-animations.style<\/a>\u3067\u591a\u6570\u8a66\u305b\u307e\u3059\u3002<\/p>\n\n\n\n\n\n\n\n
\u65b9\u5f0f<\/th>\n\u5b9f\u88c5<\/th>\n\u7279\u5fb4<\/th>\n<\/tr>\n<\/thead>\n
\u5f93\u6765\u306eJS\u30b9\u30af\u30ed\u30fc\u30eb\u30a4\u30d9\u30f3\u30c8<\/td>\nscroll \u30a4\u30d9\u30f3\u30c8 + requestAnimationFrame<\/td>\n\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u8ca0\u8377\u304c\u9ad8\u304f\u3001\u30ab\u30af\u3064\u304d\u3084\u3059\u3044<\/td>\n<\/tr>\n
CSS Scroll-Driven Animations<\/td>\nanimation-timeline: scroll()<\/code> \/ view()<\/code><\/td>\nGPU\u99c6\u52d5\u3001JS\u4e0d\u8981\u300160fps\u3092\u7dad\u6301\u3057\u3084\u3059\u3044<\/td>\n<\/tr>\n
GSAP ScrollTrigger\u7b49\u306e\u30e9\u30a4\u30d6\u30e9\u30ea<\/td>\nJS\u30e9\u30a4\u30d6\u30e9\u30ea + CSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/td>\n\u8907\u96d1\u306a\u6f14\u51fa\u3084\u30d6\u30e9\u30a6\u30b6\u5dee\u7570\u5438\u53ce\u306b\u5f37\u3044<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

3. Awwwards\u3001\u4eca\u9031\u306eSite of the Day\u306b\u898b\u308b\u6f6e\u6d41<\/h2>\n

Awwwards<\/a>\u3067\u306f9\u670815\u65e5\u301c20\u65e5\u306b\u304b\u3051\u3066\u300cAspen Search\u300d\uff08Developer Award\u53d7\u8cde\uff09\u3001\u300cBoc.Studio\u300d\u3001\u300cPensatori Irrazionali\u300d\uff089\u670820\u65e5\u4ed8Site of the Day\uff09\u306a\u3069\u304c\u7d9a\u3051\u3066\u53d7\u8cde\u3002\u30a8\u30fc\u30b8\u30a7\u30f3\u30b7\u30fc\u30fb\u30b9\u30bf\u30b8\u30aa\u7cfb\u306e\u81ea\u793e\u30b5\u30a4\u30c8\u304c\u5f15\u304d\u7d9a\u304d\u5f37\u304f\u3001\u30bf\u30a4\u30dd\u30b0\u30e9\u30d5\u30a3\u3068\u4f59\u767d\u306e\u64cd\u4f5c\u3001\u30da\u30fc\u30b8\u9077\u79fb\u6642\u306e\u30de\u30a4\u30af\u30ed\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3\u3067\u5dee\u3092\u3064\u3051\u308b\u4f5c\u4f8b\u304c\u76ee\u7acb\u3061\u307e\u3057\u305f\u3002\u5236\u4f5c\u306e\u53c2\u8003\u306b\u306fTechnology\u30ab\u30c6\u30b4\u30ea<\/a>\u306a\u3069\u30b8\u30e3\u30f3\u30eb\u5225\u306e\u4e00\u89a7\u3082\u4fbf\u5229\u3067\u3059\u3002<\/p>\n

4. AI\u30b5\u30a4\u30c8\u30d3\u30eb\u30c0\u30fc\u3001\u300c\u79d2\u30671\u30da\u30fc\u30b8\u300d\u304b\u3089\u300c\u672c\u683c\u904b\u7528\u30b5\u30a4\u30c8\u300d\u3078<\/h2>\n

AI\u30b5\u30a4\u30c8\u30d3\u30eb\u30c0\u30fc\u5404\u793e\u304c\u3001\u5358\u767a\u306e\u30e9\u30f3\u30c7\u30a3\u30f3\u30b0\u30da\u30fc\u30b8\u751f\u6210\u304b\u3089\u3001EC\u3084\u30e1\u30f3\u30d0\u30fc\u30b7\u30c3\u30d7\u3001\u4e88\u7d04\u30b7\u30b9\u30c6\u30e0\u307e\u3067\u542b\u3080\u300c\u7d99\u7d9a\u904b\u7528\u3067\u304d\u308b\u30b5\u30a4\u30c8\u300d\u3078\u3068\u8ef8\u8db3\u3092\u79fb\u3057\u3066\u3044\u307e\u3059\u3002Hostinger AI Builder<\/a>\u306f\u3001\u7c21\u6613\u30b5\u30a4\u30c8\u5411\u3051\u306e\u300cManual\u30e2\u30fc\u30c9\u300d\u306b\u52a0\u3048\u3001EC\u3084\u4f1a\u54e1\u30b5\u30a4\u30c8\u306a\u3069\u8907\u96d1\u306a\u8981\u4ef6\u306b\u5bfe\u5fdc\u3059\u308b\u300cAgentic\u30e2\u30fc\u30c9\u300d\u3092\u65b0\u8a2d\u3002Bluehost AI Website Builder<\/a>\u3082\u30c1\u30e3\u30c3\u30c8\u5f62\u5f0f\u306e\u5bfe\u8a71\u3067\u30b5\u30a4\u30c8\u3092\u7d99\u7d9a\u7684\u306b\u66f4\u65b0\u3067\u304d\u308b\u8a2d\u8a08\u3092\u63a1\u7528\u3057\u3066\u304a\u308a\u3001\u516c\u958b\u5f8c\u3082\u540c\u3058\u4f1a\u8a71\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3067\u4fee\u6b63\u3092\u4f9d\u983c\u3067\u304d\u308b\u70b9\u3092\u5f37\u8abf\u3057\u3066\u3044\u307e\u3059\u3002Wix<\/a>\u3082\u81ea\u793e\u30b5\u30a4\u30c8\u7fa4\u306e\u5b66\u7fd2\u30c7\u30fc\u30bf\u3092\u4f7f\u3063\u305f\u300cAria\u300d\u306b\u3088\u308b\u751f\u6210\u3092\u7d99\u7d9a\u5f37\u5316\u4e2d\u3067\u3059\u3002<\/p>\n\n\n\n\n\n\n\n
\u30b5\u30fc\u30d3\u30b9<\/th>\n\u7279\u5fb4\u7684\u306a\u30e2\u30fc\u30c9<\/th>\n\u5f37\u307f<\/th>\n<\/tr>\n<\/thead>\n
Hostinger AI Builder<\/td>\nManual \/ Agentic<\/td>\nEC\u30fb\u4f1a\u54e1\u30b5\u30a4\u30c8\u306a\u3069\u8907\u96d1\u8981\u4ef6\u306b\u5bfe\u5fdc\u3059\u308bAgentic\u30e2\u30fc\u30c9<\/td>\n<\/tr>\n
Bluehost AI Website Builder<\/td>\n\u4f1a\u8a71\u7d99\u7d9a\u578b<\/td>\n\u516c\u958b\u5f8c\u3082\u540c\u3058\u30c1\u30e3\u30c3\u30c8\u3067\u66f4\u65b0\u30fb\u8ffd\u52a0\u3092\u4f9d\u983c\u3067\u304d\u308b<\/td>\n<\/tr>\n
Wix\uff08Aria\uff09<\/td>\nADI\u5f8c\u7d99\u306e\u751f\u6210AI<\/td>\n\u6a19\u6e96\u30a8\u30c7\u30a3\u30bf\u306b\u751f\u6210\u7d50\u679c\u304c\u305d\u306e\u307e\u307e\u5165\u308a\u7de8\u96c6\u81ea\u7531\u5ea6\u304c\u9ad8\u3044<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u300c\u30d7\u30ed\u30f3\u30d7\u30c8\u3067\u305d\u308c\u3063\u307d\u30441\u30da\u30fc\u30b8\u3092\u51fa\u3059\u300d\u7af6\u4e89\u304b\u3089\u3001\u300cAI\u304c\u88cf\u5074\u306e\u4ed5\u7d44\u307f\u307e\u3067\u9762\u5012\u3092\u898b\u308b\u300d\u7af6\u4e89\u3078\u3002\u30ce\u30fc\u30b3\u30fc\u30c9\u9818\u57df\u3067\u3082\u672c\u683c\u7684\u306a\u904b\u7528\u30d5\u30a7\u30fc\u30ba\u3078\u306e\u79fb\u884c\u304c\u9032\u3093\u3067\u3044\u307e\u3059\u3002<\/p>\n

\"\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306eWeb\u30c7\u30b6\u30a4\u30f3\u80cc\u666f\u7d20\u6750\"\/
Photo: webtreats \/ CC BY 2.0, Openverse\u7d4c\u7531<\/a><\/figcaption><\/figure>\n
\n

\u4e3b\u306a\u60c5\u5831\u6e90<\/h2>\n