動画内の任意の場所を静止画として切り出せるオンラインツール「Online Video Thumbnail Generator」

公開日:2025(令和7)年1月19日/最終更新日:

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



スマホやデジカメで撮影した動画は、スマホの中、デジカメの中、パソコンへ転送した後などではその動画のスクリーンショットが表示されていますが、実はこれはそれぞれのデバイスやソフトウェアが自動で作成した静止画で、大抵の場合は最初の1フレーム目が表示されるようになっています。

またそのままYoutubeなどの動画サイトやSNSなどにアップロードしても静止画が生成される仕組みになっているので、実は動画ファイルにアイキャッチ画像(静止画)がないことに気づく人は少ないかも知れません。

ただWordPressをはじめとするCMSやHTMLで作成するウェブページ上で表示させる場合にはアイキャッチ画像を作っておかないと、動画アイコンまたは何も表示されないことになってしまいますね。

もちろん適当な画像をアイキャッチとして登録したり、HTMLタグの中で指定したりすることでこれを回避できるのですが、できればその動画の中の1つのフレームを切り取ってどんな動画なのかを伝えたいものです。

そこで重宝するのが今回紹介する「Online Video Thumbnail Generator」。海外のツールですが、簡単な操作で動画の中から任意の場所(フレーム)を静止画として生成することができる便利な無料オンラインツールです。

「Online Video Thumbnail Generator」の使い方

こちらから「Online Video Thumbnail Generator」を開きます。現在では以下のような画面が表示されます。

動画内の任意の場所を静止画として切り出せるオンラインツール「Online Video Thumbnail Generator」|Personal WP Customization Notes (PWCN)

以下の手順で静止画を作成します。

画面左上の「ファイルを選択」をクリックして動画を選択します。動画が表示されたら、画面下にあるボタンなどを使って静止画にしたい場所(フレーム)を探し、場所が決まったら画面右上の窓で画像幅をした上で「SNAP PHOTO」をクリックします。

動画内の任意の場所を静止画として切り出せるオンラインツール「Online Video Thumbnail Generator」|Personal WP Customization Notes (PWCN)

あとは下図のように画面右下にある「SAVE IMAGE」をクリックしてパソコンに保存すれば完了です。

動画内の任意の場所を静止画として切り出せるオンラインツール「Online Video Thumbnail Generator」|Personal WP Customization Notes (PWCN)
QA Analytics QA Analytics

WordPressで使用する時は

自動で画像を最適化する

上記のツールで生成される画像は後から加工しても劣化が少ない.png形式で容量が大きく、WordPressサイトへアップロードしてそのまま使うとページ転送量が増えて表示速度に影響が出る可能性があります。

パソコン上で容量の小さい.jpg形式に変換してアップロードすることで使いやすくなりますが、いちいち変換するのは面倒という方に、「PNG to JPG」という便利なプラグインが便利です。

インストールして有効化したら、プラグイン一覧画面から「PNG to JPG」を探し、「設定」をクリックすると以下の画面が表示されます。

動画内の任意の場所を静止画として切り出せるオンラインツール「Online Video Thumbnail Generator」|Personal WP Customization Notes (PWCN)

英語表記ですので、以下を参考に設定してください。

項目説明・設定方法
JPG quality変換した際のjpg画像のクオリティを設定します
何も加工しない場合は100を指定します
Convert PNG to JPG during uploadpng形式の画像をアップロードした際に自動でjpg画像を生成する場合にはONにします
Only convert image if JPG filesize is lower than PNG filesize変換したjpg形式のファイルがpng形式のファイルよりも容量が小さい場合のみ変換する場合はONにします
Leave original PNG images on the server返還後にpng形式の画像を削除する場合はONにします
Autodetect transparency for existing PNG images既存のpng画像の透明度を自動検出します
※今回の使用には関係ないのでOFFでいいでしょう
Images per page in Convert existing tab既存の変換タブのページあたりの画像数
※今回の使用には関係ないので-1のままでいいでしょう

動画にアイキャッチ画像を指定する

前述したようにWordPressでは動画からアイキャッチ画像を自動生成してくれません。アイキャッチ画像をアップロードしたら、動画の編集画面を開き、アイキャッチ画像として登録しておきます。

このアイキャッチ画像は動画ショートコードを使ったり、動画ブロックを追加したときのアイキャッチ画像として利用されます。

動画からアイキャッチ画像をセットできるプラグインがないことはないけど..【参考】

いろいろと探していたら、プラグインの機能の一部に動画のアイキャッチ画像を生成できるものがありました。

「Videopack」というプラグインで、結構時間をかけて探してみた限りでは、YoutubeやVimeoなどの動画配信サイト上の動画から画像生成するものはいくつかあるものの、セルフホスト(動画を直接メディアへアップロードする)の動画に対してアイキャッチ画像の生成ができるものはこれしかないかと思われます。

試しにつかってみた限りでは、確かにビデオサムネイル(動画のアイキャッチ画像)を生成して保存できる機能はありましたが、自動ではなく後から自身でメディアの編集画面を開いて行うようになっているようです。

これだとこれまで紹介してきたツール+画像のアップロード+動画へのアイキャッチ画像設定とあまり違いがないのかなと感じることと、一応公式のドキュメントに沿って動画ギャラリーを表示させようとしたもののうまく動作しませんでしたので、動画のアイキャッチ画像を生成する目的のみを使用するためにプラグインを増やすよりは、手動で設定したほうがいいのかなというのが個人的印象です。

もしも「Videopack」プラグインでアイキャッチ画像の生成も、動画の一覧(動画ギャラリー)表示もうまくいくという環境の方は管理画面内で処理が完了できるので便利かも知れません(私は断念して動画ギャラリーは別のプラグインを使い、アイキャッチ画像の生成と紐づけは手動で行っています)。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad