Awesome Opus 5.5 Videosとは？
Awesome Opus 5.5 Videosは、Claude Opus 5.5で作成された話題の動画を集めたキュレーションコレクションです。各プロジェクトは、HTML、Canvas、SVG、Three.js、GSAP、GLSL、WebGL、Web Audio、パーティクルなどの技術を使い、Claudeにアニメーションをコードとして記述させて制作されています。
リポジトリには、prompts/ディレクトリとdata/videos.jsonに282件のプロンプトが収録されています。READMEでは、異なるプロンプトごとに1例を選んだ100件のエントリーを紹介し、各エントリーから作者のオリジナル投稿にリンクしています。
これはインストールしてインポートするソフトウェアライブラリではありません。実用的なプロンプトギャラリーとして、例を選び、そのプロンプトをコピーして、自分のAIコーディングエージェントに似た体験を作成させるためのものです。
Skillryで282本すべての動画を、ライブリメイクと並べて見ることができます。
クリエイティブカテゴリからコレクションを探す
注目の例は4つの主要グループに分類されています。これにより、試したいビジュアルスタイルやインタラクションの種類から、より簡単に始められます。
- モーショングラフィックス：アニメーションによるビジュアル構成をベースにした58例。
- 解説：アニメーションを通じてアイデアを伝える16例。
- 3Dシーン：ブラウザ上の立体ビジュアルを使った14例。
- ゲームとインタラクティブ：ユーザー入力に反応したり、小規模なプレイ可能体験のように動作したりする12例。
掲載されている実装は、軽量なCanvasやSVGの実験から、Three.js、GSAP、GLSL、WebGL、Web Audio、AI生成画像、パーティクルシステムを使ったプロジェクトまで多岐にわたります。各エントリーの横に表示される技術ラベルを参考にすると、適切な出発点を選べます。
リポジトリをセットアップする
プロンプトを閲覧するだけなら、パッケージをインストールする必要はありません。検索や参考資料の保存、構造化された動画データの確認を行いたい場合は、ローカルにクローンすると便利です。
- GitHubリポジトリを自分のコンピューターにクローンします。
- エディターでリポジトリのフォルダーを開きます。
prompts/ディレクトリで、個別のMarkdownプロンプトファイルを確認します。- コレクション全体を構造化データとして扱う場合は、
data/videos.jsonを開きます。
git clone <repository-url>
cd <repository-directory>
READMEには、必要なランタイム、依存関係のインストールコマンド、ローカルアプリケーションサーバーについての指定はありません。このコレクションは、主にプロンプトを読み、リンク先の例を参考にするためのものです。生成したプロジェクトが外部ライブラリやブラウザAPIを使用する場合は、そのプロジェクトに必要なセットアップ手順をClaudeに含めるよう依頼してください。
プロンプトの使い方
各注目エントリーにはPromptというリンクがあります。作りたいアニメーションに合った例を選び、リポジトリ内のプロンプトファイルを開きます。
- モーショングラフィックス、解説、3Dシーン、インタラクティブプロジェクトなどのカテゴリを選びます。
Canvas、SVG、GSAP、Three.jsなどの技術ラベルを確認します。prompts/内にあるリンク先のMarkdownファイルを開きます。- プロンプトをClaude Opus 5.5、または普段使っているコーディングエージェントにコピーします。
- エージェントにプロジェクトファイルを生成し、実行方法を説明するよう依頼します。
- 生成されたHTMLプロジェクトをブラウザで開き、出力を反復的に改善します。
たとえば、Canvasの例に対応するプロンプトファイルは、ブラウザアニメーションの出発点として利用できます。ビジュアルのアイデアだけをコピーするのではなく、描画方式、動き方、ビジュアルの雰囲気、インタラクション、技術的制約など、プロンプトの重要な要件を維持してください。そのうえで、題材やスタイルを変えて自分らしい結果に仕上げます。
まず1つのプロンプトから始め、正確にコピーして生成結果を実行し、短い追加リクエストで変更を加えていきます。
反復ワークフローの例
実用的なワークフローは次のようになります。
- 選択したコンセプトを自己完結型のHTMLファイルとして実装するようClaudeに依頼します。
- 最新のブラウザでファイルを実行し、アニメーションが正しく描画されるか確認します。
- 色のパレット変更、トランジションの速度調整、新しいインタラクションの追加など、1つの変更に絞って依頼します。
- 別の変更を依頼する前に、修正版をもう一度テストします。
- 比較できるよう、うまくいったバージョンを別々に保存します。
特定の技術に依存するプロジェクトでは、リクエスト内で明示的に指定してください。たとえば、参照例にCanvasと表示されている場合はCanvasで実装するよう依頼し、3Dシーンを使った参照例にはThree.jsを指定します。これにより、生成結果を元の例に沿ったものにできます。
技術ラベルを理解する
Canvas
Canvasの例では、ブラウザーのCanvasに直接グラフィックを描画します。パーティクル、プロシージャルアニメーション、フレーム単位のモーションに適した選択肢です。
SVG
SVGの例では、拡大縮小可能なベクター図形としてビジュアル要素を構成します。幾何学的な構成、図解、輪郭を鮮明に保つ必要があるアニメーションに適しています。
GSAP
GSAPは、タイムライン、トランジション、動きを連携させる専用アニメーションライブラリを使用する例で使われています。
Three.js、WebGL、GLSL
これらのラベルは、より高度なレンダリング手法を示します。Three.jsは3Dシーン向けのJavaScriptフレームワークを提供し、WebGLとGLSLは低レベルのGPUアクセラレーションによるグラフィックやシェーダーエフェクトを支えます。
Web Audioとパーティクル
Web Audioの例では、ビジュアルとブラウザーのオーディオ機能を連携させます。パーティクルの例では、フィールド、軌跡、爆発などのエフェクトを生み出す、小さな要素の集合体に焦点を当てています。
より良い結果を得るための応用ヒント
- リポジトリをプロンプトライブラリとして活用する: 別のビジュアルを作る予定でも、選ぶ前に複数のプロンプトを比較しましょう。
- 技術ラベルに従う: 目的のプロジェクトに合った実装スタイルの例から始めましょう。
- 完全に実行できる結果を求める: 断片的なコードではなく、必要なコード一式と明確なブラウザー手順をClaudeに提示してもらいましょう。
- 小さなステップで反復する: ビジュアルの変更、インタラクションの変更、パフォーマンス改善を別々のリクエストに分けましょう。
- 比較用に元のプロンプトを残す: 結果に影響した変更を特定できるよう、変更版を元のプロンプトと並べて保存しましょう。
- ソースリンクを確認する: すべての注目エントリーには制作者の元の投稿へのリンクがあり、プロジェクトの背景をさらに確認できます。
- 構造化データで探す: 注目の例だけでなく282件すべてを対象にする必要がある場合は、
data/videos.jsonを検索しましょう。 - ブラウザーの権限をテストする: 音声、ユーザー入力、高度なグラフィックを扱うプロジェクトは、ブラウザーの権限やハードウェアによって動作が異なる場合があります。
クレジットとオリジナル作品
このコレクションでは、注目の動画を制作したクリエイターをクレジットし、元の投稿へのリンクを掲載しています。アイデアやプロンプトを再利用する場合は、元のエントリーを確認し、適切な帰属表示を維持してください。このリポジトリは発見と学習のためのリソースであり、個々の動画はそれぞれの制作者に帰属します。
完全な閲覧体験を利用するには、Skillryギャラリーを使用するか、リポジトリ内のプロンプトファイルを直接確認してください。
まとめ
Awesome Opus 5.5 Videosは、プロンプト主導のクリエイティブコーディングを実践的に学ぶ方法を提供します。カテゴリーを閲覧し、実装スタイルを選び、prompts/からプロンプトをコピーして、Claude Opus 5.5に実行可能なブラウザー体験を生成させましょう。Canvas、SVG、Three.js、GLSL、GSAP、Web Audioなどにわたる282件のプロンプトを収録しており、自分でアニメーションやインタラクティブな実験を始めるための多くの出発点を提供します。