ノーコードツールSTUDIOでは、iframeタグを使うことで、様々な外部サービスをサイトに埋め込むことができます。一般的なWebサイトに求められる多くの外部サービスは埋め込みに対応していますし、こちらの記事では紹介していない外部サービスでも、iframeタグの発行が可能な外部サービスであれば、サイトへの埋め込みが可能です。

埋め込み機能を活用することで、STUDIOでも本格的なサイトを制作、運用できますので、ぜひ参考にしてみてください。また、埋め込み機能以外にも、STUDIO導入のメリット・デメリットや、導入前に確認しておくべきことを資料にまとめました。STUDIOを活用したサイト制作をご検討中の方は下記リンクよりぜひご覧ください。

※ 参考資料：STUDIOを活用するメリット・デメリット

STUDIOで埋め込める外部サービス

STUDIOでは、主に下記のサービスをサイト内に埋め込むことができます。下記の主要なサービス以外にも、外部サービスでiframeタグを発行できれば、STUDIOに埋め込むことができます。埋め込みにはコーディング知識は必要なく、簡単に埋め込むことができます。

1. Google Map

1つ目はGoogle Mapです。会社概要ページの所在地などでよく活用されています。具体的な埋め込み方法はSTUDIO公式ページをご覧ください。

▼  Google Mapを埋め込むとこんな感じ(東京タワー)

2. YouTube

STUDIOでは、mp4やmovなどの動画を直接アップロードすることができないので、動画をサイト上に載せたい時は、Youtubeの埋め込みや、次に紹介するVimeoの埋め込みを利用する必要があります。

▼ YouTubeを埋め込むとこんな感じ

YouTubeの動画を埋め込むとき、基本的にはYouTubeのユーザーインターフェース（UI）がそのまま表示されます。YouTube上のオプション設定により「プレーヤーのコントロールバーの表示」を変更することは可能ですが、後で見るボタン、共有ボタン、YouTubeのロゴなどを消すことはできません。そのため、背景動画などYoutubeのUI要素を表示せずに動画だけを表示したいときは、YouTubeではなく次に紹介するVimeoを使用する必要があります。

iframeタグをカスタマイズすることで、YouTube動画の自動再生・ループ再生を設定することができますが、公式ページにも記載がある通り、モバイル端末では自動再生やループは機能しませんので、注意しましょう。

参考記事：STUDIO公式ヘルプページ

3. Vimeo

Vimeoで動画を埋め込む場合も、YouTubeと同様、VimeoのUIがそのまま埋め込まれます。ただし、Vimeoを有料プラン(現時点ではStandardプラン)にアップグレードすることで、再生ボタンや再生バーなどを消して表示するカスタマイズが可能になります。そのため、Vimeoは背景動画を実装したい場合などに活用されています。

弊社で制作させていただいた大谷石のKANEHON様のコーポレートサイトもVimeoをカスタマイズして埋め込むことでダイナミックな背景動画を利用したWebサイトを実装しています。

▼ Vimeoを埋め込むとこんな感じ(Vimeo無料プラン)

4. Facebook

Facebookのアカウントページ・いいねボタンを埋め込むことができます。アカウントのページを埋め込むには、こちらのページで埋め込みコードを発行する必要があります。詳しい埋め込み方法はSTUDIO公式ページをご覧ください。

5. Twitter

Twitterのタイムライン・投稿・特定のハッシュタグでツイートを作成するボタンなどを埋め込むことができます。サービスを使った感想などを呟いたツイートをサービスサイトに表示させるといった活用方法があります。

Twitter Publishという別サービスに、埋め込みたいタイムラインやアカウントのURLを入力すると埋め込みコードを取得できます。詳しい埋め込み方法はSTUDIO公式ページをご覧ください。

▼ 特定のツイートを埋め込むとこんな感じ

6. Spotify

Spotifyのプレイリストをサイトに埋め込むことができます。ブログなどで曲の紹介をする際に、活用できそうです。

▼ Spotify埋め込み

7. Codepen

Codepenで記述したソースコードをサイトに埋め込むことができます。

8. SlideShare

作成したスライドをサイトに埋め込むことができます。会社説明資料や採用説明資料などの埋め込みに活用されています。

9. formrun

formrunで作成したフォームを埋め込むことができます。STUDIOの基本機能でもフォームを作成することはできるため、formrunの埋め込みは必須ではありません。

10. Firework(Beta)

Fireworkとは、縦型ショート動画やライブ配信などに特化した動画配信サービスです。STUDIOにFireworkの縦型動画を埋め込むことができます。
※この機能はBeta版となっています。(2023年4月26日時点)

▼ Fireworkを埋め込むとこんな感じ

11. Hubspot(Beta)

Hubspotとは、CRM・MA・SFAが一体化したツールです。STUDIOでは、Hubspotで作成したフォームを埋め込むことができます。
※この機能はBeta版となっています。(2023年4月26日時点)

また、埋め込みとは別に、STUDIOにはHubSpot Trackingとの連携機能もあります。連携することでHubspotのフォームではなく、STUDIOで制作したフォームの送信情報をHubspotに取り込んだり、顧客のWebサイト上での行動をトラッキングすることができます。

STUDIOで埋め込めるもの〜番外編〜

ここまで紹介していたサービスは、STUDIOが公式で発表している埋め込み可能なサービスになりますが、上記以外のサービスもiframeタグが発行できるものであれば、サイトに埋め込むことができます。今回は代表的な2つのサービスを紹介します。

12. Spirで日程調整

Spirは、日程調整ツールです。無料プランでは、埋め込みコードを発行できませんが、有料のチームプラン(2023年4月26日時点)にアップグレードすることで、iframeの埋め込みコードを発行できるようになり、STUDIOに埋め込むことができます。この機能は、"空き時間URL"のみに対応している点に注意しましょう。

13. お問い合わせフォームをGoogle Formで代替

STUDIOの基本機能でもお問い合わせフォームを実装できますが、お問い合わせは全てGoogle Formに集約させたいといった場合もあるかもしれません。Google Formも、iframeタグを用いて簡単に埋め込みが可能です。

▼ Google Formを埋め込むとこんな感じ

埋め込み方法

❶ 埋め込みたいGoogle Formを開き、右上の送信ボタンをタップ

❷ ポップアップの"<>"のタブを開きコードをコピー
❸ コードをSTUDIOで貼り付ける

まとめ

こちらの記事では、STUDIOで埋め込める主要な外部サービスについて紹介しました。こちらの記事では紹介していない外部サービスでも、iframeタグを発行できるサービスであれば、基本的に埋め込みが可能なので、ぜひ試してみてください。