ナレーション付きストーリーアニメーション
使用するタイミング
カスタマーストーリー、キャンペーン、製品ローンチ、市場参入ジャーニー、ケーススタディ、学習チュートリアル、またはナラティブな説明資料に使用します。これらは自己完結型のアニメーションHTML体験として再生されるべきです。HTMLのみを作成してください。ユーザーが明示的に要求しない限り、PowerPoint、ナレーションテキストファイル、音声ファイル、または動画を作成しないでください。
汎用的なスライド風アニメーションではなく、エディトリアルなストーリースタジオ体験に合わせてください。完成済みのストーリースタジオのリファレンスと架空のRoutewiseサンプルは、このスキルのGitHub上のdemo/フォルダにあります。
入力
- ストーリーソース：ユーザーが提供する概要、事実、または名前付きのSharePointソース。
- オプション：ストーリータイプ、対象読者、言語、コールトゥアクション、ブランドの方向性、出力先フォルダ。
- ユーザーがソースを提供しない場合は、明らかに架空のサンプルを作成してください。架空の名前、数字、成果、引用を決して本物として提示しないでください。
手順
- ストーリーを収集します。書き始める前に、提供されたSharePointソースを読み込んでください。ソースの事実またはユーザーが明示した詳細のみを使用します。ソースが提供されない場合は、完成したストーリーに架空である旨を明記します。
- 6～9シーンのアーク（展開）を計画します。ストーリースタジオシステムのシーンタイプ（タイトル、統計、バー、ルート、ネットワーク、タイムライン、引用、結果、CTA）のみをストーリーに適した形で使用します。
- ナレーション対応のシーンデータを記述します。各
sayフィールドは45語以内に抑え、短い節と自然な間隔を入れます。見出しは簡潔にし、編集上の強調としてのみ<em>を使用できます。表示されるすべての数字はソースに由来するものでなければなりません。数字が必要だが提供されていない場合は、[プレースホルダー]を使用します。 - 完全でオフライン対応のHTMLファイルを1つ作成します。CDN、外部フォント、外部画像、ネットワークコール、または
<script src>を使用しないでください。 - ストーリースタジオのデザインとUXを再現します：
- 温かみのあるエディトリアルな紙のパレット、セリフ体のディスプレイタイポグラフィ、モノラベルのラベル、赤のアクセント、細いボーダー、グレイン（粒子感）、16:9のフレーム付きステージ、マストヘッド、ランニングラベル、フォリオ、シーンカウント；
- 複数のストーリーバリエーションが含まれる場合は、シーン選択ボタン；
- アニメーションのワイプトランジション、スタッガー（段階的）テキスト表示、マスク付き見出し行、動きの抑制対応、レスポンシブ全画面ステージ；
- シーン固有のモーション：統計値のカウントアップ、バーフィル、アニメーションルートと地図ピン、パートナーネットワークの表示、タイムラインの進行、単語ごとの引用表示、結果の紙吹雪バースト；
- ナレーションの進行に同期したキャプション単語、シーンスクラバー/進捗インジケーター、前へ、次へ、再開、キャプション切替、ナレーション切替、音声ピッカー、速度ピッカー、全画面コントロール、キーボードショートカット、ステータステキスト；
- アクセシビリティラベル、可視のコントロール、レスポンシブ動作、
prefers-reduced-motionへの対応。
- ナレーションはデフォルトでONにします。読み込み時に、ナレーションを有効に設定し、すぐに最初のシーンのブラウザ音声合成を試みます。シーン間でナレーションを有効に保ち、各シーンの発話が終了してから自動で次のシーンに進みます。
- 音声ピッカーを含めます。
speechSynthesis.getVoices()を使用して、視聴者のブラウザ/システムにインストールされている英語の音声と「デフォルト」音声オプションを設定します。voiceschangedイベントに反応して、遅れて読み込まれる音声も表示されるようにします。音声を選択すると、その音声を使用して現在のシーンのナレーションを再開する必要があります。共有の音声ライブラリを発明したり、名前付きの音声がすべての視聴者に利用可能であると主張したりしないでください。 - ブラウザの自動再生制限に正直に対処します。ブラウザは、視聴者がページを操作するまで音声の発話をブロックする場合があります。ブロックされた場合は、「ナレーションの準備ができました — 再生を選択してお聞きください」のような目立つステージ内メッセージを表示し、ナレーションの有効状態を保持し、最初のクリック、キー押下、またはタッチで音声を開始します。音声が自動的に再生されることを保証するような主張をしないでください。
- 完全なファイルを生成した後、別のアニメーションエンジンを手動で編集しないでください。結果が、動作するコントロールと外部依存関係のない完全なHTMLドキュメントであることを検証します。
- このサイト上のすべてのHTMLダッシュボードとアニメーションHTMLストーリーは、Reportsライブラリに保存します。ユーザーが別の保存先を要求しない限り、他の場所にアップロードまたは公開しないでください。
出力形式
簡潔に次の内容を返信してください：
- ストーリーのシーンアークを1行で；
- 正確なHTMLファイル名とリンク；
- コントロール：Space（再生/一時停止）、左右矢印キー（シーン移動）、N（ナレーション切替）、C（キャプション切替）、F（全画面）；
- 音声ピッカーには視聴者のブラウザ/デバイスにインストールされている英語の音声が一覧表示され、選択した音声がナレーションに使用されることの注意書き；
- ストーリーが架空である場合やプレースホルダーを含む場合の明確な記述；
- ブラウザが許可する場合はナレーションが自動的に開始され、それ以外の場合は最初の操作で開始されることの注意書き。
制約
- 実際のソースが提供された場合、クライアント名、数字、引用、結果を決して捏造しないでください。
- 実際の引用は提供されたソースに帰属させてください。
- 完成した体験は自己完結型でブラウザで開ける状態に保ってください。
- ナレーションには視聴者のブラウザ音声を使用します。
- 音声合成または音声が利用できない場合は、明確なステージ内メッセージを表示し、ビジュアルストーリーは使用可能な状態を保ちます。
- 入力ソースを読み取れない場合は、その旨を明確に伝え、ソースの事実を捏造しないでください。