Claude Motion テンプレート：24種類のモーションスタイル

各スタイルの仕様

Paper Editorial

向いている用途: エッセイ、解説、論考。温かみのある紙の質感に、セリフ体の見出しとさびた赤のアクセントを1色。雑誌の特集のように、ゆったりと見せます。

レイアウト: 左に広い余白、見出しは左上、セクションラベルの上に細い罫線。バーは塗りつぶしのブロックです。

モーション: 28pxのゆっくりした上昇とフェード、0.8秒、power2.out。動く要素は一度に1つ。バウンドはありません。

Blueprint

向いている用途: アーキテクチャ、システム、技術解説。濃紺のグリッドにシアンの線画。すべてアウトラインで描かれ、プロッターのように拭き取りで現れます。

レイアウト: 背景にうっすらと60pxのグリッド。ボックスとバーはアウトラインのみで、塗りは使いません。ラベルは小さな大文字の等幅フォントです。

モーション: 左から右へのワイプ(clip-path)、0.9秒、power1.inOut。ラベルは図形に続いて表示されます。フェードもバウンドもありません。

Kinetic Poster

向いている用途: ローンチ、プロモーション、SNS用の短尺動画。黒い背景に、ポスター級の大きさのコンデンスド書体と、アシッドカラー1色。言葉が強く速く着地します。

レイアウト: 大文字のコンデンスド書体の見出しを、詰めた行間でフレーム全体に配置。1シーンにつき1つのアイデア。

モーション: ハードカット。要素が118%のスケールから0.32秒、expo.outでパッと入り、0.07秒ずつずれて登場します。漂うような動きはありません。

Quiet Keynote

向いている用途: プロダクトストーリー、投資家向けアップデート。淡い背景にたっぷりの余白、白いカードの上に落ち着いた数字。1フレームにつき数字は1つ。

レイアウト: 中央揃え。やわらかな影のついた白いカード。1シーンあたり12語以内。

モーション: 92%から100%へのやわらかなスケールとフェード、0.7秒、power3.out。数字は1.2秒かけてカウントアップします。

Chalk Lesson

向いている用途: 授業、チュートリアル、コース教材。手書きの見出しと黄色のハイライトがある緑の黒板。手順が1つずつ書き出されます。

レイアウト: 手書きの見出しと、左に並ぶ番号付きの手順。重要な用語には黄色の下線が引かれます。

モーション: 書いているように左から右へワイプ、0.7秒、power1.out。行の間隔は0.22秒です。

Ledger

向いている用途: レポート、指標レビュー、財務。白い紙面に等幅の数字、成長を示す緑を1色だけ使用。グラフが読みやすいように作られています。

レイアウト: すべての見出しの下に細い罫線。数字は等幅フォント。グラデーション、影、3Dは使いません。

モーション: 16pxの素早い上昇、0.45秒、power2.out、0.08秒ずつずらして表示。バーはベースラインから伸び、ラベルが続きます。

Terminal

向いている用途: 開発ツール、変更履歴、CLIデモ。等幅フォントの炭色のターミナルウィンドウに、緑のプロンプト。実際の出力のように、行が段階的に表示されます。

レイアウト: すべてがタイトルバーのある1つのウィンドウ内に収まります。見出しはプロンプトから始まり、変更された行はアクセントカラーで示します。

モーション: タイピングのように見える段階的なワイプ。0.6秒で16ステップ、行の間隔は0.2秒。イージングカーブは使いません。

Sunrise

向いている用途: ブランドリール、お知らせ、イベントのオープニング。コーラルからバイオレットへのグラデーションに、丸みのある白い文字。親しみやすく明るい雰囲気で、弾むように登場します。

レイアウト: グラデーションは全面に広がる子要素に適用。ラベルはピル型。バーとステップは大きな角丸の半透明の白です。

モーション: 86%のスケールから弾むようにポップイン、0.55秒、back.out(1.6)、0.09秒ずつずらして表示。背景は動きません。

Glass

向いている用途: プロダクトストーリー、プレミアムなローンチ。淡い背景に、空気中に漂うようなやわらかな色と、すりガラス風の白いパネル。落ち着いて上質に見え、余白もたっぷり。

レイアウト: 背景にぼかした色面を2つ配置。パネルは明るい縁取りと深くやわらかな影のある半透明の白です。

モーション: 92%から ゆっくり柔らかく拡大しながらフェードイン。0.8秒、power3.out。パネルは同時ではなく、1枚ずつ順に登場します。

Midnight

おすすめ: 開発者向けプロダクト、ロードマップ、変更履歴。黒に近いキャンバス、細い罫線、引き締まった文字、そしてラベンダー色のグローが1つ。正確で静かな印象です。

レイアウト: コンテンツの背後に柔らかなグローを1つ配置。すべてのパネルに2pxの細い罫線を付けます。見出しは詰め気味で、大きくしすぎません。

モーション: 14pxの短い上昇、0.5秒、power3.out、0.07秒刻みで間隔を詰めて順に表示。速く正確で、オーバーシュートはありません。

Pixel

おすすめ: 技術解説、遊び心のあるデータストーリー。温かみのあるクリーム色に、オレンジから黄色のブロックと角の四角い形。すべてがピクセルが点灯するように、段階的に現れます。

レイアウト: 角はすべて四角にします。バーは暖色のブロックを積み重ねたもの。各見出しの下に小さな四角を一列に並べます。

モーション: 8段階のステップワイプ、0.5秒、間隔は0.14秒。滑らかなイージングは一切使わず、パッと切り替わります。

Aubergine

おすすめ: チームへの共有、社内コミュニケーション、オンボーディング。濃い紫に暖かい黄色、チャットの吹き出し型パネル。同僚からのメッセージのような、親しみやすく会話的な雰囲気です。

レイアウト: 各ステップは角が1つだけ四角い吹き出し。ラベルはピル型にします。文は短く、話し言葉で書きます。

モーション: 吹き出しが86%から少しオーバーシュートしながらポップイン。0.5秒、back.out(1.4)、0.16秒間隔で、メッセージが届くように表示します。

Graph Paper

おすすめ: 技術ドキュメント、エンジニアリングの更新情報、ベンチマーク。淡い技術的なグリッド、等幅フォント、そして重要な結果にだけ使う1色の緑。丁寧に書かれた実験ノートのように読めます。

レイアウト: 背景に48pxの細かいグリッド。2pxの枠線付きの白いパネル。見出しは控えめにし、主役はデータです。

モーション: 左から右へのワイプ、0.55秒、power2.out、0.1秒間隔。線はフェードではなく、描き出されます。

Pastel Shapes

おすすめ: ワークショップ、クリエイティブブリーフ、コミュニティ投稿。クリーム色の紙のような背景に、遊び心のあるパステルの幾何学模様、丸と四角を混ぜた形。協力的で、少しグリッドから外れた雰囲気です。

レイアウト: 各バーとステップに、パステルカラーを順番に割り当てます。角は丸と四角を交互にします。

モーション: 86%から弾むようにポップ。0.5秒、back.out(1.8)、0.1秒間隔。図形が手で置かれたように見えます。

Signal

おすすめ: お知らせ、インシデントレビュー、力強いメッセージ。深い黒に、斜めに走る赤い帯と太い白の文字。緊迫感があり、読み飛ばせません。

レイアウト: 斜めの赤い帯が背景を横切ります。見出しは非常に詰めます。赤い要素は1シーンにつき1つだけです。

モーション: 118%のスケールからのハードカットで0.3秒、expo.out、0.06秒間隔。すべてのシーンがビートに合わせて始まります。

Harbor

おすすめ: 金融、料金、ビジネスレビュー。淡い背景に濃いネイビーの文字、そして自信を感じさせるインディゴ1色。上部にやわらかなグラデーションが入り、信頼感があって整った印象です。

レイアウト: 上端に斜めのカラーバンドを配置。柔らかな影を付けた白いパネル。数字は大きく、ネイビーにします。

モーション: 22pxずつ均等に上昇、0.6秒、power2.out、0.1秒間隔。安定して予測しやすく、遊び心のある動きはありません。

Newsprint

おすすめ： お知らせ、公的な報告書、ストーリー。オフホワイトの紙、黒の明朝体の見出し、赤い罫線1本。新聞の1面のような読み心地です。

レイアウト： 各見出しの上に太い黒の罫線、下に細い罫線を配置。角はすべて直角です。

モーション： 少し大きめの状態から素早く収まります（0.45秒）。ページを叩きつけるような動きで、バウンドはしません。

Botanical

おすすめ： ウェルビーイング、サステナビリティ、教育。クリーム色の紙、セージグリーン、ゆったりした明朝体。水彩画の絵で穏やかな雰囲気です。

レイアウト： 余白を広く取り、パネルは角丸。各ラベルの上に小さなリーフグリーンの罫線が入ります。

モーション： 20pxだけゆっくり上昇しながら長めにフェードインします（0.9秒、0.16秒間隔）。素早く現れるものはありません。

Neon Night

おすすめ： イベント、音楽、ゲーム、ナイトライフ。ミッドナイトブルーにマゼンタの光。力強い見出しと光る縁で、暗い会場に映えます。

レイアウト： パネルには細く光る枠線が付きます。強調されたバーと数字はマゼンタに光ります。

モーション： 86%から少し行き過ぎてポンと現れます（0.5秒、0.09秒間隔）。揺れずに活気を出せます。

Clay

おすすめ： オンボーディング、製品ツアー、親しみやすい解説。温かみのあるベージュにテラコッタ色と柔らかな丸い形。親しみやすく、子どもっぽくなりません。

レイアウト: 下に柔らかい影を落とした、とても丸いパネル。番号バッジは円形です。

モーション: 少しオーバーシュートするやわらかなポップ。0.6秒、0.12秒間隔で、ものをそっと置くように表示されます。

Riso Print

おすすめの用途: ジン、カルチャー、デザインレビュー。ブルーと蛍光ピンクで刷った温かみのある白い紙。大きな縦長の見出しは、あえて少しラフに仕上げています。

レイアウト: ブルーの縦長の大文字見出しに、ピンクのハイライト。ラベルはピンクのブロックです。

モーション: 118%から素早く強く着地、0.4秒。要素はスタンプを押すように収まります。

ボードルーム

おすすめの用途: 戦略、コンサルティング、取締役会資料。白、ネイビー、ロイヤルブルー1色。結論を先に示す見出しと整ったパネルで、コンサルタントが組むページのような構成です。

レイアウト: 各見出しの左にブルーの罫線。パネルはフラットで、極細の枠線を付けています。

モーション: 16pxの短い上昇、0.5秒、0.08秒間隔。きびきびとして均一で、装飾に走りません。

水墨画

おすすめの用途: エッセイ、哲学、ブランドストーリー。和紙、黒インク、小さな赤い印。たっぷりの余白は意図したものです。

レイアウト: テキストは左の3分の2に、周囲にゆとりを持たせて配置。ラベルは小さな赤い四角の印です。

モーション: 左からゆっくりワイプ、1秒、0.2秒間隔。筆を走らせるように現れます。

ステッカー

おすすめの用途: 子ども向け、授業、SNS投稿、楽しいお知らせ。明るい黄色、太い黒の輪郭線、ホットピンク。どのパネルもステッカーのように見えます。

レイアウト: 太い黒の輪郭線とくっきりしたずれた影を付けた白いパネル。ノートに貼ったステッカーのようです。

モーション: はっきりオーバーシュートする弾むポップ、0.45秒、0.1秒間隔。遊び心を意図したものです。