{"id":12306,"date":"2026-01-14T07:00:50","date_gmt":"2026-01-14T07:00:50","guid":{"rendered":"https:\/\/withcode.tech\/media\/?p=12306"},"modified":"2026-03-10T06:14:10","modified_gmt":"2026-03-10T06:14:10","slug":"figma_gpt","status":"publish","type":"post","link":"https:\/\/withcode.tech\/media\/figma_gpt\/","title":{"rendered":"\u3010\u30c7\u30b6\u30a4\u30f3\u5b66\u7fd2\u8005\u5fc5\u898b\u3011Figma \u00d7 GPT\u5b8c\u5168\u30ac\u30a4\u30c9\uff5c\u65e2\u5b58UI\u304b\u3089\u81ea\u52d5\u3067\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u69cb\u7bc9"},"content":{"rendered":"<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-left\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-14.40.37.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u751f\u5f92<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304b\u3089\u65e2\u5b58\u306eFigma\u30c7\u30b6\u30a4\u30f3\u3092\u53d7\u3051\u53d6\u3063\u305f\u3093\u3067\u3059\u304c\u3001Variables\u304c\u5168\u304f\u8a2d\u5b9a\u3055\u308c\u3066\u306a\u304f\u3066\u2026\u3002\u8272\u3068\u304b\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u304c\u30d0\u30e9\u30d0\u30e9\u3067\u3001\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u304c\u5927\u5909\u306a\u3093\u3067\u3059\uff01<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-right\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-15.11.23.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u30da\u30f3\u535a\u58eb<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u305d\u308c\u306f\u5927\u5909\u3058\u3083\u3063\u305f\u306a\uff01\u3067\u3082\u6717\u5831\u3058\u3083\u3002Figma\u3068GPT\u3092\u7d44\u307f\u5408\u308f\u305b\u308c\u3070\u3001\u65e2\u5b58\u30c7\u30b6\u30a4\u30f3\u304b\u3089\u81ea\u52d5\u7684\u306b\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u3092\u69cb\u7bc9\u3067\u304d\u308b\u3093\u3058\u3083\u3088\u3002\u4eca\u65e5\u306f\u300c\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u9006\u751f\u6210\u300d\u3068\u3044\u3046\u9769\u65b0\u7684\u306a\u624b\u6cd5\u3092\u6559\u3048\u308b\u305e\u3044\uff01<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-left\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-14.48.08.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u751f\u5f92<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\uff01\u3088\u308d\u3057\u304f\u304a\u9858\u3044\u3057\u307e\u3059\uff01<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n\n<p>Web\u5236\u4f5c\u306e\u73fe\u5834\u3067\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u60a9\u307f\u3092\u62b1\u3048\u3066\u3044\u307e\u305b\u3093\u304b\uff1f<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u65e2\u5b58\u306eFigma\u30c7\u30b6\u30a4\u30f3\u306bVariables\uff08\u30c7\u30b6\u30a4\u30f3\u30c8\u30fc\u30af\u30f3\uff09\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u306a\u3044<\/li>\n\n\n\n<li>\u8272\u3084\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u304c\u4e0d\u898f\u5247\u3067\u3001\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u6642\u306b\u6bce\u56de\u78ba\u8a8d\u304c\u5fc5\u8981<\/li>\n\n\n\n<li>\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u3092\u4e00\u304b\u3089\u69cb\u7bc9\u3059\u308b\u6642\u9593\u304c\u306a\u3044<\/li>\n\n\n\n<li>Tailwind CSS\u306a\u3069\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u898f\u5247\u306b\u5408\u308f\u305b\u3066\u30c7\u30b6\u30a4\u30f3\u3092\u6574\u7406\u3057\u305f\u3044<\/li>\n\n\n\n<li>\u624b\u4f5c\u696d\u3067\u30c8\u30fc\u30af\u30f3\u3092\u8a2d\u5b9a\u3059\u308b\u306e\u306f\u975e\u52b9\u7387\u3059\u304e\u308b<\/li>\n<\/ul>\n\n\n\n<p>\u672c\u8a18\u4e8b\u3067\u306f\u3001<strong><span class=\"swl-marker mark_yellow\">Figma\u3068GPT\u3092\u6d3b\u7528\u3057\u3066\u3001\u65e2\u5b58UI\u30c7\u30b6\u30a4\u30f3\u304b\u3089\u81ea\u52d5\u7684\u306bVariables\uff08\u30c7\u30b6\u30a4\u30f3\u30c8\u30fc\u30af\u30f3\uff09\u3092\u62bd\u51fa\u3057\u3001Tailwind CSS\u898f\u5247\u306b\u6700\u9069\u5316\u3059\u308b<\/span><\/strong>\u3068\u3044\u3046\u9769\u65b0\u7684\u306a\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u3092\u5fb9\u5e95\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"is-style-icon_announce\">\u300c\u5b66\u7fd2\u2192\u6848\u4ef6\u7372\u5f97\u300d\u306b\u3064\u306a\u3052\u305f\u53d7\u8b1b\u751f\u306e\u30ea\u30a2\u30eb\u306a\u4f53\u9a13\u8ac7\u3082\u516c\u958b\u4e2d\uff01<br>\u50cd\u304d\u65b9\u3092\u5909\u3048\u305f\u3044\u65b9\u306b\u3082\u97ff\u304f\u30b9\u30c8\u30fc\u30ea\u30fc\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"is-style-icon_info\"><strong><strong>\u83c5\u4e95<\/strong>\u3055\u3093<\/strong><br>\u5c06\u6765\u7684\u3078\u306e\u4e0d\u5b89\u3068\u5b50\u80b2\u3066\u3068\u3044\u3046\u80cc\u666f\u304b\u3089\u300c\u526f\u696d\u300d\u306b\u6311\u6226\u3057\u3088\u3046\u3068\u6c7a\u610f\u3002\u72ec\u5b66\u304b\u3089\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306e\u5b66\u7fd2\u3092\u958b\u59cb\u3057\u3066\u3044\u305f\u304c\u3001WithCode\u306b\u51fa\u4f1a\u3044\u4f53\u9a13\u30b3\u30fc\u30b9\u3092\u53d7\u8b1b\u3002\u7d044\u30f6\u6708\u306e\u5b66\u7fd2\u306b\u53d6\u308a\u7d44\u307f\u3001\u5f53\u521d\u306e\u76ee\u6a19\u3067\u3042\u3063\u305f\u5352\u696d\u30c6\u30b9\u30c8\u5408\u683c\u3092\u5b9f\u73fe\u3057\u305f\u3002WithCode Platinum\u306b\u30663\u4ef6\u306e\u6848\u4ef6\u3092\u62c5\u5f53\u3057\u3001\u73fe\u5728\u306f\u526f\u696d\u3060\u3051\u3067\u306a\u304f\u672c\u683c\u7684\u306b\u300c\u30d5\u30ea\u30fc\u30e9\u30f3\u30b9\u300d\u3068\u3057\u3066\u5728\u5b85\u3067\u6d3b\u8e8d\u3057\u3066\u3044\u304d\u305f\u3044\u3068\u8003\u3048\u308b\u3088\u3046\u306b\u306a\u308b\u3002<\/p>\n\n\n\n<p>\u8a73\u3057\u304f\u306f<a href=\"https:\/\/withcode.tech\/media\/interview_5\/\" title=\"\">\u3053\u3061\u3089\u306e\u8a18\u4e8b<\/a>\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-withcode-media wp-block-embed-withcode-media\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/withcode.tech\/media\/interview_5\/\n<\/div><\/figure>\n\n\n\n<p class=\"is-style-balloon_box2\"><strong><strong><strong><strong><strong>\u83c5\u4e95<\/strong>\u3055\u3093\u306e\u4e3b\u306a\u5236\u4f5c\u5b9f\u7e3e\u306f\u3053\u3061\u3089<\/strong><\/strong><\/strong><\/strong><\/p>\n\n\n<div class=\"swell-block-postLink\">\t\t\t<div class=\"p-blogCard -external\" data-type=\"type3\" data-onclick=\"clickLink\">\n\t\t\t\t<div class=\"p-blogCard__inner\">\n\t\t\t\t\t<span class=\"p-blogCard__caption\">\u5e83\u544a\u7528\u9014\u3067\u306e\u65b0\u898fLP\u5236\u4f5c<\/span>\n\t\t\t\t\t<div class=\"p-blogCard__thumb c-postThumb\"><figure class=\"c-postThumb__figure\"><img decoding=\"async\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/08\/study-office.net_lp-2.webp\" alt=\"\" class=\"c-postThumb__img u-obf-cover\" width=\"320\" height=\"180\"><\/figure><\/div>\t\t\t\t\t<div class=\"p-blogCard__body\">\n\t\t\t\t\t\t<a class=\"p-blogCard__title\" href=\"https:\/\/withcode.tech\/works\/yourdelt\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u682a\u5f0f\u4f1a\u793eYOURDELT \u69d8<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u306a\u305c\u4eca\u3001Figma \u00d7 GPT\u3067UI\u69cb\u7bc9\u306a\u306e\u304b\uff1f<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img decoding=\"async\" width=\"1122\" height=\"694\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2026-03-03-18.06.51-1.jpg\" alt=\"\" class=\"wp-image-12808\" srcset=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2026-03-03-18.06.51-1.jpg 1122w, https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2026-03-03-18.06.51-1-768x475.jpg 768w\" sizes=\"(max-width: 1122px) 100vw, 1122px\" \/><\/figure>\n<\/div>\n\n\n\n\n\n\n<h3 class=\"wp-block-heading\">\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u306e\u91cd\u8981\u6027<\/h3>\n\n\n\n<p>\u73fe\u4ee3\u306eWeb\u5236\u4f5c\u306b\u304a\u3044\u3066\u3001\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\uff08Design System\uff09\u306f\u5fc5\u9808\u30a4\u30f3\u30d5\u30e9\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u304c\u3082\u305f\u3089\u30593\u3064\u306e\u4fa1\u5024<\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u4fa1\u5024<\/th><th>\u5177\u4f53\u7684\u306a\u52b9\u679c<\/th><th>\u6570\u5024\u7684\u30a4\u30f3\u30d1\u30af\u30c8<\/th><\/tr><\/thead><tbody><tr><td><strong>\u4e00\u8cab\u6027<\/strong><\/td><td>\u30d6\u30e9\u30f3\u30c9\u4f53\u9a13\u306e\u7d71\u4e00\u3001UI\u306e\u54c1\u8cea\u5411\u4e0a<\/td><td>\u30c7\u30b6\u30a4\u30f3\u30ec\u30d3\u30e5\u30fc\u6642\u9593 -50%<\/td><\/tr><tr><td><strong>\u518d\u5229\u7528\u6027<\/strong><\/td><td>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5171\u901a\u5316\u3001\u5b9f\u88c5\u306e\u9ad8\u901f\u5316<\/td><td>\u958b\u767a\u6642\u9593 -30\u301c40%<\/td><\/tr><tr><td><strong>\u4fdd\u5b88\u6027<\/strong><\/td><td>\u5909\u66f4\u306e\u4e00\u5143\u7ba1\u7406\u3001\u30c7\u30b6\u30a4\u30f3\u8ca0\u50b5\u306e\u524a\u6e1b<\/td><td>\u4fee\u6b63\u5de5\u6570 -60\u301c70%<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">\u3057\u304b\u3057\u3001\u73fe\u5b9f\u306f\u2026<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u65e2\u5b58\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e90%\u4ee5\u4e0a\u306fVariables\u304c\u672a\u8a2d\u5b9a<\/li>\n\n\n\n<li>\u624b\u4f5c\u696d\u3067\u306e\u30c8\u30fc\u30af\u30f3\u8a2d\u5b9a\u306b\u306f20\u301c40\u6642\u9593\u304b\u304b\u308b<\/li>\n\n\n\n<li>\u8272\u3084\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u306e\u4e0d\u898f\u5247\u6027\u306b\u3088\u308a\u3001\u958b\u767a\u52b9\u7387\u304c30%\u4f4e\u4e0b<\/li>\n\n\n\n<li>\u30c7\u30b6\u30a4\u30ca\u30fc\u3068\u30a8\u30f3\u30b8\u30cb\u30a2\u9593\u306e\u30b3\u30df\u30e5\u30cb\u30b1\u30fc\u30b7\u30e7\u30f3\u30b3\u30b9\u30c8\u304c\u5897\u5927<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">AI\uff08GPT\uff09\u6d3b\u7528\u306b\u3088\u308b\u9769\u65b0<\/h3>\n\n\n\n<p>ChatGPT-4\u4ee5\u964d\u306eLLM\u306f\u3001<strong><span class=\"swl-marker mark_yellow\">\u300c\u62bd\u51fa\u300d\u3067\u306f\u306a\u304f\u300c\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u300d<\/span><\/strong>\u3067\u771f\u4fa1\u3092\u767a\u63ee\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f93\u6765\u306e\u624b\u6cd5 vs AI\u6d3b\u7528\u624b\u6cd5<\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u9805\u76ee<\/th><th>\u5f93\u6765\u306e\u624b\u6cd5<\/th><th>AI\u6d3b\u7528\u624b\u6cd5<\/th><\/tr><\/thead><tbody><tr><td><strong>\u4f5c\u696d\u6642\u9593<\/strong><\/td><td>20\u301c40\u6642\u9593<\/td><td>2\u301c4\u6642\u9593\uff08<span style=\"color:green\"><strong>90%\u524a\u6e1b<\/strong><\/span>\uff09<\/td><\/tr><tr><td><strong>\u7cbe\u5ea6<\/strong><\/td><td>\u30d2\u30e5\u30fc\u30de\u30f3\u30a8\u30e9\u30fc\u3042\u308a<\/td><td>AI\u306b\u3088\u308b\u7d71\u4e00\u30eb\u30fc\u30eb\u9069\u7528<\/td><\/tr><tr><td><strong>\u6700\u9069\u5316<\/strong><\/td><td>\u7d4c\u9a13\u3068\u52d8\u306b\u4f9d\u5b58<\/td><td>Tailwind CSS\u7b49\u306e\u898f\u5247\u306b\u81ea\u52d5\u6e96\u62e0<\/td><\/tr><tr><td><strong>\u4fdd\u5b88\u6027<\/strong><\/td><td>\u5c5e\u4eba\u5316\u3057\u3084\u3059\u3044<\/td><td>\u30d7\u30ed\u30f3\u30d7\u30c8\u3067\u518d\u73fe\u53ef\u80fd<\/td><\/tr><tr><td><strong>\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3<\/strong><\/td><td>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u5358\u4f4d\u3067\u7e70\u308a\u8fd4\u3057<\/td><td>\u30d7\u30ed\u30f3\u30d7\u30c8\u306e\u518d\u5229\u7528\u3067\u9ad8\u901f\u5316<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Tailwind CSS\u898f\u5247\u306b\u5408\u308f\u305b\u3066\u5b8c\u5168\u4e00\u81f4\u304c\u5b9f\u73fe<\/h3>\n\n\n\n<p>\u591a\u304f\u306e\u958b\u767a\u73fe\u5834\u3067\u63a1\u7528\u3055\u308c\u3066\u3044\u308bTailwind CSS\u306e\u898f\u5247\u306b\u30c7\u30b6\u30a4\u30f3\u30c8\u30fc\u30af\u30f3\u3092\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001<strong><span class=\"swl-marker mark_yellow\">\u30c7\u30b6\u30a4\u30f3\u3068\u30b3\u30fc\u30c9\u306e\u5b8c\u5168\u4e00\u81f4<\/span><\/strong>\u304c\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Tailwind CSS\u898f\u5247\u306e\u4f8b<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u30ab\u30e9\u30fc\u30b9\u30b1\u30fc\u30eb\uff1a<\/strong> 50, 100, 200, &#8230;, 900, 950\uff0811\u6bb5\u968e\uff09<\/li>\n\n\n\n<li><strong>\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\uff1a<\/strong> 4\u306e\u500d\u6570\uff084px, 8px, 12px, 16px, &#8230;\uff09<\/li>\n\n\n\n<li><strong>\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\uff1a<\/strong> xs, sm, base, lg, xl, 2xl, &#8230;<\/li>\n\n\n\n<li><strong>\u30d6\u30ec\u30fc\u30af\u30dd\u30a4\u30f3\u30c8\uff1a<\/strong> sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1536px)<\/li>\n<\/ul>\n\n\n\n<p><strong><span class=\"swl-marker mark_yellow\">\u65e2\u5b58\u30c7\u30b6\u30a4\u30f3\u306e\u300c#3B82F6\u300d\u3084\u300c15px\u300d\u3068\u3044\u3063\u305f\u4e0d\u898f\u5247\u306a\u5024\u3092\u3001Tailwind\u306e\u300cblue-500\u300d\u3084\u300c16px\uff08p-4\uff09\u300d\u306b\u81ea\u52d5\u5909\u63db\u3067\u304d\u308b<\/span><\/strong>\u306e\u304cGPT\u6d3b\u7528\u306e\u6700\u5927\u306e\u30e1\u30ea\u30c3\u30c8\u3067\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u9006\u751f\u6210\u3068\u306f\uff1f<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img decoding=\"async\" width=\"1536\" height=\"1024\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/1000006396.jpg\" alt=\"\" class=\"wp-image-12858\" srcset=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/1000006396.jpg 1536w, https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/1000006396-768x512.jpg 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n<\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-left\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-15.00.55.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u751f\u5f92<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u9006\u751f\u6210\u3063\u3066\u4f55\u3067\u3059\u304b\uff1f<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-right\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-15.09.27.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u30da\u30f3\u535a\u58eb<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u9006\u751f\u6210\u306f\u3001\u5b8c\u6210\u3057\u305fUI\u30c7\u30b6\u30a4\u30f3\u304b\u3089\u9006\u7b97\u3057\u3066\u30c7\u30b6\u30a4\u30f3\u30c8\u30fc\u30af\u30f3\uff08Variables\uff09\u3092\u62bd\u51fa\u30fb\u4f53\u7cfb\u5316\u3059\u308b\u624b\u6cd5\u3058\u3083\uff01<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u901a\u5e38\u306e\u30d5\u30ed\u30fc vs \u9006\u751f\u6210\u30d5\u30ed\u30fc<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u901a\u5e38\u306e\u30c7\u30b6\u30a4\u30f3\u30d5\u30ed\u30fc\uff08\u7406\u60f3\uff09<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>\u30c7\u30b6\u30a4\u30f3\u30c8\u30fc\u30af\u30f3\u5b9a\u7fa9\n    \u2193\nFigma Variables\u306b\u8a2d\u5b9a\n    \u2193\n\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u4f5c\u6210\n    \u2193\n\u753b\u9762\u30c7\u30b6\u30a4\u30f3\n    \u2193\n\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0<\/strong><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u9006\u751f\u6210\u30d5\u30ed\u30fc\uff08\u73fe\u5b9f\u7684\uff09<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>\u65e2\u5b58\u306e\u753b\u9762\u30c7\u30b6\u30a4\u30f3\uff08Variables\u672a\u8a2d\u5b9a\uff09\n    \u2193\n\u3010Figma Make\u3011\u4f7f\u7528\u5024\u3092\u5168\u62bd\u51fa\n    \u2193\n\u3010GPT\u3011Tailwind\u898f\u5247\u306b\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\n    \u2193\n\u3010Figma\u3011JSON\u30a4\u30f3\u30dd\u30fc\u30c8\u3067Variables\u4f5c\u6210\n    \u2193\n\u65e2\u5b58\u30c7\u30b6\u30a4\u30f3\u306bVariables\u3092\u9069\u7528\n    \u2193\n\u4ee5\u964d\u306f\u901a\u5e38\u30d5\u30ed\u30fc\u3067\u4fdd\u5b88<\/strong><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Primitive vs Semantic \u30c8\u30fc\u30af\u30f3<\/h3>\n\n\n\n<p>\u30c7\u30b6\u30a4\u30f3\u30c8\u30fc\u30af\u30f3\u306f\u30012\u968e\u5c64\u69cb\u9020\u3067\u7ba1\u7406\u3059\u308b\u306e\u304c\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3067\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Primitive\uff08\u30d7\u30ea\u30df\u30c6\u30a3\u30d6\uff09\u30c8\u30fc\u30af\u30f3<\/h4>\n\n\n\n<p>\u57fa\u790e\u7684\u306a\u5024\u305d\u306e\u3082\u306e\u3002\u8272\u306e\u968e\u8abf\u3001\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u306e\u30b9\u30b1\u30fc\u30eb\u306a\u3069\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-json\" data-lang=\"JSON\"><code>{\n  &quot;color&quot;: {\n    &quot;blue&quot;: {\n      &quot;50&quot;: &quot;#EFF6FF&quot;,\n      &quot;100&quot;: &quot;#DBEAFE&quot;,\n      &quot;200&quot;: &quot;#BFDBFE&quot;,\n      &quot;300&quot;: &quot;#93C5FD&quot;,\n      &quot;400&quot;: &quot;#60A5FA&quot;,\n      &quot;500&quot;: &quot;#3B82F6&quot;,  \/\/ Tailwind blue-500\n      &quot;600&quot;: &quot;#2563EB&quot;,\n      &quot;700&quot;: &quot;#1D4ED8&quot;,\n      &quot;800&quot;: &quot;#1E40AF&quot;,\n      &quot;900&quot;: &quot;#1E3A8A&quot;,\n      &quot;950&quot;: &quot;#172554&quot;\n    }\n  },\n  &quot;spacing&quot;: {\n    &quot;1&quot;: &quot;4px&quot;,\n    &quot;2&quot;: &quot;8px&quot;,\n    &quot;3&quot;: &quot;12px&quot;,\n    &quot;4&quot;: &quot;16px&quot;,\n    &quot;5&quot;: &quot;20px&quot;,\n    &quot;6&quot;: &quot;24px&quot;\n  }\n}<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Semantic\uff08\u30bb\u30de\u30f3\u30c6\u30a3\u30c3\u30af\uff09\u30c8\u30fc\u30af\u30f3<\/h4>\n\n\n\n<p>\u7528\u9014\u306b\u5fdc\u3058\u305f\u610f\u5473\u4ed8\u3051\u3092\u3057\u305f\u30c8\u30fc\u30af\u30f3\u3002Primitive\u3092\u53c2\u7167\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-json\" data-lang=\"JSON\"><code>{\n  &quot;color&quot;: {\n    &quot;button&quot;: {\n      &quot;primary&quot;: {\n        &quot;background&quot;: &quot;{color.blue.500}&quot;,\n        &quot;hover&quot;: &quot;{color.blue.600}&quot;,\n        &quot;text&quot;: &quot;{color.white}&quot;\n      },\n      &quot;secondary&quot;: {\n        &quot;background&quot;: &quot;{color.gray.100}&quot;,\n        &quot;hover&quot;: &quot;{color.gray.200}&quot;,\n        &quot;text&quot;: &quot;{color.gray.900}&quot;\n      }\n    },\n    &quot;text&quot;: {\n      &quot;heading&quot;: &quot;{color.gray.900}&quot;,\n      &quot;body&quot;: &quot;{color.gray.700}&quot;,\n      &quot;muted&quot;: &quot;{color.gray.500}&quot;\n    }\n  }\n}<\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u306a\u305c2\u968e\u5c64\u306a\u306e\u304b\uff1f<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u30e1\u30ea\u30c3\u30c8<\/th><th>\u8aac\u660e<\/th><th>\u5177\u4f53\u4f8b<\/th><\/tr><\/thead><tbody><tr><td><strong>\u4fdd\u5b88\u6027<\/strong><\/td><td>\u30d6\u30e9\u30f3\u30c9\u30ab\u30e9\u30fc\u5909\u66f4\u6642\u3001Primitive\u30921\u7b87\u6240\u4fee\u6b63\u3059\u308b\u3060\u3051\u3067\u5168\u4f53\u306b\u53cd\u6620<\/td><td>blue-500\u3092\u5909\u66f4\u3059\u308c\u3070\u3001\u5168\u30dc\u30bf\u30f3\u306e\u8272\u304c\u5909\u308f\u308b<\/td><\/tr><tr><td><strong>\u4e00\u8cab\u6027<\/strong><\/td><td>Semantic\u30ec\u30d9\u30eb\u3067\u7528\u9014\u3092\u7d71\u4e00\u3067\u304d\u308b<\/td><td>\u300c\u30d7\u30e9\u30a4\u30de\u30ea\u30dc\u30bf\u30f3\u300d\u306f\u5e38\u306bblue-500<\/td><\/tr><tr><td><strong>\u62e1\u5f35\u6027<\/strong><\/td><td>\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u5bfe\u5fdc\u6642\u3001Semantic\u306e\u53c2\u7167\u5148\u3092\u5207\u308a\u66ff\u3048\u308b\u3060\u3051<\/td><td>text.body: gray.700 \u2192 gray.200\u306b\u5909\u66f4<\/td><\/tr><tr><td><strong>\u53ef\u8aad\u6027<\/strong><\/td><td>\u30b3\u30fc\u30c9\u4e0a\u3067\u610f\u56f3\u304c\u660e\u78ba<\/td><td>button.primary.background\u306e\u65b9\u304cblue-500\u3088\u308a\u5206\u304b\u308a\u3084\u3059\u3044<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u5b9f\u8df5\uff01Figma \u00d7 GPT\u3067\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u69cb\u7bc9 4\u30b9\u30c6\u30c3\u30d7<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img decoding=\"async\" width=\"1536\" height=\"1024\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/file_0000000082a0720bb7cd461f2ea0df3c.jpg\" alt=\"\" class=\"wp-image-12860\" srcset=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/file_0000000082a0720bb7cd461f2ea0df3c.jpg 1536w, https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/file_0000000082a0720bb7cd461f2ea0df3c-768x512.jpg 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n<\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-left\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-15.00.55.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u751f\u5f92<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u5177\u4f53\u7684\u306b\u3069\u3046\u3084\u3063\u3066\u9032\u3081\u308c\u3070\u3044\u3044\u3093\u3067\u3059\u304b\uff1f\u96e3\u3057\u305d\u3046\u2026<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-right\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-15.11.23.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u30da\u30f3\u535a\u58eb<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u5b89\u5fc3\u305b\u3044\uff014\u3064\u306e\u30b9\u30c6\u30c3\u30d7\u306b\u5206\u3051\u3066\u3001\u9806\u3092\u8ffd\u3063\u3066\u8aac\u660e\u3059\u308b\u305e\u3044\u3002\u30c4\u30fc\u30eb\u3082\u7121\u6599\u3067\u4f7f\u3048\u308b\u3082\u306e\u3092\u4e2d\u5fc3\u306b\u7d39\u4ecb\u3059\u308b\u304b\u3089\u3001\u4eca\u65e5\u304b\u3089\u59cb\u3081\u3089\u308c\u308b\u3093\u3058\u3083\uff01<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u524d\u63d0\uff1a\u5fc5\u8981\u306a\u30c4\u30fc\u30eb<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Figma<\/strong>\uff08\u7121\u6599\u30d7\u30e9\u30f3\u53ef\uff09<\/li>\n\n\n\n<li><strong>ChatGPT<\/strong>\uff08GPT-4\u4ee5\u4e0a\u63a8\u5968\u3001\u7121\u6599\u7248\u3067\u3082\u53ef\u80fd\u3060\u304c\u7cbe\u5ea6\u304c\u843d\u3061\u308b\uff09<\/li>\n\n\n\n<li><strong>Figma Make<\/strong>\uff08Figma\u30d7\u30e9\u30b0\u30a4\u30f3\u3001\u7121\u6599\uff09<\/li>\n\n\n\n<li>\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\uff08VS Code\u7b49\uff09<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Figma Make\u3067\u4f7f\u7528\u5024\u3092\u62bd\u51fa<\/h3>\n\n\n\n<p>\u307e\u305a\u3001\u65e2\u5b58\u306eFigma\u30c7\u30b6\u30a4\u30f3\u304b\u3089\u5b9f\u969b\u306b\u4f7f\u7528\u3055\u308c\u3066\u3044\u308b\u8272\u30fb\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u30fb\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u306a\u3069\u306e\u5024\u3092\u5168\u3066\u62bd\u51fa\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1-1. Figma Make\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Figma\u3092\u958b\u304f<\/li>\n\n\n\n<li>\u30e1\u30cb\u30e5\u30fc\u304b\u3089\u300cPlugins\u300d\u2192\u300cFind more plugins\u300d<\/li>\n\n\n\n<li>\u691c\u7d22\u7a93\u306b\u300cFigma Make\u300d\u3068\u5165\u529b<\/li>\n\n\n\n<li>\u300cInstall\u300d\u3092\u30af\u30ea\u30c3\u30af<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">1-2. \u62bd\u51fa\u5bfe\u8c61\u306e\u30d5\u30ec\u30fc\u30e0\u3092\u9078\u629e<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u5316\u3057\u305f\u3044\u30da\u30fc\u30b8\u5168\u4f53\u3001\u307e\u305f\u306f\u4e3b\u8981\u753b\u9762\u3092\u9078\u629e<\/li>\n\n\n\n<li>\u53f3\u30af\u30ea\u30c3\u30af \u2192 Plugins \u2192 Figma Make<\/li>\n\n\n\n<li>\u300cAnalyze\u300d\u30bf\u30d6\u3092\u9078\u629e<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">1-3. \u5024\u306e\u62bd\u51fa<\/h4>\n\n\n\n<p>Figma Make\u304c\u4ee5\u4e0b\u306e\u5024\u3092\u81ea\u52d5\u62bd\u51fa\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Colors\uff1a<\/strong> \u5168\u3066\u306e\u4f7f\u7528\u8272\uff08Fill\u3001Stroke\u3001Shadow\u7b49\uff09<\/li>\n\n\n\n<li><strong>Text Styles\uff1a<\/strong> \u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3001\u30a6\u30a7\u30a4\u30c8\u3001\u884c\u9593\u3001\u6587\u5b57\u9593<\/li>\n\n\n\n<li><strong>Effects\uff1a<\/strong> \u30b7\u30e3\u30c9\u30a6\u3001\u30d6\u30e9\u30fc<\/li>\n\n\n\n<li><strong>Spacing\uff1a<\/strong> Auto Layout\u306egap\u3001padding<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">1-4. \u30c7\u30fc\u30bf\u306e\u30a8\u30af\u30b9\u30dd\u30fc\u30c8<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-json\" data-lang=\"JSON\"><code>\/\/ Figma Make\u304c\u51fa\u529b\u3059\u308b\u5f62\u5f0f\uff08\u4f8b\uff1a\u8272\u306e\u62bd\u51fa\u7d50\u679c\uff09\n{\n  &quot;colors&quot;: [\n    &quot;#3B82F6&quot;,  \/\/ \u4f7f\u7528\u56de\u6570: 45\n    &quot;#1E40AF&quot;,  \/\/ \u4f7f\u7528\u56de\u6570: 23\n    &quot;#93C5FD&quot;,  \/\/ \u4f7f\u7528\u56de\u6570: 12\n    &quot;#F3F4F6&quot;,  \/\/ \u4f7f\u7528\u56de\u6570: 67\n    &quot;#374151&quot;,  \/\/ \u4f7f\u7528\u56de\u6570: 34\n    &quot;#1F2937&quot;,  \/\/ \u4f7f\u7528\u56de\u6570: 28\n    \/\/ ... \u4e0d\u898f\u5247\u306a\u5024\u3082\u542b\u3081\u3066\u5168\u3066\u62bd\u51fa\u3055\u308c\u308b\n    &quot;#3A7FE5&quot;,  \/\/ \u4f7f\u7528\u56de\u6570: 3  \u2190 \u30d6\u30ec\u305f\u5024\n    &quot;#92px&quot;,    \/\/ \u30b9\u30da\u30fc\u30b7\u30f3\u30b0 \u2190 \u4e0d\u898f\u5247\n    &quot;#15px&quot;     \/\/ \u30b9\u30da\u30fc\u30b7\u30f3\u30b0 \u2190 4\u306e\u500d\u6570\u3067\u306f\u306a\u3044\n  ]\n}<\/code><\/pre><\/div>\n\n\n\n<p class=\"is-style-big_icon_caution\"><strong>\u91cd\u8981\uff1a<\/strong> \u3053\u306e\u6bb5\u968e\u3067\u306f\u3001\u4e0d\u898f\u5247\u306a\u5024\u3084\u91cd\u8907\u3057\u305f\u5024\u304c\u305d\u306e\u307e\u307e\u62bd\u51fa\u3055\u308c\u307e\u3059\u3002\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3067GPT\u304c\u3053\u308c\u3092\u6574\u7406\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: GPT\u3067Tailwind\u898f\u5247\u306b\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0<\/h3>\n\n\n\n<p>\u3053\u3053\u304cAI\u6d3b\u7528\u306e\u771f\u9aa8\u9802\u3067\u3059\u3002\u62bd\u51fa\u3057\u305f\u4e0d\u898f\u5247\u306a\u5024\u3092\u3001<strong><span class=\"swl-marker mark_yellow\">Tailwind CSS\u898f\u5247\u306b\u6e96\u62e0\u3057\u305f\u4f53\u7cfb\u7684\u306a\u30c8\u30fc\u30af\u30f3<\/span><\/strong>\u306b\u81ea\u52d5\u5909\u63db\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2-1. GPT\u3078\u306e\u30d7\u30ed\u30f3\u30d7\u30c8\uff08\u8272\u306e\u7d71\u4e00\uff09<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>\u3042\u306a\u305f\u306f\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u306e\u30b9\u30da\u30b7\u30e3\u30ea\u30b9\u30c8\u3067\u3059\u3002\n\u4ee5\u4e0b\u306eFigma\u30c7\u30b6\u30a4\u30f3\u304b\u3089\u62bd\u51fa\u3057\u305f\u8272\u306e\u30ea\u30b9\u30c8\u3092\u3001Tailwind CSS\u306e\u8272\u898f\u5247\u306b\u6e96\u62e0\u3057\u305f\u5f62\u5f0f\u306b\u6574\u7406\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n\n\u3010\u62bd\u51fa\u3055\u308c\u305f\u8272\u30ea\u30b9\u30c8\u3011\n#3B82F6 (\u4f7f\u7528\u56de\u6570: 45)\n#3A7FE5 (\u4f7f\u7528\u56de\u6570: 3)\n#1E40AF (\u4f7f\u7528\u56de\u6570: 23)\n#93C5FD (\u4f7f\u7528\u56de\u6570: 12)\n#DBEAFE (\u4f7f\u7528\u56de\u6570: 8)\n#F3F4F6 (\u4f7f\u7528\u56de\u6570: 67)\n#E5E7EB (\u4f7f\u7528\u56de\u6570: 34)\n#374151 (\u4f7f\u7528\u56de\u6570: 28)\n\n\u3010\u8981\u4ef6\u3011\n1. Tailwind CSS\u306e11\u6bb5\u968e\u30b9\u30b1\u30fc\u30eb\uff0850, 100, 200, ..., 900, 950\uff09\u306b\u6574\u7406\n2. \u8fd1\u4f3c\u8272\u306f\u7d71\u5408\u3057\u3001\u4f7f\u7528\u56de\u6570\u304c\u591a\u3044\u8272\u3092\u512a\u5148\n3. \u8272\u76f8\u306e\u30d6\u30ec\u3092\u4fee\u6b63\u3057\u3001\u660e\u5ea6\u3092\u6b63\u3057\u304f\u5206\u914d\n4. \u51fa\u529b\u306f\u4ee5\u4e0b\u306eJSON\u5f62\u5f0f\u3067\n\n\u3010\u671f\u5f85\u3059\u308b\u51fa\u529b\u5f62\u5f0f\u3011\n{\n  \"blue\": {\n    \"50\": \"#EFF6FF\",\n    \"100\": \"#DBEAFE\",\n    ...\n  },\n  \"gray\": {\n    \"50\": \"#F9FAFB\",\n    ...\n  }\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">2-2. GPT\u306e\u51fa\u529b\u4f8b<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"blue\": {\n    \"50\": \"#EFF6FF\",\n    \"100\": \"#DBEAFE\",\n    \"200\": \"#BFDBFE\",\n    \"300\": \"#93C5FD\",    \/\/ \u62bd\u51fa\u5024 #93C5FD \u3092\u305d\u306e\u307e\u307e\u63a1\u7528\n    \"400\": \"#60A5FA\",\n    \"500\": \"#3B82F6\",    \/\/ \u62bd\u51fa\u5024 #3B82F6 \u3092\u57fa\u6e96\u306b\uff08\u4f7f\u7528\u56de\u6570\u6700\u591a\uff09\n    \"600\": \"#2563EB\",\n    \"700\": \"#1E40AF\",    \/\/ \u62bd\u51fa\u5024 #1E40AF \u3092\u305d\u306e\u307e\u307e\u63a1\u7528\n    \"800\": \"#1E40AF\",\n    \"900\": \"#1E3A8A\",\n    \"950\": \"#172554\"\n  },\n  \"gray\": {\n    \"50\": \"#F9FAFB\",\n    \"100\": \"#F3F4F6\",    \/\/ \u62bd\u51fa\u5024 #F3F4F6 \u3092\u305d\u306e\u307e\u307e\u63a1\u7528\n    \"200\": \"#E5E7EB\",    \/\/ \u62bd\u51fa\u5024 #E5E7EB \u3092\u305d\u306e\u307e\u307e\u63a1\u7528\n    \"300\": \"#D1D5DB\",\n    \"400\": \"#9CA3AF\",\n    \"500\": \"#6B7280\",\n    \"600\": \"#4B5563\",\n    \"700\": \"#374151\",    \/\/ \u62bd\u51fa\u5024 #374151 \u3092\u305d\u306e\u307e\u307e\u63a1\u7528\n    \"800\": \"#1F2937\",\n    \"900\": \"#111827\",\n    \"950\": \"#030712\"\n  }\n}\n\n\u3010\u7d71\u5408\u3057\u305f\u8272\u3011\n\u30fb#3A7FE5\uff08\u4f7f\u7528\u56de\u65703\uff09\u2192 #3B82F6\uff08blue-500\uff09\u306b\u7d71\u5408\n  \u7406\u7531\uff1a\u8272\u76f8\u304c\u8fd1\u304f\u3001\u4f7f\u7528\u56de\u6570\u304c\u5c11\u306a\u3044\u305f\u3081\n\n\u3010\u8ffd\u52a0\u3057\u305f\u968e\u8abf\u3011\n\u30fbblue-50, 100, 200, 400, 600, 800, 900, 950\n  \u7406\u7531\uff1aTailwind\u6a19\u6e96\u30b9\u30b1\u30fc\u30eb\u306e\u5b8c\u5168\u6027\u306e\u305f\u3081<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">2-3. \u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u306e\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>\u3010\u62bd\u51fa\u3055\u308c\u305f\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u3011\n15px (\u4f7f\u7528\u56de\u6570: 12)\n92px (\u4f7f\u7528\u56de\u6570: 5)\n18px (\u4f7f\u7528\u56de\u6570: 23)\n24px (\u4f7f\u7528\u56de\u6570: 45)\n16px (\u4f7f\u7528\u56de\u6570: 67)\n\n\u3010GPT\u3078\u306e\u30d7\u30ed\u30f3\u30d7\u30c8\u3011\n\u4ee5\u4e0b\u306e\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u5024\u3092\u3001Tailwind CSS\u306e4\u306e\u500d\u6570\u898f\u5247\u306b\u6e96\u62e0\u3057\u305f\u5f62\u5f0f\u306b\u5909\u63db\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n\u8fd1\u3044\u5024\u306f\u7d71\u5408\u3057\u3001\u4f7f\u7528\u56de\u6570\u304c\u591a\u3044\u5024\u3092\u512a\u5148\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n\n\u3010GPT\u306e\u51fa\u529b\u3011\n{\n  \"spacing\": {\n    \"1\": \"4px\",    \/\/ 0.25rem\n    \"2\": \"8px\",    \/\/ 0.5rem\n    \"3\": \"12px\",   \/\/ 0.75rem\n    \"4\": \"16px\",   \/\/ 1rem \uff08\u62bd\u51fa\u5024 16px\u3001\u4f7f\u7528\u56de\u6570\u6700\u591a\uff09\n    \"5\": \"20px\",   \/\/ 1.25rem \uff0815px\u219220px\u306b\u6b63\u898f\u5316\uff09\n    \"6\": \"24px\",   \/\/ 1.5rem \uff08\u62bd\u51fa\u5024 24px\uff09\n    \"20\": \"80px\",  \/\/ 5rem \uff0892px\u219280px\u306b\u6b63\u898f\u5316\uff09\n    \"24\": \"96px\"   \/\/ 6rem \uff0892px\u7528\u306e\u4ee3\u66ff\uff09\n  }\n}\n\n\u3010\u5909\u63db\u7406\u7531\u3011\n\u30fb15px\uff08\u4f7f\u752812\u56de\uff09\u2192 16px\uff08spacing-4\uff09\u307e\u305f\u306f20px\uff08spacing-5\uff09\u306b\u7d71\u5408\u3092\u63a8\u5968\n\u30fb92px\uff08\u4f7f\u75285\u56de\uff09\u2192 80px\uff08spacing-20\uff09\u307e\u305f\u306f96px\uff08spacing-24\uff09\u306b\u5909\u66f4\u3092\u63a8\u5968\n\u30fb18px\uff08\u4f7f\u752823\u56de\uff09\u2192 16px\uff08spacing-4\uff09\u307e\u305f\u306f20px\uff08spacing-5\uff09\u306b\u7d71\u5408<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">2-4. \u30bb\u30de\u30f3\u30c6\u30a3\u30c3\u30af\u30c8\u30fc\u30af\u30f3\u306e\u751f\u6210<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>\u3010GPT\u3078\u306e\u30d7\u30ed\u30f3\u30d7\u30c8\u3011\n\u5148\u307b\u3069\u4f5c\u6210\u3057\u305fPrimitive\u30c8\u30fc\u30af\u30f3\u3092\u4f7f\u3063\u3066\u3001\u4ee5\u4e0b\u306e\u7528\u9014\u5225\u306eSemantic\u30c8\u30fc\u30af\u30f3\u3092\u5b9a\u7fa9\u3057\u3066\u304f\u3060\u3055\u3044\uff1a\n\n\u30fb\u30dc\u30bf\u30f3\uff08Primary\u3001Secondary\u3001Danger\uff09\n\u30fb\u30c6\u30ad\u30b9\u30c8\uff08Heading\u3001Body\u3001Muted\u3001Link\uff09\n\u30fb\u80cc\u666f\uff08Page\u3001Card\u3001Hover\uff09\n\u30fb\u30dc\u30fc\u30c0\u30fc\uff08Default\u3001Focus\u3001Error\uff09\n\n\u3010GPT\u306e\u51fa\u529b\u3011\n{\n  \"button\": {\n    \"primary\": {\n      \"background\": \"{color.blue.500}\",\n      \"backgroundHover\": \"{color.blue.600}\",\n      \"text\": \"#FFFFFF\",\n      \"border\": \"{color.blue.500}\"\n    },\n    \"secondary\": {\n      \"background\": \"{color.gray.100}\",\n      \"backgroundHover\": \"{color.gray.200}\",\n      \"text\": \"{color.gray.900}\",\n      \"border\": \"{color.gray.300}\"\n    },\n    \"danger\": {\n      \"background\": \"{color.red.500}\",\n      \"backgroundHover\": \"{color.red.600}\",\n      \"text\": \"#FFFFFF\",\n      \"border\": \"{color.red.500}\"\n    }\n  },\n  \"text\": {\n    \"heading\": \"{color.gray.900}\",\n    \"body\": \"{color.gray.700}\",\n    \"muted\": \"{color.gray.500}\",\n    \"link\": \"{color.blue.600}\",\n    \"linkHover\": \"{color.blue.700}\"\n  },\n  \"background\": {\n    \"page\": \"#FFFFFF\",\n    \"card\": \"{color.gray.50}\",\n    \"hover\": \"{color.gray.100}\"\n  },\n  \"border\": {\n    \"default\": \"{color.gray.200}\",\n    \"focus\": \"{color.blue.500}\",\n    \"error\": \"{color.red.500}\"\n  }\n}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: DTCG\u4ed5\u69d8\u306eJSON\u4f5c\u6210<\/h3>\n\n\n\n<p>Figma\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u305f\u3081\u306eJSON\u5f62\u5f0f\u306f\u3001<strong><span class=\"swl-marker mark_yellow\">DTCG\uff08Design Tokens Community Group\uff09\u4ed5\u69d8<\/span><\/strong>\u306b\u6e96\u62e0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3-1. DTCG\u4ed5\u69d8\u306e\u5fc5\u9808\u8981\u7d20<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>$type<\/code>\uff1a\u30c8\u30fc\u30af\u30f3\u306e\u578b\uff08color\u3001dimension\u3001fontFamily\u7b49\uff09<\/li>\n\n\n\n<li><code>$value<\/code>\uff1a\u5b9f\u969b\u306e\u5024<\/li>\n\n\n\n<li><code>$description<\/code>\uff08\u4efb\u610f\uff09\uff1a\u8aac\u660e<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">3-2. \u8272\u306eDTCG\u5f62\u5f0f<\/h4>\n\n\n\n<p><strong>\u91cd\u8981\uff1a<\/strong> Figma\u306e\u8272\u30a4\u30f3\u30dd\u30fc\u30c8\u306f\u3001<strong><span class=\"swl-marker mark_yellow\">\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u5f62\u5f0f\uff08colorSpace\/components\uff09<\/span><\/strong>\u307e\u305f\u306f<strong><span class=\"swl-marker mark_yellow\">hex\u5f62\u5f0f<\/span><\/strong>\u306e\u307f\u30b5\u30dd\u30fc\u30c8\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-json\" data-lang=\"JSON\"><code>{\n  &quot;color&quot;: {\n    &quot;blue&quot;: {\n      &quot;500&quot;: {\n        &quot;$type&quot;: &quot;color&quot;,\n        &quot;$value&quot;: {\n          &quot;colorSpace&quot;: &quot;srgb&quot;,\n          &quot;components&quot;: {\n            &quot;red&quot;: 0.231,\n            &quot;green&quot;: 0.510,\n            &quot;blue&quot;: 0.965,\n            &quot;alpha&quot;: 1\n          },\n          &quot;hex&quot;: &quot;#3B82F6&quot;\n        },\n        &quot;$description&quot;: &quot;Primary brand color&quot;\n      }\n    }\n  }\n}\n\n\/\/ \u307e\u305f\u306f\u7c21\u6613\u7248\uff08hex \u306e\u307f\uff09\n{\n  &quot;color&quot;: {\n    &quot;blue&quot;: {\n      &quot;500&quot;: {\n        &quot;$type&quot;: &quot;color&quot;,\n        &quot;$value&quot;: &quot;#3B82F6&quot;,\n        &quot;$description&quot;: &quot;Primary brand color&quot;\n      }\n    }\n  }\n}<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">3-3. \u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u306eDTCG\u5f62\u5f0f<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-json\" data-lang=\"JSON\"><code>{\n  &quot;spacing&quot;: {\n    &quot;4&quot;: {\n      &quot;$type&quot;: &quot;dimension&quot;,\n      &quot;$value&quot;: &quot;16px&quot;,\n      &quot;$description&quot;: &quot;Base spacing unit (1rem)&quot;\n    },\n    &quot;6&quot;: {\n      &quot;$type&quot;: &quot;dimension&quot;,\n      &quot;$value&quot;: &quot;24px&quot;,\n      &quot;$description&quot;: &quot;1.5 times base unit&quot;\n    }\n  }\n}<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">3-4. \u5b8c\u5168\u306aDTCG\u30d5\u30a1\u30a4\u30eb\u4f8b<\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-json\" data-lang=\"JSON\"><code>{\n  &quot;$schema&quot;: &quot;https:\/\/design-tokens.org\/schema\/v1&quot;,\n  &quot;color&quot;: {\n    &quot;primitive&quot;: {\n      &quot;blue&quot;: {\n        &quot;50&quot;: {\n          &quot;$type&quot;: &quot;color&quot;,\n          &quot;$value&quot;: &quot;#EFF6FF&quot;\n        },\n        &quot;500&quot;: {\n          &quot;$type&quot;: &quot;color&quot;,\n          &quot;$value&quot;: &quot;#3B82F6&quot;\n        },\n        &quot;900&quot;: {\n          &quot;$type&quot;: &quot;color&quot;,\n          &quot;$value&quot;: &quot;#1E3A8A&quot;\n        }\n      },\n      &quot;gray&quot;: {\n        &quot;100&quot;: {\n          &quot;$type&quot;: &quot;color&quot;,\n          &quot;$value&quot;: &quot;#F3F4F6&quot;\n        },\n        &quot;700&quot;: {\n          &quot;$type&quot;: &quot;color&quot;,\n          &quot;$value&quot;: &quot;#374151&quot;\n        }\n      }\n    },\n    &quot;semantic&quot;: {\n      &quot;button&quot;: {\n        &quot;primary&quot;: {\n          &quot;background&quot;: {\n            &quot;$type&quot;: &quot;color&quot;,\n            &quot;$value&quot;: &quot;{color.primitive.blue.500}&quot;\n          },\n          &quot;text&quot;: {\n            &quot;$type&quot;: &quot;color&quot;,\n            &quot;$value&quot;: &quot;#FFFFFF&quot;\n          }\n        }\n      }\n    }\n  },\n  &quot;spacing&quot;: {\n    &quot;4&quot;: {\n      &quot;$type&quot;: &quot;dimension&quot;,\n      &quot;$value&quot;: &quot;16px&quot;\n    },\n    &quot;6&quot;: {\n      &quot;$type&quot;: &quot;dimension&quot;,\n      &quot;$value&quot;: &quot;24px&quot;\n    }\n  },\n  &quot;fontSize&quot;: {\n    &quot;base&quot;: {\n      &quot;$type&quot;: &quot;dimension&quot;,\n      &quot;$value&quot;: &quot;16px&quot;\n    },\n    &quot;lg&quot;: {\n      &quot;$type&quot;: &quot;dimension&quot;,\n      &quot;$value&quot;: &quot;18px&quot;\n    },\n    &quot;xl&quot;: {\n      &quot;$type&quot;: &quot;dimension&quot;,\n      &quot;$value&quot;: &quot;20px&quot;\n    }\n  }\n}<\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Figma\u3078\u306eVariables\u30a4\u30f3\u30dd\u30fc\u30c8<\/h3>\n\n\n\n<p>\u4f5c\u6210\u3057\u305fJSON\u30d5\u30a1\u30a4\u30eb\u3092Figma\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066\u3001Variables\u3068\u3057\u3066\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">4-1. Figma\u6a19\u6e96\u6a5f\u80fd\u3067\u306e\u30a4\u30f3\u30dd\u30fc\u30c8<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Figma\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u304f<\/li>\n\n\n\n<li>\u53f3\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u300cVariables\u300d\u30a2\u30a4\u30b3\u30f3\u3092\u30af\u30ea\u30c3\u30af<\/li>\n\n\n\n<li>\u300c&#8230;\u300d\u30e1\u30cb\u30e5\u30fc \u2192\u300cImport variables\u300d<\/li>\n\n\n\n<li>\u4f5c\u6210\u3057\u305fJSON\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e<\/li>\n\n\n\n<li>\u300cImport\u300d\u3092\u30af\u30ea\u30c3\u30af<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">4-2. \u30a4\u30f3\u30dd\u30fc\u30c8\u5f8c\u306e\u78ba\u8a8d<\/h4>\n\n\n\n<p>Variables\u30d1\u30cd\u30eb\u306b\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u304b\u78ba\u8a8d\uff1a<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code>color:\n  primitive:\n    blue:\n      50: &quot;#EFF6FF&quot;\n      100: &quot;#DBEAFE&quot;\n      500: &quot;#3B82F6&quot;\n    gray:\n      100: &quot;#F3F4F6&quot;\n\n  semantic:\n    button:\n      primary:\n        background: &quot;{color.primitive.blue.500}&quot;\n        text: &quot;#FFFFFF&quot;\n\nspacing:\n  4: &quot;16px&quot;\n  6: &quot;24px&quot;\n\nfontSize:\n  base: &quot;16px&quot;\n  lg: &quot;18px&quot;<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">4-3. \u65e2\u5b58\u30c7\u30b6\u30a4\u30f3\u3078\u306eVariables\u9069\u7528<\/h4>\n\n\n\n<p>\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u305fVariables\u3092\u3001\u65e2\u5b58\u306e\u30c7\u30b6\u30a4\u30f3\u8981\u7d20\u306b\u9069\u7528\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u8272\u306e\u7f6e\u304d\u63db\u3048<\/strong>\n   &#8211; \u30dc\u30bf\u30f3\u3092\u9078\u629e \u2192 Fill \u2192 Variables \u2192 <code>button.primary.background<\/code> \u3092\u9078\u629e<\/li>\n\n\n\n<li><strong>\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u306e\u7f6e\u304d\u63db\u3048<\/strong>\n   &#8211; Auto Layout\u306egap \u2192 Variables \u2192 <code>spacing.4<\/code> \u3092\u9078\u629e<\/li>\n\n\n\n<li><strong>\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u306e\u7f6e\u304d\u63db\u3048<\/strong>\n   &#8211; \u30c6\u30ad\u30b9\u30c8\u9078\u629e \u2192 Font size \u2192 Variables \u2192 <code>fontSize.lg<\/code> \u3092\u9078\u629e<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">4-4. \u4e00\u62ec\u7f6e\u63db\u306e\u6d3b\u7528<\/h4>\n\n\n\n<p>Figma\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u300cFind and Replace Colors\u300d\u3092\u4f7f\u3046\u3068\u3001\u7279\u5b9a\u306e\u8272\u3092\u4e00\u62ec\u3067Variables\u306b\u7f6e\u63db\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Plugins \u2192 Find and Replace Colors<\/li>\n\n\n\n<li>Find: <code>#3B82F6<\/code><\/li>\n\n\n\n<li>Replace with: Variables \u2192 <code>color.blue.500<\/code><\/li>\n\n\n\n<li>\u300cReplace All\u300d<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u5b9f\u8df5\u4f8b\uff1aWeb\u30b5\u30a4\u30c8\u306e\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u69cb\u7bc9<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img decoding=\"async\" width=\"1536\" height=\"1024\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/1000006398.jpg\" alt=\"\" class=\"wp-image-12861\" srcset=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/1000006398.jpg 1536w, https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/1000006398-768x512.jpg 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n<\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-left\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-14.48.08.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u751f\u5f92<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u69cb\u7bc9\u306e\u5b9f\u8df5\u65b9\u6cd5\u304c\u77e5\u308a\u305f\u3044\u3067\u3059\uff01<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-right\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-15.12.07.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u30da\u30f3\u535a\u58eb<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u3046\u3080\u3002\u3053\u3053\u3067\u306f\u3001\u5b9f\u969b\u306eWeb\u30b5\u30a4\u30c8\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u3001Figma \u00d7 GPT\u3092\u4f7f\u3063\u305f\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u69cb\u7bc9\u3092\u884c\u3063\u305f\u4e8b\u4f8b\u3092\u7d39\u4ecb\u3059\u308b\u305e\uff01<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u6982\u8981<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u5bfe\u8c61\uff1a<\/strong> \u30b3\u30fc\u30dd\u30ec\u30fc\u30c8\u30b5\u30a4\u30c8\u30ea\u30cb\u30e5\u30fc\u30a2\u30eb<\/li>\n\n\n\n<li><strong>\u30da\u30fc\u30b8\u6570\uff1a<\/strong> 15\u30da\u30fc\u30b8<\/li>\n\n\n\n<li><strong>\u72b6\u6cc1\uff1a<\/strong> \u30c7\u30b6\u30a4\u30f3\u30ab\u30f3\u30d7\u5b8c\u6210\u6e08\u307f\u3060\u304cVariables\u672a\u8a2d\u5b9a<\/li>\n\n\n\n<li><strong>\u8ab2\u984c\uff1a<\/strong> \u8272\u304c47\u7a2e\u985e\u3001\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u304c32\u7a2e\u985e\u3068\u4e0d\u898f\u5247<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u5b9f\u65bd\u5185\u5bb9\u3068\u7d50\u679c<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u30d5\u30a7\u30fc\u30ba<\/th><th>\u4f5c\u696d\u6642\u9593<\/th><th>\u6210\u679c<\/th><\/tr><\/thead><tbody><tr><td><strong>Step 1: \u62bd\u51fa<\/strong><\/td><td>30\u5206<\/td><td>\u827247\u7a2e\u3001\u30b9\u30da\u30fc\u30b7\u30f3\u30b032\u7a2e\u3001\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba12\u7a2e\u3092\u62bd\u51fa<\/td><\/tr><tr><td><strong>Step 2: \u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0<\/strong><\/td><td>1\u6642\u9593<\/td><td>\u8272\u309211\u968e\u8abf\u00d74\u8272\u76f8\u306b\u7d71\u5408\u3001\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u309216\u7a2e\u306b\u6b63\u898f\u5316<\/td><\/tr><tr><td><strong>Step 3: JSON\u4f5c\u6210<\/strong><\/td><td>30\u5206<\/td><td>DTCG\u4ed5\u69d8\u306e\u5b8c\u5168\u306aJSON\u30d5\u30a1\u30a4\u30eb\u4f5c\u6210<\/td><\/tr><tr><td><strong>Step 4: \u30a4\u30f3\u30dd\u30fc\u30c8\u30fb\u9069\u7528<\/strong><\/td><td>2\u6642\u9593<\/td><td>\u516815\u30da\u30fc\u30b8\u306bVariables\u9069\u7528\u5b8c\u4e86<\/td><\/tr><tr><td><strong>\u5408\u8a08<\/strong><\/td><td><strong>4\u6642\u9593<\/strong><\/td><td>\u5f93\u6765\u624b\u6cd5\uff08\u63a8\u5b9a30\u6642\u9593\uff09\u304b\u3089<strong>87%\u524a\u6e1b<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u524a\u6e1b\u3067\u304d\u305f\u8272\u306e\u4f8b<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\u3010Before\uff0847\u8272\uff09\u3011\n#3B82F6, #3A7FE5, #4287F7, #2F7AE0  \/\/ \u2190 \u30d6\u30ec\u305f\u9752\u8272\u304c4\u7a2e\u985e\n#1E40AF, #1D3DAC, #2044B2           \/\/ \u2190 \u30d6\u30ec\u305f\u6fc3\u3044\u9752\u304c3\u7a2e\u985e\n#F3F4F6, #F4F5F7, #F2F3F5           \/\/ \u2190 \u307b\u307c\u540c\u3058\u30b0\u30ec\u30fc\u304c3\u7a2e\u985e\n... \uff08\u4ee5\u4e0b43\u8272\uff09\n\n\u3010After\uff0844\u8272\uff1d11\u968e\u8abf\u00d74\u8272\u76f8\uff09\u3011\nblue-50, blue-100, ..., blue-950   \/\/ 11\u8272\ngray-50, gray-100, ..., gray-950   \/\/ 11\u8272\ngreen-50, green-100, ..., green-950 \/\/ 11\u8272\nred-50, red-100, ..., red-950       \/\/ 11\u8272\n\n\u3010\u524a\u6e1b\u7387\u3011\n47\u8272 \u2192 44\u8272\u306b\u7d71\u5408\uff08\u91cd\u8907\u6392\u9664\uff09\n\u5b9f\u8cea\u7684\u306a\u7ba1\u7406\u30b3\u30b9\u30c8\uff1a1\/3\u4ee5\u4e0b\uff08\u4f53\u7cfb\u5316\u306b\u3088\u308a\uff09<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u958b\u767a\u3078\u306e\u5f71\u97ff<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>CSS\u5909\u6570\u306e\u751f\u6210\uff1a<\/strong> Figma Variables\u304b\u3089\u81ea\u52d5\u751f\u6210\u53ef\u80fd\u306b<\/li>\n\n\n\n<li><strong>Tailwind\u3068\u306e\u6574\u5408\u6027\uff1a<\/strong> \u30af\u30e9\u30b9\u540d\u304c\u5b8c\u5168\u4e00\u81f4\uff08<code>text-blue-500<\/code>\u7b49\uff09<\/li>\n\n\n\n<li><strong>\u958b\u767a\u52b9\u7387\uff1a<\/strong> \u30c7\u30b6\u30a4\u30f3\u78ba\u8a8d\u56de\u6570\u304c70%\u524a\u6e1b<\/li>\n\n\n\n<li><strong>\u4fdd\u5b88\u6027\uff1a<\/strong> \u30d6\u30e9\u30f3\u30c9\u30ab\u30e9\u30fc\u5909\u66f4\u6642\u30011\u7b87\u6240\u306e\u4fee\u6b63\u3067\u5168\u4f53\u306b\u53cd\u6620<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u30c4\u30fc\u30eb\u6bd4\u8f03\uff1aFigma Make vs \u4ed6\u306e\u9078\u629e\u80a2<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u30c4\u30fc\u30eb<\/th><th>\u6599\u91d1<\/th><th>\u62bd\u51fa\u7cbe\u5ea6<\/th><th>GPT\u9023\u643a<\/th><th>\u304a\u3059\u3059\u3081\u5ea6<\/th><th>\u5099\u8003<\/th><\/tr><\/thead><tbody><tr><td><strong>Figma Make<\/strong><\/td><td>\u7121\u6599<\/td><td>\u2605\u2605\u2605\u2605\u2605<\/td><td>\u30b3\u30d4\u30fc&amp;\u30da\u30fc\u30b9\u30c8\u3067\u9023\u643a<\/td><td>\u2605\u2605\u2605\u2605\u2605<\/td><td>\u6700\u3082\u63a8\u5968\u3002\u4f7f\u7528\u983b\u5ea6\u3082\u8868\u793a<\/td><\/tr><tr><td><strong>Design Tokens<\/strong><br>\uff08\u30d7\u30e9\u30b0\u30a4\u30f3\uff09<\/td><td>\u7121\u6599<\/td><td>\u2605\u2605\u2605\u2605\u2606<\/td><td>JSON\u51fa\u529b\u53ef\u80fd<\/td><td>\u2605\u2605\u2605\u2605\u2606<\/td><td>\u76f4\u63a5DTCG\u5f62\u5f0f\u3067\u51fa\u529b\u53ef\u80fd<\/td><\/tr><tr><td><strong>Tokens Studio<\/strong><\/td><td>\u7121\u6599\u301c$10\/\u6708<\/td><td>\u2605\u2605\u2605\u2605\u2605<\/td><td>API\u9023\u643a\u53ef\u80fd<\/td><td>\u2605\u2605\u2605\u2605\u2606<\/td><td>\u9ad8\u6a5f\u80fd\u3060\u304c\u5b66\u7fd2\u30b3\u30b9\u30c8\u9ad8<\/td><\/tr><tr><td><strong>\u624b\u4f5c\u696d<\/strong><\/td><td>\u7121\u6599<\/td><td>\u2605\u2605\u2606\u2606\u2606<\/td><td>\u306a\u3057<\/td><td>\u2605\u2606\u2606\u2606\u2606<\/td><td>\u5c0f\u898f\u6a21\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u307f<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">ChatGPT vs Claude for \u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u69cb\u7bc9<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u9805\u76ee<\/th><th>ChatGPT\uff08GPT-4\/4.5\uff09<\/th><th>Claude\uff083.5 Sonnet\uff09<\/th><\/tr><\/thead><tbody><tr><td><strong>\u8272\u306e\u7d71\u4e00\u7cbe\u5ea6<\/strong><\/td><td>\u2605\u2605\u2605\u2605\u2605<br>\u8272\u76f8\u306e\u30d6\u30ec\u88dc\u6b63\u304c\u512a\u79c0<\/td><td>\u2605\u2605\u2605\u2605\u2606<br>\u3084\u3084\u4fdd\u5b88\u7684<\/td><\/tr><tr><td><strong>JSON\u751f\u6210<\/strong><\/td><td>\u2605\u2605\u2605\u2605\u2605<br>DTCG\u4ed5\u69d8\u3092\u6b63\u78ba\u306b\u7406\u89e3<\/td><td>\u2605\u2605\u2605\u2605\u2605<br>\u540c\u7b49\u306b\u512a\u79c0<\/td><\/tr><tr><td><strong>\u5927\u91cf\u30c7\u30fc\u30bf\u51e6\u7406<\/strong><\/td><td>\u2605\u2605\u2605\u2605\u2606<br>100\u8272\u7a0b\u5ea6\u307e\u3067<\/td><td>\u2605\u2605\u2605\u2605\u2605<br>200KB\u4ee5\u4e0a\u306e\u30d5\u30a1\u30a4\u30eb\u3082\u53ef<\/td><\/tr><tr><td><strong>\u6599\u91d1<\/strong><\/td><td>$20\/\u6708\uff08Plus\uff09<\/td><td>$20\/\u6708\uff08Pro\uff09<\/td><\/tr><tr><td><strong>\u63a8\u5968<\/strong><\/td><td>\u2605\u2605\u2605\u2605\u2605<br>\u5c0f\u301c\u4e2d\u898f\u6a21\u5411\u3051<\/td><td>\u2605\u2605\u2605\u2605\u2605<br>\u5927\u898f\u6a21\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u5411\u3051<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"is-style-big_icon_check\"><strong>\u7d50\u8ad6\uff1a<\/strong> \u901a\u5e38\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u3042\u308c\u3070ChatGPT\u3001\u8d85\u5927\u898f\u6a21\uff0850\u30da\u30fc\u30b8\u4ee5\u4e0a\uff09\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306fClaude\u304c\u63a8\u5968\u3067\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img decoding=\"async\" width=\"1536\" height=\"1024\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/1000006399.jpg\" alt=\"\" class=\"wp-image-12862\" srcset=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/1000006399.jpg 1536w, https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/1000006399-768x512.jpg 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n<\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-left\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-15.00.55.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u751f\u5f92<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>Figma\u3068GPT\u3092\u4f7f\u7528\u3059\u308b\u306b\u3042\u305f\u3063\u3066\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u3053\u3068\u3082\u77e5\u308a\u305f\u3044\u3067\u3059\uff01<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-right\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-15.09.27.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u30da\u30f3\u535a\u58eb<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong><strong><strong>\u3046\u3080\u3002\u3053\u3053\u3067\u306f\u3001\u4e3b\u306a\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u30923\u3064\u7d39\u4ecb\u3059\u308b\u305e\u3044\uff01<\/strong><\/strong><\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u554f\u984c1: Figma\u304cJSON\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3067\u304d\u306a\u3044<\/h3>\n\n\n\n<p><strong>\u75c7\u72b6\uff1a<\/strong> \u300cInvalid JSON format\u300d\u30a8\u30e9\u30fc\u304c\u8868\u793a\u3055\u308c\u308b<\/p>\n\n\n\n<p><strong>\u539f\u56e0\u3068\u89e3\u6c7a\u7b56\uff1a<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u8272\u306e\u5f62\u5f0f\u304c\u4e0d\u6b63<\/strong> &#8211; <code>\"$value\": \"rgb(59, 130, 246)\"<\/code> &#8211;<strong>\u6b63\u3057\u304f\u306f <\/strong><code>\"$value\": \"#3B82F6\"<\/code> &#8211; \u307e\u305f\u306f <code>\"$value\": {\"colorSpace\": \"srgb\", ...}<\/code><\/li>\n\n\n\n<li><strong>$type\u304c\u4e0d\u6b63<\/strong> &#8211; <code>\"$type\": \"colour\"<\/code> &#8211; <strong>\u6b63\u3057\u304f\u306f <\/strong><code>\"$type\": \"color\"<\/code><\/li>\n\n\n\n<li><strong>\u53c2\u7167\u69cb\u6587\u304c\u4e0d\u6b63<\/strong> &#8211; <code>\"$value\": \"color.blue.500\"<\/code> &#8211; <strong>\u6b63\u3057\u304f\u306f <\/strong><code>\"$value\": \"{color.blue.500}\"<\/code><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">\u554f\u984c2: GPT\u304c\u898f\u5247\u3092\u5b88\u3089\u306a\u3044<\/h3>\n\n\n\n<p><strong>\u75c7\u72b6\uff1a<\/strong> Tailwind\u898f\u5247\u3067\u306f\u306a\u3044\u72ec\u81ea\u306e\u5024\u3092\u751f\u6210\u3057\u3066\u3057\u307e\u3046<\/p>\n\n\n\n<p><strong>\u89e3\u6c7a\u7b56\uff1a<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u3010\u6539\u5584\u524d\u306e\u30d7\u30ed\u30f3\u30d7\u30c8\u3011\n\u300cTailwind CSS\u306b\u5408\u308f\u305b\u3066\u6574\u7406\u3057\u3066\u304f\u3060\u3055\u3044\u300d\n\n\u3010\u6539\u5584\u5f8c\u306e\u30d7\u30ed\u30f3\u30d7\u30c8\u3011\n\u300c\u4ee5\u4e0b\u306e\u53b3\u5bc6\u306a\u30eb\u30fc\u30eb\u306b\u5f93\u3063\u3066\u304f\u3060\u3055\u3044\uff1a\n1. \u8272\u306f\u5fc5\u305a50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950\u306e11\u6bb5\u968e\n2. \u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u306f\u5fc5\u305a4\u306e\u500d\u6570\uff084px, 8px, 12px, 16px, ...\uff09\n3. \u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u306fTailwind\u306e\u5b9a\u7fa9\uff08xs=12px, sm=14px, base=16px, lg=18px, xl=20px, 2xl=24px, ...)\u306b\u53b3\u5bc6\u306b\u5f93\u3046\n4. \u51fa\u529b\u306fDTCG\u4ed5\u69d8\u306eJSON\u5f62\u5f0f\u306e\u307f\n\n\u3010\u53c2\u8003\u3011Tailwind CSS\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\nhttps:&#47;&#47;tailwindcss.com\/docs\/customizing-colors\n\u300d<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u554f\u984c3: \u65e2\u5b58\u30c7\u30b6\u30a4\u30f3\u3068\u30c8\u30fc\u30af\u30f3\u306e\u8272\u304c\u5408\u308f\u306a\u3044<\/h3>\n\n\n\n<p><strong>\u75c7\u72b6\uff1a<\/strong> \u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u5f8c\u306e\u8272\u304c\u3001\u5143\u306e\u30c7\u30b6\u30a4\u30f3\u3068\u8996\u899a\u7684\u306b\u7570\u306a\u308b<\/p>\n\n\n\n<p><strong>\u89e3\u6c7a\u7b56\uff1a<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d7\u30ed\u30f3\u30d7\u30c8\u306b\u300c\u53ef\u80fd\u306a\u9650\u308a\u5143\u306e\u8272\u3092\u4fdd\u6301\u300d\u3092\u8ffd\u52a0<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>\u300c\u62bd\u51fa\u3055\u308c\u305f\u8272\u306e\u3046\u3061\u3001\u4f7f\u7528\u56de\u6570\u304c\u591a\u3044\u3082\u306e\u306f\u53ef\u80fd\u306a\u9650\u308a\u305d\u306e\u307e\u307e\u63a1\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002\nTailwind\u306e\u968e\u8abf\u306b\u5f53\u3066\u306f\u307e\u3089\u306a\u3044\u5834\u5408\u306e\u307f\u3001\u6700\u3082\u8fd1\u3044\u6a19\u6e96\u8272\u306b\u7f6e\u304d\u63db\u3048\u3066\u304f\u3060\u3055\u3044\u3002\u300d<\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30ab\u30b9\u30bf\u30e0\u30ab\u30e9\u30fc\u306e\u8ffd\u52a0<\/strong><\/li>\n<\/ol>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-json\" data-lang=\"JSON\"><code>{\n  &quot;color&quot;: {\n    &quot;brand&quot;: {  \/\/ Tailwind\u306b\u306f\u306a\u3044\u72ec\u81ea\u30ab\u30e9\u30fc\u3068\u3057\u3066\u5b9a\u7fa9\n      &quot;primary&quot;: {\n        &quot;$type&quot;: &quot;color&quot;,\n        &quot;$value&quot;: &quot;#3A7FE5&quot;  \/\/ \u5143\u306e\u30d6\u30e9\u30f3\u30c9\u30ab\u30e9\u30fc\u3092\u305d\u306e\u307e\u307e\u4fdd\u6301\n      }\n    },\n    &quot;blue&quot;: {  \/\/ Tailwind\u6e96\u62e0\u306e\u6c4e\u7528\u30ab\u30e9\u30fc\n      &quot;500&quot;: {\n        &quot;$type&quot;: &quot;color&quot;,\n        &quot;$value&quot;: &quot;#3B82F6&quot;\n      }\n    }\n  }\n}<\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u30b3\u30d4\u30da\u3067\u4f7f\u3048\u308b\uff01GPT\u30d7\u30ed\u30f3\u30d7\u30c8\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u96c6<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img decoding=\"async\" width=\"1536\" height=\"1024\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/1000006400.jpg\" alt=\"\" class=\"wp-image-12863\" srcset=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/1000006400.jpg 1536w, https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/1000006400-768x512.jpg 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n<\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-left\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-14.48.08.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u751f\u5f92<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u69cb\u7bc9\u306e\u30d7\u30ed\u30f3\u30d7\u30c8\u3092\u77e5\u308a\u305f\u3044\u3067\u3059\uff01<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-right\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-15.12.07.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u30da\u30f3\u535a\u58eb<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u3046\u3080\u3002\u3053\u3053\u3067\u306f\u3001\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u3059\u3050\u306b\u4f7f\u3048\u308b\u30d7\u30ed\u30f3\u30d7\u30c8\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u7d39\u4ecb\u3059\u308b\u305e\u3002\u3010\u3011\u5185\u3092\u81ea\u5206\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u5024\u306b\u7f6e\u304d\u63db\u3048\u3066\u4f7f\u7528\u3059\u308b\u306e\u3058\u3083\uff01<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u30c6\u30f3\u30d7\u30ec\u30fc\u30c81: \u8272\u306e\u7d71\u4e00\u3068\u968e\u8abf\u5316<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\u3042\u306a\u305f\u306fUI\/UX\u30c7\u30b6\u30a4\u30f3\u306e\u30b9\u30da\u30b7\u30e3\u30ea\u30b9\u30c8\u3067\u3059\u3002\n\u4ee5\u4e0b\u306eFigma\u30c7\u30b6\u30a4\u30f3\u304b\u3089\u62bd\u51fa\u3057\u305f\u8272\u306e\u30ea\u30b9\u30c8\u3092\u3001Tailwind CSS\u306e\u8272\u898f\u5247\u306b\u6e96\u62e0\u3057\u305f11\u6bb5\u968e\u30b9\u30b1\u30fc\u30eb\u306b\u6574\u7406\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n\n\u3010\u62bd\u51fa\u3055\u308c\u305f\u8272\u30ea\u30b9\u30c8\u3011\n\u3010\u3053\u3053\u306b\u8272\u306e\u30ea\u30b9\u30c8\u3092\u8cbc\u308a\u4ed8\u3051\u3011\n\u4f8b:\n#3B82F6 (\u4f7f\u7528\u56de\u6570: 45)\n#3A7FE5 (\u4f7f\u7528\u56de\u6570: 3)\n#1E40AF (\u4f7f\u7528\u56de\u6570: 23)\n\n\u3010\u8981\u4ef6\u3011\n1. Tailwind CSS\u306e11\u6bb5\u968e\u30b9\u30b1\u30fc\u30eb\uff0850, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950\uff09\u306b\u53b3\u5bc6\u306b\u5f93\u3046\n2. \u8fd1\u4f3c\u8272\u306f\u7d71\u5408\u3057\u3001\u4f7f\u7528\u56de\u6570\u304c\u591a\u3044\u8272\u3092\u512a\u5148\u7684\u306b\u63a1\u7528\n3. \u8272\u76f8\u306e\u30d6\u30ec\u3092\u4fee\u6b63\u3057\u3001\u660e\u5ea6\u3092\u6b63\u3057\u304f\u5206\u914d\n4. \u5404\u8272\u306e\u9078\u629e\u7406\u7531\u3092\u7c21\u6f54\u306b\u8a18\u8f09\n5. \u7d71\u5408\u3057\u305f\u8272\u3068\u65b0\u898f\u8ffd\u52a0\u3057\u305f\u8272\u3092\u660e\u8a18\n\n\u3010\u51fa\u529b\u5f62\u5f0f\u3011\n\u4ee5\u4e0b\u306eJSON\u5f62\u5f0f\u3067\u51fa\u529b\u3057\u3066\u304f\u3060\u3055\u3044\uff1a\n{\n  \"\u3010\u8272\u540d\u3011\": {\n    \"50\": \"#XXXXXX\",\n    \"100\": \"#XXXXXX\",\n    ...\n  }\n}\n\n\u3010\u7d71\u5408\u30fb\u8ffd\u52a0\u3057\u305f\u8272\u306e\u8aac\u660e\u3011\n\u30fb\u7d71\u5408\u3057\u305f\u8272: ...\n\u30fb\u8ffd\u52a0\u3057\u305f\u8272: ...<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u30c6\u30f3\u30d7\u30ec\u30fc\u30c82: \u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u306e\u6b63\u898f\u5316<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\u4ee5\u4e0b\u306e\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u5024\u3092\u3001Tailwind CSS\u306e4\u306e\u500d\u6570\u898f\u5247\u306b\u6e96\u62e0\u3057\u305f\u5f62\u5f0f\u306b\u5909\u63db\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n\n\u3010\u62bd\u51fa\u3055\u308c\u305f\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u3011\n\u3010\u3053\u3053\u306b\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u5024\u3092\u8cbc\u308a\u4ed8\u3051\u3011\n\u4f8b:\n15px (\u4f7f\u7528\u56de\u6570: 12)\n92px (\u4f7f\u7528\u56de\u6570: 5)\n18px (\u4f7f\u7528\u56de\u6570: 23)\n24px (\u4f7f\u7528\u56de\u6570: 45)\n16px (\u4f7f\u7528\u56de\u6570: 67)\n\n\u3010\u8981\u4ef6\u3011\n1. \u5168\u3066\u306e\u5024\u30924\u306e\u500d\u6570\u306b\u5909\u63db\uff084px, 8px, 12px, 16px, 20px, 24px, ...\uff09\n2. \u8fd1\u3044\u5024\u306f\u7d71\u5408\u3057\u3001\u4f7f\u7528\u56de\u6570\u304c\u591a\u3044\u5024\u3092\u512a\u5148\n3. Tailwind\u306espacing-1\u301cspacing-96\u306e\u7bc4\u56f2\u5185\n4. \u5909\u63db\u524d\u5f8c\u306e\u5bfe\u5fdc\u8868\u3092\u4f5c\u6210\n\n\u3010\u51fa\u529b\u5f62\u5f0f\u3011\n{\n  \"spacing\": {\n    \"1\": \"4px\",    \/\/ 0.25rem\n    \"2\": \"8px\",    \/\/ 0.5rem\n    ...\n  }\n}\n\n\u3010\u5909\u63db\u5bfe\u5fdc\u8868\u3011\n\u30fb15px \u2192 16px (spacing-4) \u306b\u7d71\u5408 \u7406\u7531: ...\n\u30fb92px \u2192 96px (spacing-24) \u306b\u5909\u66f4 \u7406\u7531: ...<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u30c6\u30f3\u30d7\u30ec\u30fc\u30c83: \u30bb\u30de\u30f3\u30c6\u30a3\u30c3\u30af\u30c8\u30fc\u30af\u30f3\u751f\u6210<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\u4ee5\u4e0b\u306ePrimitive\u30c8\u30fc\u30af\u30f3\u3092\u4f7f\u3063\u3066\u3001\u7528\u9014\u5225\u306eSemantic\u30c8\u30fc\u30af\u30f3\u3092\u5b9a\u7fa9\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n\n\u3010Primitive\u30c8\u30fc\u30af\u30f3\u3011\n\u3010\u3053\u3053\u306bPrimitive\u30c8\u30fc\u30af\u30f3\u306eJSON\u3092\u8cbc\u308a\u4ed8\u3051\u3011\n\n\u3010\u5b9a\u7fa9\u304c\u5fc5\u8981\u306aSemantic\u8981\u7d20\u3011\n1. \u30dc\u30bf\u30f3\n   - Primary\uff08\u4e3b\u8981\u30a2\u30af\u30b7\u30e7\u30f3\uff09\n   - Secondary\uff08\u526f\u6b21\u30a2\u30af\u30b7\u30e7\u30f3\uff09\n   - Danger\uff08\u524a\u9664\u7b49\u306e\u5371\u967a\u64cd\u4f5c\uff09\n   - Disabled\uff08\u7121\u52b9\u72b6\u614b\uff09\n\n2. \u30c6\u30ad\u30b9\u30c8\n   - Heading\uff08\u898b\u51fa\u3057\uff09\n   - Body\uff08\u672c\u6587\uff09\n   - Muted\uff08\u88dc\u8db3\u60c5\u5831\uff09\n   - Link\uff08\u30ea\u30f3\u30af\uff09\n   - Error\uff08\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\uff09\n\n3. \u80cc\u666f\n   - Page\uff08\u30da\u30fc\u30b8\u80cc\u666f\uff09\n   - Card\uff08\u30ab\u30fc\u30c9\u80cc\u666f\uff09\n   - Hover\uff08\u30db\u30d0\u30fc\u72b6\u614b\uff09\n   - Selected\uff08\u9078\u629e\u72b6\u614b\uff09\n\n4. \u30dc\u30fc\u30c0\u30fc\n   - Default\uff08\u30c7\u30d5\u30a9\u30eb\u30c8\uff09\n   - Focus\uff08\u30d5\u30a9\u30fc\u30ab\u30b9\u72b6\u614b\uff09\n   - Error\uff08\u30a8\u30e9\u30fc\u72b6\u614b\uff09\n\n\u3010\u8981\u4ef6\u3011\n1. \u5404\u8981\u7d20\u306bbackground\u3001text\u3001border\uff08\u8a72\u5f53\u3059\u308b\u5834\u5408\uff09\u3092\u5b9a\u7fa9\n2. hover\u3001active\u3001disabled\u7b49\u306e\u72b6\u614b\u3082\u542b\u3081\u308b\n3. Primitive\u30c8\u30fc\u30af\u30f3\u3092\u53c2\u7167\u3059\u308b\u5f62\u5f0f\u3067\u8a18\u8ff0\uff08{color.blue.500}\u5f62\u5f0f\uff09\n\n\u3010\u51fa\u529b\u5f62\u5f0f\u3011\nDTCG\u4ed5\u69d8\u306eJSON\u5f62\u5f0f<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u30c6\u30f3\u30d7\u30ec\u30fc\u30c84: \u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u306e\u4f53\u7cfb\u5316<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\u4ee5\u4e0b\u306e\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3092\u3001Tailwind CSS\u306e\u898f\u5247\u306b\u6e96\u62e0\u3057\u305f\u5f62\u5f0f\u306b\u6574\u7406\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n\n\u3010\u62bd\u51fa\u3055\u308c\u305f\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3011\n\u3010\u3053\u3053\u306b\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u306e\u30ea\u30b9\u30c8\u3092\u8cbc\u308a\u4ed8\u3051\u3011\n\u4f8b:\n14px (\u4f7f\u7528\u56de\u6570: 67)\n15px (\u4f7f\u7528\u56de\u6570: 12)\n17px (\u4f7f\u7528\u56de\u6570: 23)\n18px (\u4f7f\u7528\u56de\u6570: 45)\n\n\u3010\u8981\u4ef6\u3011\n1. Tailwind\u306e\u6a19\u6e96\u30b9\u30b1\u30fc\u30eb\u306b\u5f93\u3046\n   xs: 12px, sm: 14px, base: 16px, lg: 18px, xl: 20px, 2xl: 24px, 3xl: 30px, 4xl: 36px, 5xl: 48px, 6xl: 60px, 7xl: 72px, 8xl: 96px, 9xl: 128px\n2. \u8fd1\u4f3c\u5024\u306f\u7d71\u5408\n3. line-height\u3082\u5408\u308f\u305b\u3066\u5b9a\u7fa9\uff081.5\u304c\u57fa\u672c\u3001\u898b\u51fa\u3057\u306f1.25\uff09\n\n\u3010\u51fa\u529b\u5f62\u5f0f\u3011\n{\n  \"fontSize\": {\n    \"xs\": {\n      \"$type\": \"dimension\",\n      \"$value\": \"12px\",\n      \"lineHeight\": \"18px\"\n    },\n    ...\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u30c6\u30f3\u30d7\u30ec\u30fc\u30c85: DTCG\u5f62\u5f0f\u3078\u306e\u5909\u63db<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\u4ee5\u4e0b\u306e\u30b7\u30f3\u30d7\u30eb\u306aJSON\u5f62\u5f0f\u306e\u30c7\u30b6\u30a4\u30f3\u30c8\u30fc\u30af\u30f3\u3092\u3001DTCG\uff08Design Tokens Community Group\uff09\u4ed5\u69d8\u306b\u5909\u63db\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n\n\u3010\u5165\u529bJSON\u3011\n\u3010\u3053\u3053\u306b\u30b7\u30f3\u30d7\u30eb\u306aJSON\u3092\u8cbc\u308a\u4ed8\u3051\u3011\n\u4f8b:\n{\n  \"blue-500\": \"#3B82F6\",\n  \"spacing-4\": \"16px\"\n}\n\n\u3010\u8981\u4ef6\u3011\n1. $schema\u3001$type\u3001$value \u3092\u542b\u3081\u308b\n2. \u8272\u306f\u4ee5\u4e0b\u306e\u3044\u305a\u308c\u304b\u306e\u5f62\u5f0f\n   - \u7c21\u6613\u7248: \"$value\": \"#3B82F6\"\n   - \u8a73\u7d30\u7248: \"$value\": {\"colorSpace\": \"srgb\", \"components\": {...}, \"hex\": \"#3B82F6\"}\n3. \u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u306f \"$type\": \"dimension\" \u3092\u4f7f\u7528\n4. \u968e\u5c64\u69cb\u9020\u3092\u9069\u5207\u306b\u8a2d\u5b9a\n\n\u3010\u51fa\u529b\u5f62\u5f0f\u3011\nDTCG\u4ed5\u69d8\u306e\u5b8c\u5168\u306aJSON<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u30c6\u30f3\u30d7\u30ec\u30fc\u30c86: \u8272\u306e\u660e\u5ea6\u8abf\u6574<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\u4ee5\u4e0b\u306e\u8272\u30bb\u30c3\u30c8\u306e\u660e\u5ea6\u3092\u3001Tailwind CSS\u306e\u6a19\u6e96\u7684\u306a\u660e\u5ea6\u5206\u5e03\u306b\u5408\u308f\u305b\u3066\u8abf\u6574\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n\n\u3010\u73fe\u5728\u306e\u8272\u30bb\u30c3\u30c8\u3011\n\u3010\u3053\u3053\u306b\u8272\u306e\u30ea\u30b9\u30c8\u3092\u8cbc\u308a\u4ed8\u3051\u3011\n\n\u3010\u8981\u4ef6\u3011\n1. 50\u306f\u975e\u5e38\u306b\u660e\u308b\u3044\uff08\u660e\u5ea695%\u7a0b\u5ea6\uff09\n2. 500\u306f\u57fa\u6e96\u8272\uff08\u660e\u5ea650%\u7a0b\u5ea6\uff09\n3. 950\u306f\u975e\u5e38\u306b\u6697\u3044\uff08\u660e\u5ea610%\u7a0b\u5ea6\uff09\n4. \u5404\u968e\u8abf\u306e\u660e\u5ea6\u5dee\u304c\u5747\u7b49\u306b\u306a\u308b\u3088\u3046\u306b\u8abf\u6574\n5. \u8272\u76f8\u3068\u5f69\u5ea6\u306f\u53ef\u80fd\u306a\u9650\u308a\u7dad\u6301\n\n\u3010\u53c2\u8003\u3011Tailwind\u306eblue\u968e\u8abf\n50: #EFF6FF (L: 97%)\n100: #DBEAFE (L: 94%)\n200: #BFDBFE (L: 88%)\n300: #93C5FD (L: 78%)\n400: #60A5FA (L: 67%)\n500: #3B82F6 (L: 55%)  \u2190 \u57fa\u6e96\n600: #2563EB (L: 50%)\n700: #1D4ED8 (L: 43%)\n800: #1E40AF (L: 36%)\n900: #1E3A8A (L: 28%)\n950: #172554 (L: 14%)\n\n\u3010\u51fa\u529b\u5f62\u5f0f\u3011\n\u8abf\u6574\u5f8c\u306e11\u6bb5\u968e\u306e\u8272\u30b3\u30fc\u30c9\u3068\u3001\u5404\u968e\u8abf\u306e\u660e\u5ea6(%)<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u30c6\u30f3\u30d7\u30ec\u30fc\u30c87: \u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u5bfe\u5fdc\u30c8\u30fc\u30af\u30f3<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\u4ee5\u4e0b\u306eSemantic\u30c8\u30fc\u30af\u30f3\u306b\u3001\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u7528\u306e\u5024\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n\n\u3010\u73fe\u5728\u306eSemantic\u30c8\u30fc\u30af\u30f3\uff08\u30e9\u30a4\u30c8\u30e2\u30fc\u30c9\uff09\u3011\n\u3010\u3053\u3053\u306bSemantic\u30c8\u30fc\u30af\u30f3\u3092\u8cbc\u308a\u4ed8\u3051\u3011\n\n\u3010\u8981\u4ef6\u3011\n1. \u30e9\u30a4\u30c8\u30e2\u30fc\u30c9\u3068\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u3067\u7570\u306a\u308bPrimitive\u30c8\u30fc\u30af\u30f3\u3092\u53c2\u7167\n2. \u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u3067\u306f\u80cc\u666f\u306f\u6697\u304f\u3001\u30c6\u30ad\u30b9\u30c8\u306f\u660e\u308b\u304f\n3. \u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u3092\u7dad\u6301\uff08WCAG AA\u57fa\u6e96\uff1a4.5:1\u4ee5\u4e0a\uff09\n4. \u30d6\u30e9\u30f3\u30c9\u30ab\u30e9\u30fc\u306e\u8a8d\u8b58\u6027\u3092\u4fdd\u3064\n\n\u3010\u51fa\u529b\u5f62\u5f0f\u3011\n{\n  \"color\": {\n    \"semantic\": {\n      \"button\": {\n        \"primary\": {\n          \"background\": {\n            \"$type\": \"color\",\n            \"$value\": \"{color.blue.500}\",  \/\/ light mode\n            \"$extensions\": {\n              \"mode\": {\n                \"dark\": \"{color.blue.400}\"\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u30c6\u30f3\u30d7\u30ec\u30fc\u30c88: \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5225\u30c8\u30fc\u30af\u30f3\u62bd\u51fa<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>Figma Make\u3067\u62bd\u51fa\u3057\u305f\u30c7\u30fc\u30bf\u304b\u3089\u3001\u3010\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u540d\u3011\u5c02\u7528\u306e\u30c7\u30b6\u30a4\u30f3\u30c8\u30fc\u30af\u30f3\u3092\u5b9a\u7fa9\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n\n\u3010\u62bd\u51fa\u30c7\u30fc\u30bf\u3011\n\u3010\u3053\u3053\u306bFigma Make\u306e\u51fa\u529b\u3092\u8cbc\u308a\u4ed8\u3051\u3011\n\n\u3010\u5bfe\u8c61\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3011\n\u3010\u30dc\u30bf\u30f3 \/ \u30ab\u30fc\u30c9 \/ \u30d5\u30a9\u30fc\u30e0 \/ \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3 \u7b49\u3092\u6307\u5b9a\u3011\n\n\u3010\u8981\u4ef6\u3011\n1. \u305d\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u4f7f\u7528\u3055\u308c\u3066\u3044\u308b\u5024\u306e\u307f\u62bd\u51fa\n2. \u72b6\u614b\u5225\uff08default\u3001hover\u3001active\u3001disabled\uff09\u306e\u5024\u3092\u5b9a\u7fa9\n3. \u30b5\u30a4\u30ba\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\uff08sm\u3001md\u3001lg\uff09\u304c\u3042\u308b\u5834\u5408\u306f\u542b\u3081\u308b\n4. Primitive\u30c8\u30fc\u30af\u30f3\u3092\u53c2\u7167\u3059\u308b\u5f62\u5f0f\n\n\u3010\u51fa\u529b\u5f62\u5f0f\u3011\n{\n  \"component\": {\n    \"\u3010\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u540d\u3011\": {\n      \"\u3010\u72b6\u614bor\u8981\u7d20\u3011\": {\n        \"$type\": \"...\",\n        \"$value\": \"...\"\n      }\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u30c6\u30f3\u30d7\u30ec\u30fc\u30c89: \u65e2\u5b58CSS\u304b\u3089\u306e\u30c8\u30fc\u30af\u30f3\u9006\u751f\u6210<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\u4ee5\u4e0b\u306eCSS\u5909\u6570\u3092\u3001Figma Variables\u3068\u3057\u3066\u4f7f\u7528\u3067\u304d\u308bDTCG\u5f62\u5f0f\u306b\u5909\u63db\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n\n\u3010\u65e2\u5b58\u306eCSS\u5909\u6570\u3011\n\u3010\u3053\u3053\u306bCSS\u5909\u6570\u3092\u8cbc\u308a\u4ed8\u3051\u3011\n\u4f8b:\n:root {\n  --color-primary: #3B82F6;\n  --color-secondary: #64748B;\n  --spacing-sm: 8px;\n  --spacing-md: 16px;\n  --font-size-body: 16px;\n}\n\n\u3010\u8981\u4ef6\u3011\n1. CSS\u5909\u6570\u540d\u3092\u9069\u5207\u306a\u30c8\u30fc\u30af\u30f3\u968e\u5c64\u306b\u5909\u63db\n2. DTCG\u4ed5\u69d8\u306e$type\u3001$value\u3092\u542b\u3081\u308b\n3. \u547d\u540d\u898f\u5247\u3092Primitive\/Semantic\u306b\u6574\u7406\n4. \u6b20\u3051\u3066\u3044\u308b\u968e\u5c64\uff08\u4f8b\uff1aspacing-xs\u3001spacing-lg\u7b49\uff09\u3092\u88dc\u5b8c\n\n\u3010\u51fa\u529b\u5f62\u5f0f\u3011\nDTCG\u4ed5\u69d8\u306eJSON<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u30c6\u30f3\u30d7\u30ec\u30fc\u30c810: \u30a8\u30e9\u30fc\u30c1\u30a7\u30c3\u30af\u3068\u6700\u9069\u5316<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\u4ee5\u4e0b\u306e\u30c7\u30b6\u30a4\u30f3\u30c8\u30fc\u30af\u30f3JSON\u3092\u30ec\u30d3\u30e5\u30fc\u3057\u3001\u30a8\u30e9\u30fc\u3084\u6539\u5584\u70b9\u3092\u6307\u6458\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n\n\u3010\u30ec\u30d3\u30e5\u30fc\u5bfe\u8c61JSON\u3011\n\u3010\u3053\u3053\u306bJSON\u3092\u8cbc\u308a\u4ed8\u3051\u3011\n\n\u3010\u30ec\u30d3\u30e5\u30fc\u89b3\u70b9\u3011\n1. DTCG\u4ed5\u69d8\u3078\u306e\u6e96\u62e0\n   - $schema\u3001$type\u3001$value\u304c\u6b63\u3057\u304f\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u308b\u304b\n   - \u8272\u306e\u5f62\u5f0f\uff08hex or colorSpace\u5f62\u5f0f\uff09\u304c\u6b63\u3057\u3044\u304b\n\n2. Tailwind CSS\u898f\u5247\u3078\u306e\u6e96\u62e0\n   - \u8272\u306e\u968e\u8abf\u304c11\u6bb5\u968e\uff0850, 100, ..., 950\uff09\u304b\n   - \u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u304c4\u306e\u500d\u6570\u304b\n\n3. \u547d\u540d\u898f\u5247\n   - Primitive\/Semantic\u304c\u9069\u5207\u306b\u5206\u96e2\u3055\u308c\u3066\u3044\u308b\u304b\n   - \u53c2\u7167\u69cb\u6587\uff08{...}\uff09\u304c\u6b63\u3057\u3044\u304b\n\n4. \u4e00\u8cab\u6027\n   - \u540c\u3058\u7528\u9014\u306e\u30c8\u30fc\u30af\u30f3\u3067\u547d\u540d\u304c\u7d71\u4e00\u3055\u308c\u3066\u3044\u308b\u304b\n   - \u91cd\u8907\u5b9a\u7fa9\u304c\u306a\u3044\u304b\n\n5. \u5b8c\u5168\u6027\n   - \u6b20\u3051\u3066\u3044\u308b\u968e\u8abf\u3084\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\u304c\u306a\u3044\u304b\n\n\u3010\u51fa\u529b\u5f62\u5f0f\u3011\n1. \u30a8\u30e9\u30fc\u4e00\u89a7\uff08\u3042\u308c\u3070\uff09\n2. \u8b66\u544a\u4e00\u89a7\uff08\u3042\u308c\u3070\uff09\n3. \u6700\u9069\u5316\u306e\u63d0\u6848\n4. \u4fee\u6b63\u5f8c\u306eJSON\uff08\u5fc5\u8981\u306a\u5834\u5408\uff09<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u8ffd\u52a0\u30b1\u30fc\u30b9\u30b9\u30bf\u30c7\u30a3\uff1a\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306e\u6210\u529f\u4e8b\u4f8b<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img decoding=\"async\" width=\"1536\" height=\"1024\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-2026\u5e742\u670828\u65e5-15_58_34.jpg\" alt=\"\" class=\"wp-image-12723\" srcset=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-2026\u5e742\u670828\u65e5-15_58_34.jpg 1536w, https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-2026\u5e742\u670828\u65e5-15_58_34-768x512.jpg 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n<\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-right\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-15.12.07.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u30da\u30f3\u535a\u58eb<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u3053\u3053\u3067\u306f\u3001\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306e\u6210\u529f\u4e8b\u4f8b\u30922\u3064\u7d39\u4ecb\u3059\u308b\u305e\u3044\uff01\u975e\u5e38\u306b\u53c2\u8003\u306b\u306a\u308b\u3068\u601d\u3046\u304b\u3089\u3088\u30fc\u304f\u805e\u304f\u3093\u3058\u3083\u305e\uff01<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-left\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-14.48.08.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u751f\u5f92<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u5206\u304b\u308a\u307e\u3057\u305f\uff01<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u30b1\u30fc\u30b91\uff1aEC\u30b5\u30a4\u30c8\u306e\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u7d71\u4e00\uff08\u682a\u5f0f\u4f1a\u793eB\u793e\uff09<\/h3>\n\n\n\n<p><strong>\u80cc\u666f\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5546\u54c1\u65703,000\u70b9\u306eEC\u30b5\u30a4\u30c8<\/li>\n\n\n\n<li>\u8907\u6570\u306e\u30c7\u30b6\u30a4\u30ca\u30fc\u304c\u95a2\u308f\u308a\u3001\u30c7\u30b6\u30a4\u30f3\u306e\u4e00\u8cab\u6027\u304c\u6b20\u5982<\/li>\n\n\n\n<li>\u30ab\u30c6\u30b4\u30ea\u30fc\u30da\u30fc\u30b8\u3054\u3068\u306b\u7570\u306a\u308b\u8272\u30fb\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u3092\u4f7f\u7528<\/li>\n\n\n\n<li>\u958b\u767a\u30c1\u30fc\u30e0\u304b\u3089\u300c\u30c7\u30b6\u30a4\u30f3\u30ab\u30f3\u30d7\u3068\u5b9f\u88c5\u306e\u9f5f\u9f6c\u304c\u591a\u3059\u304e\u308b\u300d\u3068\u30af\u30ec\u30fc\u30e0<\/li>\n<\/ul>\n\n\n\n<p><strong>\u5b9f\u65bd\u5185\u5bb9\uff1a<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Week 1:<\/strong> \u516880\u30da\u30fc\u30b8\u306e\u30c7\u30b6\u30a4\u30f3\u304b\u3089Figma Make\u3067\u5024\u3092\u62bd\u51fa\n   &#8211; \u8272\uff1a127\u7a2e\u985e\uff08\uff01\uff09\u3092\u767a\u898b\n   &#8211; \u30b9\u30da\u30fc\u30b7\u30f3\u30b0\uff1a68\u7a2e\u985e\u3092\u767a\u898b<\/li>\n\n\n\n<li><strong>Week 2:<\/strong> GPT\u3067\u7d71\u4e00\u30eb\u30fc\u30eb\u306b\u57fa\u3065\u304d\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\n   &#8211; \u8272\uff1a11\u6bb5\u968e\u00d76\u8272\u76f8\uff0866\u8272\uff09\u306b\u524a\u6e1b\uff0852%\u524a\u6e1b\uff09\n   &#8211; \u30b9\u30da\u30fc\u30b7\u30f3\u30b0\uff1a24\u7a2e\u985e\u306b\u524a\u6e1b\uff0865%\u524a\u6e1b\uff09<\/li>\n\n\n\n<li><strong>Week 3-4:<\/strong> Figma Variables\u306b\u4e00\u62ec\u30a4\u30f3\u30dd\u30fc\u30c8&amp;\u65e2\u5b58\u30c7\u30b6\u30a4\u30f3\u66f4\u65b0<\/li>\n\n\n\n<li><strong>Week 5-6:<\/strong> \u30c7\u30b6\u30a4\u30f3\u30ac\u30a4\u30c9\u30e9\u30a4\u30f3\u4f5c\u6210\u3001\u30c1\u30fc\u30e0\u6559\u80b2<\/li>\n<\/ol>\n\n\n\n<p><strong>\u7d50\u679c\uff1a<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u6307\u6a19<\/th><th>Before<\/th><th>After<\/th><th>\u6539\u5584\u7387<\/th><\/tr><\/thead><tbody><tr><td>\u30c7\u30b6\u30a4\u30f3\u6642\u9593\/\u30da\u30fc\u30b8<\/td><td>8\u6642\u9593<\/td><td>4\u6642\u9593<\/td><td><strong>-50%<\/strong><\/td><\/tr><tr><td>\u958b\u767a\u6642\u9593\/\u30da\u30fc\u30b8<\/td><td>12\u6642\u9593<\/td><td>7\u6642\u9593<\/td><td><strong>-42%<\/strong><\/td><\/tr><tr><td>\u30c7\u30b6\u30a4\u30f3-\u5b9f\u88c5\u306e\u9f5f\u9f6c<\/td><td>\u5e73\u574715\u4ef6\/\u30da\u30fc\u30b8<\/td><td>\u5e73\u57472\u4ef6\/\u30da\u30fc\u30b8<\/td><td><strong>-87%<\/strong><\/td><\/tr><tr><td>\u4fee\u6b63\u5de5\u6570<\/td><td>40\u6642\u9593\/\u6708<\/td><td>8\u6642\u9593\/\u6708<\/td><td><strong>-80%<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"is-style-balloon_box2\"><strong>B\u793e\u30c7\u30b6\u30a4\u30f3\u30ea\u30fc\u30c0\u30fc\u306e\u30b3\u30e1\u30f3\u30c8\uff1a<\/strong><br>\u300cGPT\u3092\u4f7f\u308f\u305a\u306b127\u8272\u3092\u624b\u4f5c\u696d\u3067\u6574\u7406\u3057\u3066\u3044\u305f\u3089\u30012\u30f6\u6708\u306f\u304b\u304b\u3063\u305f\u3067\u3057\u3087\u3046\u3002Figma \u00d7 GPT\u306e\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u3067\u3001\u308f\u305a\u304b6\u9031\u9593\u3067\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u3092\u69cb\u7bc9\u3067\u304d\u3001\u958b\u767a\u30c1\u30fc\u30e0\u3068\u306e\u95a2\u4fc2\u3082\u5287\u7684\u306b\u6539\u5584\u3057\u307e\u3057\u305f\u3002\u3082\u3046\u5143\u306b\u306f\u623b\u308c\u307e\u305b\u3093\u3002\u300d<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u30b1\u30fc\u30b92\uff1aSaaS\u30d7\u30ed\u30c0\u30af\u30c8\u306e\u30ea\u30d6\u30e9\u30f3\u30c7\u30a3\u30f3\u30b0\uff08\u30b9\u30bf\u30fc\u30c8\u30a2\u30c3\u30d7C\u793e\uff09<\/h3>\n\n\n\n<p><strong>\u80cc\u666f\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>B2B SaaS\u30d7\u30ed\u30c0\u30af\u30c8\uff08\u753b\u9762\u6570200+\uff09<\/li>\n\n\n\n<li>\u30ea\u30d6\u30e9\u30f3\u30c7\u30a3\u30f3\u30b0\u306b\u4f34\u3044\u3001\u65e2\u5b58UI\u306e\u8272\u3092\u5168\u9762\u5237\u65b0<\/li>\n\n\n\n<li>\u65b0\u30d6\u30e9\u30f3\u30c9\u30ab\u30e9\u30fc\uff1a\u9752\u7cfb \u2192 \u7d2b\u7cfb\u306b\u5909\u66f4<\/li>\n\n\n\n<li>\u9650\u3089\u308c\u305f\u30ea\u30bd\u30fc\u30b9\uff08\u30c7\u30b6\u30a4\u30ca\u30fc2\u540d\u3001\u30a8\u30f3\u30b8\u30cb\u30a25\u540d\uff09<\/li>\n<\/ul>\n\n\n\n<p><strong>\u5b9f\u65bd\u5185\u5bb9\uff1a<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Day 1-2:<\/strong> \u65e2\u5b58\u30c7\u30b6\u30a4\u30f3\u304b\u3089\u9752\u7cfb\u30c8\u30fc\u30af\u30f3\u3092\u62bd\u51fa<\/li>\n\n\n\n<li><strong>Day 3:<\/strong> GPT\u306b\u65b0\u30d6\u30e9\u30f3\u30c9\u30ab\u30e9\u30fc\uff08\u7d2b\uff09\u306e11\u968e\u8abf\u751f\u6210\u3092\u4f9d\u983c<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>\u3010GPT\u3078\u306e\u30d7\u30ed\u30f3\u30d7\u30c8\u3011\n\u4ee5\u4e0b\u306e\u9752\u7cfb\u30c8\u30fc\u30af\u30f3\u3092\u3001\u65b0\u30d6\u30e9\u30f3\u30c9\u30ab\u30e9\u30fc\uff08\u7d2b: #8B5CF6\uff09\u3092\u57fa\u6e96\u306b\u3001\n\u540c\u3058\u660e\u5ea6\u5206\u5e03\u3092\u6301\u3064\u7d2b\u7cfb\u30c8\u30fc\u30af\u30f3\u306b\u5909\u63db\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n\n\u3010\u65e2\u5b58\u306e\u9752\u7cfb\u30c8\u30fc\u30af\u30f3\u3011\nblue-50: #EFF6FF (L: 97%)\nblue-100: #DBEAFE (L: 94%)\n...\nblue-500: #3B82F6 (L: 55%)  \u2190 \u57fa\u6e96\n...\n\n\u3010\u65b0\u30d6\u30e9\u30f3\u30c9\u30ab\u30e9\u30fc\u3011\npurple-500: #8B5CF6  \u2190 \u57fa\u6e96\u306b\u3059\u308b\u8272\n\n\u3010\u8981\u4ef6\u3011\n\u30fb\u660e\u5ea6\u5206\u5e03\u306f\u65e2\u5b58\u306e\u9752\u7cfb\u3068\u540c\u3058\u306b\u3059\u308b\n\u30fb\u8272\u76f8\u30fb\u5f69\u5ea6\u306f\u7d2b\u7cfb\u3067\u7d71\u4e00<\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>Day 4-5:<\/strong> Figma Variables\u306ePrimitive\u30c8\u30fc\u30af\u30f3\u3092\u66f4\u65b0\n   &#8211; blue.500 \u2192 purple.500\u306b\u5909\u66f4\n   &#8211; Semantic\u30c8\u30fc\u30af\u30f3\u306f\u53c2\u7167\u306e\u305f\u3081\u81ea\u52d5\u7684\u306b\u66f4\u65b0<\/li>\n\n\n\n<li><strong>Day 6-10:<\/strong> \u5168200\u753b\u9762\u3092\u81ea\u52d5\u7684\u306b\u7d2b\u7cfb\u306b\u5909\u63db\u5b8c\u4e86<\/li>\n<\/ol>\n\n\n\n<p><strong>\u7d50\u679c\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u30ea\u30d6\u30e9\u30f3\u30c7\u30a3\u30f3\u30b0\u671f\u9593\uff1a<\/strong> \u5f93\u67656\u30f6\u6708 \u2192 <strong>10\u65e5<\/strong>\uff0899%\u524a\u6e1b\uff01\uff09<\/li>\n\n\n\n<li><strong>\u30b3\u30b9\u30c8\u524a\u6e1b\uff1a<\/strong> \u63a8\u5b9a1,200\u4e07\u5186 \u2192 <strong>50\u4e07\u5186<\/strong><\/li>\n\n\n\n<li><strong>\u4e00\u8cab\u6027\uff1a<\/strong> \u5168\u753b\u9762\u3067\u5b8c\u5168\u306b\u7d71\u4e00\u3055\u308c\u305f\u7d2b\u7cfb\u30ab\u30e9\u30fc<\/li>\n\n\n\n<li><strong>\u30e6\u30fc\u30b6\u30fc\u30d5\u30a3\u30fc\u30c9\u30d0\u30c3\u30af\uff1a<\/strong> \u300c\u65b0UI\u304c\u30d6\u30e9\u30f3\u30c9\u30a4\u30e1\u30fc\u30b8\u3068\u5b8c\u74a7\u306b\u30de\u30c3\u30c1\u300d\u3068\u597d\u8a55<\/li>\n<\/ul>\n\n\n\n<p class=\"is-style-balloon_box2\"><strong>C\u793eCTO\u306e\u30b3\u30e1\u30f3\u30c8\uff1a<\/strong><br>\u300cFigma Variables\u306e2\u968e\u5c64\u69cb\u9020\uff08Primitive + Semantic\uff09\u304c\u306a\u3051\u308c\u3070\u300110\u65e5\u3067\u306e\u5b8c\u4e86\u306f\u7d76\u5bfe\u306b\u4e0d\u53ef\u80fd\u3067\u3057\u305f\u3002Primitive\u30c8\u30fc\u30af\u30f3\u3092\u5909\u66f4\u3059\u308b\u3060\u3051\u3067\u5168\u4f53\u304c\u66f4\u65b0\u3055\u308c\u308b\u4ed5\u7d44\u307f\u3068\u3001GPT\u306b\u3088\u308b\u6b63\u78ba\u306a\u660e\u5ea6\u8abf\u6574\u304c\u3001\u30ea\u30d6\u30e9\u30f3\u30c7\u30a3\u30f3\u30b0\u306e\u6210\u529f\u8981\u56e0\u3067\u3059\u3002\u300d<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Figma \u00d7 GPT\u5b9f\u88c5\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img decoding=\"async\" width=\"1536\" height=\"1024\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/1000006401.jpg\" alt=\"\" class=\"wp-image-12864\" srcset=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/1000006401.jpg 1536w, https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/1000006401-768x512.jpg 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n<\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-right\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-15.12.07.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u30da\u30f3\u535a\u58eb<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u3053\u3053\u3067\u306f\u3001\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u69cb\u7bc9\u306e\u9032\u6357\u3092\u78ba\u8a8d\u3067\u304d\u308b\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8\u3092\u7d39\u4ecb\u3059\u308b\u305e\uff01\u5b9f\u8df5\u306e\u969b\u306b\u975e\u5e38\u306b\u91cd\u8981\u306a\u30d1\u30fc\u30c8\u3060\u304b\u3089\u899a\u3048\u3066\u304a\u304f\u306e\u3058\u3083\uff01<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-left\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-14.48.08.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u751f\u5f92<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u306f\u3044\uff01\u304a\u9858\u3044\u3057\u307e\u3059\uff01<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">Phase 1: \u6e96\u5099\uff08\u6240\u8981\u6642\u9593\uff1a30\u5206\uff09<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Figma\u30a2\u30ab\u30a6\u30f3\u30c8\u306e\u6e96\u5099\uff08\u7121\u6599\u30d7\u30e9\u30f3\u3067OK\uff09<\/li>\n\n\n\n<li>ChatGPT\/Claude\u30a2\u30ab\u30a6\u30f3\u30c8\u306e\u6e96\u5099\uff08GPT-4\u4ee5\u4e0a\u63a8\u5968\uff09<\/li>\n\n\n\n<li>Figma Make\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/li>\n\n\n\n<li>\u5bfe\u8c61\u30c7\u30b6\u30a4\u30f3\u30d5\u30a1\u30a4\u30eb\u306e\u6c7a\u5b9a<\/li>\n\n\n\n<li>Tailwind CSS\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u78ba\u8a8d<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Phase 2: \u62bd\u51fa\uff08\u6240\u8981\u6642\u9593\uff1a30\u5206\u301c1\u6642\u9593\uff09<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Figma Make\u3067\u8272\u3092\u62bd\u51fa<\/li>\n\n\n\n<li>\u4f7f\u7528\u983b\u5ea6\u3092\u78ba\u8a8d<\/li>\n\n\n\n<li>\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u5024\u3092\u62bd\u51fa<\/li>\n\n\n\n<li>\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3092\u62bd\u51fa<\/li>\n\n\n\n<li>\u305d\u306e\u4ed6\u306e\u30c7\u30b6\u30a4\u30f3\u5024\uff08\u89d2\u4e38\u3001\u30b7\u30e3\u30c9\u30a6\u7b49\uff09\u3092\u62bd\u51fa<\/li>\n\n\n\n<li>\u2610 \u62bd\u51fa\u30c7\u30fc\u30bf\u3092\u30c6\u30ad\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb\u306b\u4fdd\u5b58<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Phase 3: \u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\uff08\u6240\u8981\u6642\u9593\uff1a1\u301c2\u6642\u9593\uff09<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u8272\u306e\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0 &#8211; GPT\u306b\u62bd\u51fa\u30c7\u30fc\u30bf\u3092\u6e21\u3059 &#8211; Tailwind 11\u6bb5\u968e\u3078\u306e\u7d71\u4e00\u3092\u6307\u793a &#8211; \u51fa\u529b\u3055\u308c\u305fJSON\u3092\u78ba\u8a8d &#8211; \u30d6\u30e9\u30f3\u30c9\u30ab\u30e9\u30fc\u306e\u7dad\u6301\u3092\u78ba\u8a8d<\/li>\n\n\n\n<li>\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u306e\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0 &#8211; 4\u306e\u500d\u6570\u3078\u306e\u5909\u63db\u3092\u6307\u793a &#8211; \u5909\u63db\u5bfe\u5fdc\u8868\u3092\u53d6\u5f97 &#8211; \u6975\u7aef\u306a\u5909\u63db\u304c\u306a\u3044\u304b\u78ba\u8a8d<\/li>\n\n\n\n<li>\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u306e\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0 &#8211; Tailwind\u898f\u5247\u3078\u306e\u7d71\u4e00 &#8211; line-height\u306e\u81ea\u52d5\u751f\u6210<\/li>\n\n\n\n<li>Semantic\u30c8\u30fc\u30af\u30f3\u306e\u751f\u6210 &#8211; \u30dc\u30bf\u30f3\u7528\u30c8\u30fc\u30af\u30f3 &#8211; \u30c6\u30ad\u30b9\u30c8\u7528\u30c8\u30fc\u30af\u30f3 &#8211; \u80cc\u666f\u7528\u30c8\u30fc\u30af\u30f3 &#8211; \u30dc\u30fc\u30c0\u30fc\u7528\u30c8\u30fc\u30af\u30f3<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Phase 4: DTCG\u5f62\u5f0f\u5909\u63db\uff08\u6240\u8981\u6642\u9593\uff1a30\u5206\u301c1\u6642\u9593\uff09<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>GPT\u306bDTCG\u5f62\u5f0f\u3078\u306e\u5909\u63db\u3092\u6307\u793a<\/li>\n\n\n\n<li>$schema\u3001$type\u3001$value\u306e\u78ba\u8a8d<\/li>\n\n\n\n<li>\u8272\u306e\u5f62\u5f0f\u78ba\u8a8d\uff08hex or colorSpace\uff09<\/li>\n\n\n\n<li>\u53c2\u7167\u69cb\u6587\uff08{&#8230;}\uff09\u306e\u78ba\u8a8d<\/li>\n\n\n\n<li>JSON\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\uff08\u30aa\u30f3\u30e9\u30a4\u30f3\u30c4\u30fc\u30eb\u4f7f\u7528\uff09<\/li>\n\n\n\n<li>JSON\u30d5\u30a1\u30a4\u30eb\u306e\u4fdd\u5b58<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Phase 5: Figma\u30a4\u30f3\u30dd\u30fc\u30c8\uff08\u6240\u8981\u6642\u9593\uff1a30\u5206\uff09<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Figma Variables\u30d1\u30cd\u30eb\u3092\u958b\u304f<\/li>\n\n\n\n<li>Import variables\u3092\u5b9f\u884c<\/li>\n\n\n\n<li>\u30a8\u30e9\u30fc\u304c\u306a\u3044\u304b\u78ba\u8a8d<\/li>\n\n\n\n<li>Primitive\/Semantic\u306e\u968e\u5c64\u78ba\u8a8d<\/li>\n\n\n\n<li>\u53c2\u7167\u304c\u6b63\u3057\u304f\u6a5f\u80fd\u3057\u3066\u3044\u308b\u304b\u78ba\u8a8d<\/li>\n\n\n\n<li>\u30b5\u30f3\u30d7\u30eb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u52d5\u4f5c\u30c6\u30b9\u30c8<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Phase 6: \u65e2\u5b58\u30c7\u30b6\u30a4\u30f3\u3078\u306e\u9069\u7528\uff08\u6240\u8981\u6642\u9593\uff1a2\u301c4\u6642\u9593\uff09<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u8272\u306e\u4e00\u62ec\u7f6e\u63db &#8211; Find and Replace Colors\u30d7\u30e9\u30b0\u30a4\u30f3\u4f7f\u7528 &#8211; \u4e3b\u8981\u8272\u304b\u3089\u9806\u306b\u7f6e\u63db &#8211; \u7f6e\u63db\u524d\u5f8c\u306e\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u53d6\u5f97<\/li>\n\n\n\n<li>\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u306e\u7f6e\u63db &#8211; Auto Layout\u306egap &#8211; padding &#8211; margin\uff08Figma\u3067\u306fgap\u3068\u3057\u3066\u8868\u73fe\uff09<\/li>\n\n\n\n<li>\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u306e\u7f6e\u63db<\/li>\n\n\n\n<li>\u5168\u30da\u30fc\u30b8\u306e\u76ee\u8996\u78ba\u8a8d<\/li>\n\n\n\n<li>\u30c7\u30b6\u30a4\u30f3\u30ec\u30d3\u30e5\u30fc<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Phase 7: \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u5316\uff08\u6240\u8981\u6642\u9593\uff1a1\u301c2\u6642\u9593\uff09<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30c7\u30b6\u30a4\u30f3\u30c8\u30fc\u30af\u30f3\u4e00\u89a7\u8868\u306e\u4f5c\u6210<\/li>\n\n\n\n<li>\u4f7f\u7528\u4f8b\u306e\u4f5c\u6210<\/li>\n\n\n\n<li>\u5909\u63db\u5bfe\u5fdc\u8868\u306e\u8a18\u9332<\/li>\n\n\n\n<li>GPT\u30d7\u30ed\u30f3\u30d7\u30c8\u306e\u4fdd\u5b58<\/li>\n\n\n\n<li>\u30c1\u30fc\u30e0\u5171\u6709\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u4f5c\u6210<\/li>\n\n\n\n<li>\u958b\u767a\u30c1\u30fc\u30e0\u3078\u306e\u8aac\u660e\u8cc7\u6599\u4f5c\u6210<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Phase 8: \u4fdd\u5b88\u30fb\u904b\u7528\uff08\u7d99\u7d9a\uff09<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Variables\u306e\u5b9a\u671f\u30ec\u30d3\u30e5\u30fc\uff08\u67081\u56de\uff09<\/li>\n\n\n\n<li>\u65b0\u898f\u30c8\u30fc\u30af\u30f3\u8ffd\u52a0\u6642\u306e\u30eb\u30fc\u30eb\u7b56\u5b9a<\/li>\n\n\n\n<li>\u30c1\u30fc\u30e0\u30e1\u30f3\u30d0\u30fc\u3078\u306e\u6559\u80b2<\/li>\n\n\n\n<li>CSS\/Tailwind\u3078\u306e\u540c\u671f\u65b9\u6cd5\u306e\u78ba\u7acb<\/li>\n\n\n\n<li>\u30d0\u30fc\u30b8\u30e7\u30f3\u7ba1\u7406\u306e\u4ed5\u7d44\u307f\u69cb\u7bc9<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u7dcf\u5408\u8a55\u4fa1<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u9054\u6210\u7387<\/th><th>\u8a55\u4fa1<\/th><th>\u6b21\u306e\u30a2\u30af\u30b7\u30e7\u30f3<\/th><\/tr><\/thead><tbody><tr><td>0-30%<\/td><td><span style=\"color:red\"><strong>\u8981\u6539\u5584<\/strong><\/span><\/td><td>Phase 1\u304b\u3089\u518d\u30b9\u30bf\u30fc\u30c8\u3002\u30c4\u30fc\u30eb\u306e\u7fd2\u719f\u5ea6\u3092\u4e0a\u3052\u3066\u304b\u3089\u518d\u6311\u6226<\/td><\/tr><tr><td>31-60%<\/td><td><span style=\"color:orange\"><strong>\u9032\u884c\u4e2d<\/strong><\/span><\/td><td>\u6b8b\u308a\u306ePhase\u30921\u3064\u305a\u3064\u5b8c\u4e86\u3055\u305b\u308b<\/td><\/tr><tr><td>61-90%<\/td><td><span style=\"color:green\"><strong>\u826f\u597d<\/strong><\/span><\/td><td>\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u5316\u3068\u904b\u7528\u4f53\u5236\u306e\u69cb\u7bc9\u306b\u6ce8\u529b<\/td><\/tr><tr><td>91-100%<\/td><td><span style=\"color:blue\"><strong>\u5b8c\u74a7<\/strong><\/span><\/td><td>\u4ed6\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3078\u306e\u5c55\u958b\u3001\u30ce\u30a6\u30cf\u30a6\u306e\u5171\u6709<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u3088\u304f\u3042\u308b\u8cea\u554f\uff08FAQ\uff09<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img decoding=\"async\" width=\"1536\" height=\"1024\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-2026\u5e742\u670828\u65e5-16_01_19.jpg\" alt=\"\" class=\"wp-image-12725\" srcset=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-2026\u5e742\u670828\u65e5-16_01_19.jpg 1536w, https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-2026\u5e742\u670828\u65e5-16_01_19-768x512.jpg 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Q1: Figma Variables\u3068\u306f\u4f55\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n<p><strong>A:<\/strong> Figma Variables\u306f\u3001\u8272\u30fb\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u30fb\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u306a\u3069\u306e\u30c7\u30b6\u30a4\u30f3\u5024\u3092<strong><span class=\"swl-marker mark_yellow\">\u5909\u6570\u3068\u3057\u3066\u4e00\u5143\u7ba1\u7406<\/span><\/strong>\u3059\u308b\u6a5f\u80fd\u3067\u3059\u3002\u30c7\u30b6\u30a4\u30f3\u30c8\u30fc\u30af\u30f3\uff08Design Tokens\uff09\u3068\u3082\u547c\u3070\u308c\u3001\u4e00\u7b87\u6240\u3092\u5909\u66f4\u3059\u308c\u3070\u5168\u4f53\u306b\u53cd\u6620\u3055\u308c\u308b\u305f\u3081\u3001\u30c7\u30b6\u30a4\u30f3\u306e<strong><span class=\"swl-marker mark_yellow\">\u4e00\u8cab\u6027\u3068\u4fdd\u5b88\u6027<\/span><\/strong>\u304c\u5927\u5e45\u306b\u5411\u4e0a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Q2: \u306a\u305cTailwind CSS\u306e\u898f\u5247\u306b\u5408\u308f\u305b\u308b\u5fc5\u8981\u304c\u3042\u308b\u306e\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n<p><strong>A:<\/strong> Tailwind CSS\u306f\u591a\u304f\u306e\u958b\u767a\u73fe\u5834\u3067\u63a1\u7528\u3055\u308c\u3066\u3044\u308bCSS\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002\u30c7\u30b6\u30a4\u30f3\u30c8\u30fc\u30af\u30f3\u3092Tailwind\u898f\u5247\u306b\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001<strong><span class=\"swl-marker mark_yellow\">\u30c7\u30b6\u30a4\u30f3\u3068\u30b3\u30fc\u30c9\u306e\u5b8c\u5168\u4e00\u81f4<\/span><\/strong>\u304c\u5b9f\u73fe\u3057\u3001\u958b\u767a\u52b9\u7387\u304c<strong><span class=\"swl-marker mark_yellow\">30\u301c40%\u5411\u4e0a<\/span><\/strong>\u3057\u307e\u3059\u3002\u307e\u305f\u3001<code>text-blue-500<\/code>\u306e\u3088\u3046\u306a\u76f4\u611f\u7684\u306a\u30af\u30e9\u30b9\u540d\u304c\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Q3: GPT-4\u4ee5\u5916\u306e\u30e2\u30c7\u30eb\uff08GPT-3.5\u3084Claude\uff09\u3067\u3082\u4f7f\u3048\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n<p><strong>A:<\/strong> \u53ef\u80fd\u3067\u3059\u304c\u3001\u7cbe\u5ea6\u306b\u5dee\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>GPT-3.5\uff1a<\/strong> \u8272\u76f8\u306e\u30d6\u30ec\u88dc\u6b63\u304c\u5f31\u3044<\/li>\n\n\n\n<li><strong>Claude 3.5 Sonnet\uff1a<\/strong> \u5927\u91cf\u30c7\u30fc\u30bf\u51e6\u7406\u306b\u5f37\u3044<\/li>\n\n\n\n<li><strong>\u63a8\u5968\uff1a<\/strong> \u5c0f\u301c\u4e2d\u898f\u6a21\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306a\u3089GPT-4\u3001\u5927\u898f\u6a21\uff0850\u30da\u30fc\u30b8\u4ee5\u4e0a\uff09\u306a\u3089Claude 3.5 Sonnet<\/li>\n<\/ul>\n\n\n\n<p>\u7121\u6599\u7248ChatGPT\u3067\u3082\u57fa\u672c\u7684\u306a\u4f5c\u696d\u306f\u53ef\u80fd\u3067\u3059\u304c\u3001\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u306e\u8cea\u306f\u843d\u3061\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Q4: DTCG\u4ed5\u69d8\u3068\u306f\u4f55\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n<p><strong>A:<\/strong> <strong>Design Tokens Community Group\uff08DTCG\uff09<\/strong>\u304c\u7b56\u5b9a\u3059\u308b\u3001\u30c7\u30b6\u30a4\u30f3\u30c8\u30fc\u30af\u30f3\u306e\u6a19\u6e96\u4ed5\u69d8\u3067\u3059\u3002<code>$type<\/code>\u3001<code>$value<\/code>\u3001<code>$description<\/code>\u306a\u3069\u306e\u8981\u7d20\u3067\u69cb\u6210\u3055\u308c\u3001Figma\u3001Adobe XD\u3001Sketch\u7b49\u306e\u8907\u6570\u30c4\u30fc\u30eb\u9593\u3067\u30c8\u30fc\u30af\u30f3\u3092\u5171\u6709\u3067\u304d\u307e\u3059\u3002JSON\u5f62\u5f0f\u3067\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Q5: Figma Make\u306e\u4ee3\u66ff\u30c4\u30fc\u30eb\u306f\u3042\u308a\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n<p><strong>A:<\/strong> \u306f\u3044\u3001<strong>Design Tokens\u30d7\u30e9\u30b0\u30a4\u30f3\u3001Tokens Studio\u3001Specify<\/strong>\u7b49\u304c\u3042\u308a\u307e\u3059\u3002\u3057\u304b\u3057\u3001<strong><span class=\"swl-marker mark_yellow\">Figma Make\u306f\u7121\u6599\u3067\u4f7f\u3044\u3084\u3059\u304f\u3001\u4f7f\u7528\u983b\u5ea6\u3082\u8868\u793a\u3055\u308c\u308b<\/span><\/strong>\u305f\u3081\u6700\u3082\u304a\u3059\u3059\u3081\u3067\u3059\u3002\u9ad8\u5ea6\u306a\u6a5f\u80fd\u304c\u5fc5\u8981\u306a\u5834\u5408\u306fTokens Studio\uff08\u6709\u6599\uff09\u3092\u691c\u8a0e\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Q6: \u5b9f\u88c5\u306b\u304b\u304b\u308b\u6642\u9593\u306f\u3069\u306e\u304f\u3089\u3044\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n<p><strong>A:<\/strong> \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u898f\u6a21\u306b\u3088\u308a\u7570\u306a\u308a\u307e\u3059\u304c\u3001\u6a19\u6e96\u7684\u306a\u76ee\u5b89\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u5c0f\u898f\u6a21\uff085\u301c10\u30da\u30fc\u30b8\uff09\uff1a<\/strong> 3\u301c4\u6642\u9593<\/li>\n\n\n\n<li><strong>\u4e2d\u898f\u6a21\uff0820\u301c30\u30da\u30fc\u30b8\uff09\uff1a<\/strong> 6\u301c8\u6642\u9593<\/li>\n\n\n\n<li><strong>\u5927\u898f\u6a21\uff0850\u30da\u30fc\u30b8\u4ee5\u4e0a\uff09\uff1a<\/strong> 10\u301c15\u6642\u9593<\/li>\n<\/ul>\n\n\n\n<p>\u521d\u56de\u306f\u7fd2\u719f\u306b\u6642\u9593\u304c\u304b\u304b\u308a\u307e\u3059\u304c\u30012\u56de\u76ee\u4ee5\u964d\u306f<strong><span class=\"swl-marker mark_yellow\">50%\u7a0b\u5ea6\u306b\u77ed\u7e2e<\/span><\/strong>\u3055\u308c\u307e\u3059\u3002\u5f93\u6765\u306e\u624b\u4f5c\u696d\uff0830\u301c40\u6642\u9593\uff09\u3068\u6bd4\u8f03\u3059\u308b\u3068\u3001<strong><span class=\"swl-marker mark_yellow\">80\u301c90%\u306e\u6642\u9593\u524a\u6e1b<\/span><\/strong>\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Q7: Primitive\u30c8\u30fc\u30af\u30f3\u3068Semantic\u30c8\u30fc\u30af\u30f3\u306e\u9055\u3044\u306f\u4f55\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n<p><strong>A:<\/strong> <strong>2\u968e\u5c64\u306e\u30c8\u30fc\u30af\u30f3\u69cb\u9020<\/strong>\u3067\u3059\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Primitive\uff08\u57fa\u790e\u30c8\u30fc\u30af\u30f3\uff09\uff1a<\/strong> <code>blue-500<\/code>\u3001<code>spacing-4<\/code>\u306a\u3069\u3001\u5177\u4f53\u7684\u306a\u5024\u3092\u6301\u3064\u30c8\u30fc\u30af\u30f3\u3002\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u306e\u57fa\u790e\u3068\u306a\u308b\u8272\u30fb\u30b5\u30a4\u30ba\u306e\u5b9a\u7fa9\u3002<\/li>\n\n\n\n<li><strong>Semantic\uff08\u610f\u5473\u30c8\u30fc\u30af\u30f3\uff09\uff1a<\/strong> <code>button-primary-background<\/code>\u3001<code>card-padding<\/code>\u306a\u3069\u3001\u7528\u9014\u30fb\u610f\u5473\u3092\u6301\u3064\u30c8\u30fc\u30af\u30f3\u3002Primitive\u30c8\u30fc\u30af\u30f3\u3092\u53c2\u7167\u3057\u3066\u5b9a\u7fa9\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u4f8b\u3048\u3070\u3001<code>button-primary-background: {color.primitive.blue.500}<\/code>\u3068\u3059\u308b\u3053\u3068\u3067\u3001\u30dc\u30bf\u30f3\u8272\u3092\u5909\u66f4\u3057\u305f\u3044\u6642\u306f<strong><span class=\"swl-marker mark_yellow\">Semantic\u30c8\u30fc\u30af\u30f3\u3060\u3051\u3092\u5909\u66f4<\/span><\/strong>\u3059\u308c\u3070\u6e08\u307f\u307e\u3059\u3002Primitive\u30c8\u30fc\u30af\u30f3\u306f\u4fdd\u6301\u3055\u308c\u308b\u305f\u3081\u3001\u4ed6\u306e\u8981\u7d20\u306b\u5f71\u97ff\u3057\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Q8: \u65e2\u5b58\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u3082\u9069\u7528\u3067\u304d\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n<p><strong>A:<\/strong> \u306f\u3044\u3001<strong><span class=\"swl-marker mark_yellow\">\u6bb5\u968e\u7684\u306b\u9069\u7528\u53ef\u80fd<\/span><\/strong>\u3067\u3059\u3002\u63a8\u5968\u30a2\u30d7\u30ed\u30fc\u30c1\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Phase 1\uff1a<\/strong> \u8272\u30c8\u30fc\u30af\u30f3\u306e\u307f\u5c0e\u5165\uff08\u6700\u3082\u52b9\u679c\u304c\u9ad8\u3044\uff09<\/li>\n\n\n\n<li><strong>Phase 2\uff1a<\/strong> \u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u30c8\u30fc\u30af\u30f3\u3092\u8ffd\u52a0<\/li>\n\n\n\n<li><strong>Phase 3\uff1a<\/strong> \u30bf\u30a4\u30dd\u30b0\u30e9\u30d5\u30a3\u30c8\u30fc\u30af\u30f3\u3092\u8ffd\u52a0<\/li>\n\n\n\n<li><strong>Phase 4\uff1a<\/strong> \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5358\u4f4d\u3067\u30c8\u30fc\u30af\u30f3\u9069\u7528\u3092\u62e1\u5927<\/li>\n<\/ol>\n\n\n\n<p>\u65e2\u5b58\u30c7\u30b6\u30a4\u30f3\u306e<strong><span class=\"swl-marker mark_yellow\">\u8272\u3092\u62bd\u51fa \u2192 GPT\u3067\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0 \u2192 \u65b0\u898f\u30c8\u30fc\u30af\u30f3\u306b\u7f6e\u304d\u63db\u3048<\/span><\/strong>\u3068\u3044\u3046\u6d41\u308c\u3067\u3001\u30ea\u30b9\u30af\u3092\u6700\u5c0f\u9650\u306b\u6291\u3048\u3066\u79fb\u884c\u3067\u304d\u307e\u3059\u3002\u4e00\u5ea6\u306b\u5168\u4f53\u3092\u5909\u66f4\u3059\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Q9: \u30c7\u30b6\u30a4\u30f3\u304c\u5909\u66f4\u3055\u308c\u305f\u5834\u5408\u3001\u3069\u3046\u5bfe\u5fdc\u3059\u308c\u3070\u3044\u3044\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n<p><strong>A:<\/strong> \u30c7\u30b6\u30a4\u30f3\u30c8\u30fc\u30af\u30f3\u306e\u6700\u5927\u306e\u5229\u70b9\u304c\u3053\u3053\u306b\u3042\u308a\u307e\u3059\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u30d6\u30e9\u30f3\u30c9\u30ab\u30e9\u30fc\u5909\u66f4\uff1a<\/strong> Primitive\u30c8\u30fc\u30af\u30f3\u306e<code>blue-500<\/code>\u3092\u5909\u66f4\u3059\u308b\u3060\u3051\u3067\u3001\u5168\u3066\u306e\u30dc\u30bf\u30f3\u30fb\u30ea\u30f3\u30af\u30fb\u30a2\u30a4\u30b3\u30f3\u304c\u4e00\u62ec\u5909\u66f4<\/li>\n\n\n\n<li><strong>\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u8ffd\u52a0\uff1a<\/strong> Semantic\u30c8\u30fc\u30af\u30f3\u306e\u30e2\u30fc\u30c9\u5207\u308a\u66ff\u3048\u3067\u5bfe\u5fdc\uff08Primitive\u30c8\u30fc\u30af\u30f3\u306f\u4e0d\u5909\uff09<\/li>\n\n\n\n<li><strong>\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u8abf\u6574\uff1a<\/strong> <code>spacing-4: 16px \u2192 20px<\/code>\u306b\u5909\u66f4\u3059\u308c\u3070\u3001\u5168\u4f53\u306e\u4f59\u767d\u304c\u81ea\u52d5\u8abf\u6574<\/li>\n<\/ul>\n\n\n\n<p>\u5f93\u6765\u306f<strong><span class=\"swl-marker mark_yellow\">\u6570\u5341\u301c\u6570\u767e\u7b87\u6240\u3092\u624b\u4f5c\u696d\u3067\u4fee\u6b63<\/span><\/strong>\u3057\u3066\u3044\u305f\u4f5c\u696d\u304c\u3001<strong><span class=\"swl-marker mark_yellow\">\u6570\u5206\u3067\u5b8c\u4e86<\/span><\/strong>\u3057\u307e\u3059\u3002\u3053\u308c\u304c<strong><span class=\"swl-marker mark_yellow\">\u4fee\u6b63\u5de5\u657060\u301c70%\u524a\u6e1b<\/span><\/strong>\u306e\u7406\u7531\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Q10: \u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u77e5\u8b58\u306f\u5fc5\u8981\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n<p><strong>A:<\/strong> <strong><span class=\"swl-marker mark_yellow\">\u57fa\u672c\u7684\u306aJSON\u7406\u89e3\u304c\u3042\u308c\u3070\u5341\u5206<\/span><\/strong>\u3067\u3059\u3002\u5fc5\u8981\u306a\u30b9\u30ad\u30eb\u30ec\u30d9\u30eb\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u5fc5\u9808\uff1a<\/strong> Figma\u306e\u57fa\u672c\u64cd\u4f5c\u3001JSON\u306e\u8aad\u307f\u66f8\u304d\uff08<code>{\"key\": \"value\"}<\/code>\u5f62\u5f0f\u306e\u7406\u89e3\uff09<\/li>\n\n\n\n<li><strong>\u63a8\u5968\uff1a<\/strong> CSS\u306e\u57fa\u790e\u77e5\u8b58\uff08\u8272\u30fb\u4f59\u767d\u30fb\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u306e\u6982\u5ff5\uff09<\/li>\n\n\n\n<li><strong>\u4e0d\u8981\uff1a<\/strong> JavaScript\u3001React\u3001\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u5168\u822c<\/li>\n<\/ul>\n\n\n\n<p>\u672c\u8a18\u4e8b\u306e<strong><span class=\"swl-marker mark_yellow\">\u30d7\u30ed\u30f3\u30d7\u30c8\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u96c6\u3092\u30b3\u30d4\u30fc&amp;\u30da\u30fc\u30b9\u30c8\u3059\u308c\u3070\u3001GPT\u304c\u81ea\u52d5\u3067JSON\u751f\u6210<\/span><\/strong>\u3057\u3066\u304f\u308c\u307e\u3059\u3002<strong><span class=\"swl-marker mark_yellow\">WithCode\u306e\u521d\u7d1a\u30b3\u30fc\u30b9\u4fee\u4e86\u30ec\u30d9\u30eb\u3067\u5341\u5206\u5b9f\u8df5\u53ef\u80fd<\/span><\/strong>\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Q11: \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u56fa\u6709\u306e\u30c8\u30fc\u30af\u30f3\u306f\u3069\u3046\u7ba1\u7406\u3059\u308c\u3070\u3044\u3044\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n<p><strong>A:<\/strong> <strong><span class=\"swl-marker mark_yellow\">Semantic\u30c8\u30fc\u30af\u30f3\u306e\u968e\u5c64\u5316<\/span><\/strong>\u3067\u5bfe\u5fdc\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-json\" data-lang=\"JSON\"><code>{\n  &quot;color&quot;: {\n    &quot;semantic&quot;: {\n      &quot;button&quot;: {\n        &quot;primary&quot;: {\n          &quot;background&quot;: &quot;{color.primitive.blue.500}&quot;,\n          &quot;text&quot;: &quot;{color.primitive.white}&quot;,\n          &quot;border&quot;: &quot;{color.primitive.blue.600}&quot;\n        },\n        &quot;secondary&quot;: {\n          &quot;background&quot;: &quot;{color.primitive.gray.100}&quot;,\n          &quot;text&quot;: &quot;{color.primitive.gray.900}&quot;\n        }\n      },\n      &quot;card&quot;: {\n        &quot;background&quot;: &quot;{color.primitive.white}&quot;,\n        &quot;border&quot;: &quot;{color.primitive.gray.200}&quot;,\n        &quot;shadow&quot;: &quot;{color.primitive.gray.300}&quot;\n      }\n    }\n  }\n}<\/code><\/pre><\/div>\n\n\n\n<p>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3054\u3068\u306b<strong><span class=\"swl-marker mark_yellow\">button\u3001card\u3001modal\u3001input<\/span><\/strong>\u306a\u3069\u306e\u540d\u524d\u7a7a\u9593\u3092\u4f5c\u308a\u3001\u305d\u306e\u4e2d\u3067<strong><span class=\"swl-marker mark_yellow\">background\u3001text\u3001border<\/span><\/strong>\u306a\u3069\u306e\u5f79\u5272\u5225\u30c8\u30fc\u30af\u30f3\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\u672c\u8a18\u4e8b\u306e<strong><span class=\"swl-marker mark_yellow\">\u30d7\u30ed\u30f3\u30d7\u30c8\u30c6\u30f3\u30d7\u30ec\u30fc\u30c88<\/span><\/strong>\u3092\u6d3b\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Q12: \u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u306b\u5bfe\u5fdc\u3055\u305b\u308b\u306b\u306f\u3069\u3046\u3059\u308c\u3070\u3044\u3044\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n<p><strong>A:<\/strong> Figma Variables\u306e<strong>Modes\u6a5f\u80fd<\/strong>\u3092\u6d3b\u7528\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Light\u30e2\u30fc\u30c9\uff1a<\/strong> <code>button-background: blue-500<\/code><\/li>\n\n\n\n<li><strong>Dark\u30e2\u30fc\u30c9\uff1a<\/strong> <code>button-background: blue-400<\/code>\uff08\u660e\u5ea6\u3092\u8abf\u6574\uff09<\/li>\n<\/ol>\n\n\n\n<p>Semantic\u30c8\u30fc\u30af\u30f3\u306b\u5bfe\u3057\u3066<strong><span class=\"swl-marker mark_yellow\">\u30e2\u30fc\u30c9\u5225\u306e\u5024\u3092\u8a2d\u5b9a<\/span><\/strong>\u3059\u308b\u3060\u3051\u3067\u3001\u30c7\u30b6\u30a4\u30f3\u5168\u4f53\u304c\u30ef\u30f3\u30af\u30ea\u30c3\u30af\u3067\u5207\u308a\u66ff\u308f\u308a\u307e\u3059\u3002\u5b9f\u88c5\u65b9\u6cd5<strong><span class=\"swl-marker mark_yellow\">\u30d7\u30ed\u30f3\u30d7\u30c8\u30c6\u30f3\u30d7\u30ec\u30fc\u30c87\uff08\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u5bfe\u5fdc\uff09<\/span><\/strong>\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002GPT\u306b\u300c\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u7528\u306e\u30c8\u30fc\u30af\u30f3\u5024\u3092\u751f\u6210\u3057\u3066\u300d\u3068\u4f9d\u983c\u3059\u308c\u3070\u3001\u9069\u5207\u306a\u660e\u5ea6\u8abf\u6574\u3092\u81ea\u52d5\u3067\u884c\u3063\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Q13: \u30c1\u30fc\u30e0\u5168\u4f53\u3067\u30c8\u30fc\u30af\u30f3\u306e\u4e00\u8cab\u6027\u3092\u4fdd\u3064\u306b\u306f\u3069\u3046\u3059\u308c\u3070\u3044\u3044\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n<p><strong>A:<\/strong> <strong>3\u3064\u306e\u30eb\u30fc\u30eb<\/strong>\u3092\u8a2d\u5b9a\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u547d\u540d\u898f\u5247\u306e\u7d71\u4e00\uff1a<\/strong> <code>color-{category}-{scale}<\/code>\u3001<code>spacing-{size}<\/code>\u306a\u3069\u3001\u30c1\u30fc\u30e0\u5168\u54e1\u304c\u5f93\u3046\u30cd\u30fc\u30df\u30f3\u30b0\u30eb\u30fc\u30eb\u3092\u6587\u66f8\u5316<\/li>\n\n\n\n<li><strong>\u30c8\u30fc\u30af\u30f3\u8ffd\u52a0\u306e\u627f\u8a8d\u30d5\u30ed\u30fc\uff1a<\/strong> \u65b0\u3057\u3044\u30c8\u30fc\u30af\u30f3\u3092\u8ffd\u52a0\u3059\u308b\u969b\u306f\u3001\u30c7\u30b6\u30a4\u30f3\u30ea\u30fc\u30c9\u306e\u627f\u8a8d\u3092\u5fc5\u9808\u5316<\/li>\n\n\n\n<li><strong>\u5b9a\u671f\u7684\u306a\u68da\u5378\u3057\uff1a<\/strong> \u67081\u56de\u3001\u4f7f\u308f\u308c\u3066\u3044\u306a\u3044\u30c8\u30fc\u30af\u30f3\u3092\u524a\u9664\u3057\u3001\u91cd\u8907\u3092\u7d71\u5408<\/li>\n<\/ol>\n\n\n\n<p>\u307e\u305f\u3001<strong><span class=\"swl-marker mark_yellow\">Figma Make\u306e\u4f7f\u7528\u983b\u5ea6\u8868\u793a\u6a5f\u80fd<\/span><\/strong>\u3092\u6d3b\u7528\u3057\u3001\u300c\u4f7f\u7528\u56de\u65700\u306e\u30c8\u30fc\u30af\u30f3\u306f\u524a\u9664\u5019\u88dc\u300d\u3068\u3059\u308b\u3053\u3068\u3067\u3001\u7121\u99c4\u306a\u30c8\u30fc\u30af\u30f3\u306e\u84c4\u7a4d\u3092\u9632\u3052\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Q14: \u5c0e\u5165\u30b3\u30b9\u30c8\u306f\u3069\u306e\u304f\u3089\u3044\u304b\u304b\u308a\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n<p><strong>A:<\/strong> <strong>\u521d\u671f\u6295\u8cc7\u306f\u6700\u5c0f\u9650<\/strong>\u3067\u3059\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u9805\u76ee<\/th><th>\u8cbb\u7528<\/th><th>\u5099\u8003<\/th><\/tr><\/thead><tbody><tr><td>Figma<\/td><td>\u7121\u6599\u301c<\/td><td>\u500b\u4eba\u5229\u7528\u306f\u5b8c\u5168\u7121\u6599\u3001\u30c1\u30fc\u30e0\u30d7\u30e9\u30f3\u306f\u6708$15\/\u4eba<\/td><\/tr><tr><td>Figma Make<\/td><td>\u7121\u6599<\/td><td>\u30d7\u30e9\u30b0\u30a4\u30f3\u5229\u7528\u6599\u306a\u3057<\/td><\/tr><tr><td>ChatGPT Plus<\/td><td>\u6708$20<\/td><td>GPT-4\u5229\u7528\u306b\u5fc5\u8981\uff08\u7121\u6599\u7248\u3067\u3082\u53ef\u80fd\u3060\u304c\u7cbe\u5ea6\u4f4e\u4e0b\uff09<\/td><\/tr><tr><td>Claude Pro<\/td><td>\u6708$20<\/td><td>\u5927\u898f\u6a21\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u5411\u3051\uff08\u30aa\u30d7\u30b7\u30e7\u30f3\uff09<\/td><\/tr><tr><td><strong>\u5408\u8a08<\/strong><\/td><td><strong>\u6708$20\u301c<\/strong><\/td><td>\u6700\u5c0f\u69cb\u6210\u3067\u958b\u59cb\u53ef\u80fd<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>ROI\uff08\u6295\u8cc7\u5bfe\u52b9\u679c\uff09\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u67081\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067<strong>10\u6642\u9593\u524a\u6e1b<\/strong> \u2192 \u6642\u7d663,000\u5186\u63db\u7b97\u3067<strong>\u67083\u4e07\u5186\u306e\u30b3\u30b9\u30c8\u524a\u6e1b<\/strong><\/li>\n\n\n\n<li>\u6295\u8cc7\uff1a\u67082,000\u5186\uff08ChatGPT Plus\uff09<\/li>\n\n\n\n<li><strong>\u7d14\u5229\u76ca\uff1a\u670828,000\u5186\u3001\u5e74\u959333.6\u4e07\u5186<\/strong><\/li>\n<\/ul>\n\n\n\n<p>\u521d\u6708\u3067\u6295\u8cc7\u56de\u53ce\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Q15: Vue\/React\/Angular\u306a\u3069\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3082\u4f7f\u3048\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n<p><strong>A:<\/strong> \u306f\u3044\u3001<strong><span class=\"swl-marker mark_yellow\">\u3059\u3079\u3066\u306e\u4e3b\u8981\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u5229\u7528\u53ef\u80fd<\/span><\/strong>\u3067\u3059\u3002DTCG\u4ed5\u69d8\u306eJSON\u3092CSS\u5909\u6570\u3084SCSS\u5909\u6570\u306b\u5909\u63db\u3059\u308b\u30c4\u30fc\u30eb\u304c\u3042\u308a\u307e\u3059\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Style Dictionary\uff08Amazon\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\uff09\uff1a<\/strong> DTCG JSON \u2192 CSS\u5909\u6570\u3001SCSS\u3001JS\u3001iOS\/Android\u30cd\u30a4\u30c6\u30a3\u30d6\u30b3\u30fc\u30c9\u306b\u5909\u63db<\/li>\n\n\n\n<li><strong>Tailwind CSS\u8a2d\u5b9a\uff1a<\/strong> DTCG\u30c8\u30fc\u30af\u30f3\u3092tailwind.config.js\u306b\u76f4\u63a5\u30a4\u30f3\u30dd\u30fc\u30c8<\/li>\n\n\n\n<li><strong>CSS-in-JS\uff08Styled Components\u3001Emotion\uff09\uff1a<\/strong> \u30c8\u30fc\u30af\u30f3\u3092JS object\u3068\u3057\u3066\u30a4\u30f3\u30dd\u30fc\u30c8<\/li>\n<\/ul>\n\n\n\n<p>GPT\u306b\u300c\u3053\u306eDTCG JSON\u3092React\u306eStyled Components\u7528\u306b\u5909\u63db\u3057\u3066\u300d\u3068\u4f9d\u983c\u3059\u308c\u3070\u3001\u5373\u5ea7\u306b\u5bfe\u5fdc\u30b3\u30fc\u30c9\u3092\u751f\u6210\u3057\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-left\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-14.48.08.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u751f\u5f92<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u6700\u521d\u306f\u300cAI\u3067\u697d\u3092\u3059\u308b\u65b9\u6cd5\u300d\u3060\u3068\u601d\u3063\u3066\u307e\u3057\u305f\u3002<br>\u3067\u3082\u9055\u3044\u307e\u3057\u305f\u3002<br>\u3053\u308c\u306f\u69cb\u9020\u3092\u6301\u3064\u305f\u3081\u306e\u6b66\u5668\u3067\u3059\u306d\uff01<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-right\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-15.12.07.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u30da\u30f3\u535a\u58eb<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u3046\u3080\u3002Figma \u00d7 GPT\u306f\u4f5c\u696d\u3092\u6e1b\u3089\u3059\u9053\u5177\u3067\u306f\u306a\u3044\u3002<br>\u601d\u8003\u3092\u62e1\u5f35\u3059\u308b\u9053\u5177\u306a\u306e\u3058\u3083\uff01<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-left\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-15.06.05.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u751f\u5f92<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u5b9f\u969b\u306b\u65e2\u5b58UI\u304b\u3089\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u3092\u69cb\u7bc9\u3057\u3066\u307f\u3088\u3046\u3068\u601d\u3044\u307e\u3059\u3002\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u307e\u3068\u3081<\/h2>\n\n\n\n<p>\u672c\u8a18\u4e8b\u3067\u306f\u3001Figma\u3068GPT\u3092\u6d3b\u7528\u3057\u305f\u9769\u65b0\u7684\u306aUI\u69cb\u7bc9\u624b\u6cd5\u300c\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u9006\u751f\u6210\u300d\u306b\u3064\u3044\u3066\u3001\u5b9f\u8df5\u7684\u306a\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u3092\u5fb9\u5e95\u89e3\u8aac\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u91cd\u8981\u306a\u30dd\u30a4\u30f3\u30c8\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"is-style-big_icon_point\"><strong>\u30fb\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u306f\u5fc5\u9808\u30a4\u30f3\u30d5\u30e9\uff1a<\/strong> \u958b\u767a\u6642\u959330\u301c40%\u524a\u6e1b\u3001\u4fee\u6b63\u5de5\u657060\u301c70%\u524a\u6e1b<br>\u30fb<strong>AI\u6d3b\u7528\u3067\u52b9\u7387\u5316\uff1a<\/strong> \u5f93\u676530\u6642\u9593 \u2192 AI\u6d3b\u7528\u30674\u6642\u9593\uff0887%\u524a\u6e1b\uff09<br>\u30fb<strong>4\u30b9\u30c6\u30c3\u30d7\u3067\u5b9f\u73fe\uff1a<\/strong> \u2460 Figma Make\u3067\u62bd\u51fa \u2192 \u2461 GPT\u3067\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0 \u2192 \u2462 DTCG JSON\u4f5c\u6210 \u2192 \u2463 Figma\u306b\u30a4\u30f3\u30dd\u30fc\u30c8<br>\u30fb<strong>Tailwind\u898f\u5247\u6e96\u62e0\uff1a<\/strong> \u30c7\u30b6\u30a4\u30f3\u3068\u30b3\u30fc\u30c9\u306e\u5b8c\u5168\u4e00\u81f4\u3001\u958b\u767a\u52b9\u7387\u5411\u4e0a<br>\u30fb<strong>2\u968e\u5c64\u69cb\u9020\uff1a<\/strong> Primitive\uff08\u57fa\u790e\u5024\uff09+ Semantic\uff08\u7528\u9014\u5225\uff09\u3067\u4fdd\u5b88\u6027\u30fb\u62e1\u5f35\u6027\u3092\u78ba\u4fdd<\/p>\n\n\n\n<p><strong><span class=\"swl-marker mark_yellow\">WithCode\u3067\u5b66\u3093\u3060Web\u5236\u4f5c\u30b9\u30ad\u30eb\u306b\u3001AI\u3092\u6d3b\u7528\u3057\u305f\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u69cb\u7bc9\u3092\u7d44\u307f\u5408\u308f\u305b\u308c\u3070\u3001\u30d7\u30ed\u30d5\u30a7\u30c3\u30b7\u30e7\u30ca\u30eb\u3068\u3057\u3066\u5927\u304d\u304f\u5dee\u5225\u5316\u3067\u304d\u307e\u3059\u3002<\/span><\/strong><\/p>\n\n\n\n<p>\u5927\u5207\u306a\u306e\u306f\u3001\u5b8c\u74a7\u3092\u76ee\u6307\u3055\u305a\u3001\u6bb5\u968e\u7684\u306b\u5b9f\u88c5\u3059\u308b\u3053\u3068\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Week 1:<\/strong> \u5c0f\u898f\u6a21\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30674\u30b9\u30c6\u30c3\u30d7\u3092\u8a66\u3059<\/li>\n\n\n\n<li><strong>Week 2:<\/strong> \u30d7\u30ed\u30f3\u30d7\u30c8\u3092\u6539\u5584\u3057\u3001\u7cbe\u5ea6\u3092\u5411\u4e0a<\/li>\n\n\n\n<li><strong>Week 3:<\/strong> \u30c1\u30fc\u30e0\u5168\u4f53\u3067\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u3092\u5171\u6709<\/li>\n\n\n\n<li><strong>Month 2-3:<\/strong> \u5168\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u5c55\u958b\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u6574\u5099<\/li>\n<\/ol>\n\n\n\n<p>\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u69cb\u7bc9\u306f\u300c\u3044\u3064\u304b\u3084\u308d\u3046\u300d\u3067\u306f\u306a\u304f\u3001\u300c\u4eca\u65e5\u304b\u3089\u59cb\u3081\u308b\u300d\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u54c1\u8cea\u5411\u4e0a\u3001\u305d\u3057\u3066\u81ea\u5206\u306e\u30b9\u30ad\u30eb\u30a2\u30c3\u30d7\u306e\u305f\u3081\u306b\u3001\u4eca\u3059\u3050Figma \u00d7 GPT\u3092\u5b9f\u8df5\u3057\u307e\u3057\u3087\u3046\uff01<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">WithCode\u3092\u4f53\u9a13\u3067\u304d\u308b\u521d\u7d1a\u30b3\u30fc\u30b9\u516c\u958b\u4e2d\uff01<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img decoding=\"async\" width=\"600\" height=\"500\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2024\/04\/\u30d0\u30ca\u30fc_300\u00d7250_20240425.png\" alt=\"\" class=\"wp-image-2650\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">\u521d\u7d1a\u30b3\u30fc\u30b9\uff08\u00a549,800\uff09\u304c\u5b8c\u5168\u7121\u6599\u306b\uff01<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u671f\u9593\uff1a<\/strong>1\u9031\u9593<\/li>\n\n\n\n<li><strong>\u5b66\u7fd2\u5185\u5bb9\uff1a<\/strong><br>\u30ed\u30fc\u30c9\u30de\u30c3\u30d7\/\u57fa\u790e\u77e5\u8b58\/\u74b0\u5883\u69cb\u7bc9\/HTML\/CSS\/LP\u30fb\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa\u4f5c\u6210<br><strong><span class=\"swl-marker mark_yellow\">\u2192 \u6b63\u3057\u3044\u5b66\u7fd2\u65b9\u6cd5\u3067\u300c\u78ba\u304b\u306a\u6210\u9577\u300d\u3092\u5b9f\u611f\u3067\u304d\u308b\u30ab\u30ea\u30ad\u30e5\u30e9\u30e0<\/span><\/strong><\/li>\n<\/ul>\n\n\n\n<p>\u526f\u696d\u30fb\u30d5\u30ea\u30fc\u30e9\u30f3\u30b9\u304c\u4e3b\u6d41\u306b\u306a\u3063\u3066\u3044\u308b\u4eca\u3053\u305d\u3001\u81ea\u3089\u306e\u30b9\u30ad\u30eb\u3067\u7a3c\u3052\u308b\u4eba\u6750\u3092\u76ee\u6307\u3057\u3066\u307f\u307e\u305b\u3093\u304b\uff1f<\/p>\n\n\n\n<p>\u672a\u7d4c\u9a13\u3067\u3082\u5fc3\u914d\u3059\u308b\u3053\u3068\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u521d\u7d1a\u30b3\u30fc\u30b9\u3092\u53d7\u8b1b\u3055\u308c\u308b\u65b9\u306e\u5927\u591a\u6570\u306f\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u672a\u7d4c\u9a13\u3067\u3059\u3002\u307e\u305a\u306f\u7121\u6599\u30ab\u30a6\u30f3\u30bb\u30ea\u30f3\u30b0\u3067\u3001\u60a9\u307f\u3084\u4e0d\u5b89\u3092\u304a\u805e\u304b\u305b\u304f\u3060\u3055\u3044\uff01<\/p>\n\n\n\n<p>WithCode\u3067\u306f\u3001Web\u5236\u4f5c\u306e\u6280\u8853\u3060\u3051\u3067\u306a\u304f\u3001<strong><span class=\"swl-marker mark_yellow\">Figma\u3084GPT\u3092\u6d3b\u7528\u3057\u305f\u6700\u65b0\u306e\u30c7\u30b6\u30a4\u30f3\u30ef\u30fc\u30af\u30d5\u30ed\u30fc<\/span><\/strong>\u3082\u5b66\u3079\u308b\u30ab\u30ea\u30ad\u30e5\u30e9\u30e0\u3092\u7528\u610f\u3057\u3066\u3044\u307e\u3059\u3002\u30d7\u30ed\u3068\u3057\u3066\u6d3b\u8e8d\u3059\u308b\u305f\u3081\u306b\u5fc5\u8981\u306a\u3001\u6280\u8853\u529b\u3068\u52b9\u7387\u5316\u30b9\u30ad\u30eb\u306e\u4e21\u65b9\u3092\u8eab\u306b\u3064\u3051\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-white-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/withcode.tech\/reservation\/\" style=\"background-color:#ffbf00\"><strong>\u516c\u5f0f\u30b5\u30a4\u30c8\u304b\u3089\u7121\u6599\u30ab\u30a6\u30f3\u30bb\u30ea\u30f3\u30b0\u306b\u7533\u3057\u8fbc\u3080 \u2192<\/strong><\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Web\u5236\u4f5c\u306e\u73fe\u5834\u3067\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u60a9\u307f\u3092\u62b1\u3048\u3066\u3044\u307e\u305b\u3093\u304b\uff1f \u672c\u8a18\u4e8b\u3067\u306f\u3001Figma\u3068GPT\u3092\u6d3b\u7528\u3057\u3066\u3001\u65e2\u5b58UI\u30c7\u30b6\u30a4\u30f3\u304b\u3089\u81ea\u52d5\u7684\u306bVariables\uff08\u30c7\u30b6\u30a4\u30f3\u30c8\u30fc\u30af\u30f3\uff09\u3092\u62bd\u51fa\u3057\u3001Tailwind CSS\u898f\u5247\u306b\u6700\u9069\u5316\u3059\u308b\u3068\u3044 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":12699,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"swell_btn_cv_data":"","footnotes":""},"categories":[49],"tags":[38,56,110,391],"class_list":["post-12306","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","tag-web-design","tag-56","tag-chatgpt","tag-figma"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/posts\/12306","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/comments?post=12306"}],"version-history":[{"count":15,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/posts\/12306\/revisions"}],"predecessor-version":[{"id":12865,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/posts\/12306\/revisions\/12865"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/media\/12699"}],"wp:attachment":[{"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/media?parent=12306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/categories?post=12306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/tags?post=12306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}