ぐるっと一周 ネットショップ

通称：360度ビュー動画Product 360 Spin

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

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

商品を正面から横、うしろへと回して見せ、向きごとに「どこに何があるか」を一言で添える16秒の動画です。写真だけでは伝わりにくい横や裏の表示を、商品ページに来た人へ先に見せられます。

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

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

# 動画の呼び名
一般に「360度ビュー動画」（Product 360 Spin）と呼ばれる動画です。

# 作ってほしい動画
Product 360 Spin（商品の360度ビュー）。「はちみつジャム」を正面 → 横 → うしろ → 正面と回して見せ、向きごとに見どころを一言で添える 16秒の動画。商品は写真ではなく、ふたと胴の図形で描く。

# カット割り
- 0.0〜2.6秒：小さく店の名前、大きく「はちみつジャム」
- 2.5〜12.2秒：回して見せる場面。真ん中に商品、その下に小さな円の目盛り（今の向きを点で示す）、横に一言を出す
  - 2.6〜4.6秒：正面。胴の真ん中にアクセントの色のラベル。一言「正面：手書きのラベル」
  - 4.6〜5.4秒：ラベルが右へ流れて胴の端に隠れる（回っているように見せる）。目盛りの点が 90度へ
  - 5.4〜7.6秒：横。一言
  - 7.6〜8.4秒：うしろの白いラベルが左から入ってくる。点が 180度へ
  - 8.4〜10.6秒：うしろ。一言
  - 10.6〜11.4秒：うしろのラベルが右へ出て、正面のラベルが左から戻る。点が 360度へ
- 12.0〜16.0秒：最後のカード。小さな商品、「はちみつジャム」、値段、アクセントの色の帯に白い文字で行き先、小さく「※価格は見本用の例です」。すべて出そろってから 16秒まで、2秒以上止めて見せる

# 見た目
- 背景は明るい生成り（#f7f5f0）、文字は濃い灰色（#1f2937）、アクセントは #e8590c
- 胴は画面の短い辺の 28%×34%、角を丸くし、左右の端だけ少し暗くして丸みを出す。ふたは濃い灰色
- ラベルは胴の幅の 70%。胴の外にはみ出した部分は見せない（overflow: hidden）
- 横長の画面では、商品を左、一言を右に並べる

# 守ってほしいこと
- 回して見せるのは transform（translateX・rotate）だけで行う
- 一言は 14字まで。向きを変える間は一言を消し、止まっている間だけ出す
- 写真に差し替えるときは、同じ大きさ・同じ明るさで撮った4枚（正面・横・うしろ・横）を順に入れ替える
- 縦長の画面では、上の 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 にしたいときは、ブラウザで全画面にして画面収録する

ネットショップの商品ページ・バナー・SNS の広告に置く短いモーション動画を8種類の型に分け、再生できる見本・AIへの指示文・コードを載せています。商品は写真ではなく図形で描いているので、そのまま使っても、あとで商品の写真に差し替えてもかまいません。店の名前・商品の名前・値段はすべて架空の例です。見本の下で商品の名前や一言を打ち替えると、見本の動画と指示文にそのまま入ります。

ネットショップの動画はどの型を選ぶか

ネットショップの動画は、手に取れないお客様の「これで合っているかな」という迷いを1つ減らすためのものです。AI に「商品の紹介動画を作って」とだけ頼むと、雰囲気の映像になりがちで、大きさや色や届き方のような、買う前に知りたいことが抜けます。お客様が迷っていること（形・大きさ・色・中身・買い方・届き方・送料）で型を選び、数字と順番まで渡すと、狙った動画になります。

こんなとき 向いている型
横やうしろの表示（容量・原材料・作り手の印）も見てほしいぐるっと一周
「思ったより小さかった」という声や返品を減らしたい大きさを比べる
同じ形で何色あるかを、一度で伝えたい色違いを見せる
詰め合わせやギフトの中身を、箱を開ける順に見せたい箱を開けて中身を見せる
ネットの注文に慣れていないお客様へ、買い方を見せたいカートに入れるまで
単品より組み合わせで買うほうが便利なことを伝えたいまとめて買う
定期便を始める前の「やめられるのかな」に答えたい定期便の届き方
値引きをせずに、合わせ買いのきっかけを作りたい送料無料まであと少し
期間を決めた値引きや特典を知らせたいキャンペーンの告知（商品とサービスの紹介）

キャンペーンの告知は「今だけの特典」を知らせる動画で、期間と条件が主役です。ここの「まとめて買う」と「送料無料まであと少し」は、いつでも使える買い方を伝える動画です。期間のある値引きと、いつもの決まりを1本に混ぜないほうが、どちらも正しく伝わります。

どの型でも守ること

  1. 値段・寸法・中身は、商品ページの表記と同じにする。動画だけ古い数字のまま残らないよう、商品ページを直したら動画も作り直します。
  2. 1つのカットに出す文字は 15字くらいまで。読める時間（1字 0.15秒＋1秒）を取ってから次へ進みます。
  3. 実在のモールやカートの画面・ロゴをまねしない。自分の店の画面を見せるときは、自分の店のものをそのまま使います。
  4. 条件は小さな文字に隠さない。定期便のやめ方・送料無料の条件・セットの中身は、動画の中で読める大きさで見せます。
  5. 最後のカードは2秒以上止め、動きを控える設定の人には止まった絵で見せる。見本の「動きを控える設定で見る」で、その見え方を確かめられます。

よくある質問 (FAQ)

差し替えられます。指示文の「この形で作る」には、最初に「作るもの」の段があります。そこに商品の名前と見る人を書き、商品の写真を添付して渡すと、図形の部分が写真に置き換わります。360度ビューや色違いのように何枚も入れ替える型は、同じ光・同じ大きさ・同じ背景で撮った写真をそろえると、商品が替わったように見えません。

商品ページと同じ表示にし、値段を変えたら動画も作り直します。税込か税抜かを書き、送料が別ならそのことも添えます。値段は動画の中でいちばん古くなりやすい情報なので、何度も値段が変わる商品では、値段を入れずに「価格は商品ページで」と案内する作り方もあります。見本の値段と「価格は見本用の例です」の一文は、自分の動画では実際の表示に置き換えてください。

載せる前に、そのモールの決まりを確かめます。モールごとに、動画の長さ・画面の比・ファイルの大きさ・形式、入れてよい文字（値段・送料・ほかのお店への案内など）の決まりがあります。見本は1つの HTML で再生する動画なので、mp4 が要るときは、ブラウザで全画面にして画面収録します。決まりに合わせて、行き先の帯の文言を外すこともあります。

伝えることを1つに絞り、15〜20秒を目安にします。見本はどれも 16〜18秒です。大きさ・色・届き方を1本に詰めると、どれも読み切れないまま終わります。迷いやすいことが2つあるなら、型を分けて2本作り、商品ページの写真の並びに入れる場所を変えると、見たい人が見たいものを選べます。