デザイン · 実測
Claude Opus 5.5 でロゴを動かす: 6 秒のストーリー用イントロ
Claude Opus 5.5 が出てから、デザイナーたちはこのモデルがコードとして書いたモーショングラフィックスを投稿しています。自分で線を描いていくロゴ、形を変えるグラフ、所定の位置に滑り込んでくる文字などです。After Effects も動画モデルも使わず、HTML、SVG、CSS だけで作られています。
2026年9月27日、小さなブランドにとっていちばん簡単で役に立つ形を試しました。Instagram のストーリー用の 6 秒のロゴのイントロです。ロゴは Ciyo で作り、動きは claude.ai の Opus 5.5 がつけ、確認のためにすべてのフレームを書き出しました。Ciyo は Claude Opus 5.5 を提供していません。アニメーションの工程は Anthropic のアプリで行いました。
動画モデルではなくコードを使う理由
動画モデルはフレームを一枚ずつピクセルとして描くので、ロゴをフレームごとに少しずつ違う形に描き直すことがあります。コードは本物のベクターの形を動かすので、最後のフレームのロゴは渡したロゴそのままで、色もそのまま、どの大きさでも変わりません。
その代わり、スタイルには限りがあります。コードで作る動きは、すっきりとした幾何学的なものです。線を描く動き、ワイプ、弾む動き、フェードなどです。煙のような、映画のような、写真のようなクリップには、今も動画モデルのほうが向いています。
2026-09-26に投稿。投稿者は Claude Code の Opus 5.5 で作った 16 本のモーショングラフィックスと、その作り方を紹介しました。動きを一つに絞る、参考を Claude に見せてすべての状態に名前をつける、そして HTML と SVG を頼んで一回ずつ直していく、という方法です。私たちも依頼文で、すべての状態にタイミングつきで名前をつけるという同じ考え方を使いました。
まずはきれいなベクターのロゴから
コードで動かすには、ピクセルではなく形が必要です。架空のボードゲームカフェ Rook & Rabbit のロゴは、Ciyo で GPT Image 2.5 Flare を使って生成し、Vector（ベクター化）ツールで SVG にし、深緑 #1F4D3A とクリーム色 #F3E9D2 の正確な 2 色に整えました。ファイルには 52 個のパスがあります。
ロゴが PNG なら、先にベクター化してください。Opus が動かせるのは、分けられるものだけです。
依頼文: すべての状態とタイミングに名前をつける
SVG を添付し、6 秒間を 1 秒ごとに説明しました。それぞれの状態と、その始まりと終わりを名指しするかどうかが、使えるアニメーションとぼんやりしたアニメーションの分かれ目です。
添付したロゴを、ボードゲームカフェ Rook & Rabbit の Instagram のストーリーの最初の 6 秒用にアニメーションにしてください。1080 x 1920 の、それだけで完結する HTML ファイルを一つ作り、インラインの SVG と CSS または JavaScript を使い、外部のライブラリやフォントは使わないでください。ロゴのパスはそのまま使ってください。動き: 0-1 秒 クリーム色の画面。1-2.5 秒 ルークの輪郭が描かれていく。2.5-3.5 秒 それが緑で塗られる。3.5-4.5 秒 ウサギの耳が小さく弾んで飛び出す。4.5-5.5 秒 文字が下からフェードインする。5.5-6 秒 静止。色は #1F4D3A と #F3E9D2 だけを使ってください。一度だけ再生し、最後のフレームで止めてください。自分でフレームを確認し、工程を一つ変えた
Opus 5.5 にかかったのは約 2 分でした。ファイルを作り、要所のフレームを書き出して、それを見ました。そのうえで、自分の判断で工程を一つ変えました。緑の塗りがフェードインしていたため 1 秒ほど淡い中間の緑が出ていたので、塗りがブランドの 2 色のままになる、下から上へのワイプに切り替えたのです。
また、画面がすでにクリーム色なので、ロゴの正方形のクリーム色の背景は省きました。そして Instagram のボタンのための余白を残すように、ロゴを中央より少し上に置きました。
181 フレームで測ったこと
HTML を毎秒 30 フレームで書き出し、すべてのフレームで、ブランドの 2 色のピクセルが占める割合を数えました。コード自体にほかの色は含まれていません。ロゴの 52 個のパスのうち 51 個はそのままで（欠けている一つは正方形の背景です）、各段階は依頼どおり 1、2.5、3.5、4.5 秒に始まります。
輪郭が描かれ、塗られ、耳が出る間は、どのフレームも少なくとも 99.4% がブランドの色でした。残りはやわらかい輪郭の部分です。唯一落ち込むのは文字です。フェードインする間に淡い緑を通るため、4.9 秒の時点で正確な色のピクセルは 96.5% しかありません。フェードとはそういうもので、依頼文でフェードを頼んだのは私たちです。Opus の要約には、輪郭を除けばどのフレームも 2 色のままだと書かれていました。それは塗りについては正しいものの、フェードする文字については正しくありません。
ストーリーに仕上げて、ブランドを保つ
結果は動画ではなく HTML ファイルです。1080 × 1920 で開いて画面を録画するか、フレームを書き出して MP4 につなげてください。投稿する前に、最後のフレームをロゴのファイルと見比べてください。
パレットを厳密に守りたいなら、フェードではなくワイプや移動を頼み、そのことを依頼文に書いてください。ロゴ、色、タイミングを保存したプロンプト一つにまとめておけば、これから作るアニメーションはどれも同じブランドから始められます。
Claude Opus 5.5 によるロゴのアニメーション
Claude Opus 5.5 でモーショングラフィックスを作れますか
はい、コードとして作れます。2026年9月27日のテストでは、SVG のロゴを、頼んだタイミングどおりの 6 秒の HTML アニメーションにしました。
ブランドの色を正確に保てますか
コードの上では保てます。使われたのは私たちが渡した 2 色だけでした。書き出したフレームでは、フェードによって中間の色合いが生まれます。それが問題になるなら、ワイプや移動を頼んでください。
Instagram にはどう投稿しますか
HTML を 1080 × 1920 で開いて画面を録画するか、フレームを MP4 に書き出し、その動画をストーリーとしてアップロードしてください。
Ciyo の中でできますか
Ciyo は Claude Opus 5.5 を提供していません。ロゴは Ciyo で作ってベクター化し、claude.ai の Opus 5.5 で動かしてください。
まずは Ciyo でロゴを作る
マークを生成し、ベクターにして色を整えてから、動きのためにきれいなファイルを渡しましょう。