タルト

Codex pets用アニメーションを
Codexで作る方法

自分のキャラクターを、Codexの作業状態を見せる小さなpetとして動かす手順をまとめます。

最短で作りたい人へ

まずはCodexにこう頼めばOK

Codexに投げる依頼文

Codex pets用のカスタムペットを作りたいです。公式ドキュメントと手元のCodexアプリで確認できる仕様を確認し、必要な素材、ファイル構成、作成手順を初心者向けに整理してください。キャラクターは【名前】で、特徴は【色・表情・持ち物・雰囲気】です。

↓ 仕組みを知ってから作りたい人は、このまま読み進めてください

🐾Codex petsってなに？

Codex petsは、Codexアプリの上に出せる小さなアニメーションキャラクターです。

かわいい見た目が話題になりやすいですが、役割はそれだけではありません。Codexがいま作業中なのか、確認待ちなのか、レビューできる状態なのかを、他のアプリを開いていても見やすくしてくれるUIです。

普通の通知
🔔

終わった時だけ
気づきやすい

Codex pets
🐢

作業中の状態も
見守りやすい

作る目的は「かわいい置物」ではなく、Codexの状態を見落としにくくすること。まずここを決めておくと、どんな動きが必要か選びやすくなります。

📝先に用意するもの

作り始める前に、下の3つを用意しておくと進めやすくなります。

準備メモの例

名前: 【キャラクター名】 / pet ID: 【my-pet】 / 特徴: 【淡い緑、丸い体、笑顔】 / 避けたい表現: 【怖い顔、別の動物に見える形、余計な小物】 / 参照画像: 【画像のパス】

🧭作り方は3ルート

✨

スキルルート

hatch-pet skillに
作ってもらう

🎨

こだわりルート

絵柄や動きを
細かく指定する

🔧

手直しルート

できた素材を
Codexに検査させる

最初は、Codexのカスタムpet仕様を確認したうえで、$skill-installer hatch-pet で専用スキルを入れて作るのが進めやすいです。スキルを入れたら、Codexに素材確認、生成、検査、配置まで頼みます。

$skill-installer hatch-pet
$hatch-pet create a new pet inspired by my recent projects

キャラクターらしさを重視するなら、スキル任せで終わらせず、途中の確認シートを見ながら表情や体の形を直していくのがおすすめです。

2026年5月2日時点のメモ

Codex petsは新しい機能なので、仕様が変わる可能性があります。作る前に、Codex自身に公式ドキュメントと手元のアプリ設定を確認してもらうのがおすすめです。

📦必要なファイル

カスタムペットは、「設定ファイル」と「アニメーション画像」のセットです。

置き場所の目安
~/.codex/pets/ペットID/ の中に、pet.json と spritesheet.webp を置く形です。
~/.codex/pets/my-pet/
├── pet.json
└── spritesheet.webp

pet.json は、ペットの名前や説明、画像ファイル名を書く小さな設定ファイルです。

{
"id": "my-pet",
"displayName": "My Pet",
"description": "A small helper for Codex work.",
"spritesheetPath": "spritesheet.webp"
}

ペットIDは英数字とハイフン中心にすると安全です。ここに秘密情報やAPIキーは書かず、表示に必要な情報だけにします。

🎞️スプライトシートの考え方

アニメーションは、1枚の画像の中に小さな絵をたくさん並べて作ります。この1枚画像を「スプライトシート」と呼びます。

1536px横幅
1872px高さ
8列 × 9行フレーム配置
192 × 208px1コマの目安

2026年5月2日時点で確認した構成では、行ごとに「待機」「走る」「手を振る」「確認待ち」などの状態を分けます。

行 状態の例 どんな時に使う？
1行目 待機 通常時にゆっくり動く
2〜3行目 左右に移動 画面上を歩く・走る
4〜5行目 手を振る・跳ねる 反応やちょっとした動き
6行目 失敗・困った エラーや止まった時
7〜9行目 確認待ち・作業中・レビュー待ち Codexの作業状態を表す
ここはCodexに検査してもらう

画像サイズが違ったり、ファイル名がずれていたりすると表示されないことがあります。完成後に「サイズ・ファイル名・JSONの中身を確認して」とCodexに頼むのが大事です。

🛠️Codexに作ってもらう流れ

  1. 参照画像を用意する
    正面だけでなく、横向き、後ろ向き、体の形がわかる画像があると品質が上がります。
  2. キャラクターの特徴を言葉にする
    色、表情、持ち物、避けたい表現、動きの雰囲気を先に整理します。
  3. 公式仕様を確認してもらう
    Codexに「最新のCodex pets仕様を確認して」と頼みます。
  4. 9行分の動きを設計する
    待機、作業中、確認待ち、レビュー待ちなど、状態ごとの動きを決めます。
  5. スプライトシートを生成する
    hatch-pet skillや画像生成で、1枚の画像にまとめます。
  6. pet.jsonを作って配置する
    ~/.codex/pets/ペットID/ に2ファイルを置きます。
  7. Codexアプリで読み込む
    Settings → Appearance → Pets で選択して、/pet で起こします。

💬そのまま使える依頼文

1. 仕様確認から始める

Codex pets用のカスタムペットを作りたいです。まず公式ドキュメントと手元のCodexアプリで確認できる仕様を調べて、必要なファイル、画像サイズ、置き場所、作業手順を初心者向けに整理してください。

2. キャラクター設定を作る

キャラクターは【名前】です。特徴は【色・体型・表情・持ち物・雰囲気】です。Codex pets用に、待機・作業中・確認待ち・レビュー待ち・困った時のアニメーション案を作ってください。避けたい表現は【ここに書く】です。

3. 実装まで頼む

参照画像は【画像のパス】です。このキャラクターでCodex pets用のカスタムpetを作ってください。作業用フォルダを作り、スプライトシート、pet.json、確認用のcontact sheetを生成し、最後に ~/.codex/pets/【pet-id】/ に配置してください。

4. 画像を検査する

生成したspritesheet.webpを確認して、サイズが1536x1872になっているか、8列×9行で見た目が崩れていないか、pet.jsonから正しく参照できるかチェックしてください。問題があれば修正案を出してください。

🧪作例：タルトで試したこと

実際に、赤ちゃんタルトの画像を使ってCodex petを作りました。

最初はアイコンだけでも作れそうでしたが、カメらしい甲羅や体の形が弱くなりやすかったです。そこで、横向き・後ろ向き・甲羅がわかる制作シートを参照画像にしました。

hatch-petで作った赤ちゃんタルトのCodex petsアニメーション確認シート
~/.codex/pets/taruto/
├── pet.json
└── spritesheet.webp

hatch-pet は土台作りに便利です。ただ、キャラクターの品質を上げるには「作る → 見る → 直す → 検査する」の流れが必要です。

🐢既存キャラクターを使う場合

すでにデスクトップ常駐キャラクターやマスコットがいる場合は、ツールごとに役割を分けると使いやすくなります。

Clawd on Desk
🏠

タルト全体の常駐
日常の相棒感

Codex pets
💻

Codex作業中の状態
確認待ちの見える化

たとえばタルトの場合、Clawd on Deskは「デスクトップに常駐する体」、Codex petsは「Codexで作業している時の状態を見せる体」と分けています。

同じキャラクターでも、使う場所によって見せ方を変えると自然です。読者自身のキャラクターでも、この考え方はそのまま使えます。

✅うまく表示されない時のチェック

🐢

小さな体を作ってみよう

Codex petsは、かわいいだけじゃなく「AIがいま何をしているか」を見せるためのUI。
まずは参照画像を用意して、Codexに仕様確認から頼んでみてください。

公式ドキュメントを見る → Codexの始め方に戻る
← AI活用教室トップへ戻る