お客様の声 人を伝える

通称:お客様の声動画Customer Testimonial

題材
アクセントの色
画面の比

見本の下の帯で、一時停止や好きな位置への移動ができます。店の名前と1人めの一言を変えると、見本の動画と指示文に入ります。題材を選ぶと、ほかの文言や色もまとめて替わります。

お客様3人の一言を、イニシャルの丸・名前・一言の順に1人ずつ見せる20秒の動画です。顔写真を出さずに「実際に使った人の声」を伝えられるので、工務店・教室・サロンなど、相談してから決めるお店に向きます。

自分のサイトの中身で、この形を作らせる指示文です。最初の「サイトの情報」を書き換えてから渡します。今あるページを直させるときは、その HTML を貼ります。

この形で作る
# 作るもの(ここを書き換える)
- 製品・サービス:〈名前と、何をするものかを一言で〉
- 見る人:〈誰に向けた動画か〉
- 素材:〈ロゴ・画面のスクリーンショット・写真があれば添付する。なければ図形と文字で作る〉

# 動画の呼び名
一般に「お客様の声動画」(Customer Testimonial)と呼ばれる動画です。

# 作ってほしい動画
Customer Testimonial(お客様の声)。「ことり工務店」のお客様3人の一言を、1人ずつ順に見せる 20秒の動画。顔写真は使わず、イニシャルの丸で人を表す。

# カット割り
- 0.0〜2.6秒:小さな見出し「お客様の声」と、大きく「ことり工務店」
- 2.5〜7.1秒:1人め。アクセントの色の丸にイニシャルが小さい状態から出て、0.2秒あとに名前、さらに 0.25秒あとに大きく一言「台所が明るくなった」をかぎかっこつきで出す
- 6.9〜11.6秒:2人め。同じ動き
- 11.4〜16.0秒:3人め。同じ動き
- 15.9〜20.0秒:最後のカード。3人のイニシャルの丸を横に並べ、「ことり工務店」、アクセントの色の帯に白い文字で行き先、小さく「掲載はご本人の了承を得ています」。すべて出そろってから 20秒まで、2秒以上止めて見せる

# 見た目
- 背景は明るい生成り(#f7f5f0)、文字は濃い灰色(#1f2937)、アクセントは #0f766e
- イニシャルの丸は画面の短い辺の 22%、一言は 7%、名前は 4%
- 速さの変わり方は2種類にそろえる。出るときは cubic-bezier(0.22, 1, 0.36, 1)、カットの切り替えは 0.3秒のフェード(ease)。前のカットが消えきる 0.15秒前から次を出し、何もない画面を挟まない
- 横長の画面では、丸を左、名前と一言を右に並べる

# 守ってほしいこと
- 一言は 12字まで。1人の一言は、読める時間(1字 0.15秒+1秒)より長く見せる
- 一言は、お客様が実際に言った言葉の範囲で短くする。言っていないことを足さない
- 縦長の画面では、上の 10% と下の 20% に文字を置かない(SNS のボタンや投稿の文字が重なるため)

# 仕上がりの決まり(どの動画でも守る)
- 1つのカットに出す文字は 15字くらいまで。読める時間(1字 0.15秒+1秒)を取ってから次へ進む
- 文字とロゴは、画面の端から 5% より内側に置く
- 速さの変わり方は、基本の2種類(出るとき・カットが切り替わるとき)を決めてそろえる。線を描く・光が横切るなど特別な動きだけ別にしてよい
- 色は、背景・文字・アクセントの3色を基本にする。グラデーションや光の効果を足しすぎない
- 最後のカード(名前と、次にしてほしいこと)は 2秒以上止めて見せる
- 音は付けない(付けるときは別に指定する)
- 動きを控える設定(prefers-reduced-motion: reduce)のときは、最後のカードを止まった絵で見せる

# 出力
- 1つの HTML ファイルにまとめる(CSS と JavaScript も中に書く)。ライブラリと外部の画像は使わない
- 画面の比は 16 / 9。ウィンドウの大きさに合わせて、比を保ったまま縮む
- 開くと自動で1回再生し、最後のカードで止まる。全体の時間とアクセントの色は CSS 変数にまとめる
- mp4 にしたいときは、ブラウザで全画面にして画面収録する

お客様・スタッフ・話す人・働く人の1日・代表・中途で入った人など、「人」を伝える短いモーション動画を8種類の型に分け、再生できる見本・AIへの指示文・コードを載せています。人は写真ではなく図形で描いているので、そのまま使っても、あとで本人の写真に差し替えてもかまいません。見本の下で名前や一言を打ち替えると、見本の動画と指示文にそのまま入ります。

人を伝える動画はどの型を選ぶか

人を伝える動画は、「誰が」「何を言ったか」が残るかどうかで決まります。AI に「スタッフ紹介の動画を作って」とだけ頼むと、人ごとに見せ方が変わったり、長い文章が読み切れないまま流れたりしがちです。伝えたい人(お客様・スタッフ・話す人・働く人・代表)で型を選び、1カットに出す字数と見せる時間まで渡すと、狙った動画になります。

こんなとき 向いている型
使った人の感想を、写真を出さずに見せたいお客様の声
店長や職人の考えを、音なしでも伝わる字幕で見せたいインタビュー
年次や担当の違う人の話から、職場の雰囲気を伝えたい座談会
問い合わせの前に、対応する人を知ってほしいスタッフ紹介
人数や経験年数で、チームの規模と中身を短く伝えたい数字で見るチーム
働いたあとの毎日を、時刻で具体的に見せたい1日の流れ
代表の考えを、顔を出さずに短い文で伝えたい代表メッセージ
中途で入った人の歩みを、前の仕事から順に見せたい転職ストーリー
アルバイトやパートを募り、仕事の内容・条件・応募のしかたまで伝えたい求人(SNS向けの動画)

求人の型は「募集していること」を知らせて応募につなげる動画で、条件と応募のしかたが主役です。ここの「スタッフ紹介」と「1日の流れ」は、働く人や仕事の中身を見せる動画です。求人の動画と組にして、応募を考えている人に続けて見てもらう使い方もできます。

どの型でも守ること

  1. 本人の写真・声・名前は、許可をもらったものだけを使う。許可が取れないときは、イニシャルや頭と肩の形で人を表します。
  2. 1つのカットに出す文字は 15字くらいまで。読める時間(1字 0.15秒+1秒)を取ってから次へ進みます。
  3. 人が替わっても、見せ方はそろえる。カードの形・置き場所・動きを同じにすると、見る人は中身だけを読めます。
  4. 本人の言葉を飾って書き直さない。短くまとめてよいのは、言った意味の範囲までです。
  5. 最後のカードは2秒以上止め、動きを控える設定の人には止まった絵で見せる。見本の「動きを控える設定で見る」で、その見え方を確かめられます。

よくある質問 (FAQ)

本人の許可をもらってから使います。写真・声・名前のどれを出すのか、どこに載せるのか(サイト・SNS・広告)、いつまで載せるのかを伝え、書面やメールで了承を残しておくと安心です。スタッフが辞めたあとの扱いも、先に決めておきます。許可が取れないときは、見本のようにイニシャルや図形で人を表します。

本人が言った意味を変えない範囲までです。アンケートや口コミの文から、いちばん伝えたい部分を 12字くらいで抜き出します。言っていない効果を足したり、言い切りを強めたりすると、本人の声ではなくなります。短くした一言は、本人に見てもらってから使います。

1行 16字まで・2行までを目安にします。句読点など意味の切れ目で区切り、単語の途中で改行しません。字幕はいつも同じ位置に出し、動かさずにフェードだけで切り替えると、目が字幕の場所に慣れて読みやすくなります。1つの字幕は、読める時間(1字 0.15秒+1秒)以上見せます。

差し替えられます。指示文の「この形で作る」には、最初に「作るもの」の段があります。そこに店の名前と見る人を書き、許可をもらった写真を添付して渡すと、イニシャルの丸や頭と肩の形が写真に置き換わります。写真は顔の大きさと明るさをそろえると、人が替わっても見え方がそろいます。