PR

SWELLのYoutube動画埋め込みガイド!失敗しない3つの方法

ワードプレス

 

はじめまして。当ブログ管理人の後藤です。

未経験者が「なぜブログで10万稼げたのか?」その秘密を暴露します。 「今年こそは絶対稼ぎたい!」という人は今すぐご覧ください。


あっさり10万稼ぐためのメルマガ

 

 

それでは始めます。

 

WordPressでSWELLを使っているのに、YouTubeなどの動画をどう埋め込めばいいのか分からない、貼ったのにうまく表示されなくて焦った、という方は多いと思います。

この記事で分かること

  • SWELLで動画やYouTubeを埋め込む3つの基本パターン
  • 動画が表示されない・崩れるときの原因と対処の流れ
  • 表示速度やSEOを意識した、SWELLでの動画活用のコツ

 

  ブログ収益化の教科書プレゼント

↓ ↓ ↓

ba15a

 

SWELLでの動画・YouTube埋め込みの全体像をざっくり理解しよう

ごとう
ごとう

ここでは、細かいテクニックの前に「そもそも、SWELLで動画を埋め込むと何がうれしいのか」「どんな場面で使うと効果的なのか」をざっくり整理しておきます。全体像が見えているだけで、このあとの設定がかなりイメージしやすくなります。

テキストだけよりSWELLでの動画埋め込みが強い理由

私がクライアントさんの記事をチェックするとき、テキストと画像だけで説明しきれない部分には、よく動画の埋め込みを提案します。特に操作解説やレビュー系の記事では、動画があるだけで読者の理解度がぐっと上がります。

テキスト・画像・動画には、それぞれ得意分野があります。

メディア 得意なこと 苦手なこと 向いている場面
テキスト 細かい説明や条件分岐を伝える ニュアンスや雰囲気 手順の概要、注意点の整理
画像 画面の状態やデザインの見た目 動きの説明 ビフォーアフター、画面の一部の紹介
動画(YouTube) 動きや流れ、空気感を伝える 通信量・読み込みの軽さ 操作解説、商品レビュー、サービス紹介

なんでも動画にする必要はありませんが、「動きで見せた方が早いところ」だけSWELLでの動画埋め込みを使うと、記事全体の満足度が一気に上がります。

基本のSWELLでの動画埋め込み3つの方法をマスターしよう

ごとう
ごとう

ここからは、実際の操作に入っていきます。SWELLで動画やYouTubeを埋め込む方法は、ざっくり分けて3パターンです。この3つを押さえておけば、ほとんどのケースに対応できます。

方法別にざっくり比較:どのSWELLのYouTube埋め込みを選ぶべき?

まずは、これから紹介する3つの方法を、ざっくり比較しておきます。どれをメインに使うか決めておくと、記事作成のときに迷いにくくなります。

方法 難易度 カスタマイズ性 向いている人
① URLを貼るだけ とてもやさしい 低め まずは手軽に埋め込みたい人
② YouTubeブロックを使う ふつう 中くらい ブロックエディタに慣れている人
③ 埋め込みコード+カスタムHTML ややむずかしい 高い サイズや動きを細かく調整したい人

最初は①、次に②、それから余裕があれば③、という順番で覚えていくのがおすすめです。

方法①:URLをコピペするだけのSWELLでのYouTube埋め込み

いちばん簡単なのが、YouTubeのURLをそのまま投稿画面に貼り付ける方法です。WordPress標準の機能(oEmbed)が働いて、自動的にプレーヤーに変換してくれます。

ざっくりした手順は次のとおりです。

  • YouTubeで埋め込みたい動画のページを開く
  • ブラウザのアドレスバーからURLをコピーする
  • SWELLの投稿編集画面で、段落ブロックにURLをペーストする
  • 数秒ほど待つと、自動でYouTubeプレーヤーに変わる

これだけで動画が表示されるので、「とにかく一度動かしてみたい」というときは、この方法から試すと安心です。もしプレーヤーに変わらないときは、URLの前後に余計な文字やスペースが入っていないかチェックしてみてください。

方法②:YouTubeブロック・埋め込みブロックを使ったSWELLの動画埋め込み

少し慣れてきたら、ブロックエディタの「YouTubeブロック」や「埋め込みブロック」を使うやり方も便利です。見た目やレイアウトを整えやすく、SWELLらしいデザインにしやすくなります。

使い方のイメージは次のとおりです。

  • ブロックを追加する「+」ボタンから「YouTube」または「埋め込み」を検索する
  • ブロックを挿入し、YouTubeのURLを貼り付ける
  • ブロックのツールバーで「中央揃え」「幅広」「全幅」などを調整する

さらにSWELLのカラムブロックやボタンブロックと組み合わせると、例えばこんなレイアウトが作れます。

  • 左に動画、右にポイントを箇条書きにした2カラム
  • 動画のすぐ下に「資料をダウンロード」などのボタンを置く
  • レビュー記事で、動画の下にメリット・デメリットをまとめる

「デザインも少し整えたいな」という方は、この方法をメインに使うと、SWELLの良さを活かしやすいです。

方法③:埋め込みコード+カスタムHTMLで細かく調整する

もっと細かくコントロールしたい場合は、YouTubeの埋め込みコード(iframe)を使って、カスタムHTMLブロックに貼り付ける方法があります。少し上級者向けですが、自由度はかなり高くなります。

流れはこんな感じです。

  • YouTubeの動画ページで「共有」→「埋め込む」をクリックする
  • 表示されたiframeコードをコピーする
  • WordPressのブロックで「カスタムHTML」を追加する
  • そこにiframeコードを貼り付けて保存する

この方法だと、開始位置やプレーヤーの表示項目など、細かい部分までコードで調整できます。ただ、HTMLの知識が少し必要になるので、いきなりここから入るより、まずは①と②を使いこなしてから挑戦するのがおすすめです。

SWELLのYouTube埋め込みをきれいに見せる設定とデザインのコツ

ごとう
ごとう

ひとまず動画を埋め込めるようになったら、次は「どう見せるか」です。同じ動画でも、置き方や前後の文章を工夫するだけで、読者の印象がかなり変わります。ここでは、SWELLらしくきれいに見せるためのコツを紹介します。

レスポンシブ対応でSWELLの動画が切れないようにする

いまはスマホからブログを見る人が多いので、動画もスマホ表示を前提に考えるのが安全です。PCでちょうどよく見えても、スマホだと窮屈だったり、逆に大きすぎたりすることがあります。

チェックしておきたいポイントを整理すると、こんなイメージです。

デバイス ありがちな見え方 チェックポイント
PC 横長で上下の余白が目立つ 全幅にしすぎず、周りの文章とのバランスを見る
タブレット 見やすいが、情報量が多くなりがち 見出しとの間隔を少し広めに取る
スマホ 縦に長くなり、スクロールが大きい 動画の前後の文章を短く区切って読みやすくする

記事を公開したら、自分のスマホで動画部分だけじっくり確認してみてください。読者と同じ目線で見ると、「ここに一言入れた方が親切だな」など、細かい気づきが出てきます。

YouTube動画の位置・レイアウトをSWELLらしく整える

動画は、ただ貼るだけだと「ぽん」と浮いてしまうことがあります。SWELLには見出しやボックス、リストなどのデザインが揃っているので、周りのブロックと組み合わせてあげると、ぐっと見やすくなります。

例えば、私はよく次のような置き方をしています。

  • 動画の前に「ここからは動画で見たい方はこちら」と一文添える
  • 動画の下に「動画の要点」を3〜5行で箇条書きにする
  • レビュー記事なら、動画のあとにメリット・デメリットのボックスを入れる

こうしておくと、動画をじっくり見る時間がない人でも、下の箇条書きを読むだけで内容がつかめます。SWELLでの動画埋め込みとテキストの良さを、両方活かすイメージです。

アイキャッチやトップにSWELLでのYouTube埋め込みを使うときの注意点

SWELLには、記事のアイキャッチやトップページのメインビジュアルに動画を使う機能もあります。うまく使うと「プロっぽいサイトだな」と感じてもらいやすく、ブランディングにもつながります。

ただし、目立つ場所に動画を使うときは、次の点に注意した方がいいです。

  • 動画ファイルの容量が大きいと、表示が重くなる
  • 自動再生の音声は嫌われやすいので使わない方が無難
  • 派手なアニメーションが続くと、肝心のコンテンツに集中しづらい

「ここはどうしても見てほしい」という場面にだけ動画を使い、それ以外は画像+テキストでしっかり説明する、くらいのバランス感覚がちょうどいいと思います。

トラブル別:SWELLで動画が埋め込みできない・表示されないときの対処法

ごとう
ごとう

 

 

 

【稼げるキーワード教えます】
▼  ▼  ▼
ba15a

 

 

 

ここからは、よくあるトラブルと対処法をまとめていきます。実際に多いのは、「貼ったのに何も出ない」「枠だけ出て真っ黒」「スマホだけ表示されない」といった相談です。焦りがちな部分なので、落ち着いて一つずつ確認していきましょう。

まずは落ち着いて確認したい基本チェック

いきなり難しい設定をいじる前に、まずは基本的なところから見直してみてください。意外と、ここで解決することが多いです。

  • その動画はYouTube上で問題なく再生できるか(削除されていないか)
  • 公開設定が「公開」「限定公開」になっているか
  • 以前は同じURLで正常に表示されていたか
  • URLの前後に空白や余計な文字が紛れ込んでいないか

別の動画のURLに差し替えて試してみて、それだけ表示されるようなら、元の動画側に原因がある可能性が高いです。

症状別に見る、SWELLのYouTube埋め込みのよくある原因

よくある症状と、そのとき疑いたい原因を整理すると、次のようになります。

症状 主な原因 まず試したいこと
何も表示されない URLのミス、埋め込み禁止、プラグイン干渉 URLを貼り直す、別の動画で試す
枠だけ出て真っ黒 読み込みエラー、キャッシュの影響 ブラウザの再読み込み、キャッシュの削除
スマホだけ表示されない Lazyloadや高速化設定の影響 SWELLの高速化設定を一時的にOFFにして様子を見る
リンクカードにならない URL形式の違い、埋め込み設定 httpではなくhttpsのURLにする、URLを1行だけにする

特にSWELLは、高速化や遅延読み込みの機能がしっかりしているテーマです。便利な反面、設定によってはYouTubeの読み込みと相性が悪くなることもあるので、「最近高速化まわりを触っていないか」も思い出してみるとヒントになります。

YouTube側の制限やURL形式でつまずきやすいポイント

原因がSWELL側ではなく、YouTubeの仕様にあるケースも少なくありません。ここを勘違いしていると、いくらテーマ側の設定を変えても解決しないので注意が必要です。

  • 投稿者が「外部サイトへの埋め込み不可」に設定している動画は表示できない
  • 著作権的に問題のある動画は、プレーヤー側で制限されることがある
  • shorts用のURLなど、通常の埋め込みと形式が違うリンクはうまく動かないことがある

この場合は、別の公式チャンネルの動画を探すか、自分で似た内容の解説動画を作るしかありません。「SWELLに問題があるのか」「YouTubeの動画自体に原因があるのか」を切り分けて考えると、遠回りせずに済みます。

表示速度とSEOを意識したSWELLの動画埋め込みのコツ

ごとう
ごとう

動画は便利ですが、そのぶん読み込みが重くなりがちです。ここでは、SWELLで動画を埋め込みつつ、表示速度やSEOのバランスも取るためのコツをお伝えします。

YouTube埋め込みが重くなる理由と、SWELLでできる配慮

YouTubeプレーヤーは、見た目のシンプルさに対して、裏側ではけっこう多くのファイルを読み込んでいます。サムネイルやスクリプトなども一緒に読み込まれるので、ページ全体の読み込み時間に影響しやすいです。

SWELL側には、高速化に関する設定がいくつか用意されていて、画像やiframeの読み込みタイミングを調整したり、不要なスクリプトを読み込まないようにしたりできます。ただ、テーマやプラグインの組み合わせによっては、これがYouTube埋め込みとうまくかみ合わないこともあります。

もし「動画を外すとサクサクだけど、入れると急に重くなる」という場合は、一度高速化関連の設定をすべてOFFにし、問題の動画が正常に表示されるかを確認してみてください。そのうえで、1つずつ設定をONに戻していき、どこで不具合が出るかをチェックしていくと原因を特定しやすくなります。

ページの種類ごとに、動画の本数を決めておく

感覚的な話にはなりますが、私が運営や添削の現場で意識している「動画本数の目安」はこんな感じです。

ページタイプ 動画本数の目安 補足
通常のブログ記事 1〜2本 重要な操作やポイントだけ動画にする
レビュー・比較記事 2〜3本 全体説明+開封や使用感などを別動画にする
LP・トップページ 1本まで メインビジュアル用の動画だけに絞る

もちろんジャンルにもよりますが、1ページに動画が3本を超えてくると、体感的に重さが気になり始めます。SWELLでの動画埋め込みは、あくまで「ここぞ」という場面の補強に使い、その他の情報はテキストや画像でしっかり伝えるのが、SEO的にもバランスが良いと感じています。

著作権・マナーにも少しだけ気を配ろう

最後に、動画を埋め込むうえでのマナーについても軽く触れておきます。SWELLでの埋め込み自体は簡単ですが、使う動画の選び方によっては、サイトの信頼性にも関わってきます。

  • 公式チャンネルや権利がはっきりしている動画を優先する
  • テレビ番組や映画の一部を切り取ったような動画は避ける
  • 自分の動画を使うときも、BGMや素材のライセンスを確認しておく

ここを丁寧にしておくと、広告主や企業とのタイアップが決まったときにも安心です。「埋め込んだ動画は、読者にもおすすめできるものか」を一度立ち止まって考える癖をつけておくと、長い目で見てプラスになります。

実例でイメージ:私ならこう使うSWELLの動画埋め込みパターン

ごとう
ごとう

ここまでの内容を踏まえて、実際に私がよく提案しているSWELLでの動画埋め込みパターンをいくつか紹介します。具体的なイメージが湧くと、自分のサイトではどう使えそうか考えやすくなると思います。

ブログ記事×SWELLのYouTube埋め込みの定番パターン

操作解説やツール紹介の記事では、次のような構成が使いやすいです。

  • 冒頭で「全体の流れ」をまとめた短めの動画を1本入れる
  • 本文はスクリーンショットとテキストで、手順を一つずつ丁寧に説明する
  • 記事の最後に「動画で復習したい人向け」に、まとめ動画を置く

こうしておくと、時間がない読者は冒頭の動画だけ、しっかり学びたい人は本文を読み込み、復習したい人は最後の動画を見る、というふうに、それぞれのスタイルに合わせて使ってもらえます。SWELLのYouTube埋め込みをうまく記事全体の流れに組み込むイメージです。

トップページ・LPでのSWELL動画埋め込み

サービスサイトや商品ページのLPなど、ちょっと「見せ方」にこだわりたいページでも、SWELLでの動画埋め込みは役に立ちます。ただ、ここは特に目的をはっきりさせておかないと、動画だけ目立って肝心の説明が読まれない、ということになりがちです。

パターン別に整理すると、次のような感じです。

パターン 主な目的 動画の位置 ポイント
ブログ型トップページ 運営者の人柄や雰囲気を伝える 中段 自己紹介やサイトのテーマを短く話す
サービスLP 信頼感や具体的なイメージを持ってもらう 上部〜中段 実際の画面や導入事例をコンパクトに見せる
商品販売ページ 使用感をリアルに伝える 中段 商品の利用シーンを短い動画で紹介する

どのパターンでも共通しているのは、「動画のすぐ近くに、テキストで要点を一行でまとめておく」ということです。動画を見ない人にも情報が届きますし、見た人にとっても復習用になります。

FAQやサポート記事にSWELLのYouTube埋め込みを使う

お問い合わせ対応の手間を減らしたい場合、FAQページやサポート記事にSWELLでのYouTube埋め込みを使うのもおすすめです。特に、管理画面の操作などは動画の方が伝わりやすい場面が多いです。

例えば、次のような作り方が考えられます。

  • 見出しに「〇〇の設定方法が分からないとき」といった質問文をそのまま書く
  • 見出しのすぐ下に、その操作を解説した短い動画を埋め込む
  • 動画の下に、手順を箇条書きでテキストでも残しておく

こうしておくと、検索から来た読者も、自分の悩みとぴったり合う項目を見つけやすくなりますし、動画でざっくり把握して、テキストで細かいところを確認するといった使い方もしてもらえます。

よくある質問(SWELLの動画埋め込みまわり)

ごとう
ごとう

SWELLの動画埋め込みやYouTube埋め込みについて、よく聞かれる質問とその回答をまとめました。実際の相談でも多いポイントなので、気になるところだけでもチェックしてみてください。

Q1. SWELLのYouTube埋め込みは、URLと埋め込みコードどちらが良いですか?

A. 基本的には、URLを貼るだけの方法で問題ありません。シンプルですが十分実用的です。

プレーヤーの表示項目や開始位置などを細かく調整したいときだけ、YouTubeの埋め込みコードを使ってカスタムHTMLで編集する、という使い分けで大丈夫です。まずはURL方式で慣れてから、必要に応じてコードに挑戦する方が、混乱せずにステップアップできます。

Q2. SWELLで動画をたくさん埋め込むとSEO的に不利になりますか?

A. 動画の本数そのものが直接のマイナスというより、「ページがどれくらい重くなるか」がポイントです。SWELLでの動画埋め込みを1ページに何本も入れると、そのぶん読み込みが増えて、表示速度が落ちやすくなります。

通常の記事なら1〜2本、長めのレビュー記事でも2〜3本くらいまでにしておくと、体感的にも読みやすく、検索エンジンから見ても無理のないバランスになりやすいと感じています。

Q3. スマホだけSWELLのYouTube埋め込みが表示されません。どうすればいいですか?

A. スマホだけ動画が出ない場合は、SWELLの高速化設定や、画像・iframeの遅延読み込み設定が影響しているケースが多いです。

一度、高速化まわりの設定をすべてOFFにしてから、問題のページをスマホで再表示してみてください。それで動画が表示されるなら、どれかの設定が原因なので、1つずつONに戻しながら確認していきます。うまくいかないときは、キャッシュ系プラグインも含めて、一時的に無効化して様子を見るのがおすすめです。

まとめ:SWELLの動画埋め込みを今日から一つだけ試してみよう

この記事のポイントを整理します

  • SWELLでの動画埋め込みは「URLを貼る」「YouTubeブロックを使う」「埋め込みコードをHTMLに貼る」の3パターンを覚えておけば安心
  • スマホ表示や動画の前後の文章を工夫することで、同じ動画でも読みやすさが大きく変わる
  • 動画が表示されないときは「基本チェック」→「SWELLの設定」→「YouTube側の制限」の順で原因を切り分ける
  • 1ページあたりの動画本数を決めておくと、表示速度とSEOのバランスを保ちやすい
  • FAQやサポート記事、トップページなどでも、目的を決めて動画を使うとサイト全体の質が上がる

今日からできる最初の一歩としては、まず「自分のサイトで一番読まれている記事」を一つだけ選んでみてください。そして、その記事の中で読者がつまずきやすそうな部分を探し、そこに短い解説動画を1本だけSWELLで埋め込んでみましょう。

そのうえで、自分のスマホやPCで表示を確認し、読み込みの速さや見やすさ、読者の反応を少しずつチェックしていけば、無理なくSWELLでの動画埋め込みの腕が上がっていきます。

 

 

記事を読んだらコチラ
▼  ▼  ▼
ba15a