ホームページ用の製品デモシーンを作る
ホームページに、サービスが使われる様子を見せるデモアニメーションを作るにはどうすればいいですか? 1シーンをユーザーの1瞬間にし、架空の例示データを使い、最後が最初につながるループにして、実機能ではなく例示画面だと分かるようにします。
サービスがひとりでに使われる場面を見せると、説明文より早く伝わります。実際の機能は不要で、シーンだけ作れば十分です。
使い方
- 1シーンは、ユーザーの1瞬間です。例: 通知が来て、押して、確定される3拍子。
- 実データのように見える例示(名前、時間、金額)を使います。実在の人物や会社の名前は避けます。
- 繰り返し再生されるので、最後のシーンが最初のシーンへ自然につながるようにします。
- 実際の機能と誤解されないよう、ページ内で例示画面だと分かるようにします。
- 視差効果を減らす設定のときは、最後のシーン1枚だけを見せます。
コピーして使うプロンプト
8秒のデモシーン
自社サービスのホームページのヒーローに入れる製品デモアニメーションを、HTML/CSSで作ってください。実際の機能はなくて構いません。 サービス: (一言の説明) シーン(合計8秒、無限ループ): 1. 0~2秒: スマートフォンの画面の上から、新しい予約通知が下りてくる。 2. 2~5秒: 指のマークが通知を押すと、予約詳細カードが展開する。 3. 5~8秒: [確定]ボタンが押され、チェックマークとともに「予約確定」の状態に変わる。 - 名前と時間は、架空の例示にする。 - prefers-reduced-motionのときは、3番のシーンの静止画面だけにする。
参考にした投稿: @flowlab_web