LikePay Academyが「スーパーサイトAcademy」に変わりました。詳しくはこちらです。

背景ビデオの再生/停止ボタン

背景ビデオの再生/一時停止ボタンを有効にし、サイト訪問者にコントロールを提供し、アクセシビリティを向上させましょう。

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。引用元はこちらです。

背景ビデオはサイト訪問者を引き込むことができたり、サイトに映画のような雰囲気を加えることができますが、認知障害、前庭障害、または運動病のある人々にとっては気を散らすことがあるか、場合によっては有害です。アクセシビリティのために最善の実践は、自動的に動き出し、5秒以上動き続けるコンテンツを一時停止、停止、または非表示にするためのコントロールをユーザーに提供することです(WCAG Success Criterion 2.2.2: 一時停止、停止、非表示)。

Webflowには、背景ビデオにプレイ/一時停止ボタンの設定が組み込まれており、サイト訪問者に背景ビデオコンテンツを一時停止または再生するためのコントロールを提供できます。

注意: 一時停止ボタンのない自動再生ビデオは、サイト訪問者がサイト上でのタスクを達成せずに離れるトップ10の理由の一つです。訪問者に明確なビデオコントロールを提供することで、サイトの離脱率が低下します。

このレッスンでは以下の内容を学びます:

プレイ/一時停止ボタンの追加方法

プレイ/一時停止ボタンを含める設定は、2022年6月以降に追加されたすべての新しい背景ビデオに対してデフォルトで有効になっています。2022年6月以前に追加された背景ビデオにプレイ/一時停止ボタンを追加するには、この設定を手動で有効にする必要があります。

既存の背景ビデオにプレイ/一時停止ボタンを追加するには:

  1. キャンバス上のBackground videoを選択します。
  2. Background videoをダブルクリックするか、Enter/Returnキーを押してBackground video settingsを開きます。
  3. プレイ/一時停止ボタンを含めるチェックボックスをオンにします。
重要: アクセシビリティ基準を満たし、サイト訪問者のより良いエクスペリエンスを確保するために、プレイ/一時停止ボタンを含める設定を有効にすることを強くお勧めします。さらに、この設定を無効にしている場合、オペレーティングシステム設定で動作の軽減を希望と設定しているサイト訪問者は、背景ビデオを再生できなくなります。

プレイ/一時停止ボタンのスタイル設定方法

一旦Include play/pause button 設定が有効になると、プレイ/一時停止ボタンを自分の好みにカスタマイズできます。

ボタンの位置設定

デフォルトでは、プレイ/一時停止ボタンposition: absoluteに設定されており、staticではない最初の親要素(この場合、Background video要素)に対して相対的です。これは、ボタンが背景ビデオ要素内にネストされ、position: absoluteに設定されていない要素の上に表示されることを意味します。position: absoluteについて詳しく学ぶ

プレイ/一時停止ボタンが常に背景ビデオの上に表示されるようにするには、プレイ/一時停止ボタン要素を選択し、Z-index値を設定できます。任意の要素のデフォルトのZ-index値は0ですので、0より大きい値は要素を最前面に配置します。ここでは、9999のような非常に高いZ-index値を自由に使用して構いません。

ボタンの状態アイコンをカスタマイズする

プレイ/一時停止ボタンには2つの状態、再生一時停止があります。

再生/一時停止ボタンにはデフォルトのアイコンと、再生および一時停止の状態のための組み込みの代替テキストが付属していますが、任意の画像をアップロードできます。

重要: デフォルトのアイコンを置き換える場合、自分の画像に代替テキストを追加してください。そうすることで、サイトをナビゲートするすべての人がこれらのボタンの目的を理解できます。例えば、再生の状態の画像には「動画再生」という代替テキストを追加し、一時停止の状態の画像には「動画一時停止」という代替テキストを追加できます。

デフォルトのアイコンを置き換えるには:

  1. アセットパネルを開き、使用したい画像をアップロードするための「」アイコンをクリックします。
  2. キャンバス上またはナビゲーターパネル再生/一時停止ボタンを選択します。
  3. スタイルを適用したい状態(例: 再生または一時停止)を設定パネル > 再生/一時停止ボタンの設定でクリックします。
  4. アセットパネルから使用したい画像を選択し、現在の状態に一致する要素の内部にドラッグアンドドロップします(例: 再生状態または一時停止状態)。
  5. 状態要素内からデフォルトの画像を削除します。

デフォルトの画像と異なるサイズの画像やアイコンを使用することができます。画像のサイズを親要素(例: 再生/一時停止ボタン)に基づいて調整できます。

親要素に基づいて画像のサイズを調整するには:

  1. キャンバス上またはNavigator panel再生/一時停止ボタンを選択します。
  2. スタイルを適用したい状態(例: 再生または一時停止)をSettings panel > Settings panel > Play/pause button settingsでクリックします。
  3. 現在の状態に一致する要素内の画像を選択します(例: 再生状態または一時停止状態)。
  4. Style panel > Sizeを開き、画像のwidthheightを100%に設定して、画像が親要素(例: 再生/一時停止ボタン)の100%を占めるようにします。
  5. 再生/一時停止ボタンを選択します。
  6. Style panel > Size  を開き、任意のサイズに高さを設定します。
  7. Style panel > Spacingを開き、必要に応じてpaddingを調整します。
注意: ボタンアイコンにSVGファイルを使用している場合、画像の親要素(例: 再生状態または一時停止状態)が寸法に絶対単位を使用していないため、相対的なパーセンテージベースの単位ではなく、ピクセル値を使用して画像に明示的に定義された幅と高さの寸法を指定する必要があります。そうしないと、画像は0ピクセルに縮小されます。

ボタンのアウトラインのスタイリング

再生/一時停止ボタンには、オフセットの青いアウトラインを持つデフォルトのフォーカス(キーボード)スタイルがありますが、このアウトラインを自分のスタイルに合わせて設定できます。

キーボードでサイトを操作するサイト訪問者にとって、このアウトラインは再生/一時停止ボタンがフォーカスを持っていること(つまり、ボタンと対話しているとき)を明示的に示します。このアウトラインは、サイト訪問者がマウスまたは指タップを使用して再生/一時停止ボタンと対話する場合には表示されません。

再生/一時停止ボタンのアウトラインをカスタマイズするには:

  1. キャンバス上またはナビゲーターパネル再生/一時停止ボタンを選択します。
  2. スタイルパネルを開き、再生/一時停止ボタンにクラスを付けます。
  3. Selectorフィールドのドロップダウンをクリックして、Statesメニューを開きます。
  4. フォーカス(キーボード)ステートを選択します。
  5. Style panel > Effects までスクロールし、必要に応じてoutlinewidthoffset、および/またはcolorプロパティを編集します。

再生/一時停止ボタンと、フォーカス(キーボード)状態のデフォルトのアウトラインスタイル。

フォーカス(キーボード)状態の再生/一時停止ボタンとカスタムアウトラインスタイル。

ボタンに関して他のスタイリング変更も行うことができます(例:ボーダー背景、バックドロップフィルターなど)

プロのヒント: 画像と再生/一時停止ボタンにクラスを追加して、スタイルを一貫性を持たせるためにさまざまな状態で再利用できます。要素間でスタイリング情報を保存するためにクラスを使用する方法について詳しく学びましょう

目次

あなたもNoCodeのプロに

充実したサポートであなたも、最短3ヶ月間でノーコードWeb制作のプロになれます。

  • 300以上のノーコード動画教材

  • チャットサポート

  • 個別ビデオ通話相談