CASE 05制作事例
THE 稟議は、なぜハンコ1回で手が震えるのか
手ブレの判定と、書類だらけの画面設計。
稟議書の承認欄に、位置と角度をそろえて朱色のハンコを1回押す。やることはそれだけの無料ブラウザゲーム「THE 稟議 アルティメット判子シミュレーター」は、AMIX GAMES の一覧で37番に並んでいる作品です。外部ライブラリを使わない約31KBの1ファイルに、決裁額が跳ね上がる重圧や「お辞儀ハンコ」の駆け引きをどう詰めこんだのか。判定の手直しと画面の言葉づくりをたどります。

OVERVIEW作品の概要
- 作品名
- THE 稟議 アルティメット判子シミュレーター
- ジャンル
- 判子シミュレーター(ひとりで遊ぶ)
- 中身
- 案件を1件ずつ承認していく勝ち抜き。差し戻しは3回まで。新人研修(4課題)つき
- 操作
- PCはマウスで動かし、ホイールか← →キーで角度、クリックかSpaceで押印。スマホはドラッグで動かし、ボタンの長押しで角度、赤いボタンで押印
- 技術
- Canvas 2D・Web Audio。ゲームの処理に外部のライブラリは使っていない
- サーバー
- ファイルを配信するだけ
- 制作
- AMIX(企画・デザイン・プログラム。BGM と効果音の一部は Audiostock の素材)
01 — PLAN1回の押印に、位置・角度・手ブレを重ねる
プレイヤーがすることは、1件につきハンコを1回押すことだけです。画面いっぱいに広がった稟議書のどこかに承認欄が1つ置かれ、そこへハンコを重ねて向きを合わせて押す。位置と角度がそれぞれ100点満点で採点され、平均90点以上で「稟議承認」、85〜89点で「条件付承認」、それを下回ると「差し戻し」が言い渡されます。
タイトル画面に掲げた3枚の札。「位置を合わせる」「角度を読む」「重圧に耐える」が、そのままステージ進行の段階になっています。案件が進むごとに承認欄の場所が散り、枠そのものが大きく傾き、決裁額が膨らむにつれて持った手が小刻みに震えはじめます。
承認を通すたびに予算は倍々で膨らみます。最初の第1号案件は2万円の係長決裁から始まり、10万円で課長、100万円で部長、1,000万円で専務、1億円で社長、10億円で会長へ昇進。差し戻しが3回たまった時点で「倒産」となり、最終キャリアと決裁額が記録されます。
そこへもう1つ、日本の職場ならではの俗習として入れたボーナスが「お辞儀ハンコ」です。上司の印へ頭を下げるように、承認欄の傾きからさらに左へ9〜15°(中心は約12°)傾けて押すと角度点が満点扱いになり、獲得予算が3割上乗せされます。本番では角度のガイドが一切出ないため、手の感覚だけで狙うしかありません。ゾーンを外した中途半端な傾きは直立基準で採点され、かえって大きな減点を食らう仕組みです。
02 — BUILD手ブレは、押した瞬間の揺れで決める
2026年9月18日、難易度の手直しを行いました。制作記録には「ちょっと簡単かも」というメモと、そこから書きかえた判定処理が残っています。
原因をたどると、せっかく入れた手ブレが採点にほぼ効いていませんでした。ハンコの揺れ幅は、紙から浮かせている高さに比例させています。ところが改修前は、ハンコが紙に着地したあと(高さ0)の座標で印影を決めていたため、構えている間は派手に震えて見えても、押した瞬間に揺れが消えていたのです。
改修後は、ボタンを押した瞬間の揺れ幅をその場で固定し、そのまま真下へ振り下ろす計算に改めました。震えていたハンコがその瞬間にいた場所へ、正直に印影が残ります。あわせて、押印が確定するタイミングも「ボタンを離した瞬間」から「押した瞬間」へ変えました。離すまで待つと指を戻す間にも揺れが進んでしまい、ここぞと狙った瞬間と結果がずれるためです。
同じ日に、承認欄の傾け方も作り直しました。以前は点線のガイド円だけが回っていたのを、承認欄の枠と文字ごと傾くように変えています。傾きの上限は第1号で10°、そこから1件ごとに3°ずつ増え、第13号以降は45°。いったん90°まで広げて試したものの、やりすぎだったため45°へ戻しました。たまたま水平に近い回が続くと緊張が抜けるので、上限の35%以上は必ず傾くように下限も設けています。ハンコ側を回せる可動域は左右50°ずつと、承認欄の最大角度よりわずかに広く取り、端まで回し切るだけでは合わないようにしました。
PCでプレイ中の十字カーソルも、このときに非表示へ変えています。マウスカーソルは手ブレせずに真の中心を指し続けてしまうため、指でドラッグするスマホと比べてPCだけが有利になりすぎていました。十字カーソルが出るのは、新人研修の最初の課題だけです。重圧の高まりは音でも煽っていて、背後の心音は案件が進むにつれて約1.04秒間隔から約0.57秒間隔まで詰まっていきます。
03 — DESIGN画面の言葉を、すべて会社の書類でそろえる
この作品の画面は、どのボタンを押しても会社の書類の言葉遣いで統一しています。遊び方ページの表題は「稟議承認作業マニュアル」で、素材の権利表記ページは関係各位への御礼状から始まる体裁です。初回プレイで「稟議開始」を押すと「当社での稟議は初めてですか?」と尋ねられ、差し戻しが3回重なったゲームオーバー画面には大きく「倒産」と「あなたの最終キャリア」が並びます。
背景に広がる稟議書にも、件名・申請額・申請日の枠の下へ、「1. 申請の目的」から「6. 添付資料」、末尾の「以上」まで架空の起案文を薄く敷きました。プログラムのコメントには、読ませるためではなく書類の空気を出すために敷く、と書き残してあります。
この起案文のにじみ表現で少し工夫したのが、ブラウザごとの互換性です。Canvas のフィルタ機能(ctx.filter)は一部ブラウザで効かないため、文字本体は画面の外側に描き、紙の上にはぼかした「影」だけを落として印字のにじみを作りました。どの環境でも同じ見た目になるうえ、画面サイズが変わらない限り最初に1回描いた画像をそのまま使い回せます。
朱色のハンコ自体も3Dは使わず、Canvas 2D の図形だけで立体感を出しました。高く構えているほどハンコが手前に寄って大きく見え、落ちる影は左上の光源から遠い側へずれます。紙の上には着地予想を示す点線の円が浮いており、振り下ろした瞬間にハンコ・影・円の3つが1点へ収束して画面全体がガツンと揺れる演出です。振動機能のあるスマホでは、押印の瞬間に手元も短く震えます。
画面の構造もプログラムも1枚の HTML ファイルに収まっており、圧縮時の容量は約31KB(手元での計測値)。明朝体フォントの Noto Serif JP と音声ファイルだけを外部から読みこんでいます。
倒産画面の一番下にある「タイトルへ」のボタンは、公開後の9月20日に足したものです。当初は「X 結果をポストする」と「最初からやり直す」の2つしか置いておらず、倒産したあと新人研修やマニュアルへ戻る道が抜けていました。
04 — TRAINING4課題の新人研修と、スマホでも輪郭が残る心音
新人研修は「位置を合わせる」「角度を読む」「手ブレに耐える」「お辞儀ハンコ」の4課題で構成しました。研修中はライフも予算も動かず、失敗しても「もう一度」と出るだけです。お辞儀ハンコの合格角度を示す金色のアークが出るのは研修の第4課題だけで、本番の業務では同じ判定を目印なしでこなします。タイトル画面の「新人研修を受ける」からいつでも復習でき、研修中だけは本編と違うジャズのループ曲が流れます。
本編の BGM には、Audiostock のジャズ曲「Just Enjoy」(harryfaoki)を選びました。ループ用ではない完結した楽曲のため、無理につなぎ目を加工せず最後まで流し切り、終止の和音が消えて0.8秒おいてから冒頭へ戻しています。音量は AMIX 内で定めている BGM 基準(−21〜−27dB)の下限にあたる −27dB まで下げ、心音と押印の「ドン」という音を前面に出しました。
その心音は Web Audio の波形合成で作っています。58Hz前後の低い基音だけだとスマホの小さなスピーカーではほとんど聞こえないため、約2倍の周波数の音を重ねて輪郭が立つようにしました。押印・紙めくり・承認・条件付承認・差し戻し・倒産・拍手の7音は Audiostock の音源を使い、万一読みこめない環境では合成音へ自動で切り替わる二段構えです。
なお、iPhone を消音モードにしている間は音が鳴りません。消音中でも強制的に音を出す指定(audioSession を playback に変える方法)はありますが、プレイヤーが裏で聴いている音楽アプリまで止めてしまうため採用しませんでした。
05 — DATA一覧から9割が訪れる、小品ならではの遊ばれ方
AMIX GAMES の全作品の遊ばれ方は毎日集計し、DATA CENTRAL で公開しています。77本並ぶ作品の中から、THE 稟議 の直近の数字を取り出しました(割合と倍率・順位のみで、閲覧数の実数は伏せています)。
THE RINGI — PLAY DATA
集計:AMIX GAMES DATA CENTRAL(2026年11月10日までの値)
遊ばれた時間帯1時間ごとの割合・2026年11月4日〜10日
端末11月4日〜10日
- PC77%
- タブレット12%
- スマホ11%
来た元11月4日〜10日
- AMIX の中(一覧など)90%
- 直接(ブックマーク等)4%
- 検索7%
- SNS0.0%
平日と週末の比は、作品ごとの値が粗く出た10月30日と、祝日の11月3日を除いて数えています。計測は Cloudflare Web Analytics(ページの表示を数える仕組み)。ゲームのページ(/tl/tool-g-hanko/)を開いた回数を数えていて、遊んだ時間や回数ではありません。「直接」はほかのページを経ずに開かれたもの。四捨五入のため、合計が100%にならないことがあります。
時間帯で見ると、9時台から14時台の6時間に全体の49%が集まり、山は14時台の9.2%と11時台の9.0%でした。一方で16時台から21時台にかけても毎時4.9〜5.4%と均等割りの4.2%を上回り続け、夜の19〜22時の3時間で16%入っています。曜日別では、平日1日あたりが週末の約1.7倍でした。
端末は PC が77%、タブレットが12%、スマホが11%。具体的にどのような場所や場面で開かれているのかまでは、この集計からは分かりません。
特徴がはっきり出たのが流入元で、全体の90%が AMIX GAMES の一覧などサイト内からの回遊でした。検索は7%、直接は4%で、SNS からは0.0%。倒産画面には X へ結果をポストするボタンを置いてありますが、この集計期間に SNS 経由で訪れた人はほぼいませんでした。月間の閲覧順位は77本中29位(10月12日〜11月10日)。単体でバズらなくても、遊び場の一覧に並べておくことで毎日一定数のプレイヤーが立ち寄る作品になっています。
06 — PERSPECTIVE身近な仕事道具と「あるある」を、軽いゲームにするには
会社員なら一度は見覚えのある場面を1アクションの遊びに切り出す手法は、企業が一般向けに出すPR企画とも相性のよい作り方です。
誰もが知る場面なら、ルール説明は1行で足りる
稟議書、承認印、役職が上がるほど重くなる決裁額。働いた経験のある人なら、タイトル画面を見た時点で状況が頭に入ります。操作説明は「承認欄に位置と角度を合わせて押す」の一文だけで足り、残りの空気感は画面の書類そのものが伝える作りです。文具や事務機器メーカー、印鑑・名刺サービス、バックオフィス系のツールなど、仕事の現場にひもづく商材なら同じ切り口で企画を組めます。
3Dモデルを作らないぶん、言葉と手触りに工数を振る
外部ライブラリも3Dモデルも使わず、約31KBの HTML 1枚と Canvas 2D だけで完結させました。書類らしさを支えているのは、作業マニュアルや御礼状、「倒産」「最終キャリア」といった画面上の言葉選びです。グラフィックの物量に予算を割かないぶん、その業界ならではの言い回しを整える作業や、手ブレ・傾きのような1回の判定の手直しに時間を回せます。
文脈が通じない層と、公開後の届け方も織りこむ
身近な「あるある」を題材にすると、その習慣を知らない層には前提が伝わりません。この作品に英語版を作っていないのも、稟議やお辞儀ハンコの文化から説明が必要になるためです。また、結果シェアボタンを置くだけでは上のデータのとおり SNS 流入はほとんど生まれません。単発のキャンペーンとして広げるなら、どこから人を呼ぶか、あるいは AMIX GAMES のような既存の遊び場でのタイアップに乗せるかまで含めて、ブラウザゲームの企画・制作の段階で設計しておく必要があります。


