言葉だけでは伝わらないことを、動画で見せる。
テーブルが開く様子、留め具の動き、商品を使う場面。動画を再生しやすく、見て理解しやすく整えます。再生する前からページが役立つことも大切にします。
再生したくなる理由を、先に伝える。
伸長式テーブルを販売する家具店を想像してください。写真なら木の質感や形が分かります。役立つ動画が答えるのは別の疑問です。テーブルはどう開くのか。購入者は何をすればよいのか。
プレビューには実際の商品が分かる画像を使い、何を実演する動画なのかを示します。寸法、価格、購入に必要な情報はテキストでも読めるようにします。部屋に置けるかを知るためだけに、動画の視聴を強いるべきではありません。
説明用イラスト：プレビューでテーブルを紹介し、実演で伸ばし方を見せます。
動画の説明を文章で読む
言葉だけでは伝わらない ことを、映像で。 写真で形を。 動きで仕組みを。
変化を見せる。 動きそのものが説明になる。 天板を左右に引き出します。 延長板を入れ、完成形を見せます。 同じテーブルで、 もっと広く。
細部に寄る。 小さな細部が、 理解の決め手になる。 留め具が かかります。 伝えたい場所に視線を導く。
見る理由を示す。 何がわかるのかを 最初に示す。 結果が見えれば、 動作の意味も伝わる。 こうすれば、もっと広く。
音がなくても伝える。 要点が見てわかるように。 天板を左右に引き出します。 延長板を入れます。 使う前に固定します。
理解を助けるなら、動画を。 変化を見せる。 細部を見せる。 要点を伝える。
待ち時間がどこで生じるかを確かめる。
ページの表示が遅い場合と、再生開始が遅い場合では、確認する点が異なります。同じ端末と回線を使い、ページのほかの情報も表示した状態で両方を試します。
再生ボタンを押す前
任意で見る実演動画には、適切なサイズのプレビュー画像を用意します。視聴が必要になる前に、動画全体をダウンロードしない構成を検討します。クリックしてからプレーヤーを読み込む方式なら、重い外部プレーヤーの読み込みも遅らせられます。ただし、事前読み込みの指定はあくまでヒントです。実際の通信を確認してください。詳しくは web.dev の動画読み込みガイドをご覧ください。
再生ボタンを押した後
映像が動き始めるまでの待ち時間を確認し、その後の停止、細部のぼやけ、操作しにくいボタンを調べます。動画で伝えるべき動きや商品細部を残しながら、不要なデータを減らします。動画の表示領域を先に確保し、再生時に周囲の情報が動かないようにします。
見落としやすい手順こそ、はっきり見せる。
この架空のテーブルの実演では、留め具が天板の縁の下にあります。遠くから撮ると、お客様が見たい部分を隠してしまうかもしれません。手元のアップに切り替え、動きを明確に映し、追って理解できる長さで見せます。
音声の説明には、内容が正確で動作とタイミングの合った字幕を付けます。重要な視覚情報も言葉で説明します。「これを動かします」より「縁の下にある留め具を滑らせます」の方が具体的です。内容によっては、その説明を文字だけでなく音声でも伝える必要があります。キーボード操作、一時停止、字幕の切り替えも確認します。必要な対応は W3C のアクセシブルなメディアのガイドを参考に判断します。
説明用イラスト：拡大すると、留め具の位置と動かし方が分かります。
必要な役割から、構成を選ぶ。
動画ファイルは自分たちで配信すべきですか？
動画サービスは配信を担い、便利な再生機能を提供できます。ただし、埋め込みによって追加のダウンロードやスクリプトが発生することがあります。ファイルを直接配信する場合は、ページでの見せ方を管理できる一方、適切なファイル、字幕、操作機能を自分たちで用意します。必要な機能と、実測した動作を比較して選びます。
ファイルを小さくすれば解決しますか？
動画のデータ量が原因なら、軽量化が役立つ場合があります。しかし、分かりにくいプレビュー、字幕の不足、使いにくいプレーヤーは直りません。大きなプレビュー画像は最初の表示を遅らせ、埋め込みはスクリプトやレイアウト移動を増やすことがあります。プレーヤーの交換や再圧縮の前に原因を特定します。
改善したかどうかは、どう確かめますか？
変更前後で同じ作業を繰り返します。ページの読み込み、再生操作後の待ち時間、途中の停止、スマートフォンで見える細部を比較します。そのうえで、商品を知らない人に実演の手順を説明してもらいます。再生が速くても、視聴者に伝わらなければ十分ではありません。
見た人が理解できる商品動画に。
ページと動画の元データやURLをお送りください。何を伝えたいか、どこで待ち時間や分かりにくさが生じるか、使っている端末も教えてください。改善が必要な箇所を特定します。