---
title: "TikTok埋め込み完全ガイド【2026年版】｜デザイン例＆WordPress対応"
date: 2020-07-23
modified: 2026-04-27
canonical_id: embed-tiktok-to-website
locale_slug: embed-tiktok-to-website
author: "esbasicmath"
category:
  - blog
  - tutorials
summary: "動画共有アプリとして存在感を増しているTikTokをウェブサイト・ブログに埋め込む方法を画像付きで解説。公式の埋め込みコード取得からUGCツール活用、WordPress・HTMLでの設置、FAQまで網羅した2026年最新ガイドです。TikTok動画をウェブサイト・ブログに埋め込む方法を画像付きで解説。"
draft: false
seo:
  title: "TikTok埋め込み完全ガイド【2026年版】｜デザイン例＆WordPress対応"
  description: "動画共有アプリとして存在感を増しているTikTokをウェブサイト・ブログに埋め込む方法を画像付きで解説。公式の埋め込みコード取得からUGCツール活用、WordPress・HTMLでの設置、FAQまで網羅した2026年最新ガイドです。TikTok動画をウェブサイト・ブログに埋め込む方法を画像付きで解説。"
  og_image: "https://embedsocial.jp/hp/wp-content/uploads/2020/07/AdobeStock_487403475-scaled.jpeg"
  og_image_width: 2560
  og_image_height: 1707
  structured_data: article
---

TikTok動画をブログやウェブサイトに埋め込むことで、サイト訪問者のエンゲージメントを高め、TikTokアカウントへの流入やフォロワー獲得につなげることができます。

本記事では、TikTokをウェブサイトに埋め込む3つの方法を2026年最新版の画面で解説します。公式の埋め込みコードを取得する手順、複数動画を一括表示できるSNS埋め込みツール（EmbedSocial）の使い方、WordPress・Wix・STUDIO・Shopify・HTMLサイト各プラットフォームへの設置手順、そしてよくあるトラブルと解決法まで網羅しています。

**📋 この記事のポイント**

-   TikTok公式の埋め込みコードは、PCブラウザで動画を開き「</>」ボタンをクリックすれば数ステップで取得できる
-   公式コードは1投稿ずつの埋め込みに限られ、複数動画を一覧表示したい場合やデザインを統一したい場合は専用の埋め込みツールが有効
-   EmbedSocialはTikTok公式APIパートナーで、TikTok ONE APIの初期承認UGCプラットフォームの1社。ビジネスアカウントの動画を自動収集できるほか、Spark Ads化まで一気通貫で対応
-   WordPress・Wix・STUDIO・Shopify・HTMLサイトなど主要なウェブサイトビルダーすべてにコピー＆ペーストで設置できる
-   TikTokをサイトに埋め込むと、滞在時間の延長・TikTokアカウントへの流入増加・UGCによる信頼性向上など複数のマーケティング効果が期待できる

## TikTok埋め込みとは？3つの方法を比較

TikTok埋め込みとは、TikTok上に投稿されている動画を、自社のウェブサイトやブログの中で直接再生できるように表示させる機能のことです。単なるリンクやスクリーンショットと違い、訪問者はサイトを離れることなく動画を視聴したり、TikTokアカウントへアクセスしたりすることができます。

TikTok動画をウェブサイトに埋め込む方法は、大きく分けて以下の3つに分類できます。目的・技術レベル・運用体制に合わせて最適な方法を選びましょう。

**比較項目**

**方法1  
公式の埋め込みコード**

**方法2  
SNS埋め込みツール  
（EmbedSocialなど）**

**方法3  
公式APIで独自開発**

**難易度**

かんたん（HTML貼り付けのみ）

**かんたん（ノーコード）**

難しい（開発スキル必須）

**複数動画の一括表示**

不可（1本ずつ貼付け）

**可（自動収集）**

可（開発次第）

**自動更新**

なし

**あり（新規投稿を自動反映）**

あり（自社開発次第）

**デザイン  
自由度**

低（TikTok標準表示）

**高（130種類以上のテンプレート＋AI調整）**

最高（完全カスタム可能）

**UGC・他者投稿の活用**

△（URLベースで個別貼付け）

**◎（ハッシュタグ・メンション自動収集）**

◎（開発次第）

**コスト**

無料

月額料金（無料プランあり）

開発費＋運用保守コスト

**こんな方に  
おすすめ**

1〜2本の動画を手軽に載せたい方

**複数動画の自動更新・デザイン統一・UGC活用をしたい事業者**

独自の機能要件・大規模サイトを持つ開発チーム

公式コードは手軽さ、専用ツールはカスタマイズ性と運用効率、APIは柔軟性が魅力です。本記事ではまず**方法1（公式コード）**の具体的な手順を解説し、次に**方法2（EmbedSocialでの自動運用）**を5ステップでご紹介します。

## TikTok公式の埋め込みコードでサイトに表示させる方法

まずは最もシンプルな方法として、TikTok公式が提供する埋め込みコードを使って動画をサイトに表示する手順を画像付きで解説します。

TikTokの各動画には埋め込み用のHTMLコードが自動で生成されており、このコードをコピーしてウェブサイトの編集画面に貼り付けるだけで、動画を表示できます。ただし、**埋め込みコードの取得はPC（パソコン）でのみ行えます**。スマートフォンアプリやPC版のスマホ表示では「</>」ボタンが表示されません。

### ステップ1. パソコンでTikTokのサイトを開き、埋め込みたい動画を表示する

パソコンのブラウザ（Google ChromeやSafariなど）で[TikTok公式サイト](https://www.tiktok.com/ja-JP)を開きます。

![TikTok-desktop-screenshot](https://embedsocial.jp/hp/wp-content/uploads/2020/07/TikTok-desktop-screenshot.jpg)

埋め込みたい動画を探して開きます。TikTokのPCサイトは動画検索がやや不便なため、以下のいずれかの方法で動画を見つけるのがおすすめです。

#### スマホで動画のURLをコピーしてPCに送信する

一見遠回りに見えますが、スマホアプリの方が目的の動画にたどり着きやすいため、最も確実な方法です。スマホで動画を再生したときに画面右側に出てくる「シェア」ボタンをタップし、「リンクをコピー」を選びます。そのURLをメールやメッセージアプリでPCに送信し、PC上で開くと自動的にPC用URLに変換されて動画が表示されます。

![send-link-from-phone-to-pc](https://embedsocial.jp/hp/wp-content/uploads/2020/07/Frame-7.jpg)

#### ユーザーIDから動画を探す

以下のURLの「@ユーザーID」部分を該当アカウントのIDに置き換えて、ブラウザのアドレスバーに入力すると、そのアカウントの投稿一覧が表示されます。

`https://www.tiktok.com/@ユーザーID`

例えば「@tiktokjapan」を入力すると、TikTok Japan公式アカウントの動画一覧が表示されます。

![TikTok-id-search](https://embedsocial.jp/hp/wp-content/uploads/2020/07/TikTok-id-search.jpg)

#### ハッシュタグから動画を探す

ハッシュタグから関連動画を絞り込むこともできます。以下のURLの「タグ名」部分を該当のハッシュタグに置き換えて入力してください。

`https://www.tiktok.com/tag/タグ名`

たとえば「犬」を入力すると、#犬タグの付いた動画一覧が表示されます。

![TikTok-tag-search](https://embedsocial.jp/hp/wp-content/uploads/2020/07/TikTok-tag-search.jpg)

### ステップ2. 埋め込みコードをコピーする

埋め込みたい動画を見つけたらクリックして再生画面に移動します。画面右側に表示されるボタンの中から、埋め込みマーク「</>」のボタンをクリックします。

![click-embed-button-for-tiktok-video](https://embedsocial.jp/hp/wp-content/uploads/2020/07/Group-74-3.jpg)

クリックすると埋め込み用コードが表示されるので、「コードをコピー」をクリックします。**コードは必ずすべてをコピーしてください。**一部でも欠けると、埋め込みが正しく表示されません。

![copy-embed-code-of-tiktok-video](https://embedsocial.jp/hp/wp-content/uploads/2020/07/Group-75-2.jpg)

### ステップ3. ウェブサイトの編集画面にコードを貼り付ける

ここではWordPressを例に説明しますが、基本的な流れはどのCMSでも同じです。HTML編集画面を開き、TikTok動画を表示したい場所に、先ほどコピーしたコードを貼り付けます。

![embed-tiktok-code-in-wordpress](https://embedsocial.jp/hp/wp-content/uploads/2020/07/Group-76-1.jpg)

以上で埋め込み完了です。ページ上には以下のようにTikTok動画が表示されます。

> [@escommerce.link](https://www.tiktok.com/@escommerce.link?refer=embed "@escommerce.link")
> 
> In the 18th century philosopher John Locke proposed a model of the human mind in which ideas associate or resonate with one another.
> 
> [♬ original sound - EsCommerce](https://www.tiktok.com/music/original-sound-7106887068639038213?refer=embed "♬ original sound - EsCommerce")

![TikTokヒーローセクション](https://embedsocial.jp/hp/wp-content/uploads/2026/04/TikTokヒーローセクション-1024x464.webp)

TikTok動画を複数まとめて、  
ノーコードでウェブサイトに表示。

EmbedSocialならTikTok公式APIに対応し、アカウントを連携するだけで最新動画を自動収集・表示できます。デザインテンプレートは130種類以上。7日間無料でお試しいただけます。

[EmbedSocialを無料で試す →](https://embedsocial.jp/trial_list/)

7日間の無料トライアル中はいつでもキャンセル可

## EmbedSocialでTikTok埋め込みを始める5ステップ

1本ずつ動画をコピー＆ペーストするのではなく、**複数の動画をまとめて自動更新しながら表示したい**場合は、SNS埋め込み専用ツールの利用が効率的です。ここではノーコードツール[EmbedFeed（EmbedSocialのSNS埋め込み機能）](https://embedsocial.jp/product/embedfeed/)を使って、TikTok動画をウェブサイトに埋め込む手順をご紹介します。

一度EmbedSocialとTikTokアカウントを接続すれば、1クリックで異なるデザインをお試しいただけます。細かな調整は**バイブコーディング（ノーコード・プロンプト入力）**で行うことができます。

-   **ステップ1.** EmbedSocialアカウントにログイン（または新規アカウント開設）
-   **ステップ2.** TikTokアカウントとEmbedSocialをガイドに従って接続
-   **ステップ3.** AIデザインテンプレートを選択
-   **ステップ4.** バイブコーディングでデザインを調整し、埋め込みコードをコピー
-   **ステップ5.** WEBビルダーに埋め込みコードを貼り付けて完了

一度設定すれば、新しい投稿が追加されるとWEBサイト上でも自動で更新されます（自動更新を止めることも可能）。EmbedSocialではTikTok投稿の埋め込みは**プロプラン以上**でご利用いただけます。

## TikTok動画向けAIテンプレート紹介

EmbedSocialが他のTikTok埋め込みツールと大きく異なるのが、[**AIエディター機能**](/ja/blog/ai-ugc-widget-templates/)です。デザインの専門知識がなくても、AIチャットで自然言語を入力するだけで、ブランドに合ったTikTokウィジェットを数分で作成できます。

以下はTikTok動画の活用に特におすすめのAIテンプレート例です。テンプレートはすべてカスタマイズ可能で、AIエディターで色・フォント・レイアウトを自由に調整できます。  
→ [AIウィジェットテンプレート一覧を見る](https://embedsocial.jp/p/templates/all/)

### TikTokヒーローセクション

![EmbedSocialのAIテンプレート「TikTokヒーローセクション」](https://embedsocial.jp/hp/wp-content/uploads/2026/04/TikTokヒーローセクション.webp)

デザインの詳細

活用タイプ

🚀 次世代ヒーロー / 🎥 TikTok動画 / 📱 フォロワー獲得

特徴

**見出しと没入感のある動画を組み合わせた、大胆なダークモード・ヒーローセクション**  
・**ヒーロー ＋ ショーケースレイアウト:** 左側にキャッチコピー、右側に3D効果で浮遊する動画カードを配置し、圧倒的な第一印象を与えます。  
・**TikTokネイティブなUI:** プラットフォーム特有のデザインを忠実に再現し、フィルターなしのリアルなスタイルで信頼性を構築します。  
・**高いカスタマイズ性:** 見出し、動画の数、カードの重なり具合や3D角度などをAIエディターで直感的に調整可能です。

向いている業種

ファッション、ライフスタイル、ECサイト、クリエイターブランド。TikTokをブランドの最前線に置きたい全業種。

[🔗 ライブデモを体験する](https://embedsocial.jp/p/templates/tiktok-hero-section-ai-jp)

### 商品連携TikTokカルーセル

![EmbedSocialのAIテンプレート「商品連携TikTokカルーセル」](https://embedsocial.jp/hp/wp-content/uploads/2026/04/商品連携TikTokカルーセル.webp)

デザインの詳細

活用タイプ

🛒 商品直接購入 / 📱 TikTok連携 / 🎥 モバイル特化

特徴

**TikTokコンテンツを洗練されたストアフロントスタイルのカルーセルに変換**  
・**洗練されたヘッダーと視覚効果:** ダーク背景に大胆なタイトルを配置し、コンテンツを際立たせる「TikTokネイティブ」な高コントラストデザインです。  
・**強力な誘導ボタン:** 目立つCTAボタンに加え、緊急性と鮮度を感じさせるオプションの「Live」バッジを備えています。  
・**モバイルファーストのカードデザイン:** 縦長のTikTokスタイルカードを採用し、キャプションのプレビュー表示で視聴者の信頼と信憑性を高めます。  
・**スムーズな閲覧体験:** 左右のナビゲーション矢印により、ページを離れることなく連続して複数の動画を閲覧可能です。

向いている業種

Eコマースの商品発見、ランディングページ、キャンペーンハブ（アパレル、美容、ライフスタイル系）。

[🔗 ライブデモを体験する](https://embedsocial.jp/p/templates/shoppable-tiktok-video-feed-ai-jp)

### TikTokクラッシックフィード

![EmbedSocialのAIテンプレート「TikTokクラッシックフィード」](https://embedsocial.jp/hp/wp-content/uploads/2026/04/TikTokクラッシックフィード.webp)

デザインの詳細

活用タイプ

🎥 縦型フィード / 📱 コミュニティ活用 / 🔄 最新投稿表示

特徴

**最新のTikTok動画をクリーンなグリッド形式で表示し、サイトに新鮮さを与えるデザイン**  
・**縦型ビデオグリッド:** TikTokネイティブな縦長カードを採用。再生オーバーレイ、クリエイターのハンドル名、プレビューテキストを備え、スムーズな視聴を提供します。  
・**フォロー誘導CTA:** ウェブサイトから直接TikTokのオーディエンスを増やすための、目立つフォローボタンを配置可能です。  
・**情報の透明性:** キャプションとタイムスタンプの表示により、情報の文脈とコミュニティ感を強化し、信頼性を高めます。  
・**洗練されたスタイル:** 角丸、柔らかなシャドウ、統一された余白により、デバイスを問わずクリーンな外観を維持します。

向いている業種

ホームページのコミュニティセクション、商品ページでのUGC活用、キャンペーン＆ハッシュタグページ、クリエイターポートフォリオなど。

[🔗 ライブデモを体験する](https://embedsocial.jp/p/templates/classic-tiktok-feed-widget-ai-jp)

### TikTokフィルム風スライダー

![EmbedSocialのAIテンプレート「TikTokフィルム風スライダー」](https://embedsocial.jp/hp/wp-content/uploads/2026/04/TikTokフィルム風スライダー.webp)

デザインの詳細

活用タイプ

🎬 シネマティック / 🎥 TikTok動画 / 📱 フォロワー獲得

特徴

**TikTok動画を没入感のある横型の「フィルムストリップ」レイアウトで表示するカルーセル**  
・**フィルムストリップ風スライダー:** 映画のフィルムのような境界線エフェクトを備えた横型リールで、動画をよりドラマチックに演出します。  
・**ダークモード・エステティック:** 高コントラストな黒背景が、縦型動画の色彩を鮮やかに引き立て、プレミアムな印象を与えます。  
・**強力なCTA機能:** プロフィール名、ハンドル名、そして目立つフォローボタンを完備し、ウェブサイトから直接TikTokフォロワーを獲得可能です。  
・**スムーズな操作性:** デスクトップの矢印ナビに加え、モバイルでは快適なスワイプ操作に対応したレスポンシブ設計です。

向いている業種

ファッション・美容などのアパレルEC、キャンペーンLPのハイライト、クリエイターポートフォリオ、イベント特設ページなど。

[🔗 ライブデモを体験する](https://embedsocial.jp/p/templates/tiktok-film-strip-slider-ai-jp)

## 各ウェブサイトビルダーでTikTokを埋め込み表示する方法

TikTok公式の埋め込みコードにせよ、EmbedSocialで生成した埋め込みコードにせよ、ウェブページに表示するにはサイトビルダー側にコードを追加する必要があります。コピー＆ペーストの作業が中心なので難しくはありませんが、ビルダーごとに操作が若干異なります。主要なプラットフォームごとの設置方法をご紹介します。

### WordPressにTikTokを埋め込む方法

WordPressに埋め込む場合は、以下の手順に沿って操作します。

1.  EmbedSocialでTikTokウィジェットを作成し、自動生成されるJavaScript埋め込みコードをコピーします
2.  WordPressのブロックエディター（Gutenberg）を開き、「ブロックを追加（＋）」をクリックします
3.  「ウィジェット」グループ内の**「カスタムHTML」ブロック**を選択します
4.  追加されたボックスに埋め込みコードを貼り付けます
5.  プレビューで表示を確認し、問題なければ公開します

なお、WordPressは標準でTikTokのoEmbedに対応しているため、**TikTok動画のURLを段落ブロックに貼り付けるだけ**でも1本単位の埋め込みは可能です（TikTok埋め込みブロックが自動生成されます）。

### WixウェブサイトにTikTokを表示する方法

Wixで制作しているサイトに埋め込む場合は、以下の手順で操作します。

1.  EmbedSocialでTikTokウィジェットを作成し、生成された埋め込みコード（JavaScript）またはiframe URLをコピーします
2.  Wixの管理画面にログインし、エディタを開きます
3.  左サイドバーの**「要素を追加（＋）」→「埋め込みコード」**を開きます（Wix Studioの場合は「要素を追加」→「埋め込みとソーシャル」）
4.  JavaScriptコードを貼る場合は「HTML埋め込み」、iframe URLの場合は「HTML iframe」を選び、配置したい場所にドラッグします
5.  「コードを入力」をクリックしてコピーしたコード／URLを貼り付け、「適用」をクリックします
6.  プレビューで表示を確認しながら、サイズや位置を調整します

### STUDIOウェブサイトにTikTokを表示する方法

国産ノーコードツールのSTUDIOに埋め込む場合は、以下の手順で操作します。

1.  EmbedSocialで生成された埋め込みコード（JavaScriptまたはiframe）をコピーします
2.  STUDIOの編集画面で、左側の「要素を追加（＋）」から**「Embedボックス」**を選び、配置したい場所にドラッグ＆ドロップします
3.  右側のプロパティパネルの「埋め込み」タブを開き、「埋め込みコード」欄の**「エディタを開く」**をクリックします
4.  コピーしたコードを貼り付けて「保存」をクリックすると、TikTokフィードが表示されます

### ShopifyストアにTikTokを表示する方法

Shopifyストアに埋め込む場合は、以下の手順で操作します。

1.  Shopify管理画面にログインし、左メニューの**「コンテンツ」→「ページ」**へ移動します（旧UIでは「オンラインストア」→「ページ」）
2.  TikTokフィードを表示したいページを開き、リッチテキストエディタのツールバーにある**「＜＞ HTMLを表示」**アイコンをクリックします
3.  表示されたHTML編集モードに、EmbedSocialから取得した埋め込みコードを貼り付けます
4.  「保存」をクリックすると、選択したページにTikTokフィードが反映されます

商品ページやコレクションページに埋め込む場合は、管理画面 →「オンラインストア」→「テーマ」→「カスタマイズ」から該当セクションに「カスタムHTML（カスタムLiquid）」を追加してコードを貼り付けます。

### HTMLサイトにTikTokを埋め込む方法

純粋なHTMLで構築しているサイトの場合は、以下の手順で埋め込みコードを貼り付けます。

1.  EmbedSocialアカウントからTikTokフィードの埋め込みコードをコピーします
2.  サイトのフォルダを開き、TikTokフィードを表示したいHTMLファイルを編集モードで開きます
3.  ウィジェットを表示したいセクション内の <div> を見つけて、コードを貼り付けます
4.  保存してブラウザで確認します

### noteに埋め込む方法

noteの場合は、**TikTok動画のURLをそのまま編集画面に貼り付ける**だけで埋め込みが完了します。URLを入力して「Enter」キーを押すと、自動的に動画プレイヤーが展開されます。

もしくは、編集画面で段落にカーソルを合わせて「＋」ボタンをクリックし、**「< >」（埋め込み）アイコン**を選択してTikTok動画のURLを入力する方法もあります。いずれの方法でも、noteで公開後に動画が再生可能な状態で表示されます（noteはTikTok公式と提携しており、共有リンクの埋め込みに対応しています）。

## TikTokをブログやウェブサイトに埋め込むメリット

TikTok動画をウェブサイトに埋め込むと、単にコンテンツが増えるだけでなく、マーケティング面でも複数のメリットがあります。ここでは代表的な4つの効果を紹介します。

### サイト訪問者をTikTokへ誘引し、新規フォロワーを獲得できる

ウェブサイトの訪問者に対して、TikTokで積極的な情報発信をしていることを視覚的にアピールできます。動画を一覧で表示することで、サイト訪問者の中からTikTokに興味を持つユーザーをTikTokアカウントへ誘導し、新たなフォロワーやファンを獲得する導線を作れます。

### 広告嫌いのユーザーにも受け入れられやすいUGCで商品をアピールできる

近年、[SNS上の広告を嫌う傾向](https://webtan.impress.co.jp/n/2019/12/17/34880)が強まっています。そんな中、一般ユーザーの自然な投稿（UGC）を活用して商品・サービスを紹介する手法は、広告らしさを抑えたまま訴求力を保てる方法として注目されています。ユーザーが商品やサービスを自由に楽しんでいるTikTok動画を集めて表示すれば、押しつけがましさのない、共感ベースのマーケティングが可能です。

### ホームページ上でのユーザー滞在時間を伸ばせる

動画が一覧表示されることで、訪問者はスクロールしながら動画を次々と探す行動を誘発され、自然にページ滞在時間が延びます。TikTok動画がきっかけで他のページを回遊することも増え、サイト全体のPVやエンゲージメント向上にもつながります。

当社の実験でも、SNSフィードやUGCをサイトトップに掲載するとエンゲージメント率が向上することが確認できています。

\[sc\_Linkcard url="https://embedsocial.jp/blog/case-studies/embedsocial-ugc-widget-conversion/"\]

### TikTok非利用者へのリーチに活用できる

TikTokは利用者が急増しているSNSですが、まだ全世代に浸透しきっているわけではありません。TikTokに投稿したコンテンツをウェブサイトに埋め込めば、TikTokを普段使わない層にもコンテンツを届けることができ、新たなフォロワーやファンを獲得するきっかけになります。

![TikTokフィルム風スライダー](https://embedsocial.jp/hp/wp-content/uploads/2026/04/TikTokフィルム風スライダー-1024x413.webp)

TikTokの動画を、サイトの主役に  
UGCでCVRを引き上げる

EmbedSocialは、TikTok・Instagram・X・YouTubeなど7種類以上のSNSから動画や口コミを自動収集してウェブサイトに表示できるUGCプラットフォームです。AIエディターでブランドに合ったデザインも数分で作成できます。

[無料トライアルで試す →](https://embedsocial.jp/trial_list/)

7日間の無料トライアル中はいつでもキャンセル可

## サイトに埋め込めるのは自社アカウントだけではない（UGC活用）

EmbedSocialを利用すると、TikTokの埋め込み機能は自社アカウントの投稿だけでなく、**一般ユーザーが自社商品について投稿した動画（UGC）**にも拡張できます。

ユーザー生成コンテンツ（UGC: User-Generated Content）を活用することで、実際の利用シーンや顧客の声を自社サイトに取り込み、より信頼性の高い情報として訪問者に提供できます。特に、顧客の第三者視点によるレビューや体験談は「ソーシャルプルーフ（社会的証明）」として機能し、購買意欲の向上に直結します。

EmbedSocialでは、指定のハッシュタグが付いたTikTok投稿を自動収集したり、メンション付き投稿を自動で集めたりすることも可能です。TikTokを使ったハッシュタグキャンペーンを実施し、参加者の動画を自社サイトで紹介するといった運用も実現できます。

\[sc\_Linkcard url="https://embedsocial.jp/blog/case-studies/yokohamacity-visitors-bureau/"\]

## TikTok埋め込みでよくあるトラブルと解決法

TikTok動画を埋め込む際に遭遇しやすいトラブルと、その解決方法をまとめました。

### 埋め込みコードを貼ったのに動画が表示されない

最も多い原因は、**埋め込みコードの一部が欠けている**ことです。TikTok公式のコードは複数行にまたがる長いコードで、末尾のスクリプトタグ（<script>）まで含めてコピーしないと動画が表示されません。必ず「コードをコピー」ボタンを使ってコード全体をコピーしてください。

また、WordPressのビジュアルエディターに貼り付けるとタグが壊れる場合があります。必ずHTMLモード（カスタムHTMLブロック）で貼り付けましょう。その他、TikTok側の一時的な障害や、埋め込み先サイトのCSP（Content Security Policy）設定で外部スクリプトがブロックされているケースもあります。

### 動画のサイズを変更したい

TikTok公式の埋め込みコード内には `max-width`（最大幅）と `min-width`（最小幅）の指定が含まれており、これらの数値を書き換えることで表示サイズを調整できます。

ただし、TikTok動画は縦型（アスペクト比9:16）のため、幅を変更すると高さも連動して変わります。EmbedSocialを使う場合は、管理画面から直感的にサイズやレイアウトを変更できるため、HTMLを触りたくない方にはこちらがおすすめです。

### スマホ表示でレイアウトが崩れる

公式の埋め込みコードはレスポンシブ対応が限定的で、スマホ画面では左右に余白が出たりプレイヤーが画面幅に収まらなかったりすることがあります。複数動画を表示する場合や、レスポンシブ対応を重視する場合は、EmbedSocialなどのツールを使うことで、PC・タブレット・スマホの各デバイスに最適化されたレイアウトで表示できます。

## EmbedSocialは複数のTikTok公式APIパートナー — TikTok ONE APIも初期承認

EmbedSocialは、以前からTikTokのDisplay APIなど複数のTikTok公式APIに対応してきたパートナーです。2025年7月には新たに**TikTok ONE APIの利用も公式に承認**され、UGCプラットフォームの中でも最初期に認定を受けたグループの1社となりました。

### TikTok ONE APIとは？

TikTok ONE APIとは、TikTok for Businessが提供する「Organic API」スイートの一部です。Organic APIはAccounts API・Mentions API・Discovery API・Spark Ads Recommendation APIなどで構成され、ブランドの公式TikTokアカウント管理、ブランドをメンションしたUGC（ユーザー投稿）の発見、そしてクリエイター動画の広告化までを一気通貫で実現するAPI群です。これまでバラバラに扱う必要があったオーガニックSNS運用と広告運用を、ひとつの基盤上でスムーズに連携できるのが最大の特長です。

### Spark Ads対応 — UGCをそのまま広告に

EmbedSocialはTikTok ONE APIとの連携により、[ブランドをメンション](/ja/blog/tiktok-mentions/)したクリエイター動画を発見し、ワンクリックで利用許諾をリクエスト、承認後そのまま**Spark Ads**（オーガニック投稿をそのまま広告として配信できるTikTokの仕組み）として配信できる機能を提供しています。TikTok公式のデータでは、クリエイターコンテンツをリンクしたSpark Adsはビュースルー率が+122%、エンゲージメントが+93%、ROASが+64%という成果も報告されています。

TikTok、Instagram、YouTube、Facebook、X（Twitter）、Pinterest、Threadsなど7種類以上のSNSから投稿をひとつにまとめて[ウェブサイトに埋め込み表示](/ja/blog/embed-social-media-feeds/)でき、世界30万以上のブランドに利用されています。日本国内でも2,000を超える事業者が導入しており、[TikTokビジネスアカウントからの自動同期機能](/ja/blog/tiktok-auto-sync/)を使えば、新規投稿が自動でサイトに反映されるため、SNS運用とサイト更新の工数を大幅に削減できます。

コード不要で設置でき、[リーズナブルな料金プラン](https://embedsocial.jp/price/)を用意しています。TikTokを活用したマーケティング・PR・UGC広告運用をご検討の方は、ぜひ一度[お問い合わせ](https://embedsocial.jp/contact/)ください。

## 最後に：最適な手段でTikTok動画をサイトに埋め込もう

TikTok動画のウェブサイト埋め込みには、公式の埋め込みコード・SNS専用ツール・API独自開発の3通りの方法があります。単発的に1〜2本の動画を載せたいだけなら公式コードで十分ですが、複数動画を一覧表示したい、ブランドに合わせてデザインしたい、新着を自動反映したいといった要件があれば、EmbedSocialのようなSNS埋め込みツールが最もコスト効率よく目的を達成できます。

TikTokをウェブサイトに埋め込むことで、エンゲージメントの向上・フォロワー獲得・UGCによる信頼構築など、マーケティング全体にプラスの効果が生まれます。自社の目的と運用体制に合った方法を選び、TikTokをサイト成長のエンジンに変えてみてください。

![EmbedSocial AI UGCセクションジェネレーター](https://embedsocial.jp/hp/wp-content/uploads/2026/02/embedsocial-promotion-Keyvisual-1024x576.webp)

TikTokもInstagramも、  
サイト上でひとつに

EmbedSocialはTikTok公式APIパートナー。TikTok ONE API対応でSpark Ads化もワンクリック。130種類以上のテンプレートとAIエディターで、誰でも短時間で洗練されたSNSウィジェットを作成・埋め込みできます。

[EmbedSocialを無料で試す →](https://embedsocial.jp/trial_list/)

7日間の無料トライアル中はいつでもキャンセル可

## よくある質問（FAQ）

Q. TikTok動画の埋め込みは著作権侵害になりますか？ ▼

TikTok公式が提供する埋め込み機能を使って動画を表示する場合、技術的には規約に沿った利用となりますが、動画自体の著作権は投稿者に帰属しています。特に他人の動画を商用利用する場合やキャンペーンで使う場合は、事前にDMやコメントで掲載許可を得ることが推奨されます。自社アカウントの動画であれば、著作権上の問題は発生しません。

Q. 埋め込む動画のサイズは変更できますか？ ▼

TikTok公式の埋め込みコード内にある `max-width` と `min-width` の値を編集することで、動画の表示サイズを変更できます。TikTok動画はアスペクト比9:16の縦型のため、幅を変更すると高さも連動します。HTMLを触らずに調整したい場合は、EmbedSocialの管理画面から直感的にサイズ変更が可能です。

Q. TikTokの埋め込みがうまく表示されないときの対処法は？ ▼

まず埋め込みコード全体（末尾の <script> タグを含む）がコピーされているかを確認してください。また、WordPressの場合は必ず「カスタムHTML」ブロックに貼り付けることが重要です。ビジュアルエディターに貼ると一部タグが消えることがあります。それでも表示されない場合は、TikTok側の一時的な障害やサイトのCSP設定を確認しましょう。

Q. 動画ではなくTikTokアカウントごと埋め込めますか？ ▼

TikTok公式機能ではプロフィール全体の埋め込みコードも提供されています。PCブラウザでプロフィールページを開き、共有ボタンから「埋め込み」を選ぶとコードが表示されます。EmbedSocialを使えば、指定アカウントの最新動画をフィード形式で自動表示できるため、プロフィール単体を貼るよりも自由度の高い表示が可能です。

Q. スマホ表示でも綺麗に見えるようレスポンシブ対応できますか？ ▼

TikTok公式コードのレスポンシブ対応は限定的で、スマホ表示ではレイアウトが崩れる場合があります。EmbedSocialなどの専用ツールを利用すると、PC・タブレット・スマホそれぞれに最適化されたデザインで自動表示されるため、デバイスを問わず綺麗に見せられます。

Q. 複数のTikTok動画を一括で埋め込む方法はありますか？ ▼

公式の埋め込みコードは1本ずつの貼り付けが前提ですが、EmbedSocialのようなSNS埋め込みツールを使えば、TikTokアカウントを接続するだけで最新動画を自動で一覧表示できます。新しい動画を投稿するたびにサイト側も自動で更新されるため、運用工数を大幅に削減できます。

Q. WordPress以外のCMS（Shopify・Wix・STUDIO）にも埋め込めますか？ ▼

埋め込めます。TikTok公式のHTMLコードやEmbedSocialで生成したコードは、HTMLを貼り付けられる仕組みがあれば、どのCMSにも設置可能です。本記事ではWordPress・Wix・STUDIO・Shopify・HTMLサイト・noteの6種類の設置手順を詳しく解説しています。
