TikTok埋め込み完全ガイド【2026年版】｜デザイン例＆WordPress対応

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公式サイトを開きます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@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

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

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

EmbedSocialを無料で試す →

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

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

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

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

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

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

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

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

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

TikTokヒーローセクション

デザインの詳細

活用タイプ

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

特徴

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

向いている業種

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

🔗 ライブデモを体験する

商品連携TikTokカルーセル

デザインの詳細

活用タイプ

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

特徴

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

向いている業種

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

🔗 ライブデモを体験する

TikTokクラッシックフィード

デザインの詳細

活用タイプ

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

特徴

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

向いている業種

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

🔗 ライブデモを体験する

TikTokフィルム風スライダー

デザインの詳細

活用タイプ

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

特徴

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

向いている業種

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

🔗 ライブデモを体験する

各ウェブサイトビルダーで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. ウィジェットを表示したいセクション内の
   を見つけて、コードを貼り付けます
4. 保存してブラウザで確認します

noteに埋め込む方法

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

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

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

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

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

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

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

近年、SNS上の広告を嫌う傾向が強まっています。そんな中、一般ユーザーの自然な投稿（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の動画を、サイトの主役に
UGCでCVRを引き上げる

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

無料トライアルで試す →

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公式のコードは複数行にまたがる長いコードで、末尾のスクリプトタグ（