【Studio初心者ガイド】利用できるAppsについて・外部サービス設定方法

Studioは、外部アプリとの連携を活用すれば、アクセス解析やSEO対策、カスタマーサポートの強化など、さまざまな機能を簡単に追加できます。

本記事では、Studioで利用できるAppsの種類や設定方法を詳しく解説。初心者の方でもすぐに使いこなせるよう、わかりやすくご紹介します。

サイト運営をレベルアップしたい方は、ぜひ最後までチェックしてください。

外部アプリとの連携機能について

Studioの有料プランでは、外部アプリと連携することでより効果的なマーケティングや運用が可能になります。

【注意】外部アプリの設定は、「Apps」メニューから簡単に行えますが、動作など、チャット窓口でのサポート対象外となる場合があります。疑問がある際は、Studioコミュニティで過去の投稿を参考にしたり、質問を投稿することをご検討ください。

Studioで連携できるApps一覧

※ Airtableも連携は可能ですが、Airtableの仕様変更に伴い、2023年8月以降新規作成はできません。

各Appsの概要

各Appsの概要は以下になります。

マーケティングツール

サイトのアクセス解析や広告管理をスムーズに行うためのツールです。

• Google タグマネージャー
  各種マーケティングタグを一元管理し、手軽に追加・更新ができます。

• Googleアナリティクス
  アクセス解析に必須のツール。サイト訪問者の動向を把握できます。

• Google サーチコンソール
  SEO対策に重要なツールで、サイトの検索パフォーマンスを確認できます。

• Metaピクセル
  Facebook広告の効果測定に使用するコンバージョン追跡ツールです。

• Google reCAPTCHA v3
  スパムやボット対策のためのセキュリティ機能を追加できます。

• HubSpot Tracking (Beta)
  HubSpotの分析ツールと連携し、顧客データの管理が可能になります。

カスタマーサクセス

サイト訪問者とのコミュニケーションを円滑にするためのツールです。

• チャネルトーク
  シンプルなチャット機能で訪問者とリアルタイムにやり取りできます。

• Intercom
  高度なカスタマーサポートが可能なツールで、チャットボットの導入もできます。

API連携 (Beta)

データ管理やコンテンツ管理をスムーズにするツールです。

• Notion
  ドキュメントやタスク管理をクラウドで一元化します。

• MicroCMS
  ヘッドレスCMSとしてコンテンツを管理しやすくなります。

Beta版API機能について

現在ベータ版のAPI機能を全プランで利用可能ですが、今後は正式版APIのリリースに伴い提供が停止になる可能性があります。

各Appsの設定方法

各Appsの設定方法についてご説明していきます。

【注意】外部サービスの画面や仕様は2025年1月時点の情報です。最新の情報と異なる場合があるため、必要に応じて外部サービスの公式サイトで最新情報をご確認ください。

Google タグマネージャー

対象プラン：Miniプラン以上（旧プラン：Starterプラン以上）

StudioにGoogleタグマネージャーを連携すると、さまざまなコードの埋め込みが可能になります。これにより、Studioで直接サポートしていないツールの導入や、JavaScriptの追加がスムーズに行えます。

タグマネージャーの使用方法については、タグマネージャーヘルプをご参照ください。

1. GoogleタグマネージャーのIDを取得

まず、Googleタグマネージャーのアカウントを作成し、新しいコンテナを作成します。この際、連携したいサイトのドメインを指定し、「ウェブ」（ピンク四角）をタイプとして選択してください。

コンテナを作成すると、「GTM-XXXX」という形式のコンテナID（ピンク四角）が表示されます。このIDをコピーしておきます。

既にコンテナを作成済みの場合は、[ワークスペース] を開き、ウィンドウ上部に表示されている「GTM-XXXXXX」の形式のID（ピンク四角）をコピーしてください。

2. Studioのプロジェクトと連携

連携したいStudioのプロジェクトを開いて、ダッシュボードの[Apps]（ピンク四角）を開きます。

[Google Tag Manager] をクリックし、コピーした GTM IDを入力欄に貼り付けて、保存をクリックます。

【注意】IDの入力時に余分なスペースが入ると、正しく連携できない可能性があるため、正確に入力してください。

設定が完了したら、公開パネルから「更新」を忘れずに行いましょう。

正しく連携できているか確認するには、Googleタグマネージャーのワークスペースで「プレビュー」ボタンをクリックします。

その後、連携したサイトを開き、ページを再読み込みしてください。検証パネルが表示されれば、Googleタグマネージャーとの連携は成功しています。※ライブプレビューURLにアクセスしても、Googleタグマネージャーは動作しません。

検証パネルが表示されない場合、IDの入力ミスや、Adblockなどの拡張機能の影響で連携が正常に機能していない可能性がありますので、設定を再確認してください。

Googleアナリティクス

対象プラン：Miniプラン以上（旧Starterプランを含む）

Studioでは、サイトごとにGoogleアナリティクス4を連携し、アクセス解析を行うことができます。

1. Googleアナリティクスにログイン

まず、Googleアナリティクスのアカウントにログインし、連携したいプロパティを開きます。画面左下の歯車アイコン（ピンク四角）をクリックし、「管理」メニューへ進みます。

2. データストリームを開く

「データストリーム」（ピンク四角）を選択します。

[ウェブ] （ピンク四角）をクリックして、対象のデータストリーム（黄色四角）をクリックます。

3. 拡張計測機能を設定

ウェブストリームの詳細画面で歯車アイコン（ピンク四角）をクリックし、「拡張計測機能」を開きます。

「ブラウザの履歴イベントに基づくページの変更」 のチェックを外し、[保存] をクリックします。※この設定を行わないと、Studioの仕様上、アクセスデータが重複計測されます。

4. 測定IDの取得

ウェブストリームの詳細画面に戻り、「測定ID（G-XXXXXXX）」（ピンク四角）をコピーします。

5. StudioでGoogleアナリティクスを連携

連携を設定するStudioのプロジェクトを開き、ダッシュボードの[ホーム]にアクセスした後、左側のメニューから[Apps]（ピンク四角）を選択します。

「Google Analytics」をクリックし、表示される入力欄に、先ほどコピーした 測定ID（G-XXXXXXX） を貼り付けて保存します。

6. サイトを更新して設定完了

最後に、サイトの 公開設定 から「更新」を実行すれば、Googleアナリティクスとの連携が完了です。

設定が正しく適用されているかどうかは、公開サイトにアクセスした後、Googleアナリティクスのリアルタイムレポートで確認できます。※ライブプレビューURLにアクセスしてもGoogle Analyticは動作しません。

Google サーチコンソール

対象プラン： Miniプラン以上（旧プラン：Starterプラン以上）

Googleサーチコンソールは、サイトの検索パフォーマンスを監視・管理できる便利なツールです。Studioサイトと連携することで、クリック数や検索順位の分析が可能になり、SEO対策の強化にもつながります。

【注意】所有権の確認は URLプレフィックスを使用して行います。Studioでは「ドメイン」での確認には対応していません。ドメインを利用する場合は 「DNSの確認」を選択し、認証を行ってください。なお、DNS認証が成功した場合、Studioの外部Appsへの登録は不要です。

1. Googleアカウントにログイン

Googleサーチコンソールを利用するには、Googleアカウントが必要です。すでにGoogleアナリティクスやGoogle広告（AdWords）を使用している場合は、同じアカウントでログインしましょう。

2. Studioサイトのドメインをコピー

Studioで作成したWebサイトのドメインをコピーします。

3. サーチコンソールにアクセスし登録を開始

Googleサーチコンソールのページにアクセスし、「今すぐ開始」 をクリックしてログインします。

プロパティタイプの選択画面で 「URLプレフィックス」（ピンク四角） を選び、コピーしたStudioのWebサイトURLを入力してください。

すでにプロパティを登録済みの場合 は、[プロパティを追加] から進んでいきます。

4. 所有権の確認

所有権の確認方法で 「HTMLタグ」 （ピンク四角）を選択します。
表示されたコード（）のxxxの部分（黄色四角）をコピーします。

5. StudioでのApps連携

Studioのダッシュボードに戻り、左側メニューの [Apps] （ピンク四角）を開きます。
「Google Search Console」 を選択し、コピーした確認用コードを貼り付けて保存してください。

6. サーチコンソールでの確認

再びサーチコンソールに戻り、「確認」（ピンク四角） をクリックすると、StudioのWebサイトの所有権が認証されます。これで連携は完了です。

7. データの蓄積と確認

設定後、データが蓄積されると、GoogleサーチコンソールでStudioサイトの検索パフォーマンスを確認できます。クリック数や検索順位を分析し、SEO施策に活かしていきましょう。

Metaピクセル

対象プラン： Miniプラン以上（旧プラン：Starterプラン以上）

ウェブイベントのトラッキングを行うために、Metaビジネス設定でドメインの認証を行います。Metaピクセルの詳細については、Metaヘルプセンターをご参照ください。

【注意】独自ドメインの使用が必須です。Studioのサブドメイン（studio.site）では利用できません。

2025年1月時点で、認証方法は以下の3種類があります。

• ドメインレジストラーでDNS TXTレコードを更新する

• HTMLソースコードにメタタグを追加する

• ルートディレクトリにHTMLファイルをアップロードする

Studioでは 「ルートディレクトリにHTMLファイルをアップロードする」方法には対応していません。他の2種類のいずれかでドメインの認証を行ってください。

【注意】ドメイン認証なしでも利用可能ですが、iOS 14以降の端末ではコンバージョンイベントが正常に計測されない場合があります。
参考： Metaの合算イベント測定について | Meta ビジネスヘルプセンター

ドメインレジストラーでDNS TXTレコードを更新する方法

DNSの設定はStudio上では行えません。ドメインをご契約されているレジストラ（ドメイン管理サービス）での操作が必要です。詳細については、ご利用のサービスや管理会社にお問い合わせください。

HTMLソースコードにメタタグを追加する方法

※本手順はMetaビジネスヘルプセンターの記事を参考に解説しています。

1.Metaビジネス設定でドメインの追加

Metaの [ビジネス設定] にアクセスし、 [ブランドセーフティ] セクション内の [ドメイン] を開きます。[追加] をクリックし、新しいドメインを登録します。

2.メタタグの取得

[ビジネス設定] に表示されるメタタグをコピーします。

3.Studioでメタタグを設定

Studioのエディターを開き、ドメイン認証するプロジェクトを選択します。ページ内（ピンク四角）にあるサイト設定（黄色四角）のカスタムコード内、 タグの末尾 にコピーしたメタタグを貼り付けます。

4.サイトの公開・更新

メタタグを追加したら、 サイトを公開または更新 します。

5.Metaビジネス設定でドメイン認証

Metaの [ビジネス設定] 画面に戻り、 [ドメインを認証] をクリックします。認証に失敗した場合は、エラーメッセージを確認し、Metaビジネスヘルプセンターのガイドを参照してください。

StudioにMetaピクセルを埋め込む

連携を設定するStudioのプロジェクトを開き、ダッシュボードの[ホーム]にアクセスした後、左側のメニューから[Apps]（ピンク四角）を選択します。

Meta Pixelの欄をクリックし、IDを入力します。入力内容を保存すれば設定完了です。これで、StudioとMetaピクセルの連携が完了し、ウェブイベントのトラッキングが可能になります。

Google reCAPTCHA v3

対象プラン： Miniプラン以上（旧プラン：Starterプラン以上）

Studioで作成し、公開サイトに設置したフォームを不正利用や悪用から保護するために、Google reCAPTCHA v3を導入できます。プロジェクト単位で適用され、一度設定すると、そのプロジェクト内のすべてのStudioフォームに自動的に適用されます。ただし、特定のフォームのみを指定して適用することはできません。

Google reCAPTCHAの仕様や料金については、こちらをご確認ください。

【注意】設定に誤りがあると、プロジェクト内のすべてのフォームが正常に動作しなくなる可能性があります。また、StudioではGoogle reCAPTCHA v3のみ導入可能であり、Google reCAPTCHA v2は利用できません。

1. Google reCAPTCHA v3 の「サイトキー」と「シークレットキー」を取得する

GoogleアカウントでGoogle reCAPTCHA Admin Consoleにログインします。

[作成] （ピンク四角）をクリックします。（サイトを初めて登録する場合はこのステップはありません）

必要な情報（ピンク四角）を入力します。

ラベル：サイトを識別しやすい名前を設定
reCAPTCHA タイプ：「reCAPTCHA v3」を選択
ドメイン：プロジェクトで使用するドメインを追加
・preview.studio.site（ライブプレビューでの動作確認用）
・公開サイトのドメイン（例: ○○○.studio.site , ○○○.com など）

reCAPTCHA 利用規約を確認し、同意できる場合はチェックを入れ、「送信」をクリックします。

登録が完了すると、サイトキーとシークレットキー（ピンク四角）が発行されます。

2. Google reCAPTCHA の利用条件を確認する

Google reCAPTCHAの利用条件には、訪問者への通知と同意が求められています。

そのため、公開サイトにプライバシーポリシーのページを設置し、以下の内容を明記することが必要になります。

• Google reCAPTCHA v3 を利用していること

• ユーザー情報が Google に送信されること

3. Studioダッシュボードで Google reCAPTCHA v3 を設定する

連携を設定するStudioのプロジェクトを開き、ダッシュボードの[ホーム]にアクセスした後、左側のメニューから[Apps]（ピンク四角）を選択します。

次に、[Google reCAPTCHA v3]をクリックして、サイトキー、シークレットキー、しきい値を入力し、保存します。

しきい値は 0 から 1.0 の範囲で設定可能です。推奨値として 0.5 を設定するのも一つの方法です。詳細は公式サイトを参照してください。

フォームのあるページ右下に reCAPTCHA のロゴが表示され、フォーム送信が正常に行えれば設定完了です。トラフィックは Google reCAPTCHA Admin Console で確認できます。

解除方法

Google reCAPTCHA v3 を無効化するには、設定画面でサイトキー、シークレットキー、しきい値をすべて空欄にして保存します。

その後、ライブプレビューと公開サイトの両方でフォーム送信テストを行い、右下のロゴが表示されず、正常に送信できることを確認してください。

HubSpot Tracking (Beta)

対象プラン： Miniプラン以上（旧プラン：Starterプラン以上）

HubSpot Tracking Code を Studio に埋め込むことで、HubSpot を活用したウェブサイトのトラフィック監視が可能になります。

【注意】Studio では連携までをサポートしており、具体的な使い方については HubSpot の公式サポートをご利用ください。
HubSpot のトラフィックアナリティクス機能は、有料アカウントでのみ利用可能です。無料アカウントでは使用できません。
この機能は公開サイトでのみ動作し、ライブプレビューでは利用できません。

1.HubSpot の管理画面を開き、画面右上の「設定」を選択

2.画面左のメニューから「トラッキングコード」を選択

3.表示された埋め込みコードの数字部分をコピー

4.Studio のダッシュボード内「Apps」に移動し、コピーした情報を登録

設定が完了すると、反映までに少し時間がかかる場合があります。データが「トラフィックアナリティクス」に表示されると、連携が正常に完了したことを確認できます。

チャネルトーク

対象プラン： Miniプラン以上（旧プラン：Starterプラン以上）

Studioサイトに、お問い合わせ用のチャットサービス「チャネルトーク」を簡単に設置できます。

チャネルトークとは

2017年の正式ローンチ以来、「答えは顧客にある」をモットーに13,000社以上が導入しているチャットサービスです。プログラミング不要で利用でき、アパレルECからBtoB SaaSまで幅広い業種に活用されています。使いやすさとデザイン性の高さが特徴で、カスタマーサポートの効率化にも貢献します。

1. Plugin Keyの取得

Studioサイトにチャネルトークを埋め込むのはとても簡単です。まず、チャネルトークの公式サイトでアカウントを作成し、チャット設置用のPlugin Key（ピンク四角）を取得しましょう。

1. channel desk の左下にある設定ボタンをクリックし、設定画面を開く。

2. 設定メニューの 「チャットの導入および設定」 から 「チャットボタンのインストール」 を選択。

3. プラグイン名の横にある編集ボタンをクリックし、用途に合わせた名前を入力。

4. 「新しいプラグインを作成」をクリックすると、導入用のコードが生成される。

※「プラグインのインストール」タブでは、Web、Android、iOS向けのコードが確認できます。

2. Apps連携

1.連携を設定するStudioのプロジェクトを開き、ダッシュボードの[ホーム]にアクセスした後、左側のメニューから[Apps]（ピンク四角）を選択して、Channelをクリックします。

2.表示された入力欄にPlugin Keyを貼り付けて保存します。

設定が完了すると、サイトの 右下にチャットボタンが表示され、ユーザーがいつでも問い合わせできるようになります。

Intercom

対象プラン： Miniプラン以上（旧プラン：Starterプラン以上）

カスタマーサポートプラットフォーム「Intercom」を導入できます。

1. IntercomのApp IDを確認する

Intercomにログイン後、左下のユーザーアイコンにカーソルを合わせるとメニューが表示されます。そこから「Settings」（黄色四角）を選択します。

設定画面の左側メニューから「Installation」を選択し、表示されたインストール用コードの中から「app_id」以降の文字列（ピンク四角）をコピーします。

2. StudioのApps連携

連携を設定するStudioのプロジェクトを開き、ダッシュボードの[ホーム]にアクセスした後、左側のメニューから[Apps]（ピンク四角）を選択します。

「Intercom」を選択し、表示された入力欄にコピーした Intercom の App ID を貼り付けて保存します。

設定が完了すると、公開サイトの右下にチャットボタンが表示され、ユーザーとのスムーズなコミュニケーションが可能になります。

Notion

対象プラン：全プラン

Notion上で作成・管理したドキュメントやデータベースを、API経由でStudioと連携し、デザインから公開まで行うことができます。

API連携を行うために、まずNotion上でIntegrationを作成し、連携するデータベースに対してアクセス許可を設定します。

1. NotionでIntegrationを作成する

連携に必要な「Internal Integration Token」をNotion上で生成します。

Notion My integrationsにアクセスし、「＋Create New Integration」（ピンク四角）をクリックします。

基本情報を入力し、「Submit →」をクリックします。NameとLogoは任意のものを設定し、Associated workspaceでは連携するワークスペースを選択します。

Update ContentとInsert Contentのチェック（ピンク四角）を外し、No user information（黄色四角）を選択します。

生成された「Internal Integration Token」（ピンク四角）はStudioでの設定時に必要となるため、コピーしておきます。

2. NotionのデータベースにIntegrationを接続する

Studioで利用したいNotionデータベースを開き、右上のメニューから「+ Add connections」（ピンク四角）を選択し、作成したIntegration名を入力します。そして候補として表示されたものを選択して接続します。

接続後、データベースのページURLからデータベースIDをコピーします。

データベースIDは、ワークスペース名の後に続く「?」までの部分（ピンク四角）が該当します。ワークスペース名がない場合は「notion.so/」の後から「?」までの部分がデータベースIDです。

3. Studio上でAPI連携を設定する

デザインエディターの追加パネル（ピンク四角）を開き、APIタブ（黄色四角）から「＋新規追加」（ブルー四角）をクリックします。

APIタイプとして「Notion」を選択します。

Notionでコピーした「Internal Integration Token」を「Notion API Key」（ピンク四角）に入力し、データベースIDを「Database ID」（黄色四角）に入力します。

並び替え設定を行うと、取得するアイテムの順序を指定できます。Notionデータベースのプロパティを選択・設定すると、動的リストのアイテムを指定の順序で表示できます。

入力が完了したら「次へ」をクリックし、API確認が成功すると「API確認済み」となり、連携が完了します。設定画面外をクリックするとエディターに戻ります。

4. APIデータをリスト内の要素に紐付ける

連携完了後、追加パネル > APIタブに登録したAPIリクエスト（ピンク四角）が表示されます。

使用するAPIリクエストをクリックすれば、APIリスト（ピンク四角）が表示されますので、ドラッグ＆ドロップまたはクリックでページに配置します。

追加したテキストや画像ボックスなどの要素に、データパネルからAPIデータ（プロパティ）を紐付けしてデザインしていきます。

プロパティの種類や紐付けの方法についての詳細は、以下をご参照ください。

• プロパティ

• エディター上のプロパティ紐付け

日付のフォーマット変更や、表示文字数の制限など、テキストの表示を調整することも可能です。詳細は「プロパティの文字列フィルタ」をご確認ください。

MicroCMS

対象プラン：全プラン

コンテンツ管理サービス「microCMS」上のデータをAPI経由で取得し、Studioで扱うことができます。本記事では、StudioにおけるmicroCMS APIの連携手順と、設定方法について解説します。

なお、microCMSのAPIはリスト形式とオブジェクト形式の2種類がありますが、Studioではリスト形式のみ対応しています。

【注意】API連携 (Beta) の注意事項を必ずご確認ください。Beta版API機能は全プランで利用可能ですが、今後は対象プランを限定した正式版API機能のリリースが予定されています。正式版の提供開始後は、現在のBeta版API機能が終了する可能性があるため、あらかじめご了承ください。

1. microCMSのcURLを取得する

microCMSのコンテンツ一覧画面を開き、画面右上の「API プレビュー」ボタン（ピンク四角）をクリックします。

右側にAPI情報が表示されるので、cURLタブ（ピンク四角）を選択し、表示されたcURL（ピンク四角）をコピーしてください。

対象のコンテンツは最低1つ以上「公開中」に設定する必要があります。非公開（下書き中または公開終了）の状態では、公開サイトだけでなくエディターやライブプレビューにも表示されません。

2. StudioでAPIを連携する

デザインエディターの追加パネル（ピンク四角）を開き、APIタブ（黄色四角）から「＋新規追加」（ブルー四角）をクリックします。

APIタイプとして「microCMS」を選択します。

次に、コピーしたcURLを入力欄にペーストし、「次へ」をクリックしてください。

APIの確認が実施され、成功すると「API確認済み」となり、連携が完了します。設定後は、一旦画面枠外をクリックしてエディターへ戻ります。

3. APIデータをページに紐付ける

連携が完了すると、追加パネル内のAPIタブに登録したAPIリクエストが表示されます。使用するAPIリクエストを選択し、「APIリストパーツ」をドラッグ＆ドロップまたはクリックでページに配置します。

追加したテキストや画像ボックスなどの要素には、データパネルからAPIデータ（プロパティ）を紐付け、デザインを整えていきます。

プロパティの種類や紐付けの方法については、以下をご覧ください。

• プロパティ

• エディター上のプロパティ紐付け

また、日付のフォーマットを変更したり、表示文字数を制限するなど、テキストプロパティの表示を調整することも可能です。詳細については、プロパティの文字列フィルタをご確認ください。

Freeプランでの外部サービス埋め込み

Freeプランでも、HTML、CSS、JavaScriptを用いたコードをページに埋め込むことができます。コードを埋め込む際は、専用の「Embedボックス」をページに配置します。このボックスを利用することで、Googleマップや外部サービスのフォームなどを簡単に表示できます。

コードタイプ

Embedボックスには「iframeタイプ」と「sandboxタイプ」の2種類があり、追加するコードの内容によって自動的に切り替わります。

iframeタイプ

iframeタグのみで構成されたコードに適用されます。たとえば、formrunで作成したフォームの埋め込みコードや、HubSpot Formの埋め込みコードが該当します。

sandboxタイプ

iframeタイプに該当しないすべてのコードに適用されます。また、コード内でCMSプロパティを利用すると、iframeタイプからsandboxタイプへ自動的に切り替わります。

設定手順

まず、エディタの左側にある追加パネル（ピンク四角）から「Embedボックス」（黄色四角）をページに配置します。

次に、エディタの右側にある設定パネルを開き、埋め込みコード欄（ピンク四角）にコードを追加します。

最後に、サイトを更新し、公開サイトに反映させてください。

注意点とサンプルコード

応用的に利用する際は、以下の点に注意が必要です。

・sandboxタイプでは、スタイル（style）を設定してもEmbedボックス内でのみ適用され、ページ全体には影響しません。

・DOMContentLoadedイベントは発火しないため、通常のスクリプトとは異なる動作をすることがあります。

・埋め込みコード内でリンクを設定する場合は、「target=”_blank”」「target=”_top”」「target=”_parent”」のいずれかを指定してください。指定がない場合、Embedボックス内での遷移となります。

studio LP studio LP _blank studio LP _top studio LP _parent

まとめ

Studioでは、さまざまな外部サービスと連携できるApps機能を活用することで、サイトの運営がより快適になります。マーケティングツールやカスタマーサポートツール、データ管理サービスなど、目的に応じた機能を追加することで、より充実したWebサイトを構築できます。

設定はシンプルですが、初めての方は戸惑うこともあるかもしれません。この記事でご紹介した手順を参考にしながら、自分のサイトに合ったAppsを選び、あなたのWebサイトが、より便利で魅力的なものになるよう、StudioのAppsをぜひ活用してみてください。