あなたの物語はここから
ステップ 01
コンテンツを追加
記事でも、台本でも、ひらめきでも。すでにある言葉から始めましょう。
CLAUDE MOTION SKILLS · CLAUDE CODE と CODEX 向け
Claude Motion:
どんな記事にも動きを。
記事 → 台本 → メモ → アイデア → 次の動画
伝えたい物語を、自分らしい見た目で。いつものエージェントを使って、言葉をアニメーション動画に変えましょう。
CLAUDE MOTION SKILLS動きのデザイン習作 ↗
✳
ひとつのアイデアから思わず見たくなる
作品をつくろう。
作品をつくろう。
言葉とリズム。新しい視点。
オリジナルのモーション習作
HTML → モーション対応ツール
✳ Claude Code CodexOpenCodeCursorKimiお気に入りのエージェントでも
お気に入りのツールの中で、そのまま。
Claude Code · 制作の流れをプレビュー
専用CLIをインストール
curl -fsSL https://claudemontiondesignskills.org/downloads/install.sh -o /tmp/cm-skills-install.sh sh /tmp/cm-skills-install.sh export PATH="$HOME/.local/bin:$PATH" cm-skills setup
cm-skillsをインストールし、デバイスコードで認証してClaude CodeまたはCodexで制作。
使い方
3つのステップで、ひとつのよい物語。
コンテンツを用意し、方向性を決める。物語にふさわしい動きを与えましょう。
自分らしく仕上げよう
ステップ 02
ビジュアルスタイルを選ぶ
大胆なタイポグラフィ、落ち着いたプレゼンテーション、紙のコラージュ。物語に合う表現を見つけましょう。
始めたいときに、すぐ
ステップ 03
プレビュー、仕上げ、共有
絵コンテを編集し、動きをプレビューして、プロジェクトを丸ごと持ち出せます。
モーション · HyperFrames ベース
HTML から、動き出す物語へ。
自由なキャンバス、正確なタイムライン、そして手元に残せるプロジェクト。
あなたのコンポジション
小さなアイデアを。
美しく語る。
あなたのエージェント美しく語る。
見出し · シーン 01
レイヤーとモーション
一言ずつ紡ぐ物語
自分の音声を追加
読みやすさを考えた設計
編集可能な HTML。言葉も、色も、タイミングも、すべて思いのまま。
繰り返し磨ける設計
同じ作品をコーディングエージェントでさらに磨けます。
プロジェクトをまるごと保存
ソースファイルをダウンロードし、HyperFrames でローカルレンダリングできます。
あなた自身の創作パートナー
使い慣れたコーディングツールと連携できます。
HeyGen のオープンソース HyperFrames エンジン（Apache-2.0）を使用し、独立して開発しています。
下書きから完成まで
物語に必要なものを、ひとつに。
シンプルに始めて、自分らしく仕上げる。創作の主導権はあなたの手に。
動きをつけよう。
文字 ↗キネティックタイポグラフィ
言葉に、もう少し心を動かす力を。
明確な視点。
ビジュアル ↗ビジュアルで伝える物語
アイデアを、もっと見やすく、わかりやすく。
シーン 01 → 02
物語 ↗編集可能な絵コンテ
各シーンの順序、文章、テンポを調整できます。
次の物語。
ワークスペース ↗自分だけのワークスペース
下書きをローカルに保存するか、プロジェクトをアカウントに保存できます。
共有する準備ができました。
共有 ↗プレビューを共有
準備ができたら、公開リンクを作成しましょう。
HTMLからMP4へ。
書き出し ↗ローカルでの動画書き出し
ソースキットを使い、自分のパソコンで HTML から MP4 を作成しましょう。
CLAUDE CODE / CODEX
あなたのエージェントで、あなたの創作を。
ここで初稿を作り、コーディングエージェントでプロジェクトを開きましょう。ゆっくりとした登場、印象的な導入、違うリズムなど、変えたい点を伝えてください。すべてのプロジェクトを引き続き編集できます。
| ここから始めよう | ローカルで続きを制作 |
|---|---|
| 記事または台本 | あなたのコーディングエージェント |
| 編集可能なシーン | 磨き上げたモーションデザイン |
| HTML アニメーションのプレビュー | HyperFrames で MP4 出力 |
| サブスクリプション | ご自身のツールと契約プラン |
MOTION / PPT
あなたの表現に合うスタイルを選ぼう。
ビジュアルを選択。すべてのスタイルが動作するオリジナル作品です。
内容に合わせる
テーマ、対象、雰囲気を入力。キーワードで検索し、複数選択できます。
67 種類のスタイルとリソース
ビジュアルを選択。すべてのスタイルが動作するオリジナル作品です。
スタイルを選んで作るすべてのスタイル
モーション
- Kinetic Type
- Paper Collage
- Quiet Keynote
- Data Story
- Frosted Product
- Thoughtful Paper
- Blueprint
- Soft Clay
- Watercolor Story
- Tool Focus
- Shared Paper
- Airy Signal
- Playful Selection
- Electric Layer
- Evidence Board
- Cutout Explainer
- Newsprint
- Product Brief
- Picture Book
- Purposeful Motion
- Retro Cutout
- Directors Board
- Whiteboard
- Canvas Principles
- Ink Press
- Brand Rhythm
- Geometric Proof
- Painted World
- Poster Press
- Measured Beat
- Naturalist Sketch
- Starfield Launch
- Inkline Stories
- Storyboard Studio
- Dimensional Launch
- Neon Reel
- Nordic Gouache
- Spring Captions
- Refraction Launch
- Annotated Comic
- Colorful Recap
- Single Line
- Word Cadence
- Story Route
- Motion Framework
- Geometry Lab
- Painted Verse
- Spring Stickers
- HTML Story
- Motion Recipes
- Research Reel
- Canvas Sequence
- SaaS Clay
- Inkline HUD
- Connected Build
- Precision Glow
- Pixel Warmth
- Document Clear
- Sage Order
- Connected Answers
- Red Diagonal
- Dark Material
- Conversation
- Spectrum Ribbon
- Mint System
- Monochrome Engine
- Expanding Modules
PPT
- Academic Argument
- Acid Agency
- Apricot Ink
- Aqua Campus
- Architectural Project
- Article Brief
- Blue Block Company
- Blue Lime Ledger
- Botanical Quiet
- Brand Story
- Brush Paper
- Chromatic Futures
- Cinematic Wilds
- Citrus Loop
- Cobalt Dark Pitch
- Cobalt Growth
- Cobalt Ribbon
- Cobalt Serif
- Cobalt System
- Confetti Gathering
- Consulting Storyline
- Cozy Island
- Visual Framework
- Electric Studio
- Field Notes
- Gallery Catalogue
- Golden Market
- Image Narrative
- Inclusive Cutpaper
- Ink Landscape
- Lavender Editorial
- Learning Loop
- Lilac Pitch
- Lime Endurance
- Mint Marker
- Mono Acid
- Navy Glass
- Neon Makers
- Ochre Editorial
- Orbital Workshop
- Pastel Cutout
- Primary Classroom
- Pop Motion
- Primary Doodle
- Prismatic Fashion
- Red Black Zine
- Research Paper
- Research Talk
- Sky Glass
- Slate Social Report
- Soft Gradient
- Sorbet Window
- Spectrum Strategy
- Starlit
- Steel Curve
- Storybook Margin
- Sunlit Structure
- Tidal Playbook
- Visual Canvas
- Yellow Balance
- Yellow Sketchnote
こんな方に
伝えたいことがある、すべての人へ。
クリエイター
視聴者が保存したくなる、次のストーリーを。
教育者
複雑なアイデアを、わかりやすいビジュアルに。
個人開発者
製品ならではの魅力を伝えよう。
ストーリーテラー
大切な言葉に、新しいリズムを。
料金
気軽に始められる場所。
モーション、61種類のPPTスタイル、音声クレジット。自分のClaude CodeやCodexで制作し、PCでレンダリング。
音声機能の提供状況を確認できていません。サービス状況を確認するまで購入はできません。契約前にページを再読み込みして確認してください。
オリジナル実装
Creator
$19.90/ 月
80,000 クレジット / 月
- モーション + 61種類のオリジナルPPT
- HTMLプレゼンと発表者ノート
- 自分のエージェントプランで、MP4はローカル出力
オリジナル実装
Studio
$49.90/ 月
240,000 クレジット / 月
- モーション + 61種類のオリジナルPPT
- HTMLプレゼンと発表者ノート
- 自分のエージェントプランで、MP4はローカル出力
解約は支払い済み期間の終了時に適用。ダウンロード済み作品は引き続き利用可能。AIモデルの契約は別途必要です。
よくある質問
よくあるご質問。
これは Anthropic の公式製品ですか？+
いいえ。Claude Motion Skills は独立して運営されています。Claude Code と Codex という名称は対応ツールを示すもので、提携関係を意味しません。
ここでは何を作れますか？+
記事や台本から編集可能な絵コンテを作成し、HTML アニメーションをプレビューして、ローカルで動画をレンダリングするためのプロジェクトキットをダウンロードできます。
AI のサブスクリプションは必要ですか？+
ブラウザーの絵コンテ機能とテンプレートは AI なしで利用できます。コーディングエージェントで仕上がりを調整する場合は、ご自身のエージェントと契約プランを使ってください。モデルの利用クレジットは含まれていません。
サブスクリプション+
解約は支払い済み期間の終了時に適用。ダウンロード済み作品は引き続き利用可能。AIモデルの契約は別途必要です。
プロジェクトはどこに保存されますか？+
下書きはこのブラウザーに保存されます。ログインして「クラウドに保存」を選ぶと、プロジェクトがアカウントに保存されます。共有リンクは、自分で作成した後にのみ公開されます。
MP4 で書き出せますか？+
プロジェクトキットをダウンロードし、依存関係をインストールして、付属の HyperFrames レンダリングコマンドを自分のパソコンで実行します。ブラウザーからは HTML と完全なソースキットを書き出せます。
あなたの次のストーリーは、ここから。
Claude Code · 制作の流れをプレビュー
専用CLIをインストール
curl -fsSL https://claudemontiondesignskills.org/downloads/install.sh -o /tmp/cm-skills-install.sh sh /tmp/cm-skills-install.sh export PATH="$HOME/.local/bin:$PATH" cm-skills setup
cm-skillsをインストールし、デバイスコードで認証してClaude CodeまたはCodexで制作。