STUDIOでサイトを作っていると、外部ツールのタグを入れたい、ページ内に独自の動きを付けたい、既存のHTMLをそのまま使いたいといった場面が出てきます。ただし、STUDIOはノーコードで自由にHTMLを直接編集するサービスではないため、どこまでできるのかを勘違いすると、実装途中でつまずきやすくなります。
studio カスタムコードで大切なのは、サイト全体に入れるコードなのか、特定ページだけに入れるコードなのか、ページ内に表示する埋め込みなのかを分けて考えることです。この記事では、使える機能の違い、入れる場所の判断、よくある失敗、実装前に確認したいポイントを整理します。
studio カスタムコードは用途で分ける
studio カスタムコードは、何でも自由にサイト全体を書き換える機能ではなく、STUDIOで作ったサイトに外部コードを追加するための機能です。主に使う場面は、アクセス解析タグ、広告タグ、チャットツール、予約フォーム、外部サービスの埋め込み、CSSやJavaScriptによる細かな調整などです。まず押さえたいのは、コードを入れる場所によって向いている用途が変わるという点です。
STUDIOでは、大きく分けて「サイト全体やページ単位のhead・bodyに入れるカスタムコード」と、「ページ上の任意の場所に置くEmbedボックス」を使い分けます。たとえばGoogleタグマネージャーや計測タグのようにページ全体で動いてほしいものは、headやbodyへの追加が候補になります。一方で、Googleマップ、外部予約フォーム、SNS投稿、動画プレイヤーのようにページ内の一部として見せたいものは、Embedボックスのほうが扱いやすいです。
| やりたいこと | 向いている方法 | 確認したい点 |
|---|---|---|
| 全ページに解析タグを入れたい | サイト全体のカスタムコード | 有料プランか、headとbodyの指定が合っているか |
| 特定ページだけに広告タグを入れたい | ページ単位のカスタムコード | 他ページに不要なタグが出ないか |
| ページ内に地図や予約フォームを表示したい | Embedボックス | 表示サイズ、スマホ表示、外部サービス側の仕様 |
| サイトのHTML構造を直接編集したい | 基本的には不可 | STUDIO上の編集機能で代替できるか |
迷ったときは、コードの目的を「見せるためのコード」か「裏側で動かすコード」かに分けると判断しやすくなります。画面上に何かを表示するならEmbedボックス、タグやスクリプトを読み込ませるならカスタムコード、という考え方です。ただし、JavaScriptでページ内の要素を操作する場合は、STUDIO側の構造や読み込みタイミングに影響されるため、一般的な静的HTMLサイトと同じ感覚で考えないほうが安全です。
できることとできないこと
STUDIOのカスタムコードを使う前に、まず「STUDIOでできる追加」と「直接はできない編集」を分けておく必要があります。STUDIOでは、HTML・CSS・JavaScriptを追加する手段はありますが、出力されるHTMLそのものを手作業で全面的に書き換える仕組みではありません。ここを混同すると、WordPressのテーマ編集や静的HTMLコーディングのような作業を想定してしまい、思ったように進まなくなります。
カスタムコードでできること
カスタムコードでできる代表的なことは、外部サービスとの連携です。たとえばアクセス解析、広告計測、ヒートマップ、チャットボット、フォーム計測、マーケティングオートメーションのタグなどは、指定されたコードをheadやbodyに追加して使うケースがあります。サービスによって「head内に貼る」「body開始直後に貼る」「body末尾に貼る」など指定が違うため、STUDIO側で入れられる場所と照らし合わせて判断します。
デザイン面では、CSSを追加して細かな見た目を調整したり、JavaScriptで簡単な動きを足したりすることもあります。たとえばスクロール時の表示切り替え、外部ライブラリの読み込み、特定ボタンのクリック計測などです。ただし、STUDIOのエディタで管理される要素は、あとからクラス名や構造が変わる可能性もあるため、細かすぎるDOM操作に依存するとメンテナンスしにくくなります。
Embedボックスを使えば、ページ内の任意の場所に外部コンテンツを埋め込めます。Googleマップ、YouTube、予約カレンダー、外部フォーム、SNS投稿、簡単なHTMLパーツなどはこの方法が向いています。ページ上に見えるコンテンツとして配置できるため、デザインエディタ上でサイズや位置を調整しながら扱いやすいのが利点です。
直接できないこと
一方で、STUDIOではサイト全体のHTMLファイルを開いて、自由にタグ構造を編集することはできません。たとえばbody内の既存要素の並びをコードで直接書き換えたり、STUDIOが生成したHTMLをエクスポートして別環境で編集したりする前提の作業には向きません。ノーコードツールとして管理されるため、基本のレイアウトやページ構成はSTUDIOのエディタ上で作る必要があります。
また、PHPやサーバーサイドの処理を直接書いて動かすことも、通常のカスタムコードの範囲ではできません。問い合わせフォームの裏側で独自処理を行う、会員ログインを自前で構築する、データベースと連携して複雑なアプリを作るといった用途は、外部サービスや別システムとの連携を検討する領域になります。STUDIOだけで完結させるより、フォームサービス、予約システム、決済サービスなどを埋め込むほうが現実的です。
さらに、追加した独自コードや外部サービス側のコードについては、STUDIOの通常サポート対象外になる可能性があります。コードの文法ミス、外部ツールの仕様変更、JavaScriptの競合、ブラウザごとの差などは、自分で切り分ける必要があります。業務用サイトで使う場合は、公開前にテストページで確認し、問題があればすぐ外せる状態にしておくことが大切です。
入れる場所の選び方
カスタムコードで失敗しやすいのは、コード自体よりも「どこに入れるか」の判断です。同じJavaScriptでも、headに入れるべきもの、body末尾に入れるべきもの、Embedボックスに入れたほうがよいものがあります。外部サービスから発行されたコードには貼り付け位置の指定があることが多いため、まずその説明を確認し、STUDIO側の入力欄と対応させて考えると失敗が減ります。
headに向くコード
headに向いているのは、ページが表示される前に読み込ませたいコードです。代表例は、アクセス解析の基本タグ、広告媒体の計測タグ、外部フォントやCSS、検索エンジン向けの一部タグ、外部ライブラリの読み込みなどです。ページ全体の土台として先に準備しておきたいものは、head内に入れる候補になります。
ただし、何でもheadに入れればよいわけではありません。重いJavaScriptをheadに入れると、ページの読み込みに影響することがあります。特に複数の広告タグ、ヒートマップ、チャットツール、外部ライブラリをまとめて入れると、表示速度やユーザー体験が悪くなることがあります。必要なタグだけを入れ、使っていないサービスのコードは残さないようにしましょう。
また、head内のコードは画面に直接表示するための場所ではありません。HTMLパーツやiframeをそのまま入れても、意図した場所に表示されない場合があります。ページ内に見える地図やフォームを置きたいなら、headではなくEmbedボックスを使うほうが自然です。headは、見えない裏側の設定を置く場所と考えると分かりやすいです。
body末尾に向くコード
body末尾に向いているのは、ページの内容が読み込まれたあとに動かしたいコードです。たとえばボタンのクリックイベント、スクロールアニメーション、特定要素への処理、チャットウィジェット、フォーム送信後の計測などが候補になります。HTMLの読み込み後に実行されるため、ページ内の要素を対象にしたJavaScriptはbody末尾のほうが安定しやすい場合があります。
ただし、STUDIO上の要素をJavaScriptで細かく操作する場合は注意が必要です。エディタで要素名や構成を変更したり、CMSの出力が変わったりすると、以前は動いていたコードが動かなくなることがあります。たとえば特定のクラス名に依存して表示切り替えをしている場合、デザイン修正の影響で対象が変わることがあります。
業務で使うなら、body末尾に入れるコードはできるだけ役割を限定するのがおすすめです。クリック計測、外部ツールの起動、簡単な表示制御などにとどめ、サイト全体の重要な導線を独自JavaScriptだけに依存させないほうが安全です。予約ボタンや問い合わせボタンなど、売上や問い合わせに関わる部分は、コードを外しても最低限の導線が残る設計にしておくと安心です。
Embedボックスに向くコード
Embedボックスは、ページ内に表示したいものを置くときに向いています。外部予約フォーム、Googleマップ、YouTube動画、Instagram投稿、カレンダー、診断ツール、簡単なHTMLパーツなど、ユーザーに見せる部品として配置したいものはEmbedボックスを検討します。デザインエディタ上で配置できるため、見た目の調整もしやすいです。
一方で、Embedボックスはページ全体を制御するための場所としては向かないことがあります。ボックス内のコードが独立した領域として扱われる場合、外側のSTUDIO要素に直接影響を与えにくいことがあります。逆に、ボックス内で完結するフォームや地図なら扱いやすく、他の要素に干渉しにくいというメリットにもなります。
スマホ表示の確認も重要です。外部サービスの埋め込みコードは、PCではきれいに表示されても、スマホでは横幅がはみ出したり、高さが足りずスクロールしにくくなったりすることがあります。Embedボックスを使う場合は、PC、タブレット、スマホで表示サイズを確認し、外部サービス側のレスポンシブ対応も見ておきましょう。
| コードの場所 | 主な用途 | 避けたい使い方 |
|---|---|---|
| head | 解析タグ、広告タグ、CSS、外部ライブラリ | 画面に表示するHTMLパーツを直接置く |
| body末尾 | クリック計測、表示後に動くJavaScript、ウィジェット | 重要導線を複雑なDOM操作だけで作る |
| Embedボックス | 地図、動画、予約フォーム、SNS投稿、外部パーツ | サイト全体の設定タグを入れる |
| STUDIOエディタ | 通常のレイアウト、テキスト、画像、ボタン | コードで無理に基本構造を作り直す |
実装前に確認すること
STUDIOのカスタムコードは便利ですが、貼り付ければ必ず思い通りに動くわけではありません。特に、外部サービスのタグを複数入れる場合や、既存サイトから移行する場合は、実装前の確認が大切です。先に確認するべきことを整理しておけば、表示崩れや計測漏れ、公開後のトラブルを減らせます。
プランと公開環境を確認する
まず確認したいのは、利用中のプランで目的のカスタムコードが使えるかどうかです。サイト全体やページ単位でhead・bodyにコードを追加する機能は、有料プランが前提になる場合があります。無料プランで試している段階では、Embedボックスは使えても、公開サイトに入れたいタグの設置方法が限られることがあるため、制作前にプラン条件を確認しておくと安心です。
また、コードの動作確認はエディタ上だけで判断しないほうがよいです。外部サービスのタグやJavaScriptは、プレビューや公開環境で動き方が変わることがあります。特に広告タグ、アクセス解析、ヒートマップ、チャットツールは、実際の公開URLでないと認識されない場合があります。公開前にテストページや非公開に近い確認用ページを作り、想定通りに読み込まれるかを見るのがおすすめです。
独自ドメインを使う場合も注意が必要です。外部サービス側でドメイン認証が必要なツールでは、STUDIO側にコードを入れるだけでなく、外部サービス側の設定も完了している必要があります。たとえば広告媒体のタグ、チャットツール、予約システム、フォーム連携などは、対象ドメイン、許可URL、発火条件まで確認しておきましょう。
コードの目的を分けて管理する
複数のコードを入れるときは、目的ごとに分けて管理することが大切です。アクセス解析、広告計測、ヒートマップ、チャット、デザイン調整、外部フォームなどが混ざると、あとからどのコードが何のために入っているのか分からなくなります。担当者が変わったときや外部ツールを解約したときに、不要なコードが残り続ける原因にもなります。
おすすめは、コードを貼る前にメモを作ることです。どのページに、何のサービスの、どの目的のコードを、いつ入れたのかを残しておくと、トラブル時に切り分けやすくなります。STUDIO内の設定だけでなく、Googleタグマネージャーや広告管理画面など外部側の設定も一緒に管理しておくと、計測漏れの確認が楽になります。
コードを増やしすぎないことも重要です。同じ役割のタグを二重に入れると、アクセス数やコンバージョンが重複して計測されることがあります。たとえばSTUDIO側に直接Google広告タグを入れ、さらにGoogleタグマネージャー経由でも同じタグを配信していると、数値がずれる可能性があります。直接設置するのか、タグマネージャーで管理するのかを先に決めておきましょう。
スマホと表示速度を見る
カスタムコードの動作確認では、PCだけでなくスマホ表示を必ず確認します。STUDIOで作るサイトはスマホ閲覧が多くなることも多いため、外部フォームや予約カレンダーがスマホで見づらいと、問い合わせや予約の機会を逃してしまいます。特にiframeで埋め込むタイプは、高さが足りない、横スクロールが出る、ボタンが押しづらいといった問題が起きやすいです。
表示速度も見ておきたいポイントです。チャットツール、ヒートマップ、広告タグ、外部フォント、アニメーション用ライブラリを同時に入れると、ページの読み込みが重くなることがあります。見た目の演出を増やした結果、ファーストビューの表示が遅くなったり、ボタンが押せるまで時間がかかったりすると、ユーザーにとっては使いにくいサイトになります。
確認するときは、トップページだけでなく、問い合わせページ、LP、CMS記事、サービス詳細ページなど、重要な導線を中心に見ます。解析タグは全ページで動いているか、広告タグは必要なページだけで発火しているか、外部フォームは送信できるか、スマホでボタンが隠れていないかを確認しましょう。公開後に気づくより、公開前に小さな不具合を拾うほうが修正コストは低くなります。
よくある失敗と対処法
studio カスタムコードで多い失敗は、コードそのものが難しいというより、STUDIOの仕組みと外部サービスの前提がずれていることです。一般的なHTMLサイトで使えたコードが、そのままSTUDIOでも同じように動くとは限りません。原因を切り分けるときは、貼る場所、公開環境、外部サービス側の設定、スマホ表示、コードの競合を順番に見ていくと整理しやすくなります。
表示されない場合
Embedボックスに入れた地図やフォームが表示されない場合、まず確認したいのはコードの種類です。外部サービスから発行されたコードがiframeなのか、scriptを含む埋め込みなのか、特定ドメインだけで表示できる設定になっていないかを見ます。サービスによっては、セキュリティ上の理由で埋め込み先ドメインを制限していることがあります。
次に、貼り付け場所が合っているか確認します。画面に表示したいコードをheadに入れても、ページ上の狙った位置には表示されません。逆に、サイト全体で動かしたい解析タグをEmbedボックス内だけに入れると、そのボックスがあるページや領域でしか期待通りに動かないことがあります。表示するコードはEmbed、裏側で動くコードはheadやbodyという基準に戻ると判断しやすいです。
それでも表示されない場合は、コードを一度最小構成にして試します。余計なCSSやJavaScriptを外し、外部サービスが提供する標準の埋め込みコードだけで表示されるか確認します。標準コードで表示されるなら、自分で追加した調整が原因の可能性があります。標準コードでも表示されないなら、外部サービス側の許可設定や埋め込み対応を確認する必要があります。
動きが不安定な場合
JavaScriptの動きが不安定な場合は、読み込みタイミングが合っていない可能性があります。ページ内の要素がまだ生成されていない段階でスクリプトが実行されると、対象要素が見つからず動かないことがあります。この場合、body末尾に置く、読み込み後に実行する処理にする、対象要素が存在するか確認してから実行するなどの調整が必要です。
また、STUDIOのエディタで要素を変更したことが原因になるケースもあります。たとえばボタンのクラス名や階層に依存したコードを書いていると、デザイン修正やCMSテンプレート変更で対象が変わります。見た目は同じでも内部構造が変わることがあるため、コード側ではできるだけ壊れにくい指定にすることが大切です。
外部ライブラリの競合にも注意します。複数のスクリプトが同じ機能を読み込んでいたり、古いライブラリと新しいライブラリが混在していたりすると、エラーが出ることがあります。ブラウザの開発者ツールでエラーを確認し、どのコードを入れた後に不具合が出たのかを切り分けましょう。一度に複数のコードを入れるのではなく、1つずつ追加して確認すると原因を見つけやすいです。
計測が合わない場合
アクセス解析や広告計測で数値が合わない場合は、タグの二重設置を疑います。STUDIOに直接タグを入れ、さらにGoogleタグマネージャー経由でも同じタグを配信していると、ページビューやコンバージョンが重複することがあります。特に広告運用中のLPでは、数値のズレが改善判断に直結するため、タグの管理方法を統一しておくことが大切です。
発火条件の違いも確認しましょう。全ページで発火させたいタグなのか、問い合わせ完了ページだけで発火させたいタグなのかによって、設置場所は変わります。ページ単位で入れるべきタグをサイト全体に入れてしまうと、不要なページでも計測される可能性があります。逆に、全ページで必要な基本タグを特定ページだけに入れると、ユーザー行動の流れが追いにくくなります。
フォームや外部予約システムを使っている場合は、完了画面がSTUDIO内にあるのか、外部ドメインに移動するのかも重要です。外部ドメインで完了する場合、STUDIO側にタグを入れただけでは最後の成果が取れないことがあります。その場合は、外部サービス側でタグ設置ができるか、リダイレクト先を用意できるか、クリック計測で代替するかを検討します。
目的別の使い分け
STUDIOでカスタムコードを使うべきか迷ったら、目的から逆算すると判断しやすくなります。コードを使うこと自体が目的ではなく、計測したい、表示したい、動きを足したい、外部サービスとつなげたいという目的が先にあります。目的に対して、STUDIOの標準機能で足りるのか、Embedで足りるのか、headやbodyのカスタムコードが必要なのかを選びましょう。
解析や広告タグを入れる場合
解析や広告タグは、まず管理方法を決めることが重要です。小規模なサイトでタグが少ないなら、STUDIOのカスタムコードに直接入れる方法でも管理できます。一方で、広告媒体が複数ある、コンバージョン地点が複数ある、将来的にタグの追加や変更が多くなりそうな場合は、Googleタグマネージャーのような管理ツールを使ったほうが整理しやすいです。
たとえば、企業サイトでGA4だけを入れたい場合は、サイト全体のheadに基本タグを入れる形が分かりやすいです。広告用LPで、Google広告、Meta広告、ヒートマップ、電話タップ、フォーム送信などを計測する場合は、タグマネージャーで発火条件を整理したほうが、あとから修正しやすくなります。STUDIO側にはタグマネージャーの基本コードを入れ、細かなタグは外部管理に寄せる考え方です。
ただし、タグマネージャーを使う場合でも、設置場所の指定は確認が必要です。headに入れる部分とbodyに入れる部分が分かれているコードもあります。片方だけ入れてしまうと正しく動かない可能性があるため、外部ツールの案内に合わせて設定します。公開後は、リアルタイムレポートやプレビュー機能で発火確認を行いましょう。
外部フォームを埋め込む場合
外部フォームをSTUDIOに埋め込む場合は、Embedボックスが候補になります。予約フォーム、問い合わせフォーム、資料請求フォーム、診断フォームなど、外部サービスが発行する埋め込みコードをページ内に表示する形です。STUDIO標準のフォームで足りる場合は標準機能を使い、条件分岐や予約枠、決済、顧客管理などが必要なら外部フォームを使うと判断しやすいです。
外部フォームで注意したいのは、送信完了後の動きです。フォーム内で完了メッセージが出るだけなのか、別URLのサンクスページに移動するのかによって、計測方法が変わります。広告運用をしているLPでは、送信完了をコンバージョンとして正しく取りたい場合が多いため、フォームサービス側で完了ページURLを指定できるか、タグを入れられるかを先に確認しましょう。
また、フォームの高さや入力しやすさも重要です。iframeで埋め込んだフォームは、スマホでスクロールが二重になったり、送信ボタンが見えにくくなったりすることがあります。ユーザーが名前、メールアドレス、電話番号、希望日時などを入力する導線では、見た目よりも入力完了までの分かりやすさを優先しましょう。
デザイン表現を足す場合
STUDIOの標準機能でできない細かな表現を足したい場合、CSSやJavaScriptを使うことがあります。たとえば特定セクションの装飾、マウスホバー時の変化、スクロールに合わせた表示、簡単なアニメーションなどです。ただし、デザイン表現のためにコードを増やしすぎると、あとから更新しにくいサイトになります。
まずはSTUDIOのエディタ機能で実現できないかを確認しましょう。余白、背景、固定表示、レスポンシブ調整、アニメーションなどは、標準機能で対応できる場合があります。標準機能で対応できるものをコードで無理に作ると、編集担当者が後から触れなくなり、更新のたびに開発者へ依頼する状態になりやすいです。
コードで表現を足す場合は、影響範囲を小さくするのが安全です。サイト全体に効くCSSではなく、特定ページや特定セクションだけに効かせる、重要なボタンやフォームの操作性を邪魔しない、スマホで重くならないようにするなどの配慮が必要です。見た目の面白さより、問い合わせや予約につながる導線を壊さないことを優先しましょう。
次にやるべき確認
studio カスタムコードを使うなら、最初に「何を実現したいのか」を1つに絞ってから進めるのがおすすめです。解析タグを入れたいのか、外部フォームを表示したいのか、デザインの動きを足したいのかで、使う場所も確認方法も変わります。目的があいまいなままコードを貼ると、表示されない、計測できない、スマホで崩れるといった問題が起きやすくなります。
実装前には、次の順番で確認すると整理しやすいです。
- その機能はSTUDIOの標準機能で実現できないか
- ページ内に表示するものか、裏側で動かすものか
- サイト全体に必要か、特定ページだけでよいか
- 有料プランや公開環境で使える機能か
- 外部サービス側でドメイン許可やタグ設置が必要か
- PCとスマホの両方で表示や送信を確認したか
- タグが二重に入っていないか
特に業務用サイトや広告用LPでは、カスタムコードを入れた後の確認が重要です。見た目だけでなく、アクセス解析、広告コンバージョン、フォーム送信、電話タップ、外部予約完了など、成果につながる部分まで確認しましょう。コードを入れた直後は動いていても、外部サービスの仕様変更やSTUDIO側の編集によって動きが変わることもあるため、定期的な見直しも必要です。
最終的には、STUDIOで完結させる部分と、外部サービスに任せる部分を分けることが失敗しにくい考え方です。通常のページ構成やデザインはSTUDIOで作り、地図や予約フォームはEmbedで表示し、計測タグはカスタムコードやタグマネージャーで管理する。このように役割を分ければ、ノーコードの扱いやすさを保ちながら、必要な機能だけを追加しやすくなります。
