HubSpotコンテンツに動画を追加する

HubSpotビデオを使用すると、動画をファイルツールにアップロードして、ページ、マーケティングメール、ブログ投稿、ナレッジベースの記事に追加できます。 

HubSpot動画は、ドラッグ＆ドロップ マーケティングEメールとページのドラッグ＆ドロップエリアの動画モジュールに挿入できます。HubSpot動画は、ページ、ブログ記事、ナレッジベース記事のリッチテキストモジュールでもサポートされています。

HubSpot動画で訪問者のエクスペリエンスをカスタマイズするには、動画の再生前後にCTAまたはフォームを表示できます。エンタープライズサブスクリプションのアカウントでは、ビデオ中の任意の時点でCTAまたはフォームを表示し、訪問者がそれをスキップするのを防ぐことができます。 

注:この記事では、ページ、投稿、記事、マーケティングメールでの動画の使用について扱います。会話、1対1のメール、テンプレート、シーケンスメールに動画を追加する方法について詳しくは、こちらをご覧ください。  

始める前に

• この記事では、HubSpotにアップロードされた動画ファイルをHubSpotコンテンツに追加する方法について説明します。URLまたは埋め込みコードから外部動画を追加するには、HubSpotでの外部メディアの埋め込みについて詳細をご確認ください。
  
• サポートされるファイルタイプはブラウザーごとに異なるため、場合によっては、動画ファイルがブラウザー上で再生されずにダウンロードされます。アップロードされる動画形式が.mp4のファイルはほとんどのブラウザーでサポートされているため、ブラウザー上で再生が行われます。
• 各動画は、ファイルツールの制約の影響を受ける場合があります。
• ファイルツールの各動画では、高度な機能をオンまたはオフにすることができます。コンテンツエディター内にアップロードされた新しい動画ファイルでは、高度な機能が自動的にオンになります。高度な機能をオンまたはオフにした動画の違いは次のとおりです。 

Eメールに動画を追加する

HubSpot動画は、ドラッグ＆ドロップEメールエディターではサポートされていません。ほとんどのEメールクライアントは動画に対応していないため、マーケティングEメールに追加した動画は、動画プレイヤーボタン付きのサムネイル画像として表示されます。

このサムネイル画像には、Eメール受信者が動画を再生できるウェブページへのリンクがあります。このページは、Eメールのウェブ版のプライマリードメインでホスティングされます。 

• HubSpotアカウントにて、［マーケティング］ > ［Eメール］の順に進みます。
• Eメールの名前をクリックします。
• サイドバーエディターで動画モジュールをクリックし、Eメールにドラッグします。
• ［動画タイプ］セクションで、［HubSpot動画］を選択します。

• • ファイルツールから動画を選択するには、［動画を参照］をクリックし、既存の動画のサムネイル画像を選択します。
  • 新しい動画をアップロードするには、［アップロード］をクリックし、コンピューター上のファイルを選択します。次に、動画のサムネイル画像をクリックします。

• 動画のサイズを変更するには、サイドバーエディターで、幅または高さを入力します。
• 動画の情報をカスタマイズするには、［動画の詳細］セクションで、［編集］をクリックします。

注：動画の詳細に対する変更は、動画がHubSpotのコンテンツツールで使用されるすべての場所に適用されます。

• • 右側のパネルで、［サムネイル画像を変更］をクリックし、動画のプレビュー画像を変更します。
  • スライダーをクリックして動画の特定のポイントにドラッグするか、または［カスタム画像をアップロード］をクリックして、コンピューターから新しい画像を追加します。サムネイル画像の下の［完了］をクリックします。
  • ファイル名、タイトル、説明を入力します。これにより、検索エンジンによって動画の内容が認識されるようになります。
  • ［完了］をクリックします。

• 動画の再生ボタンの表示を編集するには、［スタイルオプション］をクリックします。
  • 再生ボタンの色をカスタマイズするには、16進値を入力するか、カラーピッカーをクリックして色を選択します。
  • 再生ボタンのサイズをカスタマイズするには、ピクセル値を入力するか、スライダーをクリックして特定の位置にドラッグします。再生ボタンの公開プレビューが更新されるまでには数秒かかる場合があります。

• モバイルデバイスの全幅で動画を表示するには、［モバイルデバイスで最大幅として表示］チェックボックスをオンにします。動画が元の寸法よりも大きい幅で表示されることはありません。

• 動画を右または左側に移動するには、［位置合わせ］ドロップダウンメニューをクリックし、［左］、［中央］、または［右］を選択します。
• 動画のサイドにスペースを追加するには、［パディング］スイッチをクリックしてオンに切り替えます。
  • 動画のすべてのサイドに同じパディングを適用するには、［すべてのサイドに適用］チェックボックスをオンにします。
  • ［上］、［左］、［右］の各テキストフィールドにパティングのピクセル値を入力します。

ページ、ブログ記事、ナレッジベース記事に動画を追加する

リッチ テキスト モジュールでブログ記事、ページ、ナレッジベース記事に動画を追加できます。ページのドラッグ＆ドロップエリアでも、動画モジュールに動画を追加することができます。 

ページ、ブログ記事、またはナレッジベース記事でリッチ テキスト モジュールに動画を挿入します。

HubSpotの動画は、テキスト、画像、リンクなどのコンテンツと共にリッチ テキスト モジュールに追加できます。

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］ > ［ランディングページ］の順に進みます。
  • ブログ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ブログ］の順に進みます。
  • ナレッジベース：HubSpotアカウントにて、［サービス］ > ［ナレッジベース］の順に進みます。

• ページ、投稿、または記事の上にカーソルを重ねて［編集］をクリックします。
• コンテンツエディターでリッチ テキスト モジュールをクリックします。
• ［挿入］ドロップダウンメニューをクリックし、［動画］>［HubSpot動画］を選択します。
• 右側のパネルで、挿入する動画を選択します。
  • ファイルツールから既存の動画を挿入するには、動画のサムネイル画像をクリックします。
  • 新しい動画を挿入するには、［動画をアップロード］をクリックし、コンピューター上の動画を選択します。次に、動画のサムネイル画像をクリックします。

• 動画の再生ボタンの色を編集するには、backgroundColorプレイヤーの色のドロップダウンメニューをクリックし、色を選択します。16進値またはRGBカラー値を入力するには、［詳細］タブに進みます。
• テキストブロック内の動画の位置を調整するには、inline alignmentalアラインメント（位置合わせ）アイコンを使用します。全幅アイコンfullWidthをクリックして、動画がモバイルデバイス上で全幅で表示されるようにします。  
• 動画のサイズを変更するには、幅と高さのピクセル値を入力します。
• 動画の周囲のパディングを編集するには、［間隔］ドロップダウンメニューをクリックし、画像アイコンの境界付近でピクセル値を入力します。

• コンテンツエディターで、動画をクリックしてから、edit編集アイコンをクリックします。
• ポップアップボックスで、CTAまたはフォームのドロップダウンメニューをクリックし、Call - to - ActionまたはFormを選択します。
• CTAを挿入するには： 
  • [CTAを選択]をクリックします。
  • 新しいCTAを作成するには、右側のパネルで[新規作成]をクリックします。CTAを作成し、[保存]をクリックします。 
  • 右側のパネルで、新しく作成されたCTAまたは既存のCTAを選択し、[挿入]をクリックします。 
•  フォームを挿入するには：
  • [フォーム]ドロップダウンメニューをクリックして、フォームを選択します。 
  • 新しいフォームを作成するか、選択する前に既存のフォームを編集するには、[作成]または[編集]をクリックします。これにより、新しいタブでフォームツールが開きます。 
• デフォルトでは、ビデオが終了するとオーバーレイが表示されます。オーバーレイの表示オプションを変更するには：
  • Enterpriseサブスクリプションをお持ちでない場合は、オーバーレイの 表示時間を選択します。動画の再生を開始する前または動画の再生を終了した直後に、フォームまたはCTAを表示できます。 

• • Enterpriseサブスクリプションをお持ちの場合: 
    • ポップアップボックスの[表示]オプションの横にある[編集]をクリックします。

• • • 右側のパネルで、[時間を表示]ドロップダウンメニューをクリックし、時間を選択します。カスタム時間を選択する場合は、ビデオの下にある円をクリックして正しい位置にドラッグするか、[選択した表示時間]フィールドに時間を入力して時間を指定できます。 

• • • 訪問者がオーバーレイをスキップしないようにするには、[スキップ]オプションのドロップダウンメニューをクリックし、[訪問者にフォーム/CTAをスキップさせない]を選択します。デフォルトでは、訪問者はオーバーレイをスキップすることができます。 

ページ上で動画モジュールに動画を挿入する

• [CTA]または [フォーム]セクションで、フォームまたはCTAオーバーレイをビデオに追加できます。 
  • クリックして、CTAまたはフォームセクションを展開します。 
  • CTAまたはフォームのドロップダウンメニューをクリックし、オーバーレイタイプを選択します。 
  • フォームを挿入するには、[フォーム]ドロップダウンメニューをクリックしてフォームを選択するか、[新規作成]をクリックしてフォームツールで新しいフォームを作成します。 
  • CTAを挿入するには：
    
    • [CTAを選択]をクリックします。
    • 新しいCTAを作成するには、右側のパネルで[新規作成]をクリックします。CTA を作成し、[保存]をクリックします。 
    • 右側のパネルで、 新しく作成されたCTA または 既存のCTAを選択し、[挿入]をクリックします。 

• • • サイドバーエディタの[表示]オプションの 横に ある[ 編集]をクリックします。

• • • 右側のパネルで、[時間を表示] ドロップダウンメニューをクリックし、時間を選択します。カスタム時間を選択する場合は、ビデオの 下にある 円をクリックして正しい位置にドラッグするか、[選択した表示時間] フィールドに時間を入力 して時間を指定できます。