動画制作の基本 youtube、Tiktok、Instagram、Xのサイズ比較表（保存版）
ちょびとみい
５０歳までにフリーランス
【保存版】Webページに直接動画を埋め込む６つのパターン
ちょびとみい
記事内に商品プロモーションを含む場合があります
ebデザイナー基礎知識
こちらの記事でわかること
動画の埋め込み方を覚えよう
| 項目 | 評価 |
|---|---|
| この記事をおすすめする人 | webデザイナー初心者（つまり私のこと） |
| 難易度 |
動画を直接埋め込む方法はいくつもある！
ランディングページをデザイン時に、動画の埋め込みを指定することがありました。
その際、「webページ内の動画の埋め込み」について、わたしの知識不足によりコーダーさんの工数を増やすことになった記憶があります。
動画の埋め込みは、主に２つ。
YouTubeなどのサイトを埋め込む方法と、直接mp4などの動画を埋め込む方法があります。
今回は、直接mp4の動画を直接埋め込む場合の、
６つの設定パターンをまとめました。
あくまでもwebデザイナーとしての基礎知識です。
コーディングのご紹介ではありませんので、ご了承ください。
気になる箇所だけ見ることもできます。
目次から、気になる箇所をクリックまたはタップしてください。
１. mp4を直接埋め込むHTMLの属性
まずはコーダーさんとのやり取りやクライアントへの提案の際に、覚えておく必要があった属性をいくつかご紹介します。
覚えとこう！
<video>タグに設定される属性
autoplay・・・・・「自動再生」（ユーザーにクリックさせずに再生）
playsinline・・・・「インライン再生」（指定された領域で再生する）
（スマホで動画を再生するときに全画面にはならない）
loop・・・・・・・「繰り返し再生」
controls・・・・・「コントロールパネル」
（再生/一時停止/音量調整/シークバーが表示）
poster・・・・・・「サムネイル画像あり」の動画（指定できる）
muted・・・・・・「動画の音声を消音」にする
これは最低限、覚えておきたいところです。
２. mp4を直接埋め込む６つのパターン
先程の属性を組み合わせたものです。よく使われる、６つパターンに分類しました。
1. autoplay muted playsinline loop controls
自動再生・消音・インライン再生・繰り返し再生・コントロールパネルあり
2. autoplay muted playsinline loop
自動再生・消音・インライン再生・繰り返し再生
3. autoplay muted playsinline
自動再生・消音・インライン再生
4. playsinline controls
インライン再生・コントロールパネルあり
5. playsinline controls poster
インライン再生・コントロールパネルあり・サムネ画像あり
6. controls poster
コントロールパネルあり・サムネ画像あり
私はコーディングができないので、見本動画をここへ埋め込むことはできないので、わかりにくいですね。一覧動画を表示できたら良かったのですが、、、
３. 用途による６つの動画の使い分け
動画の用途により、埋め込み方も変わります。先述の６つのパターンを用途別にご紹介します
A. １〜３「Autoplay」
クリックしなくても再生する自動再生がおすすめな動画はコレ
たとえば、ユーザーにクリック再生させるのが難しそうな動画（記事と同じ内容の動画など）は自動再生「autoplay」がベストです。
またトップ画像（アイキャッチ）を動画にする場合も、自動再生「autoplay」になります。
更にこの場合は、１度きりの再生ではなくループ再生「loop」にして常に動画で惹きつけたいところです。
ただしオート再生・ループ再生は音声は、設定しなくてもミュートになるので動画の内容にも注意が必要です。
トップ画像の場合は、先程の分類の
2番の autoplay muted playsinline loop
（自動再生・消音・インライン再生・繰り返し再生）ということになります。
B. ４〜６「Control」
クリックしてもらえる動画はより使いやすくするのがおすすめ
逆に、記事内容の詳細を動画にまとめた場合は、「詳しくはこちらの動画をチェック」みたいなコピーを入れてクリックさせるのが有効です。
そういう場合は、コンパネ「control」や全画面再生「poster」がオススメです。
特にユーザーが繰り返し再生するような内容の動画は、一時停止や音の有り無しをユーザーが手動で行えるようにコンパネを表示させるほうが良いので、「controls」を指定しましょう。
説明動画におすすめなのは、
５番の playsinline controls poster
（インライン再生・コントロールパネルあり・サムネ画像あり）
または６番の controls poster
（コンパネあり・全画面表示）がオススメです。
全画面再生「poster」に関しては、広告でもよく使われる手法です。動画バナーで興味を引き、クリックさせたら全画面で広告を流すという手法をよくみます。
まとめ
コーディングができなくても、webデザインに関わるなら必要な知識があります。
基礎知識を身に着けて業務をスムーズに行いたいと思います。
最後までご覧いただきありがとうございました♪
ABOUT ME
都内の広告代理店で働く、アートディレクターです。
デザイナー必須のAdobeアプリの操作方法や、
小技とpremiereproの初心者の備忘録を中心にご紹介しています。
Adobe Illustrator・Photoshop歴／20年
Adobe premierepro歴／2024年5月から始めた超初心者
ブログ歴／2024年2月から始めた超初心者
デザイナー必須のAdobeアプリの操作方法や、
小技とpremiereproの初心者の備忘録を中心にご紹介しています。
Adobe Illustrator・Photoshop歴／20年
Adobe premierepro歴／2024年5月から始めた超初心者
ブログ歴／2024年2月から始めた超初心者
