サイトに動画を埋め込み、プロダクトのイメージや形状を伝える

Webサイト上で、YouTube動画などを再生出来るようにすることを動画の埋め込みと言います。今回は、ブレスレットのLPのDEMOを元に、WordPressのブロックエディターで動画を埋め込む方法を説明します。プロダクトでは大きさや素材、360度の形状を伝える必要性がありますが、画像だけでは形状の曲線などを伝えることが困難です。そこで、動画を使って、プロダクトを回転させたり、カメラ位置を変えたりして、こだわり、魅力、イメージを伝えます。

バングルのモデリングからアニメーション制作まで全て3Dソフトを使用して作成しました。編集はAfter Effectsを使用して、メインのカバーブロックを使用したループ動画と、最後のYouTube動画を作成しました。

カバーブロック

メインは、全画面カバーブロックに動画を埋め込みました。ページが読み込まれるとループ再生します。

WordPressから直接埋め込む場合、一番重要なのは、サイズ(メガ数)です。5MB、大きくても10MBを目安に動画を圧縮します。

今回はMP4データをAdobe Media Encoderを使用して圧縮しました。アプリを起動して、ファイル＞ソースを追加で圧縮する動画を選択し、H264＞Twitter 720p HD を選択します。「予測ファイルサイズ」が4MBとなっているのを確認できます。ファイルを選択し、右上の再生マーク（キューを変換）をクリックして、書き出します。圧縮された動画のサイズと画質を確認します。

作成した動画をWordPressのメディアに読み込みます。カバー＞メディアライブラリーから動画を選択します。これで、埋め込み完了です。

全面動画にしたいので、ブロック＞スタイル＞カバー画像の最小の長さを「100VH」にします。カバーの上に3カラムを25/50/25で配置し、真ん中のカラムにロゴを配置したら完成です。

YouTube

動画の尺が長いものは、YouTubeに動画を登録して、リンクを作成し、ページを移動せずに見れるようにします。DEMOでは、30秒程度のイメージ動画をGrageBandで作成した音楽をつけて、作成しました。

まず、Youtubeを埋め込みたい場所に「YouTubeブロック」を作成します。今回は、カバー内にカラムを作成し、真ん中のカラムにYouTubeブロックを挿入しました。

YouTubeサイトへ移動し、埋め込みたい動画の共有ボタンをクリックし、リンクURLをコピーします。YouTubeブロックのテキストボックスにペーストすれば完成です。下書き保存して、各デバイスで動画が表示、再生されるか確認します。

今回はブロックエディターから動画を埋め込む方法を紹介しました。作業自体はとても簡単ですね。3Dアニメーションはモデリング、モーション、レンダリングなど、あらゆる技術と膨大な時間が必要になりますが、それ以上にインパクトのある動画が作成出来るのが魅力です。

CXG DESIGNでは3Dのモデリングからモーション、編集まで、トータルで対応いたします。お問い合わせは、コンタクトフォームよりよろしくお願いします。