ずっと作りたかった「働く鳥たち」がサイトで動いた！キャラ作りからOpus 5.5での実装まで

西澤です。

弊社サイトのトップページを開くと、右側で鳥たちが働いています。

スズメのスズ、シマエナガのシマ、メジロのメロ、フクロウのフウ。 4羽が小さな島の仕事場を歩き回って、ホームページを作ったり、広告の数字を確認したり、書類を仕分けたりしています。

これ、ずっと作りたかったんです。

鳥たちが楽しそうに働きながら、ITの困りごとをひとつずつ解決していく。 そんな動くビジュアルをサイトに置きたいと、前から思っていました。

今回やっと形になりました。正直、最高に嬉しいです。

今回は、鳥のキャラクター作りから、サイトで動くところまでをどう進めたのかを書いていきます。 一発でうまくいったわけではなく、途中で何度かやり直しています。そのあたりも含めて紹介しますね。

最初は「動くもの」を先に作ってしまった

やりたかったのは、キャラクターが画面の中を動き回って、あくせく仕事をしている様子です。 それを、弊社サイトのサービス紹介の画像の場所で動かしたいと思いました。

そこでまず、ChatGPT（GPT-6 Astra）に「こういう動く表現を、今の画像の場所に入れたい」と相談して、3Dの試作を作ってもらいました。

動いてはいるんです。 でも、見てもらうとわかる通り、丸い鳥がいるだけなんですよね。

誰が誰なのかわからないし、愛着も湧きにくい。 ここで「先にキャラクターを決めないとダメだな」と気づきました。

キャラクターシートを作る。初案は「ただの可愛い鳥」だった

ということで、いったん動きの話は置いて、キャラクターデザインから始めました。

お願いしたのは、弊社のバーチャル社員「風早美桜」と同じタッチで、鳥のゆるキャラを4種類。 画像生成はCodexの画像生成機能（gpt-image-2）を使い、美桜の採用イラストと公式の参照画像を渡して、細い茶色の線や柔らかい塗りを合わせてもらいました。

1羽につき、正面・斜め・横・後ろ姿に加えて、作業中・喜ぶ・はてな・あせあせの表情が並んだシートです。

ただ、最初の案は可愛いけど、普通の鳥でした。

左が初案、右が採用した第2案です。

初案も悪くないのですが、実在のスズメを丸くしただけで、キャラクターとしての「この子らしさ」が弱い。 そこで第2案では、シルエットだけで見分けがつくことを目標に、頭の形や冠羽、尾っぽ、しぐさに特徴を持たせてもらいました。

4羽それぞれ、こんな特徴があります。

• スズ（スズメ）：風になびく前髪羽と、横結びのスカーフ
• シマ（シマエナガ）：白くて丸い体と、くるんと曲がる長い尾
• メロ（メジロ）：葉っぱ形の冠羽、白い目の輪、胸の菱形
• フウ（フクロウ）：角丸四角の輪郭、開いた本のような眉羽、胸の3つの菱形

名前は私が付けました。 スズメだからスズ、シマエナガだからシマ。メジロはメロ、フクロウはフウです。

採用イラストを置いてみた。でも、まだ満足できない

キャラクターが決まったので、今度はこの絵をサイトの仕事場に置いてもらいました。

ここで大事にしたのは、鳥を3Dモデルで描き直さないことです。 3Dにすると、せっかく決めた線や塗りの雰囲気が変わってしまう。なので、立体の仕事場の中に、採用したイラストそのものを立たせる形にしています。

鳥たちは一気にそれっぽくなりました。

でも、しばらく眺めていて、やっぱり物足りない。

床はただの板で、鉢植えやモニターは試作のまま。 鳥たちもその場に立っているだけで、最初に思い描いていた「あくせく働いている」感じにはなっていません。

Claude Opus 5.5で作り込み。一気に「仕事場」になった

そこで、ここからの作り込みはClaude Code（Opus 5.5）にお願いしました。

伝えたのは、ざっくりこれだけです。

• 全体のアニメーションや、周りの木・床の作り込みに満足していない
• 当初は、キャラクターが動き回っていろんな仕事をあくせくやる様子を作りたかった

そして返ってきたのが、今トップページで動いている仕事場です。

比べると、違いがよくわかると思います。

git の記録を見ると、採用イラストを置いた版から、この作り込み版までの間は約50分でした。 細かい調整はこの後も続けましたが、「そうそう、これがやりたかった！」という形が見えたのはここです。

① キャラクターシートを「動かせる素材」に切り分けた

一番感心したのがここです。

キャラクターシートには、1羽につき8つのポーズが描かれています。 Opus 5.5はこれを同じ大きさのマスに切り分けて、足元の位置を揃えた素材（アトラス）にしてくれました。

こうしておくと、鳥が歩く方向に合わせて「正面」「横」「後ろ姿」と絵を切り替えられます。 シートの絵はすべて左向きなので、右に歩くときは左右を反転させています。

仕事が終わったら「喜ぶ」、迷ったら「はてな」、書類がたまったら「あせあせ」。 絵は描き直さず、採用した絵の使い方だけで動きを作っているので、キャラクターの見た目が崩れません。

② 周りの小物を、手描きの鳥に合わせた

もうひとつ大きかったのが、床や机、木などの小物の見た目です。

以前は、ツルッとした3Dの小物の中に手描きの鳥が立っていて、ちょっと浮いていました。 今回は小物の塗りを3段階のアニメ調にして、鳥と同じ茶色の輪郭線を付けています。

これだけで、絵本の中の仕事場のようにまとまりました。

③ 4羽それぞれに「仕事」がある

鳥たちは、それぞれ仕事の流れを繰り返しながら歩き回っています。

• メロ：キーボードを打つと画面が組み上がり、スマホでの見え方を確認して公開
• スズ：壁のグラフを確認して、机で広告を調整すると棒グラフが伸びる
• フウ：AIのラインで流れてくる書類を仕分ける。たまってくると、あせあせ
• シマ：郵便や書類を持って、仕事場の中を運び回る

ちなみにこの役割は場面の演出で、キャラクターの固定の担当業務というわけではありません。

吹き出しで今やっていることをしゃべるので、ぼーっと眺めているだけでも楽しいです。 個人的には、シマの「いそがしい〜」が好きです。

④ サービス紹介にも、それぞれの場面を

トップページの3つのサービス紹介にも、内容に合わせた2羽の場面を入れています。

見えないところの気づかいも入っている

動くものをサイトに置くと、気になるのが重さです。 ここもOpus 5.5がかなり気を配ってくれていました。

• 画面に見えている間だけ動かす（スクロールして見えなくなると止まる）
• 「停止」ボタンで、いつでも止められる
• 端末で「動きを減らす」設定にしている方には、動かない静止画を表示
• 3Dが使えない環境や、画像の読み込みに失敗したときも、同じ鳥たちの静止画を表示
• 描画を1秒30コマにおさえて、同じ素材の部品はまとめて描く

見た目の楽しさだけでなく、サイトとしてちゃんと使えること。 ここを最初から考えてくれるのは、仕事でお願いする相手としても安心感があります。

最後の配置の微調整や、スマホ・停止ボタン・静止画の確認は、翌朝にCodexも使って仕上げました。 AIを1つに決めず、キャラクターの絵を作るのが得意なもの、コードを作り込むのが得意なもの、と使い分けたのも今回よかったところです。

なお、スマホ実機で長く表示したときの負荷は、引き続き確認していきます。

やってみて思ったこと

今回あらためて感じたのは、AIに作ってもらうときほど、「何を大事にしたいか」を先に決めておくのが大事ということです。

最初に動くものから作ってしまったときは、動いているのに「なんか違う」状態でした。 キャラクターを決めて、「この絵の雰囲気は崩したくない」という軸ができてからは、作り込みの方向がブレなくなりました。

そして、その軸さえ伝えれば、Opus 5.5はかなりのところまで一気に作ってくれます。 アトラスへの切り分けも、小物の輪郭線も、私から細かく指示したわけではありません。 「キャラクターがあくせく働く感じにしたい」という話から、そこまで考えてくれたのは本当に驚きました。

ずっとやりたかったことが、やっと形になった

鳥たちが楽しそうに働きながら、ITの困りごとを解決していく。

これは、弊社がやりたい仕事そのものでもあります。 「ホームページ」「広告」「AI」と聞くと、なんだか難しそうに感じる方も多いと思います。 でも、小さなチームがそれぞれの得意を持ち寄って、ひとつずつ片付けていけば、ちゃんと前に進める。

そんな雰囲気を、言葉ではなく絵と動きで伝えられるようになったのが、本当に嬉しいです。

トップページを開いたら、ぜひ少しだけ鳥たちを眺めてみてください。

▶ トップページで鳥たちの仕事場を見る

また、鳥たちの紹介ページも別に作る予定です。 名前や性格など、これから少しずつ育てていきたいと思っています。

キャラクターやアニメーションで、サイトに個性を出したい方へ

弊社では、今回のようなキャラクターを使ったサイト作りや、動きのある表現も、ご相談に合わせてご提案しています。

「うちの会社にもキャラクターがいたら面白そう」 「サービス紹介を、もっとわかりやすく見せたい」

そんなところからでも大丈夫です。

• キャラクターを使った接客や発信について：AIキャラクター×DX
• ホームページ制作について：ホームページ制作のサービス内容
• まずは話を聞いてみたい方：お問い合わせ

※画面は2026年9月27日時点の本番サイトのものです。動きや吹き出しの内容は、表示するタイミングによって変わります。