{"id":9432,"date":"2025-11-25T12:52:53","date_gmt":"2025-11-25T03:52:53","guid":{"rendered":"https:\/\/fastcoding.jp\/blog\/?p=9432"},"modified":"2025-11-25T12:53:00","modified_gmt":"2025-11-25T03:53:00","slug":"cta-slide-in-on-read-complete","status":"publish","type":"post","link":"https:\/\/fastcoding.jp\/blog\/all\/ui-ux\/cta-slide-in-on-read-complete\/","title":{"rendered":"&#8220;\u6b21\u306b\u3059\u3079\u304d\u3053\u3068&#8221;\u304c\u73fe\u308c\u308b \u2500 \u8aac\u660e\u6587\u8aad\u4e86\u3067\u6b21\u306eCTA\u3092\u6de1\u304f\u30b9\u30e9\u30a4\u30c9\u30a4\u30f3"},"content":{"rendered":"<div class=\"the_content\">\n<p>\u3053\u3093\u306b\u3061\u306f\u3001Web\u30c7\u30a3\u30ec\u30af\u30bf\u30fc\u306e BigVi\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u5148\u65e5\u3001\u304a\u5ba2\u3055\u307e\u304b\u3089\u300c\u30dc\u30bf\u30f3\u3092\u76ee\u7acb\u305f\u305b\u305f\u3044\u3051\u3069\u3001\u6700\u521d\u304b\u3089\u898b\u305b\u308b\u3068\u90aa\u9b54\u306b\u306a\u308b\u300d\u3068\u3044\u3046\u76f8\u8ac7\u3092\u53d7\u3051\u307e\u3057\u305f\u3002\u30e6\u30fc\u30b6\u30fc\u304c\u8aac\u660e\u3092\u8aad\u307f\u7d42\u308f\u3063\u305f\u6642\u306b\u3001\u3061\u3087\u3046\u3069\u3044\u3044\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u30dc\u30bf\u30f3\u3092\u898b\u305b\u305f\u3044\u3068\u3044\u3046\u3053\u3068\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u78ba\u304b\u306b\u3001\u6700\u521d\u304b\u3089\u30dc\u30bf\u30f3\u304c\u3042\u308b\u3068\u6c17\u306b\u306a\u308a\u307e\u3059\u3002\u3067\u3082\u3001\u8aad\u307f\u7d42\u308f\u3063\u305f\u6642\u306b\u30dc\u30bf\u30f3\u304c\u306a\u3044\u3068\u3001\u6b21\u306b\u4f55\u3092\u3059\u308c\u3070\u3044\u3044\u304b\u308f\u304b\u3089\u306a\u3044\u3067\u3059\u3002\u79c1\u3082\u540c\u3058\u7d4c\u9a13\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u8aad\u4e86\u691c\u77e5\u3067CTA\u3092\u30b9\u30e9\u30a4\u30c9\u30a4\u30f3<\/h2>\n\n\n\n<p>\u3053\u306e\u8ab2\u984c\u306b\u5bfe\u3057\u3066\u3001\u79c1\u306fIntersectionObserver\u3068\u3044\u3046\u65b9\u6cd5\u3092\u4f7f\u3044\u307e\u3057\u305f\u3002\u8aac\u660e\u6587\u306e\u6700\u5f8c\u304c\u753b\u9762\u306b\u5165\u3063\u305f\u77ac\u9593\u306b\u3001\u305d\u306e\u4e0b\u306e\u30dc\u30bf\u30f3\u304c\u4e0b\u304b\u30898px\u30b9\u30e9\u30a4\u30c9\u3057\u3066\u51fa\u3066\u304d\u307e\u3059\u3002180ms\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u3001\u3075\u308f\u3063\u3068\u73fe\u308c\u308b\u611f\u3058\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u5e38\u6642\u8868\u793a\u3057\u306a\u3044\u3053\u3068\u3067\u3001\u8aad\u3093\u3067\u3044\u308b\u6642\u306f\u90aa\u9b54\u306b\u306a\u308a\u307e\u305b\u3093\u3002\u8aad\u307f\u7d42\u308f\u3063\u305f\u6642\u3060\u3051\u3001\u300c\u6b21\u306f\u3053\u3061\u3089\u300d\u3068\u3044\u3046\u30dc\u30bf\u30f3\u304c\u898b\u3048\u307e\u3059\u3002\u3061\u3087\u3046\u3069\u3044\u3044\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u51fa\u3066\u304f\u308b\u306e\u3067\u3001\u30e6\u30fc\u30b6\u30fc\u3082\u81ea\u7136\u306b\u62bc\u3057\u3066\u304f\u308c\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML\u69cb\u9020<\/h2>\n\n\n\n<p>\u307e\u305a\u3001HTML\u306f\u3053\u3046\u3044\u3046\u69cb\u9020\u306b\u3057\u307e\u3059\u3002\u8aac\u660e\u6587\u3092\u3057\u3063\u304b\u308a\u8aad\u3093\u3067\u3082\u3089\u3063\u3066\u3001\u6700\u5f8c\u306e\u6bb5\u843d\u304c\u753b\u9762\u306b\u5165\u3063\u305f\u77ac\u9593\u306bCTA\u30dc\u30c3\u30af\u30b9\u304c\u4e0b\u304b\u3089\u30b9\u30e9\u30a4\u30c9\u30a4\u30f3\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;article class=\"product-intro\"&gt;\n  &lt;h2&gt;\u79c1\u305f\u3061\u306e\u30b5\u30fc\u30d3\u30b9\u306b\u3064\u3044\u3066&lt;\/h2&gt;\n  \n  &lt;p&gt;\n    \u5f53\u793e\u3067\u306f\u3001Web\u5236\u4f5c\u304b\u3089\u30c7\u30b6\u30a4\u30f3\u3001\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0\u307e\u3067\n    \u4e00\u8cab\u3057\u305f\u30b5\u30dd\u30fc\u30c8\u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3002\n  &lt;\/p&gt;\n  \n  &lt;p&gt;\n    \u304a\u5ba2\u69d8\u306e\u30d3\u30b8\u30cd\u30b9\u306b\u5408\u308f\u305b\u305f\u6700\u9069\u306a\u63d0\u6848\u3092\u884c\u3044\u3001\n    \u6210\u679c\u3092\u51fa\u3059\u305f\u3081\u306e\u6226\u7565\u3092\u4e00\u7dd2\u306b\u8003\u3048\u307e\u3059\u3002\n  &lt;\/p&gt;\n  \n  &lt;!-- \u2193\u3053\u306e\u6bb5\u843d\u304c\u753b\u9762\u306b\u5165\u3063\u305f\u77ac\u9593\u3001\u6b21\u306eCTA\u30dc\u30c3\u30af\u30b9\u304c\u4e0b\u304b\u3089\u30b9\u30e9\u30a4\u30c9\u30a4\u30f3 --&gt;\n  &lt;p class=\"last-paragraph\" data-cta-trigger&gt;\n    \u307e\u305a\u306f\u7121\u6599\u76f8\u8ac7\u3067\u3001\u3042\u306a\u305f\u306e\u30d3\u30b8\u30cd\u30b9\u306b\u3064\u3044\u3066\n    \u304a\u805e\u304b\u305b\u304f\u3060\u3055\u3044\u3002\u4e00\u7dd2\u306b\u6210\u9577\u6226\u7565\u3092\u8003\u3048\u307e\u3057\u3087\u3046\u3002\n  &lt;\/p&gt;\n  \n  &lt;!-- \u2193\u8aad\u4e86\u3057\u305f\u77ac\u9593\u306b\u4e0b\u304b\u30898px\u30b9\u30e9\u30a4\u30c9\u30a4\u30f3\u3057\u3066\u73fe\u308c\u308bCTA\u30dc\u30c3\u30af\u30b9 --&gt;\n  &lt;div class=\"context-cta\" data-cta-box&gt;\n    &lt;h3&gt;\u6b21\u306e\u30b9\u30c6\u30c3\u30d7&lt;\/h3&gt;\n    &lt;p&gt;\u4eca\u3059\u3050\u7121\u6599\u76f8\u8ac7\u3092\u4e88\u7d04\u3057\u307e\u305b\u3093\u304b\uff1f&lt;\/p&gt;\n    &lt;a href=\"\/contact\" class=\"cta-button\"&gt;\u7121\u6599\u76f8\u8ac7\u3092\u4e88\u7d04\u3059\u308b&lt;\/a&gt;\n  &lt;\/div&gt;\n&lt;\/article&gt;<\/code><\/pre>\n\n\n\n<p>data-cta-trigger\u3068\u3044\u3046\u5c5e\u6027\u3092\u6700\u5f8c\u306e\u6bb5\u843d\u306b\u3064\u3051\u307e\u3059\u3002data-cta-box\u306fCTA\u30dc\u30c3\u30af\u30b9\u3067\u3059\u3002\u6700\u5f8c\u306e\u6bb5\u843d\u304c\u753b\u9762\u306b\u5165\u3063\u305f\u77ac\u9593\u306b\u3001\u305d\u306e\u76f4\u5f8c\u306eCTA\u30dc\u30c3\u30af\u30b9\u304c\u4e0b\u304b\u30898px\u30b9\u30e9\u30a4\u30c9\u3057\u3066\u73fe\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS\u30b9\u30bf\u30a4\u30eb<\/h2>\n\n\n\n<p>CSS\u3067\u3001\u6700\u521d\u306fCTA\u30dc\u30c3\u30af\u30b9\u3092\u96a0\u3057\u307e\u3059\u3002\u305d\u3057\u3066\u3001.show\u3068\u3044\u3046\u30af\u30e9\u30b9\u304c\u3064\u3044\u305f\u6642\u3060\u3051\u3001\u4e0b\u304b\u3089\u30b9\u30e9\u30a4\u30c9\u3057\u3066\u51fa\u3066\u304d\u307e\u3059\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n      \/* CTA\u30dc\u30c3\u30af\u30b9 - \u521d\u671f\u72b6\u614b\u306f\u5b8c\u5168\u306b\u975e\u8868\u793a *\/\n      .context-cta {\n        opacity: 0;\n        transform: translateY(30px);\n        transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n\n        margin-top: 2rem;\n        padding: 2rem;\n        background: #e3f2fd;\n        border: 2px solid #2196f3;\n        border-radius: 12px;\n        text-align: center;\n      }\n\n      \/* show\u30af\u30e9\u30b9\u304c\u3064\u3044\u305f\u3089\u8868\u793a *\/\n      .context-cta.show {\n        opacity: 1;\n        transform: translateY(0);\n      }\n\n      .context-cta h3 {\n        font-size: 1.5rem;\n        margin-bottom: 1rem;\n        color: #1976d2;\n      }\n\n      .context-cta p {\n        margin-bottom: 1.5rem;\n        color: #555;\n      }\n\n      .cta-button {\n        display: inline-block;\n        padding: 1rem 2.5rem;\n        background: #2196f3;\n        color: white;\n        text-decoration: none;\n        border-radius: 8px;\n        font-weight: bold;\n        font-size: 1.1rem;\n        transition: background 0.3s, transform 0.2s;\n      }\n\n      .cta-button:hover {\n        background: #1976d2;\n        transform: translateY(-2px);\n      }\n\n<\/pre><\/div>\n\n\n<p>\u6700\u521d\u306fopacity: 0\u3067\u898b\u3048\u306a\u3044\u3067\u3059\u3002transform: translateY(8px)\u3067\u3001\u4e0b\u306b8px\u96a0\u308c\u3066\u3044\u307e\u3059\u3002show\u30af\u30e9\u30b9\u304c\u3064\u304f\u3068\u3001opacity: 1\u3067\u898b\u3048\u3066\u3001translateY(0)\u3067\u5143\u306e\u4f4d\u7f6e\u306b\u623b\u308a\u307e\u3059\u3002\u3053\u308c\u304c\u4e0b\u304b\u30898px\u30b9\u30e9\u30a4\u30c9\u30a4\u30f3\u3059\u308b\u52d5\u304d\u3067\u3059\u3002180ms\u3067\u52d5\u304f\u306e\u3067\u3001\u3075\u308f\u3063\u3068\u3057\u305f\u611f\u3058\u3067\u3059\u3002<\/p>\n\n\n\n<p>prefers-reduced-motion\u3068\u3044\u3046\u306e\u306f\u3001\u52d5\u304d\u304c\u82e6\u624b\u306a\u4eba\u306e\u305f\u3081\u306e\u8a2d\u5b9a\u3067\u3059\u3002\u3053\u306e\u8a2d\u5b9a\u304c\u30aa\u30f3\u306e\u4eba\u306b\u306f\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u30aa\u30d5\u306b\u3057\u307e\u3059\u3002\u5927\u4e8b\u306a\u3053\u3068\u3067\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">JavaScript\u306e\u5b9f\u88c5<\/h2>\n\n\n\n<p>JavaScript\u3067\u3001IntersectionObserver\u3092\u4f7f\u3044\u307e\u3059\u3002\u3053\u308c\u306f\u3001\u8981\u7d20\u304c\u753b\u9762\u306b\u5165\u3063\u305f\u304b\u3069\u3046\u304b\u3092\u76e3\u8996\u3059\u308bAPI\u3067\u3059\u3002\u6700\u5f8c\u306e\u6bb5\u843d\u304c\u753b\u9762\u306b\u5165\u3063\u305f\u77ac\u9593\u306b\u3001CTA\u30dc\u30c3\u30af\u30b9\u306bshow\u30af\u30e9\u30b9\u3092\u3064\u3051\u3066\u3001\u4e0b\u304b\u3089\u30b9\u30e9\u30a4\u30c9\u30a4\u30f3\u3055\u305b\u307e\u3059\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n      \/\/ \u30da\u30fc\u30b8\u8aad\u307f\u8fbc\u307f\u5b8c\u4e86\u5f8c\u306b\u5b9f\u884c\n      window.addEventListener(&#039;load&#039;, function() {\n        const trigger = document.querySelector(&#039;&#x5B;data-cta-trigger]&#039;);\n        const ctaBox = document.querySelector(&#039;&#x5B;data-cta-box]&#039;);\n\n        console.log(&#039;\ud83c\udfaf \u30c8\u30ea\u30ac\u30fc\u8981\u7d20:&#039;, trigger);\n        console.log(&#039;\ud83d\udce6 CTA\u30dc\u30c3\u30af\u30b9:&#039;, ctaBox);\n\n        if (!trigger || !ctaBox) {\n          console.error(&#039;\u274c \u8981\u7d20\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093&#039;);\n          return;\n        }\n\n        \/\/ IntersectionObserver\u3092\u4f5c\u6210\n        const observer = new IntersectionObserver(function(entries) {\n          entries.forEach(function(entry) {\n            console.log(&#039;\ud83d\udc41\ufe0f \u753b\u9762\u5185\u8868\u793a\u7387:&#039;, Math.round(entry.intersectionRatio * 100) + &#039;%&#039;);\n\n            \/\/ 50%\u4ee5\u4e0a\u8868\u793a\u3055\u308c\u305f\u3089\n            if (entry.isIntersecting) {\n              console.log(&#039;\u2705 \u30c8\u30ea\u30ac\u30fc\u767a\u706b\uff01 show\u30af\u30e9\u30b9\u3092\u8ffd\u52a0&#039;);\n              ctaBox.classList.add(&#039;show&#039;);\n              \/\/ \u4e00\u5ea6\u3060\u3051\u5b9f\u884c\n              observer.unobserve(trigger);\n            }\n          });\n        }, {\n          \/\/ \u8981\u7d20\u306e50%\u304c\u898b\u3048\u305f\u3089\u767a\u706b\n          threshold: 0.5,\n          rootMargin: &#039;0px&#039;\n        });\n\n        \/\/ \u76e3\u8996\u958b\u59cb\n        observer.observe(trigger);\n        console.log(&#039;\ud83d\udc40 \u76e3\u8996\u958b\u59cb&#039;);\n\n        \/\/ \u521d\u671f\u4f4d\u7f6e\u3092\u30c1\u30a7\u30c3\u30af\n        const rect = trigger.getBoundingClientRect();\n        const isVisible = rect.top &lt; window.innerHeight;\n        console.log(&#039;\ud83d\udccd \u521d\u671f\u4f4d\u7f6e:&#039;, {\n          top: rect.top,\n          windowHeight: window.innerHeight,\n          \u753b\u9762\u5185: isVisible ? &#039;\u306f\u3044\uff08\u3059\u3050\u767a\u706b\u3057\u307e\u3059\uff09&#039; : &#039;\u3044\u3044\u3048\uff08\u30b9\u30af\u30ed\u30fc\u30eb\u304c\u5fc5\u8981\uff09&#039;\n        });\n      });\n<\/pre><\/div>\n\n\n<p>\u3053\u306e\u30b3\u30fc\u30c9\u306f\u3001\u6700\u5f8c\u306e\u6bb5\u843d\u304c\u753b\u9762\u306b\u5165\u3063\u305f\u6642\u306b\u3001CTA\u30dc\u30c3\u30af\u30b9\u306bshow\u30af\u30e9\u30b9\u3092\u3064\u3051\u307e\u3059\u3002CSS\u3067\u3001show\u30af\u30e9\u30b9\u304c\u3064\u304f\u3068\u4e0b\u304b\u30898px\u30b9\u30e9\u30a4\u30c9\u30a4\u30f3\u3059\u308b\u3088\u3046\u306b\u66f8\u3044\u305f\u306e\u3067\u3001\u3053\u308c\u3067\u52d5\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>threshold: 0.5\u3068\u3044\u3046\u306e\u306f\u3001\u8981\u7d20\u306e50%\u304c\u898b\u3048\u305f\u6642\u306b\u767a\u706b\u3059\u308b\u3068\u3044\u3046\u610f\u5473\u3067\u3059\u3002\u6700\u5f8c\u306e\u6bb5\u843d\u306e\u534a\u5206\u304c\u898b\u3048\u305f\u3089\u3001CTA\u30dc\u30c3\u30af\u30b9\u304c\u4e0b\u304b\u3089\u30b9\u30e9\u30a4\u30c9\u30a4\u30f3\u3057\u307e\u3059\u3002\u3061\u3087\u3046\u3069\u3044\u3044\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u3059\u3002<\/p>\n\n\n\n<p>observer.unobserve(trigger)\u3067\u3001\u4e00\u5ea6CTA\u30dc\u30c3\u30af\u30b9\u304c\u51fa\u305f\u3089\u76e3\u8996\u3092\u6b62\u3081\u307e\u3059\u3002\u4f55\u5ea6\u3082\u52d5\u304b\u306a\u3044\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u3067\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u5b9f\u969b\u306e\u52d5\u4f5c\u30a4\u30e1\u30fc\u30b8<\/h2>\n\n\n\n<p>\u30e6\u30fc\u30b6\u30fc\u304c\u30da\u30fc\u30b8\u3092\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u3066\u3001\u8aac\u660e\u6587\u3092\u8aad\u3093\u3067\u3044\u304d\u307e\u3059:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u300c\u5f53\u793e\u3067\u306f\u3001Web\u5236\u4f5c\u304b\u3089\u2026\u300d\u3092\u8aad\u3080 \u2192 CTA\u30dc\u30c3\u30af\u30b9\u306f\u307e\u3060\u898b\u3048\u306a\u3044<\/li>\n\n\n\n<li>\u300c\u304a\u5ba2\u69d8\u306e\u30d3\u30b8\u30cd\u30b9\u306b\u5408\u308f\u305b\u305f\u2026\u300d\u3092\u8aad\u3080 \u2192 CTA\u30dc\u30c3\u30af\u30b9\u306f\u307e\u3060\u898b\u3048\u306a\u3044<\/li>\n\n\n\n<li>\u300c\u307e\u305a\u306f\u7121\u6599\u76f8\u8ac7\u3067\u2026\u300d\u306e\u6bb5\u843d\u304c\u753b\u9762\u306b\u5165\u308b \u2192 <strong>\u3053\u306e\u77ac\u9593\u306bCTA\u30dc\u30c3\u30af\u30b9\u304c\u4e0b\u304b\u3089\u30b9\u30e9\u30a4\u30c9\u30a4\u30f3\uff01<\/strong><\/li>\n\n\n\n<li>\u300c\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u300d\u300c\u4eca\u3059\u3050\u7121\u6599\u76f8\u8ac7\u3092\u4e88\u7d04\u3057\u307e\u305b\u3093\u304b?\u300d\u304c\u81ea\u7136\u306b\u73fe\u308c\u308b<\/li>\n<\/ol>\n\n\n\n<p>\u8aac\u660e\u3092\u8aad\u307f\u7d42\u308f\u3063\u305f\u3061\u3087\u3046\u3069\u305d\u306e\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u3001\u6b21\u306b\u3059\u3079\u304d\u3053\u3068\u304c\u76ee\u306e\u524d\u306b\u73fe\u308c\u307e\u3059\u3002\u30e6\u30fc\u30b6\u30fc\u306f\u300c\u3042\u3001\u6b21\u306f\u3053\u308c\u304b\u300d\u3068\u81ea\u7136\u306b\u7406\u89e3\u3057\u3066\u3001\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_raeYQmy\" src=\"\/\/codepen.io\/anon\/embed\/raeYQmy?height=450&amp;theme-id=1&amp;slug-hash=raeYQmy&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed raeYQmy\" title=\"CodePen Embed raeYQmy\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u307e\u3068\u3081<\/h2>\n\n\n\n<p>\u4eca\u56de\u306e\u30dd\u30a4\u30f3\u30c8\u306f\u4ee5\u4e0b\u306e3\u3064\u3067\u3059:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>IntersectionObserver\u3067\u8aad\u4e86\u691c\u77e5<\/strong>: \u6700\u5f8c\u306e\u6bb5\u843d\u304c\u753b\u9762\u306b\u5165\u3063\u305f\u6642\u306bCTA\u3092\u51fa\u3059<\/li>\n\n\n\n<li><strong>\u63a7\u3048\u3081\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/strong>: 8px\/180ms\u3050\u3089\u3044\u306e\u30b9\u30e9\u30a4\u30c9\u30a4\u30f3\u3067\u3001\u90aa\u9b54\u306b\u306a\u3089\u306a\u3044<\/li>\n\n\n\n<li><strong>prefers-reduced-motion\u5bfe\u5fdc<\/strong>: \u52d5\u304d\u304c\u82e6\u624b\u306a\u4eba\u306e\u305f\u3081\u306b\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u30aa\u30d5\u306b\u3067\u304d\u308b<\/li>\n<\/ul>\n\n\n\n<p>\u5e38\u6642\u8868\u793a\u3057\u306a\u3044\u3053\u3068\u3067\u3001\u8aad\u3093\u3067\u3044\u308b\u6642\u306f\u90aa\u9b54\u306b\u306a\u308a\u307e\u305b\u3093\u3002\u8aad\u307f\u7d42\u308f\u3063\u305f\u6642\u3060\u3051CTA\u30dc\u30c3\u30af\u30b9\u304c\u4e0b\u304b\u3089\u30b9\u30e9\u30a4\u30c9\u30a4\u30f3\u3059\u308b\u306e\u3067\u3001\u30e6\u30fc\u30b6\u30fc\u3082\u81ea\u7136\u306b\u62bc\u3057\u3066\u304f\u308c\u307e\u3059\u3002CVR\u6539\u5584\u306b\u3082\u52b9\u679c\u304c\u3042\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u682a\u5f0f\u4f1a\u793e\u30d5\u30a1\u30b9\u30c8\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3067\u306f\u3001\u3053\u3046\u3057\u305f\u5b9f\u88c5\u306e\u30b5\u30dd\u30fc\u30c8\u3082\u884c\u3063\u3066\u3044\u307e\u3059\u3002\u3054\u8208\u5473\u304c\u3042\u308b\u65b9\u306f<a href=\"https:\/\/fastcoding.jp\/contact\/\">\u304a\u554f\u3044\u5408\u308f\u305b\u30d5\u30a9\u30fc\u30e0<\/a>\u304b\u3089\u3054\u9023\u7d61\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"has-small-font-size\">\u203b\u672c\u8a18\u4e8b\u306f\u5f0a\u793e\u5916\u56fd\u4eba\u30b9\u30bf\u30c3\u30d5\u306b\u3088\u308b\u6295\u7a3f\u3067\u3059\u3002\u8a00\u3044\u56de\u3057\u3084\u8868\u73fe\u304c\u4e0d\u5341\u5206\u306a\u500b\u6240\u304c\u3042\u308a\u307e\u3059\u3053\u3068\u3054\u5bb9\u8d66\u3044\u305f\u3060\u304d\u307e\u3059\u3088\u3046\u304a\u9858\u3044\u3044\u305f\u3057\u307e\u3059\u3002<br>\u682a\u5f0f\u4f1a\u793e\u30d5\u30a1\u30b9\u30c8\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>IntersectionObserver\u3067\u8aad\u4e86\u3092\u691c\u77e5\u3057\u3001\u9069\u5207\u306a\u30bf\u30a4\u30df\u30f3\u30b0\u3067CTA\u30dc\u30bf\u30f3\u3092\u30b9\u30e9\u30a4\u30c9\u30a4\u30f3\u8868\u793a\u3055\u305b\u308bUX\u6539\u5584\u30c6\u30af\u30cb\u30c3\u30af\u3002JavaScript\u3068CSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f7f\u3063\u305f\u5b9f\u88c5\u65b9\u6cd5\u3068CVR\u5411\u4e0a\u306e\u52b9\u679c\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n","protected":false},"author":21,"featured_media":9439,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[316],"tags":[293,423,330,22],"class_list":["post-9432","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-ux","tag-css","tag-cta","tag-cvr","tag-javascript"],"acf":[],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/fastcoding.jp\/blog\/wp-content\/uploads\/2025\/11\/93780262886c53f51ad08bfe8a8527af.png","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/posts\/9432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/comments?post=9432"}],"version-history":[{"count":3,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/posts\/9432\/revisions"}],"predecessor-version":[{"id":9441,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/posts\/9432\/revisions\/9441"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/media\/9439"}],"wp:attachment":[{"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/media?parent=9432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/categories?post=9432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/tags?post=9432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}