JOURNAL お問い合わせ

CASE 01制作事例

SHIBA DASH!! は、なぜアクセルとブレーキを外したのか

モデルを読みこまない3Dと、公開後の遊ばれ方。

柴犬が全力で駆けだし、リードの先の飼い主が引きずられていく。無料の3Dレースゲーム「SHIBA DASH!! お散歩グランプリ」は、AMIX GAMES の先頭・01番に置いている作品です。ページを開いて数秒で1周目を走らせるために何を削り、削ったぶんの奥行きをどこに残したのか。3Dモデルを1つも読みこまない作りと公開後のデータまで、順を追ってたどります。

SHIBA DASH!! お散歩グランプリのタイトル画像。3頭身の子柴と、リードの先で引きずられる飼い主

OVERVIEW作品の概要

作品名
SHIBA DASH!! お散歩グランプリ
ジャンル
3Dレース(ひとりで遊ぶ/2〜4人のオンライン対戦)
中身
柴犬4種 × コース6種 × 難しさ3段。8匹で走るグランプリ
操作
ハンドル(左右)だけ。スマホは画面のボタン、PCは矢印キー
技術
three.js(r128)・PeerJS(WebRTC)・Web Audio
サーバー
ファイルを配信するだけ。ゲーム用のサーバーは置いていない
制作
AMIX(企画・デザイン・プログラム。BGM は MusMus、効果音は効果音ラボの素材)

SHIBA DASH!! で遊ぶゲームの紹介ページ

01 — PLANレースゲームから、アクセルとブレーキを外す

一般的なレースゲームには、アクセル・ブレーキ・ハンドル・アイテムと覚える操作がいくつもあります。慣れた人には当たり前の手順でも、たまたまURLを開いた人は1周目のうちに置いていかれがちです。

SHIBA DASH!! では、犬が勝手に全力で走ります。プレイヤーが触るのは左右のハンドルだけ。アクセルもブレーキも置かず、リンクを開いて数秒後にはもうコースへ飛び出せる作りにしました。

操作を減らしたぶんだけ単調になりそうですが、駆け引きはリードの先で引きずられる飼い主に持たせました。コインを拾う当たり判定は飼い主の体にあり、宙に浮いたスニーカーに触れて「とまって!」と足が止まるのも飼い主の側です。犬の進路を切ると、ワンテンポ遅れて飼い主がその内側や外側をなぞる。この軌道のずれが読めるようになると、同じ左右ボタンでもタイムが縮まっていきます。

コース「おひる」。昼の街のサーキットを赤柴が飼い主を引いて走る コース「おおあめ」。雨の街を水しぶきをあげて走る
左:はじめての人向けの定番コース「おひる」。右:路面がすべり、ハンドルの反応も少し鈍る「おおあめ」。操作は同じでも、コースごとに考えることが変わる。

選べる4種の柴犬にも性格を振っています。赤柴はバランス型、黒柴は最高速が伸びるかわりに小回りが苦手、白柴はコーナーに強く、胡麻柴はダッシュ板の加速が最もよく効く設定です。曲がるのが苦手なら白柴、加速床をつないで走るのが好きなら胡麻柴と、遊び方に合わせて選べますが、どの犬でも1位は取れる範囲にそろえました。

02 — BUILD3コースから始めて、6コースへ育てる

プログラムの先頭には、作りはじめた当初のメモが今も残っています。そこに書かれている仕様は「ライバルAI 3匹・コース3種(昼・夕方・大雨)」。現在の SHIBA DASH!! は、ライバル7匹・コース6種・難しさ3段・オンライン対戦つきまで広がりました。

最初の3コースで手触りを固めてから、ビルの屋上をジャンプで渡る「シバクール」、SUPボードに乗って蛇行する川を下る「シバくだり」、星空の銀河を超高速で駆け抜けるボーナスステージ「SHIVA 2049」を順に追加しています。

コース「シバクール」。朝日の摩天楼の屋上を走り、ビルの間を大ジャンプ コース「シバくだり」。SUPボードで蛇行する川を下る コース「SHIVA 2049」。星空の銀河をリングをくぐりながら超高速で走る
あとから足したコース。左から「シバクール」「シバくだり」「SHIVA 2049」。

ブラウザゲームは、更新したファイルをサーバーに置けば、そのあと開いた人からそのまま新しい版に切り替わります。アプリストアの審査も遊ぶ側のアップデート待ちも挟まないため、コースを1本ずつ足していけたのは、この仕組みがあるからです。

03 — TECH3Dモデルを読みこまず、約240KBで街と犬を描く

3Dゲームでは、キャラクターや建物をモデリングソフトで作り、外部ファイルとして読みこむ作り方が一般的です。SHIBA DASH!! は外部の3Dモデルを1つも使っていません。犬も飼い主も街路樹も、箱・球・円柱といった基本の形をプログラムの中で組み合わせて組み立てています。

モデルデータの通信待ちがなくなるうえ、画面全体のデフォルメの調子も自然にそろいます。three.js とゲーム本体を合わせたプログラムの容量は、圧縮時で約240KB(手元での計測値)に収まりました。スマホでは描画の解像度上限を画面比2倍までに抑え、負荷を逃がしています。

使っている three.js は r128 で、現行と比べれば古い版です。AMIX GAMES では、ライブラリの版を上げるためだけに稼働中の作品を書きかえることはしていません。新作は新しい版で組み、安定して動いている過去作はそのまま残す。50本を超えて増え続ける作品を壊さずに保ち続けるための、制作上の決めごとです。

04 — ONLINEサーバーを置かない、2〜4人のオンライン対戦

タイトル画面の「フレンドと対戦」から招待URLを送ると、2〜4人で同じコースを走れます。空いた枠にはCPUの犬が入るため、2人対戦でも8匹のにぎやかなレースは変わりません。アカウント登録も専用アプリも不要です。

この対戦の裏側に、ゲーム専用のサーバーは置いていません。最初に相手を見つける仲介だけを PeerJS の公開サーバーに任せ、つながったあとはブラウザどうしが WebRTC で暗号化通信を直接やりとりします。

通信の形は、部屋を作った人(ホスト)を中心にした星型です。参加者はホストとだけつながり、CPUの犬もホスト1台が動かして全員へ配るため、誰の画面でも順位と展開が食い違いません。届いたデータは種類ごとに型と数値の範囲を検査し、外れた値は破棄します。名前に使える文字はかな・カナ・漢字・英数字に限り、部屋番号は乱数で発行、満員時と出走後の入室は弾く作りです。

公開後に何度も手を入れたのが、スマホで別アプリへ切り替えた瞬間に通信が途切れる問題でした。招待URLをメッセージアプリへ貼りに行っただけで接続が落ちることがあったため、待合室では離れた人が戻るのを待ち、レース中に抜けた枠はCPUがそのまま引き継いで完走するように直しています。

DESIGN NOTE

サーバーを持たないP2P方式は、毎月のサーバー維持費がかからず、URLを知っている友人どうしやイベント会場のその場で遊ぶ用途とよく噛み合います。反対に、見知らぬ人どうしの自動マッチングや全国ランキングの集計にはサーバー側の仕組みが不可欠です。対戦と一口に言っても、誰とどう遊ぶかで裏側の設計は大きく変わります。

05 — DEMO紹介ページの背景で、録画ではなく本物を走らせる

ゲームの紹介ページを開くと、背景で柴犬たちが実際にレースをしています。画面の文字と音を消し、操作を受けつけずに犬が自動で走る?demo=1モードをゲーム本体に足し、ページの背面にそのまま敷いたものです。スクロールしてコース紹介の節に入ると、背面を走るコースもリアルタイムに切り替わります。

?demo=1 で走る SHIBA DASH!!。AMIX GAMES トップの紹介ウィンドウでも、このモードから撮った短い映像を流している。

同じ仕組みは、企業・団体向けのご案内ページの冒頭背景にも転用しました。ゲームの見た目を直したときも動画を撮りなおす手間がなく、ページを開きなおすだけで最新の画面が走ります。

ただ、紹介ページの裏で3Dゲームを丸ごと動かすと読み込みが重くなります。公開URLを Search Console でテストした際、描画の負荷で時間切れになり実際にエラーが出ました。現在はクローラーからのアクセスや最初の操作が起きる前には背景のゲームを読みこまず、本文だけを先に返すように分けています。

06 — DATA一覧の「01番」はどう遊ばれているか

AMIX GAMES の全作品の遊ばれ方は毎日集計し、DATA CENTRAL で公開しています。その中から SHIBA DASH!! の直近の数字を取り出しました(DATA CENTRAL と同じく割合と順位・倍率のみで、閲覧数の実数は非公開としています)。

SHIBA DASH!! — PLAY DATA

集計:AMIX GAMES DATA CENTRAL(2026年11月10日までの値)

4位月間の閲覧数の順位(10月12日〜11月10日・AMIX GAMES の全作品の中で)
56%9〜15時に遊ばれた割合(11月4日〜10日)
2.3倍平日1日あたりと、週末1日あたりの比(10月14日〜11月10日)
81%PC で遊ばれた割合(11月4日〜10日)

遊ばれた時間帯1時間ごとの割合・2026年11月4日〜10日

SHIBA DASH!! が遊ばれた時間帯(1時間ごとの割合) 2026年11月4日〜10日。9時台から14時台までの6時間に全体の56%が集まり、いちばん多いのは13時台の10.6%。どの時間も同じだった場合の割合は4.2%。 9〜15時に 56% 0時台 0.6% 1時台 0.4% 2時台 0.2% 3時台 0.1% 4時台 0.1% 5時台 0.1% 6時台 0.6% 7時台 1.6% 8時台 5.7% 9時台 8.1% 10時台 9.6% 11時台 9.9% 12時台 7.8% 13時台 10.6% 14時台 10.3% 15時台 7.2% 16時台 4.8% 17時台 4.3% 18時台 4.1% 19時台 3.8% 20時台 4.3% 21時台 3.0% 22時台 1.7% 23時台 1.2% どの時間も同じなら 4.2% 10.6% 0時 3時 6時 9時 12時 15時 18時 21時

端末11月4日〜10日

  • PC81%
  • タブレット11%
  • スマホ8%

来た元11月4日〜10日

  • AMIX の中(一覧など)71%
  • 直接(ブックマーク等)18%
  • 検索11%
  • SNS0.2%

平日と週末の比は、作品ごとの値が粗く出た10月30日と、祝日の11月3日を除いて数えています。計測は Cloudflare Web Analytics(ページの表示を数える仕組み)。ゲームのページ(/tl/tool-g-shiba/)を開いた回数を数えていて、遊んだ時間や回数ではありません。「直接」はほかのページを経ずに開かれたもの。四捨五入のため、合計が100%にならないことがあります。

全時間帯で均等に開かれた場合の1時間あたり4.2%に対し、実際は9時台から14時台の6時間に56%が集まりました。山は13時台の10.6%で、夜の19〜22時は合わせて11%。曜日別では、平日1日あたりの閲覧が週末の約2.3倍にのぼります。

端末は PC が81%、タブレットが11%、スマホが8%でした。スマホのボタンでも走れるように組んでいますが、実際に開かれているのは9割以上が PC とタブレットです。具体的にどんな場所で遊ばれているかまでは、この集計からは分かりません。

流入元の71%は AMIX GAMES の一覧などサイト内からでした。トップページの01番に置いている作品らしく、遊び場を訪れた人が最初に触る入り口として機能しています。検索経由は11%、ブックマークなどの直接流入は18%で、SNS からはほとんど来ていません。

07 — PERSPECTIVEこの作り方を、企業の企画に置きかえるなら

自主制作として育てた作品ですが、設計の考え方はキャンペーンやイベント向けのゲームにもそのまま持ちこめます。

操作を1つに絞り、開いてすぐ走らせる

商品やイベントのページからゲームを開く人は、長い操作説明を読んでくれません。触る場所を左右だけに絞れば、説明を読まなくても走り出せます。

キャラクターの性格を、動きの役割で見せる

柴犬の位置に企業のマスコットを、コインの位置に新商品を置けば、プレイ中ずっと画面の真ん中で動きます。全力で引っ張る犬と振り回される飼い主のように「追う側・引かれる側」の役割を持たせると、説明文を書かずに、キャラクターの性格を動きで見せられます。展示会や店頭なら、招待URLだけで始まる対戦を使って来場者どうしで走ってもらう企画も組めます。

公開後の数字を見ながら、手触りを直す

いつ・どの端末から開かれているかを毎日追いながら、1プレイの長さやコースの難しさを公開後に微調整していく。ブラウザゲームの受託制作や、既存ゲームに企業が溶け込むタイアップでも、公開して終わりにせず数字を見て整える進め方を取っています。

MORE FROM JOURNAL