音を見る

## 見える音 — 本番制作プロンプト

**Three.js**で構築した、洗練された一般公開向けのインタラクティブな科学体験**「見える音」**を作成してください。音楽や科学の知識がない人でも探索できる、美しく反応する3Dの形に音を変換します。**公開済みのWebサイト**と**映画のようなMP4の事例紹介動画**を納品してください。

この体験は、高品質なインタラクティブ科学博物館のように感じられるものにしてください。視覚的に印象深く、ひと目で理解でき、遊び心があり、科学的にも正確であることが必要です。デスクトップとモバイルの幅広い利用者向けに設計してください。

### 最初の体験

深い真夜中の背景に、ゆっくりと動く発光する音の彫刻を表示して始めます。温かみのあるアイボリーの文字、鮮やかなシアン、バイオレット、控えめなコーラルをアクセントに使ってください。構成は上品に、インターフェースは最小限に保ちます。

見出しに**「音にできることを見てみよう。」**と表示します。次の3つの明確な入口を用意してください。

- **音を再生**：厳選した音声サンプルとその可視化をすぐに開始します。
- **マイクを使う**：ユーザーの声や周囲の音を可視化します。
- **音声をアップロード**：ローカルの音声ファイルを探索します。

ワンクリックで、訪問者が引き込まれる体験を提供してください。マイクへのアクセスやファイルのアップロードは任意となるよう、内蔵サンプルを用意します。再生前に、明確に識別できる無音プレビューを実行してください。

### 3つの探索方法

**1. 音の彫刻 — 芸術的な音声可視化**

ライブ音声解析に滑らかに反応する、粒子と流れるリボンの彫刻的なフィールドを作成してください。低周波数は大きな動き、中周波数は構造的な細部、高周波数は繊細にきらめくアクセントに対応させます。音量が急に変化しないよう、スケールとエネルギーに影響させてください。

話し声、手拍子、ハミング、音楽がそれぞれ明らかに異なる反応を示すようにします。このモードは音の芸術的解釈として表示してください。

**2. 波形エクスプローラー — 信号を理解する**

アニメーションする波形と周波数スペクトルを並べて表示し、必要に応じて空間的な表示も選べるようにします。波形は信号が時間とともにどう変化するかを、スペクトルは含まれる周波数成分を示すことを、わかりやすく説明してください。

周波数と音量のコントロールを明確に表示した、操作できるトーンジェネレーターを含めます。純音と、より豊かな音色を比較して違いを確認できるようにしてください。初期音量は控えめにし、音声の切り替えは滑らかに、停止コントロールはわかりやすくします。表示上の振幅は入力信号のレベルを示すものであり、校正された物理的な音量ではないことを説明してください。

**3. 共鳴パターン — 振動を探る**

砂のような粒子が節のパターンを形成する、仮想の振動板を表示します。励振周波数を変えることで探索できる、慎重に実装された複数の振動モードを用意してください。

パターンは、形状と境界条件が定義された文書化済みの板モデルに基づかせます。粒子は振動が最小となる領域の近くに集まることを説明してください。これは教育用シミュレーションであると明記し、簡略化している点も説明します。装飾効果は科学モデルと視覚的に明確に区別してください。

### 発見しやすくする

**「一定の音程でハミングしてみよう」「一度手をたたこう」**、**「低い音と高い音を比べよう」**のように、状況に応じた短い案内を表示してください。それぞれに、すぐ見える反応を組み合わせます。

高度なコントロールは折りたたんでください。一時停止、リセット、全画面表示、感度、動きの強さのコントロールを用意します。モードを切り替える際も、音源と再生状態を明確に維持してください。シーンを覆わない形で、各モードに短くアクセシブルな説明を表示します。

### 音声とプライバシー

再生と解析には**Web Audio API**を使用し、安定したスムージングと適切な正規化を行ってください。マイクへのアクセスは、ユーザーが選択した後にのみ要求します。マイク入力とアップロードしたファイルはローカルで処理し、音声をアップロード、保存、送信してはなりません。 3つすべてのモードをオーロラテーマに変更してください。真夜中の背景にゆっくり漂う緑からバイオレットのオーロラグラデーションを加え、音の彫刻の粒子とリボンをティールとバイオレットに配色し、共鳴パターンの粒子にはかすかな冷たい輝きを与えます。アイボリーの文字は維持し、夜空を眺める雰囲気になるよう全体の明るさを下げ、すべての操作は変更しないでください。 常時表示されるマイクインジケーターと、マイクを解放する明確な**「マイクを停止」**コントロールを表示してください。フィードバックを防ぐため、スピーカー経由のマイクモニタリングは無効にします。権限の拒否、使用可能なデバイスがない場合、未対応のファイル、無音、中断された音声にも適切に対応してください。

検証済みのCC0または適切にライセンスされた内蔵音声を使用し、アセットのライセンス一覧を含めてください。

### ビジュアルと技術品質

洗練された粒子レンダリング、説得力のある奥行き、制御されたブルーム、滑らかなアニメーション、控えめなカメラ移動を使用してください。テキストは鮮明に、コントロールは読みやすく保ちます。激しい点滅や過度な視覚ノイズは避けてください。

GPU効率の高いジオメトリとシェーダー、再利用可能なバッファ、ピクセル密度の上限、適応型の粒子数、品質プリセットを備えた、保守しやすいThree.jsアプリケーションを構築してください。音声はローカルで解析し、同時訪問者のためにサーバー側の音声処理が必要にならないようにします。最適化された静的アセットは、CDN互換のホスティングで配信してください。

デスクトップでは滑らかなパフォーマンスを、中価格帯のスマートフォンでも実用的なパフォーマンスを目標にしてください。テストしたデバイスで、実際のフレームレート、メモリ使用量、読み込み動作を計測します。ページが非表示のときは不要なレンダリングを停止し、音声およびGPUリソースを適切に解放してください。

タッチ操作、キーボードナビゲーション、視認できるフォーカス状態、スクリーンリーダーで利用可能なコントロール、動きの軽減をサポートしてください。WebGLが利用できない場合は、軽量な2Dフォールバックを提供します。色や音声だけに頼らなくても、重要な情報を理解できるようにしてください。

### 納品物

完成したWebサイトを、動作する公開**HTTPS URL**にデプロイしてください。

実際のアプリケーションからレンダリングした、同期されたライセンス済み音声付きのダウンロード可能な**30～45秒、1920 × 1080 H.264 MP4**を制作してください。純音が波形になる様子、より豊かな音が彫刻を変化させる様子、複数の共鳴パターンのシーケンスを見せます。きれいな結果を得るため、決定論的な再生と安定したフレームキャプチャを使用してください。

ソースプロジェクト、ローカルアセット、ライセンス一覧、文書化した科学モデルと可視化マッピング、デプロイ手順、簡潔な検証レポートを納品してください。デプロイ済みの体験について、デスクトップとモバイルのレイアウト、マイク権限のフロー、音声再生、アップロード、モード切り替え、アクセシビリティ、動画再生をテストします。テスト環境と残る制約を正確に報告してください。

**含めないもの：**物理シミュレーションとして提示する装飾効果、ページ読み込み時のマイク権限要求、サーバーへの音声アップロード、自動再生される音、スピーカーのフィードバック、過剰なコントロール、急速な点滅、読めないラベル、仮置きの機能、崩れたモバイルレイアウト、ウォーターマーク、または本番稼働可能であるという裏付けのない主張。

## 見える音 — 本番制作プロンプト

**Three.js**で構築した、洗練された一般公開向けのインタラクティブな科学体験**「見える音」**を作成してください。音楽や科学の知識がない人でも探索できる、美しく反応する3Dの形に音を変換します。**公開済みのWebサイト**と**映画のようなMP4の事例紹介動画**を納品してください。

この体験は、高品質なインタラクティブ科学博物館のように感じられるものにしてください。視覚的に印象深く、ひと目で理解でき、遊び心があり、科学的にも正確であることが必要です。デスクトップとモバイルの幅広い利用者向けに設計してください。

### 最初の体験

深い真夜中の背景に、ゆっくりと動く発光する音の彫刻を表示して始めます。温かみのあるアイボリーの文字、鮮やかなシアン、バイオレット、控えめなコーラルをアクセントに使ってください。構成は上品に、インターフェースは最小限に保ちます。

見出しに**「音にできることを見てみよう。」**と表示します。次の3つの明確な入口を用意してください。

- **音を再生**：厳選した音声サンプルとその可視化をすぐに開始します。
- **マイクを使う**：ユーザーの声や周囲の音を可視化します。
- **音声をアップロード**：ローカルの音声ファイルを探索します。

ワンクリックで、訪問者が引き込まれる体験を提供してください。マイクへのアクセスやファイルのアップロードは任意となるよう、内蔵サンプルを用意します。再生前に、明確に識別できる無音プレビューを実行してください。

### 3つの探索方法

**1. 音の彫刻 — 芸術的な音声可視化**

ライブ音声解析に滑らかに反応する、粒子と流れるリボンの彫刻的なフィールドを作成してください。低周波数は大きな動き、中周波数は構造的な細部、高周波数は繊細にきらめくアクセントに対応させます。音量が急に変化しないよう、スケールとエネルギーに影響させてください。

話し声、手拍子、ハミング、音楽がそれぞれ明らかに異なる反応を示すようにします。このモードは音の芸術的解釈として表示してください。

**2. 波形エクスプローラー — 信号を理解する**

アニメーションする波形と周波数スペクトルを並べて表示し、必要に応じて空間的な表示も選べるようにします。波形は信号が時間とともにどう変化するかを、スペクトルは含まれる周波数成分を示すことを、わかりやすく説明してください。

周波数と音量のコントロールを明確に表示した、操作できるトーンジェネレーターを含めます。純音と、より豊かな音色を比較して違いを確認できるようにしてください。初期音量は控えめにし、音声の切り替えは滑らかに、停止コントロールはわかりやすくします。表示上の振幅は入力信号のレベルを示すものであり、校正された物理的な音量ではないことを説明してください。

**3. 共鳴パターン — 振動を探る**

砂のような粒子が節のパターンを形成する、仮想の振動板を表示します。励振周波数を変えることで探索できる、慎重に実装された複数の振動モードを用意してください。

パターンは、形状と境界条件が定義された文書化済みの板モデルに基づかせます。粒子は振動が最小となる領域の近くに集まることを説明してください。これは教育用シミュレーションであると明記し、簡略化している点も説明します。装飾効果は科学モデルと視覚的に明確に区別してください。

### 発見しやすくする

**「一定の音程でハミングしてみよう」「一度手をたたこう」**、**「低い音と高い音を比べよう」**のように、状況に応じた短い案内を表示してください。それぞれに、すぐ見える反応を組み合わせます。

高度なコントロールは折りたたんでください。一時停止、リセット、全画面表示、感度、動きの強さのコントロールを用意します。モードを切り替える際も、音源と再生状態を明確に維持してください。シーンを覆わない形で、各モードに短くアクセシブルな説明を表示します。

### 音声とプライバシー

再生と解析には**Web Audio API**を使用し、安定したスムージングと適切な正規化を行ってください。マイクへのアクセスは、ユーザーが選択した後にのみ要求します。マイク入力とアップロードしたファイルはローカルで処理し、音声をアップロード、保存、送信してはなりません。 この体験を中学校の物理授業用教材にしてください。波形およびスペクトルモードでは、波長・振幅・周波数を中国語の用語と単位で表示し、共鳴モードでは定常波と節を短い図で説明します。各モードの開始時に60字以内の中国語による授業向け説明を表示し、終了時にはページ上で回答できる選択式問題を出してください。正解すると次の振動モードがアンロックされるようにします。 常時表示されるマイクインジケーターと、マイクを解放する明確な**「マイクを停止」**コントロールを表示してください。フィードバックを防ぐため、スピーカー経由のマイクモニタリングは無効にします。権限の拒否、使用可能なデバイスがない場合、未対応のファイル、無音、中断された音声にも適切に対応してください。

検証済みのCC0または適切にライセンスされた内蔵音声を使用し、アセットのライセンス一覧を含めてください。

### ビジュアルと技術品質

洗練された粒子レンダリング、説得力のある奥行き、制御されたブルーム、滑らかなアニメーション、控えめなカメラ移動を使用してください。テキストは鮮明に、コントロールは読みやすく保ちます。激しい点滅や過度な視覚ノイズは避けてください。

GPU効率の高いジオメトリとシェーダー、再利用可能なバッファ、ピクセル密度の上限、適応型の粒子数、品質プリセットを備えた、保守しやすいThree.jsアプリケーションを構築してください。音声はローカルで解析し、同時訪問者のためにサーバー側の音声処理が必要にならないようにします。最適化された静的アセットは、CDN互換のホスティングで配信してください。

デスクトップでは滑らかなパフォーマンスを、中価格帯のスマートフォンでも実用的なパフォーマンスを目標にしてください。テストしたデバイスで、実際のフレームレート、メモリ使用量、読み込み動作を計測します。ページが非表示のときは不要なレンダリングを停止し、音声およびGPUリソースを適切に解放してください。

タッチ操作、キーボードナビゲーション、視認できるフォーカス状態、スクリーンリーダーで利用可能なコントロール、動きの軽減をサポートしてください。WebGLが利用できない場合は、軽量な2Dフォールバックを提供します。色や音声だけに頼らなくても、重要な情報を理解できるようにしてください。

### 納品物

完成したWebサイトを、動作する公開**HTTPS URL**にデプロイしてください。

実際のアプリケーションからレンダリングした、同期されたライセンス済み音声付きのダウンロード可能な**30～45秒、1920 × 1080 H.264 MP4**を制作してください。純音が波形になる様子、より豊かな音が彫刻を変化させる様子、複数の共鳴パターンのシーケンスを見せます。きれいな結果を得るため、決定論的な再生と安定したフレームキャプチャを使用してください。

ソースプロジェクト、ローカルアセット、ライセンス一覧、文書化した科学モデルと可視化マッピング、デプロイ手順、簡潔な検証レポートを納品してください。デプロイ済みの体験について、デスクトップとモバイルのレイアウト、マイク権限のフロー、音声再生、アップロード、モード切り替え、アクセシビリティ、動画再生をテストします。テスト環境と残る制約を正確に報告してください。

**含めないもの：**物理シミュレーションとして提示する装飾効果、ページ読み込み時のマイク権限要求、サーバーへの音声アップロード、自動再生される音、スピーカーのフィードバック、過剰なコントロール、急速な点滅、読めないラベル、仮置きの機能、崩れたモバイルレイアウト、ウォーターマーク、または本番稼働可能であるという裏付けのない主張。