HTML videoタグのposter属性を初心者向けに解説！サムネイル設定の正しい方法
生徒
「HTMLのvideoタグで動画を表示するとき、poster属性って何ですか？」
先生
「poster属性は、動画が再生される前に表示されるサムネイル画像を設定するための属性ですよ。」
生徒
「サムネイルってどうして必要なんですか？」
先生
「動画が読み込まれるまでの間、空白や黒い画面だけだと見た目が悪くなるので、サムネイルを設定して視覚的に分かりやすくするんです。」
生徒
「なるほど。簡単に設定できますか？」
先生
「はい、ほんの少しHTMLを書くだけで設定できます。それでは順を追って説明しますね。」
1. videoタグとposter属性の基本
HTMLのvideoタグはWebページで動画を表示するためのタグです。poster属性を使うと、動画が再生される前に表示される画像（サムネイル）を設定できます。これにより、ユーザーは動画の内容を事前にイメージでき、ページの見た目も整います。
<video src="/img/sample150-100.mp4" poster="/img/sample150-100.jpg" controls></video>
2. poster属性の使い方
poster属性には動画のサムネイルとして表示したい画像のパスを指定します。画像のサイズは動画の表示サイズに合わせるときれいに表示されます。画像の形式はjpg、png、gifなどが使えます。
<video controls poster="/img/sample120-120.jpg">
<source src="/img/sample150-100.mp4" type="video/mp4">
</video>
3. poster属性とcontrols属性の組み合わせ
controls属性をつけると再生ボタンや音量調整バーが表示されます。poster属性と組み合わせることで、動画がまだ再生されていないときに見栄えの良いサムネイルを表示し、再生ボタンを直感的に押せるようになります。
<video controls poster="/img/sample150-100.png">
<source src="/img/sample150-100.mp4" type="video/mp4">
</video>
4. 複数形式の動画とposter属性の使い方
動画の形式はブラウザによって対応が異なる場合があります。mp4だけでなく、WebMやOGGなど複数の形式を用意して、poster属性で共通のサムネイルを設定すると互換性が高くなります。
<video controls poster="/img/sample150-100.jpg">
<source src="/img/sample150-100.mp4" type="video/mp4">
<source src="/img/sample150-100.webm" type="video/webm">
</video>
5. 画像サイズとアスペクト比の注意点
posterに指定する画像は動画のアスペクト比に合わせると見た目が自然です。横長の動画に縦長の画像を設定すると、引き伸ばされて見栄えが悪くなることがあります。動画と同じ比率の画像を用意しましょう。
<video controls poster="/img/sample150-100.jpg" width="320" height="180">
<source src="/img/sample150-100.mp4" type="video/mp4">
</video>
6. poster属性を使うときのSEO対策ポイント
poster属性で設定した画像にはalt属性のようなテキストは直接付けられませんが、動画タグの前後に説明文を置くことで検索エンジンに内容を伝えられます。動画の内容を簡潔に文章で説明することで、動画コンテンツもSEOに強くなります。
<p>この動画は、Webデザインの基本を解説しています。動画のサムネイルはposter属性で設定されています。</p>
<video controls poster="/img/sample150-100.jpg">
<source src="/img/sample150-100.mp4" type="video/mp4">
</video>
7. モバイル対応でのposter画像の扱い
スマホやタブレットでもposter画像は表示されますが、画面サイズに応じて見切れたり小さくなる場合があります。CSSでmax-widthを100%に設定すると、画面幅に合わせて自動で縮小され、レスポンシブ対応が可能です。
<video controls poster="/img/sample150-100.jpg" style="max-width:100%;">
<source src="/img/sample150-100.mp4" type="video/mp4">
</video>
8. poster属性とアクセシビリティ
poster画像は視覚的なヒントになりますが、スクリーンリーダーでは読み上げられません。動画の内容を説明するテキストや字幕を追加すると、アクセシビリティが向上し、SEOにも良い影響があります。
<p>動画内容の説明: この動画ではHTMLの基本タグを紹介しています。</p>
<video controls poster="/img/sample150-100.jpg">
<source src="/img/sample150-100.mp4" type="video/mp4">
</video>
まとめ
今回の記事では、HTMLのvideoタグにおけるposter属性について、初心者向けに丁寧に解説しました。poster属性は動画が再生される前に表示されるサムネイル画像を指定するもので、ユーザーが動画の内容を事前に視覚的に把握できるだけでなく、ページ全体の見た目を整える役割もあります。具体的には、動画タグの基本的な使い方からposter属性の指定方法、controls属性との組み合わせ、複数形式の動画への対応、画像サイズやアスペクト比の注意点、SEOを意識した動画説明文の設置、モバイル対応、さらにアクセシビリティへの配慮までを解説しました。これらの知識を活用することで、よりユーザーに優しく、見やすく、検索エンジンにも適したWebページを作成できます。
poster属性の基本ポイント
- 動画が再生される前に表示されるサムネイル画像を設定できる
- 画像形式はjpg、png、gifが一般的で、動画サイズに合わせると見栄えが良い
- controls属性と組み合わせると再生ボタンなどの操作UIも表示可能
- 複数形式の動画ファイルと組み合わせることでブラウザ互換性が向上
- 画像サイズとアスペクト比を動画と合わせることで自然な表示に
- 動画説明文を併用することでSEO効果とアクセシビリティが向上
- モバイル画面にも対応可能で、CSSのmax-widthを活用するとレスポンシブ対応できる
サンプルプログラム
<video controls poster="/img/sample150-100.jpg" style="max-width:100%;" width="320" height="180"> <source src="/img/sample150-100.mp4" type="video/mp4"> <source src="/img/sample150-100.webm" type="video/webm"> </video> <p>この動画では、HTMLのvideoタグとposter属性の使い方を解説しています。</p> 生徒
「poster属性って動画を再生する前に画像を表示するだけじゃなくて、ページの印象も良くなるんですね。」
先生
「その通りです。特に動画が読み込まれるまで時間がかかる場合、ユーザーは黒い画面だけでは退屈に感じます。poster画像を設定することで視覚的に興味を引き、操作しやすくなります。」
生徒
「動画が複数の形式に対応している場合も、同じposter画像を使えるんですか？」
先生
「はい、poster属性は動画形式に依存しないので、複数の動画ソースでも共通のサムネイルを設定できます。これでブラウザ互換性を保ちながら、ユーザー体験も統一できます。」
生徒
「モバイルでもちゃんと表示されますか？」
先生
「スマホやタブレットでも表示されます。CSSでmax-widthを100%に設定すると、画面サイズに合わせて自動的に縮小され、見切れを防げます。」
生徒
「アクセシビリティの面ではどうでしょうか？」
先生
「poster画像だけではスクリーンリーダーには読み上げられません。動画の内容を説明するテキストや字幕を併用すると、視覚的にも聴覚的にも情報が伝わるので、より多くのユーザーに配慮できます。」
生徒
「なるほど、poster属性を正しく使うことで、見た目、操作性、互換性、アクセシビリティ、SEOまで幅広く効果があるんですね。」
先生
「その通りです。HTMLのvideoタグとposter属性は、動画コンテンツを扱う上で非常に重要な基本技術です。今回の知識を活かして、ユーザーに優しいWebページ作りを目指しましょう。」
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
