SWELLの動画サイズは？完全ガイド｜失敗しない最適解をご紹介

この記事では、SWELLで最適な動画サイズとその設定方法をお伝えします。

一言でまとめると、「用途ごとの目安サイズ」「SWELL側の設定」「動画ファイルの容量」、この3つをセットで考えれば、SWELLの動画サイズまわりの悩みはかなり解消できます。

SWELLの動画サイズで何が大事なのか整理しよう

SWELLでよく使う動画サイズの目安一覧

先に、SWELLでよくあるシーンごとの動画サイズの、おおまかな目安を表にしておきます。

用途	推奨解像度（PCの目安）	推奨解像度（スマホの目安）	アスペクト比のイメージ
トップのメインビジュアル用動画	1600×900 前後	900×1600〜1200×1600 前後	16:9 〜 やや縦長
ヒーローヘッダー動画	1600×900〜1920×1080	900×1600 前後	16:9
記事内に埋め込む説明用動画	1280×720	テーマ側の自動リサイズに任せる	16:9
背景のように流すループ動画	1280×720	720×1280	16:9 または少し縦長

あくまで「この辺りにしておくと大きく外しにくい」という目安です。

このあと、SWELLの設定やサイトの目的に合わせて、もう少し細かく調整していきます。

SWELLメインビジュアルと動画サイズの関係

メインビジュアルは、サイトを開いた瞬間に一番最初に目に入る「顔」の部分です。

ここに動画を使うと一気にサイトの雰囲気が出ますが、そのぶん次のような悩みも起こりやすくなります。

• スマホで見ると、人物の顔やテキストが途中で切れてしまう
• PCとスマホで見える範囲が違い、想定していた構図にならない
• 動画ファイルが重くて、表示までの時間が長くなる

つまり、メインビジュアルで扱う動画サイズは、「見え方（構図）」「PCとスマホの表示領域」「容量」のバランスをどう取るか、という話になります。

ここを「とりあえずフルHDで書き出して、そのまま突っ込む」でやってしまうと、どこかで引っかかりやすいので注意したいところです。

SWELL動画サイズの基本：解像度と容量をざっくり理解しよう

解像度（px）とアスペクト比の考え方

動画サイズの話で必ず出てくるのが、「px（ピクセル）」と「アスペクト比（縦横比）」です。

ざっくりとイメージをまとめると、次のようになります。

• 横の長さ × 縦の長さ ＝ 解像度（例：1600×900）
• 横：縦の比率 ＝ アスペクト比（例：16:9）

よく見るサイズと比率を表に並べると、こんな感じです。

解像度	アスペクト比	よくある用途
1280×720	16:9	YouTube用HD動画、説明用の動画
1600×900	16:9	SWELLのメインビジュアルに使いやすいサイズ
1920×1080	16:9	フルHD、PC向けの高画質動画など
900×1600 など	9:16 付近	スマホ向けの縦長動画、縦型メインビジュアルなど

どのサイズが正解かというより、「どの見え方を優先したいか」で選ぶイメージです。

メインビジュアルに人物やテキストを載せる場合は、上下左右が多少切れても大丈夫なように、重要な要素を中央寄せにしておくと安心です。

容量（MB）と読み込み速度の関係

同じ解像度でも、動画の容量が大きいとページの読み込みが重くなります。

ここはSEOの面でも、ユーザーの体験の面でも、かなり重要なポイントです。

目安としては、次のように考えておくと分かりやすいです。

• メインビジュアル用の短いループ動画なら、数MB〜おおよそ10MB前後に収める意識
• 長くしゃべる説明やレビューは、YouTubeなど外部サービスに任せる

ざっくりとした容量のイメージも出しておきます。

解像度	長さの目安	圧縮レベル中程度のときの容量イメージ
1280×720	約5〜10秒	数MB前後になりやすい
1600×900	約5〜10秒	数MB〜10MB前後になることが多い
1920×1080	約5〜10秒	内容によっては10MBを超えやすい

実際の容量は、素材や動きの激しさ、圧縮設定などでかなり変わります。

ただ、「解像度が上がるほど、同じ長さなら容量も増えやすい」というイメージだけは持っておくと役に立ちます。

動画の長さとループの考え方

メインビジュアルの動画サイズを考えるときは、「どのくらいの長さの動画にするか」もとても大事です。

おすすめのイメージとしては、次のような感じです。

• 5〜10秒ほどの短いループ動画にする
• 動きはあるけれど、情報量は詰め込みすぎない
• 音声はオフ前提で考える（BGMを入れるなら別で検討）

このくらいの長さと内容にしておくと、雰囲気は出しつつ、容量も現実的な範囲に収まりやすいです。

私も最初は自己紹介を長々としゃべる動画をトップに置いていましたが、正直かなり重くなりましたし、見る側もそこまで求めていないなと反省しました。

SWELLのメインビジュアルで動画サイズを設定する手順

カスタマイザーでメインビジュアル動画を設定する流れ

メインビジュアルに動画を設定するときの大まかな手順は次の通りです。

• 外観 → カスタマイズ → トップページ → メインビジュアル を開く
• 背景画像・背景動画のところで動画ファイルをアップロードする
• 必要に応じて、PC用とスマホ用をそれぞれ登録する
• メインビジュアルの高さや表示方法を調整する

この「高さ」や「表示方法」の設定が、体感としての動画サイズにかなり影響してきます。

高さ設定3パターンとSWELL動画サイズの相性

SWELLには、メインビジュアルの高さを決める方法がいくつか用意されています。

イメージしやすいように、代表的な3パターンを表にまとめます。

設定項目	特徴	向いているケース
画像・動画サイズのまま	アップロードした動画の縦サイズがそのまま表示される	あらかじめサイズをきっちり作り込んだ動画を使うとき
数値で指定する	メインビジュアルの高さをpxで指定できる	ブログ型サイトで、一定の高さにそろえたいとき
ウィンドウサイズにフィットさせる	ブラウザの高さに合わせて画面いっぱいに表示される	LPやブランドサイトで、迫力ある見せ方にしたいとき

いわゆるブログらしいレイアウトなら、「数値で指定」にして、PC版は500〜700px程度にしておくと、情報量と見やすさのバランスが取りやすいと感じています。

一方で、1ページ完結のLPやブランドサイトのトップなら、「ウィンドウサイズにフィットさせる」を使って、思い切って全面動画にするのも相性がいいです。

PC用とスマホ用で別の動画サイズを用意するべき？

SWELLでは、メインビジュアルの背景画像や動画を、PC用とスマホ用で分けて登録できます。

ここをひと手間かけて分けておくと、スマホでの見え方がかなり良くなります。

• PC用は横長の16:9で、1600×900前後を目安にする
• スマホ用は縦長寄りで、900×1600前後をイメージする
• どちらも人物やテキストは中央寄せを意識する

私は、PC版は横長の動画で雰囲気重視、スマホ版は少し情報寄りの構図にして、役割を分けることが多いです。

同じ動画をそのまま両方に使うと、どちらかで構図が崩れがちなので、できればPC版とスマホ版で別々に用意することをおすすめします。

記事内のSWELL動画サイズとYouTube埋め込みの調整

記事内の動画は基本的にYouTube任せでOK

記事内に長めの動画をそのままアップロードすると、サーバーにも負荷がかかりますし、ページの表示もかなり重くなります。

そのため、次のような使い分けにしておくのが無難です。

• 解説やレビューなど、長めの動画はYouTubeやVimeoにアップする
• 記事内ではURLを貼って埋め込むか、専用ブロックを使って表示する

この場合、WordPressやSWELL側でレスポンシブ対応が効いてくれるので、動画そのもののサイズより、「埋め込みプレーヤーの表示サイズ」を調整するイメージになります。

埋め込み方法ごとのメリット・デメリット

記事内の動画を埋め込むときによく使う方法を、ざっくり比較しておきます。

方法	メリット	デメリット
YouTubeブロックにURLを貼る	一番簡単で、レスポンシブ対応もそのまま効く	細かい幅や高さの指定はほとんどできない
埋め込みコード（iframe）をそのまま貼る	widthとheightを数値で指定できる	HTMLコードに慣れていないと、少しハードルが高い
プラグインでレスポンシブ対応する	テーマに依存せず、見え方をそろえやすい	プラグインの導入や管理の手間が増える

SWELLはもともとレスポンシブデザインがしっかりしているので、基本的には「YouTubeブロックにURLを貼る」で問題ありません。

それでも細かく動画サイズを調整したいときだけ、iframeのwidthとheightを触る、というくらいのスタンスで十分だと思います。

アスペクト比が崩れるときのチェックポイント

「16:9のつもりで作ったのに、埋め込んだら詰まった感じになる」「スマホで上下に変な余白が出る」など、動画の比率に違和感が出ることもあります。

そんなときは、次のチェックポイントを順番に見てみてください。

• 元の動画ファイルの比率が、本当に16:9になっているか
• iframeのwidthとheightの比率が16:9になっているか（例：640×360など）
• 親要素や独自のCSSで、高さや余白が強制的に変えられていないか

特に、自分で追加したCSSとテーマ側のスタイルがぶつかっていると、思わぬところで高さが変わることがあります。

一度シンプルな状態で表示してみて、問題なければ自作CSSを少しずつ戻していく、というやり方も有効です。

SWELL動画サイズを決めるときのデザイン・構図のコツ

安全エリアを意識して構図を決める

メインビジュアル用の動画や画像を作るときは、「安全エリア」を意識して構図を決めると失敗しにくくなります。

安全エリアとは、PCでもスマホでも比較的安定して表示されやすい、中央寄りの範囲のことです。

• ロゴやキャッチコピー、人物の顔などは、できるだけ中央寄りに配置する
• 上下左右の端には、大事な情報を置かないようにする
• スマホで少し上下が切れても大丈夫な構図にしておく

こうしておくと、多少動画サイズや高さ設定を変えても、致命的な崩れは起こりにくくなります。

私も以前、画面の端ギリギリに文字を置いてしまい、スマホでほぼ読めなくなるという失敗をしたことがあるので、本当に中央寄せは大事だと実感しています。

サイトタイプ別・おすすめSWELL動画サイズパターン

サイトの種類によって、合う動画サイズや見せ方は少しずつ変わってきます。

代表的なパターンをざっくり表にすると、こんなイメージです。

サイトタイプ	メインビジュアル動画のサイズ感	高さ設定のおすすめ	コメント
個人ブログ・雑記ブログ	1600×900 前後で、動きは控えめなループ動画	数値で指定（PCは500〜700px程度）	読者がすぐ本文に進めるよう、ほどよい高さにする
専門ブログ・メディア	1600×900で、情報より雰囲気寄りの映像	数値で指定またはウィンドウフィット	少しリッチな印象を出したいときに合う
コーポレートサイト	1600×900〜1920×1080で、会社の雰囲気が伝わる動画	ウィンドウサイズにフィット	画面いっぱいに動画を見せる構成と相性がよい
LP・サービス紹介ページ	メリハリのある1600×900前後の動画	ウィンドウサイズにフィット	動画とCTAボタンをセットで演出したいとき向き

自分のサイトがどのタイプに近いかをイメージしながら、メインビジュアルに使う動画サイズや高さ設定を考えてみてください。

「このタイプに近いから、このパターンをベースにしよう」と決めてしまうと、選択肢が整理されて楽になります。

SWELL動画サイズとサイト高速化のポイント

動画の圧縮と形式を見直す

まずは、動画そのものをできるだけ軽くしておくことが大事です。

基本的な考え方は次の通りです。

動画編集ソフトやオンラインの圧縮ツールで、「画質はそこそこ」「容量は軽め」の中間を探すイメージで設定してみてください。

私は、最初は少し高画質寄りで書き出し、容量が大きすぎたらビットレートを少しずつ下げていく、というやり方に落ち着きました。

SWELLの高速化設定も合わせてチェック

SWELLには、表示速度を上げるための高速化機能がいくつか用意されています。

動画サイズを調整したタイミングで、高速化の設定も一緒に見直しておくと安心です。

設定項目	設定場所のイメージ	おすすめの使い方
画像・メディアの遅延読み込み	高速化関連の設定画面	メインビジュアル以外の画像や動画は遅延読み込みを有効にする
キャッシュ機能	SWELLの高速化タブ	特別な理由がなければ基本的にオンにする
不要なスクリプトの読み込み	詳細設定や高速化の項目	使っていない機能やスクリプトはできるだけオフにする

メインビジュアルはページの一番上にあるため、どうしても読み込みの影響を受けやすい場所です。

そのぶん、ほかの画像やスクリプトを軽くしてあげることで、全体としての体感速度をカバーしていくイメージを持っておくとよいと思います。

よくある質問：SWELL 動画サイズ編

Q1. SWELL公式で「この動画サイズが正解」と決まっているのですか？

A. はっきりと「このサイズにしなければならない」という決まりはありません。

SWELLの公式ドキュメントでは、機能や設定の場所は丁寧に説明されていますが、具体的なピクセル数までは縛っていない印象です。

この記事で紹介している1600×900や1280×720といった数値は、実際に使ってみて大きな問題が出にくい、おおよその目安として捉えてもらえれば大丈夫です。

Q2. SWELL 動画サイズは必ずPC用とスマホ用で分けるべきですか？

A. 絶対に分けないといけないわけではありませんが、できれば分けたほうがきれいに見えます。

PCとスマホでは画面の形が違うので、同じ動画をそのまま使うと、どちらか一方で人物やテキストが切れやすくなります。

余裕があるなら、PC用には横長の動画、スマホ用には少し縦長を意識した動画サイズを用意すると、SWELLでの見え方がかなり安定するはずです。

Q3. SWELLのメインビジュアルに動画を入れると、必ずサイトが重くなりますか？

A. 条件によっては重く感じることもありますが、必ずしも使えないほど遅くなるわけではありません。

ポイントを押さえれば、メインビジュアルに動画を使いつつ、実用的な速度を保つことは十分可能です。

• 動画の長さを短めのループにする
• 解像度を1600×900前後に抑える
• 圧縮して容量を数MB〜10MB前後にする
• SWELLの高速化設定を併せて調整する

メインビジュアルに動画を使うかどうかは、「雰囲気アップのメリット」と「少し重くなるかもしれないデメリット」を比べて決めるイメージで考えてみてください。

まとめ：SWELLの動画サイズは「用途×速度」で決めよう

この記事の内容を振り返ります

今日からできる最初の一歩としては、自分のサイトのトップページをPCとスマホの両方で開いて、次の点をチェックしてみてください。

• メインビジュアルの動画で、人物やテキストが途中で切れていないか
• 動画の読み込みが、体感として明らかに重くなっていないか

もし気になるところがあれば、この記事で紹介した目安サイズを参考に動画を書き出し直してみたり、メインビジュアルの高さ設定や高速化設定を少しずつ調整してみてください。

一度自分の中に「このくらいの動画サイズなら安心」といった基準ができると、あとはその基準をサイトの目的に合わせて微調整していくだけです。

私も試行錯誤しながら少しずつ調整してきたので、この記事があなたのSWELLでの動画まわりの悩みを減らすきっかけになればうれしいです。