ホームページデモメディアをループするHTMLとCSSに置き換える

CSS feature clips: ビデオなしの製品デモ

無料のテクニックとプロンプト

クリップとは、プレーンなHTMLとCSSによる簡略化されたUIの10秒間のループです。あらゆるサイズでシャープに表示され、テーマに追従し、JavaScriptがロードされる前に再生され、再レコーディングではなく編集できます。どのフレームワークでも機能します。

プロンプトを入手

$ stepshots record signup-flow

設定を使用中: /home/ada/acme/stepshots.config.json

録画中: サインアップ (signup-flow)

作成済み: output/signup-flow.stepshot (4ステップ)

次: 以下を使用してダッシュボードにアップロードします
stepshots upload output/signup-flow.stepshot

その他の例

これらはサンプルデータを使用した実際のStepshotsフローです。このページ上の3つのクリップすべてが、3.3KB（gzip圧縮）の単一のスタイルシートを共有しており、JavaScriptは使用していません。

SelectHotspotHighlightBlurZoomArrowSavedSave

Acme設定

ワークスペース
Acme Inc

APIキー
acme_7f3k92hd81acme_7f3k92hd81

プラン
Pro

ツールの状態、2つのオーバーレイ、および「Saved」と「Save」の間で切り替わるラベル。

分析

Acmeオンボーディング
7d30d90d

総ビュー数
4121,284

ユニーク訪問者数
268873

完了率
58%64%

期間別ビュー数

数値はクリックでスワップされ、SVG線が自動で描画されます。

プロンプト

これをコーディングエージェントに貼り付け、機能を記入してください。

私のマーケティングページ用に、プレーンなHTMLとCSSのキーフレームでモックUIとして、ループする製品デモクリップを作成してください。ビデオ、GIF、JavaScriptは使用しません。

表示する機能: [短いフローを1つ記述してください。例: 「ユーザーがチームメイトを招待すると、シート数が上がります」]

ルール:
1. 製品が行うことのみを表示してください。実際のUIを最初に読み、ラベルを正確にコピーしてください。製品が出力する場合、それを実行してコピーしてください。簡略化はしますが、機能、ボタン、結果を捏造しないでください。サンプルデータにはAcmeのような架空の会社を使用してください。
2. ストーリーを10秒、0〜100%のタイムラインで3〜4ビートで記述してください。クリップ本体のループフェードのために、開始時に3%、終了時に4%を残してください。
3. ベーススタイルは最後のフレームです。キーフレームなしでは、すべての要素は既に完成したように見えなければならないため、ループ中に消えるものはすべて opacity: 0 を持ちます。
4. モックがビデオのようにスケーリングするように、すべてemでサイズ設定してください:
   .fc { container-type: inline-size; width: 100%; aspect-ratio: 740 / 415; }
   .fc-stage { position: relative; height: 100%; overflow: hidden; font-size: 2.2cqw; }
   ステージは約45.45em x 25.5emです。クリップ内でpxを避けてください。
5. プロジェクトのテーマトークンを使用し、クリップがライトモードとダークモードの両方に追従するようにしてください。実際の生活で色が1つしかないもの（例: ターミナル）のみをハードコードしてください。
6. 要素ごとに1つのキーフレームではなく、再利用可能なクラス（fc-in-30は30%で表示）を通じてタイミングを共有してください。テキストは、文字数に合わせてサイズ設定されたsteps()を使用して、clip-path: inset(0 100% 0 0) から inset(0) へとタイプしてください。
7. 値が変化する場合、両方を1つのグリッドセルにスタックしてください。2つのラベルが中間でフェードインするとぼやけるため、step-endでテキストを即座にスワップしてください。
8. カーソルには、パーセンテージで指定されたtop/leftパーセンテージと、クリックごとの短いscale(0.8)を持つ独自のキーフレームを与えてください。カーソルの先端は左上隅なので、ターゲットの近くを狙ってください、テキストの上ではありません。
9. ループするクリップは、リセット状態で終了してしまうため、これを追加してください:
   @media (prefers-reduced-motion: reduce) {
     .fc-body, .fc-body * { animation: none !important; }
     .fc-cursor { display: none; }
   }
10. role="img" と、クリップで何が起こるかを説明するaria-labelを追加してください。

私のフレームワークのコンポーネント構文を使用してください。ただし、出力はプレーンなHTMLとCSSにしてください。

その後、確認してください。document.getAnimations() ですべてのアニメーションを一時停止し、currentTime をビートごとに1フレームに設定し、各フレームをスクリーンショットしてください。カーソルがターゲットに着地すること、390px幅で何もオーバーフローしないこと、両方のテーマが機能すること、reduced-motionフレームが正しく読み取れることを確認してください。

最小限の動作クリップ

ビルドステップやライブラリは不要です。プレーンなマークアップなので、テンプレート構文を変更するだけでReact、Vue、Svelte、Astro、Rails、またはDioxusにポートできます。

<div class="fc" role="img" aria-label="A status changes from Draft to Published">
  <div class="fc-stage">
    <div class="fc-body">
      <span class="swap">
        <span class="draft">Draft</span>
        <span class="live">Published</span>
      </span>
    </div>
  </div>
</div>

<style>
.fc { container-type: inline-size; width: 100%; aspect-ratio: 740 / 415; }
.fc-stage { position: relative; height: 100%; overflow: hidden; font-size: 2.2cqw; }
.fc-body { animation: fc-loop 10s linear infinite; }
.swap { display: inline-grid; }
.swap > * { grid-area: 1 / 1; }

/* Base styles are the last frame: Published shows, Draft doesn't. */
.draft { opacity: 0; animation: fc-draft 10s step-end infinite; }
.live { animation: fc-live 10s step-end infinite; }

@keyframes fc-draft { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes fc-live { 0% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes fc-loop { 0% { opacity: 0; } 3%, 96% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fc-body, .fc-body * { animation: none !important; }
}
</style>

クリップかインタラクティブデモか？

クリップは簡略化されたモックなので、実際の製品よりも証明力は低いです。説明に使用し、証明には録画を使用してください。

CSSクリップを使用する

• 10秒で表示される1つのアイデア
• ランディングページの機能行
• クリックを必要としないモーション

インタラクティブデモを使用する

• クリックごとの実際の画面
• 購入者が自分のペースで探索できる完全なフロー
• 視聴者がどこで離脱するかを確認する

本物が欲しい？

Stepshotsは、実際の製品を埋め込み可能で追跡可能なクリック可能なデモに録画します。

最初のデモを作成

---