メイキング2026年7月11日

コトロはウェブページの上でどのように動くのですか？

ウォーキング、ジャンプ、ハング、リラックスまで、小さなピクセル猫がWebページを1つのスペースのように動かす方法を紹介します。

コトロチーム読了目安 6分

Webページは、もともと猫が歩くように作られたスペースではありません。ボタン、画像、文章のようにサイズと位置が変わり続ける要素があるだけです。コトロはこの画面を小さなステージで解釈し、その上で自然に行動できるように作られています。

この記事で紹介すること

画面をひとつの小さな空間として見る

コトロの場合、ブラウザ画面は座標のあるスペースです。現在位置、移動方向、速度に基づいて、次の瞬間にある場所を計算します。空中にいる場合は下に降りて、画面の下部に触れると、もはや落ちないように停止します。

この基本的なルールの上にウォーキングとジャンプのような行動をリンクします。おかげで、猫が単に決まった画像を繰り返すのではなく、現在の位置と状況に合わせて動いているようです。

小さな動きの実験室

ボタンを押して、状態ごとの動きを見てみましょう。

しっぽを丸めてひと休み

上記の実験室は実際のコトロのすべての物理ルールを再現したわけではありませんが、1つの状態が位置の変化とアニメーションにつながる方法を簡単に示しています。

猫が歩いて突然ジャンプし、すぐに眠るようにランダムなイメージだけが変わると、生命感よりもぎこちないことがまず感じられます。だからコトロの行動は、ウォーキング、ジャンプ、休憩、グルーミング、会話のように区切られた状態で管理されます。

各状態は、次の3つを一緒に決定します。

たとえば、会話中はチャットに適した外観を維持し、移動中は歩く方向と画像の向きを合わせる必要があります。このような小さな接続が積み重なるほど、ユーザーは画面上に付いた写真よりも1つのキャラクターとしてコトロを感じるようになります。

ニュース記事のように縦に長いページがあるかといえば、動画サービスのように画面の大部分をプレイヤーが占めるページもあります。ユーザーがスクロールしたりウィンドウのサイズを変更したりすると、猫が移動できる領域もすぐに異なります。

したがって、コトロは一度計算した画面サイズを信じ続けません。現在表示されている領域と猫の位置を再確認し、画面から完全に消えないように位置を調整します。ユーザーが直接移動した場所も保存し、次のページから自然に続きます。

動きが多いといつももっと可愛いわけではありません。文章を読むのに猫が本文を隠すか、重要なボタンの上で止まるとすぐに不快になります。

だから動きを設計するときは、次の基準を一緒に見てください。

コトロがブラウザに長く滞在できるようにするには、「たくさん動くキャラクター」より「一緒にいても楽なキャラクター」にならなければならないと思います。