まるっとアプリ #02｜実質時給シミュレーター （全コード＋作り方つき）

「年収は悪くないのに、なんでこんなに余裕がないんだろう」。
その正体は、給与に含まれない“通勤・残業・身支度”の時間かもしれません。それを全部ひっくるめた「本当の時給」を計算するWebアプリを作りました。

この記事を買うと、完成品のアプリ一式（HTMLファイル1個）と、全コード＋作り方の解説が手に入ります。

■ シリーズ『まるっとアプリ』（第2回）

「買うと“動くアプリ”が手に入る。さらに全コードにコメント＆作り方の解説つき。改造もできる」――1記事完結のシリーズです。

• #01 定時退社理由ジェネレーター

• #02 実質時給シミュレーター 👈 いまここ

各号は独立しているので、この記事だけ買えば完結します（#01は不要）。すべてHTML1ファイルで動く・サーバー不要・コピペで完成。

🧮 まずは完成品で計算してみてください（無料）

自分の数字を入れると、思った以上に刺さります。完成品とまったく同じものを、無料で公開しています。

▶ デモ（無料・登録不要）
実質時給シミュレーター【無料】通勤・残業込みの本当の時給を計算 | MyTool Studio

月給・勤務日数・残業・通勤時間などを入れるだけ。入力した瞬間に「名目時給」と「実質時給」、その目減り率が出ます。「コードどうなってるの？」と思ったら、この記事の出番です。

このアプリでできること

• ⏰ 実質時給を自動計算：通勤（往復）・残業・身支度・昼休憩・持ち帰りを全部含めた“本当の時給”

• 🔀 月給／年収・額面／手取りをワンタップ切替：求人比較も、手取りベースの実感も両対応

• 📊 名目時給・実質時給・最低賃金を棒グラフで比較：どれだけ目減りしているか一目

• 📋 拘束時間の内訳を可視化：有給（労働）と無給（通勤など）を色分け表示

• 📅 年間換算：通勤＋身支度が「24時間換算で何日分」かまで表示

• 🖼️ 結果をPNG画像にして保存：そのままSNSに貼れるカード画像を自動生成（Canvas）

• 📱 スマホ対応・サーバー不要：ファイルを開くだけで動く

仕組みのざっくり解説（ここまで無料）

計算式そのものは、驚くほどシンプルです。

• 名目時給 ＝ 月収 ÷ 所定労働時間

• 実質時給 ＝ 月収 ÷「仕事に拘束される全時間」

ポイントは2つ目の「拘束される全時間」をどう積み上げるか。所定労働に加えて、残業・通勤（往復）・身支度・昼休憩・持ち帰り仕事を、それぞれ「月あたりの時間」に揃えて合計します。たとえば通勤は片道45分なら往復で1.5時間、それが月20日で30時間――こうして「給料は出ないが拘束されている時間」を足すほど、実質時給は下がっていきます。

あとは、その結果を棒グラフ・内訳・年間換算として画面に描き、最後にCanvas（キャンバス）という仕組みで画像化してダウンロードできるようにしています。難しいライブラリもサーバーも使いません。だからHTML1ファイルで完結します。

ここから先は、その**全コード（コメント付き）**と、自分好みに改造する方法です。最低賃金の数値を最新にしたり、項目を足したり、結果画像のデザインを変えたりできます。

■ ご購入前にご確認ください

• 含まれるもの：HTMLファイル1個ぶんの全コード（CSS・JavaScript込み・コメント付き）と、作り方／改造の解説。

• 動作環境：PC・スマホのモダンなブラウザ（Chrome / Edge / Safari など）。インストール不要。

• 必要な知識：不要です。コピー＆貼り付けができれば動きます。改造もコメントの通りに進めればOK。

• コードについて：個人利用・商用利用OK（自分のサイトやブログに置く・改造して使うのは自由）。ただしコードそのものの再配布・転売・テンプレート販売はご遠慮ください。

• 数値について：最低賃金は2025年度の参考値（東京1,226円・全国平均1,121円）を使用しています。年度更新の方法も後半で解説します。

• 注意：計算結果は概算です。返金は受け付けておりません。

それではどうぞ。