動画サムネ付き お客様の声
動画コメントの先頭フレームを模したサムネイルに再生マークを重ね、企業名・声・担当者名を添えた3件のお客様の声です。サムネ枠は aspect-ratio:16/9 で動画の比率を保ち、カードは角丸と影で立体感を出しています。実際の動画へリンクする前提の、事例ページ向けレイアウトです。
このパーツの使いどころと実装ポイント
動画コメントの先頭フレームを模したサムネイルに再生マークを重ね、企業名・声・担当者名を添えた3件のお客様の声です。サムネ枠はaspect-ratio:16/9で動画の比率を保ち、カードは角丸と影で立体感を出しています。実際の動画へリンクする前提の、事例ページ向けレイアウトです。
向いている場面
- 導入事例やインタビューを動画で見せたいBtoBサービス
- 受講者・利用者のリアルな声を集めたスクールや店舗
- テキストの証言に動画の説得力を足したいランディングページ
カスタマイズと注意点
サンプルではサムネをグラデーションで表現していますが、公開時は実際の動画の1コマやキャプチャ画像に差し替えます。再生マークだけで中身が無いと利用者を裏切るため、クリックで動画が開く仕組みまで用意してください。証言は実在の許諾を得た内容にし、社名や担当者名を出す場合は事前に確認します。サムネにはaltで誰のどんな声かを補い、画像にはwidthとheightを指定して読み込み中のレイアウトのずれを防ぎます。画面が狭いときは3列を縦積みに切り替えると読みやすくなります。
よくある質問
サムネは画像にしなくてもいいですか
サンプルはグラデーションの仮置きです。公開時は動画の1コマや実際のキャプチャ画像に差し替え、altで内容を補ってください。再生マークだけで動画が開かないと利用者の期待を裏切ってしまいます。
お客様の声は作文してもいいですか
実在の許諾を得た声だけを使ってください。社名や担当者名を出す際は事前に確認します。架空の証言は信頼を損ない、景品表示法などの観点でも問題になり得ます。