トップページの白馬の表現について

トップページでは、白馬がアーチの奥から現れ、こちらに向かって駆けてきます。滑らかにつながる映像ではなく、姿勢が一枚ずつ切り替わり、その後ろに残像が残る表現です。

この記事では、足運びを固定位置で再生できるように切り出しました。素材の構成から、時間の刻み方、トップページでの描画までを紹介します。

白馬の足運び

「タカタッ、タカタッ」と駆ける感じは、姿勢の変化と、それぞれを表示する時間の組み合わせで作っています。下のデモでは、トップページで使っている素材の9〜12コマ目を、同じ位置・同じ大きさで繰り返します。

「再生する」で開始し、「一時停止」するとその姿勢で止まります。「先頭へ戻る」で最初の姿勢に戻せます。画面外へスクロールしたときは停止します。

これは足運びを観察するためのデモです。トップページにある接近・拡大・残像は省き、Canvas 2D API でスプライトの切り替えだけを描いています。

一枚の画像から姿勢を取り出す

素材は、12枚の姿勢を一枚にまとめた WebP のスプライトシートです。各コマの切り出し位置と寸法を指定し、必要な領域だけを表示します。

デモで使う4コマは、画像の下段に並んでいます。各領域は幅362px、高さ414pxです。次のコードは、先頭の姿勢を描く部分を抜粋したものです。

context.drawImage(
  image,
  0, 672, 362, 414,
  0, 0, canvas.width, canvas.height,
);

画像を置き換えるのではなく、同じ画像の参照領域を切り替えます。デモとトップページは、素材とコマ情報を共有しています。

コマごとに時間を変える

均等な間隔で切り替えると、足運びも均等に見えます。現在のトップページでは各コマの表示時間を固定値で指定し、意図的に間を変えています。

このデモが取り出している区間の表示時間は、順に201、373、273、316ミリ秒です。一周は1,163ミリ秒で、2コマ目に少し長い間があります。

2つ目の姿勢を長く見せることで、次の足運びに移る前に短い「ため」が生まれます。等間隔の切り替えよりも、ひとまとまりの拍として感じられる間を作っています。

const durationsMs = [201, 373, 273, 316];
const cycleDuration = durationsMs.reduce((sum, value) => sum + value, 0);

let time = elapsedMs % cycleDuration;
const frameIndex = durationsMs.findIndex((duration) => {
  if (time < duration) return true;
  time -= duration;
  return false;
});

これは時間からコマを選ぶ処理を簡略化したものです。実装では requestAnimationFrame の時刻を基準にし、経過時間から表示する姿勢を決めます。描画回数を数えて進めないため、端末のリフレッシュレートが変わっても周期は変わりません。

トップページでは奥行きと残像を加える

Blenderで3Dの白馬を動かす案や、動画として配置する案も検討しました。最終的には、姿勢の切り替えとモザイク状の残像を重ねることで、動きの印象をまとめています。

姿勢ごとに切り出し範囲、表示位置、大きさを定めた平面をあらかじめ用意し、経過時間に応じて表示する平面を切り替えています。位置と大きさが段階的に変わることで、白馬がアーチの奥から手前へ近づいてくるように見えます。アーチの奥にいる区間では、ステンシルによって見える範囲を制限しています。

次の図は、白馬の移動経路を検討するためにFigmaで作成したものです。アーチの奥から現れ、右手前へ回り込みながら大きくなる流れを一枚に重ねています。

下の3枚は、トップページと同じ描画処理で取り出した静止画です。アーチの輪郭を補助線として添え、移動と拡大が分かるよう同じ範囲を表示しています。「残像あり」を切り替えると、同じ姿勢・位置のまま残像の有無を比較できます。

過去の姿勢はすぐに消さず、現在の平面とあわせて表示することで、時間の断片として後ろに残します。古くなるにつれて透明度を下げ、モザイク、色のずれ、規則的なディザによる欠落を加えています。

キャプチャ動画と記事の更新は iOS の Claude から

トップページの白馬のモーションを録画するために、iOS 版の Claude アプリから Claude Code に相談しました。ポインターとクリックのプロットは、白馬の表示時間や同時に駆けられる頭数などをコードベースから読み取ってもらい、一緒に組み立てました。そのまま動画が作成されたので、予定になかった記事更新まで進みました。

同じサイトの更新フローは、Cursor for iOS のエージェント、ChatGPT iOS の Codex（接続 PC を操作する Remote）、Grok Bot から依頼する形でも進められます。今回は手元の Claude Code に繋いだ経路を使いました。

2026年8月のホームページリニューアルで書いたように、このサイトはエージェントとの会話から、投稿や更新ができるよう構築しています。CMS で編集する代わりに、Git のブランチで変更し、プルリクエストで反映します。今回もブランチの作成からプルリクエストまで、Claude Code で完結しました。

ソースコード

デモとトップページを含むサイト全体の実装は、GitHub リポジトリで確認できます。