「Web制作 見積・利益計算ツール」を無料公開しました｜G11 TOOLS 始動

当サイトに、Web制作の現場で使える無料ツールを公開する「G11 TOOLS」を新設しました。

その第一弾（UNIT 01）として、Web制作 見積・利益計算ツールの運用を開始します。

工数・時間単価・外注費・粗利率といった自分の条件を入力すると、最低受注額（これを下回ったら受けてはいけない金額）と推奨見積額（本来提示すべき金額）を計算します。会員登録は不要で、入力した内容がサーバーへ送信・保存されることもありません。

もともとは自分の実務のために作ったものですが、同じところで迷っている方の役に立つと考え、そのまま公開することにしました。

見積もりは、制作の工程のなかで最も「なんとなく」で決まりやすい部分です。相場を検索し、前回の案件の金額を思い出し、なんとなく角の立たない数字に着地させる。私自身、フリーランスとして動き始めてから何度もそれをやりました。

問題は、その金額が高いか安いかではありません。その金額で受けたとき、自分の時間単価がいくらになるのかを把握しないまま受注してしまうことです。差し戻しが続き、調査に時間を取られ、終わってみれば実質時給が最低ラインを大きく割っていた。という状態は、受注した瞬間にはまだ数字として見えていません。

必要なのは相場ではなく、自分の条件から採算を先に出しておくことだと考えました。このツールが相場の金額を一切出さないのは、そのためです。

• この条件なら、いくらより下では受けてはいけないのか（最低受注額）
• 本来いくらで出すべきなのか（推奨見積額）
• 値引きを求められたとき、いくらまでなら下げられるのか（値引き可能額）
• いま考えている金額は安全か、危険か
• その金額で受けたとき、実質いくらの時間単価・粗利になるのか
• 見積もりから抜け落ちやすい作業が入っているか

すでに提示しようとしている金額がある場合は、それを入力すると ◎安全圏 / △要検討 / ▲危険 の3段階で判定します。「最低ラインは超えているが、目標には届いていない」といった中間の状態が見えるようにしてあります。

計算方式は2種類

自分の時間を売っているのか、社内原価に粗利を乗せて売っているのかで、見るべき数字が変わります。そこで、計算方式を2つ用意しました。

時間単価方式（フリーランス向け）

最低時間単価と目標時間単価から金額を出し、提示額に対する実質時間単価を確認します。

原価・粗利方式（制作会社向け）

社内原価時給と粗利率から金額を出し、損益分岐額・想定粗利益・想定粗利率まで確認します。

見積もりから抜けやすい作業を先に展開する

LP一式、小規模・中規模コーポレートサイト、リニューアル、デザインのみ、コーディング・WordPress構築など、案件の種類を選ぶと、必要になりやすい作業項目が明細として展開されます。

ただし、工数の参考値はあえて入れていません。「この作業は何時間」と初期値で示してしまうと、それが根拠のない基準になってしまうためです。数量と時間はご自身の案件に合わせて入力してください。不要な行は削除でき、足りない作業は追加できます。

あわせて、差し戻しや仕様変更に備えるリスクバッファを作業時間に上乗せできます（低5% / 標準15% / 高25%が目安）。外注費と確定している経費には掛けません。想定外の事態が起きても、その金額まで増えるとは限らないためです。

見積の金額や案件名は、外に出したくない情報です。そのため、このツールの計算はすべてお使いのブラウザ内で完結させています。当サイトのサーバーへ送信することはなく、アクセス解析にも送信しません。ページを再読み込みする、別のページへ移動する、閉じる、のいずれでも入力内容は消えます。

例外は「この見積について相談する」ボタンを押した場合だけで、このときもお問い合わせページへ引き継ぐのは案件名と案件の種類だけです。工数・単価・粗利などの試算結果は引き継ぎません。伝えたい場合のみ、「結果をコピー」でご自身で貼り付けていただく形にしています。

1. 計算方式（フリーランス向け / 制作会社向け）を選ぶ
2. 案件の種類を選び、展開された作業項目に工数を入れる
3. 時間単価または原価・粗利率を入れると、最低受注額・推奨見積額・値引き可能額が出る

端数処理は1,000円 / 5,000円 / 10,000円単位の切り上げから選べます。入力・計算はすべて税抜で、推奨見積額にだけ参考として税込額を併記しています。消費税率も変更できます。

ページ下部には計算式と用語解説も掲載しました。「粗利率と原価率」「掛け率」の違いなど、混同すると粗利が想定より薄くなる部分も含めて、計算の中身をすべて開示しています。ブラックボックスのまま数字だけ出しても、判断の材料にはならないためです。

ここからは、同業の方向けに実装の中身を記録しておきます。「入力内容を送信しない」という方針を、注意書きではなくコードの構造として担保するために、どう組んだかが中心です。

素のJavaScript一枚、ビルド工程なし

フレームワークもビルドツールも使わず、約830行のJavaScriptファイル1枚で実装しています。外部ライブラリへの依存はゼロ、npmのパッケージも読み込んでいません。

理由は、このツールが依存を増やすほど「送信していない」ことの証明が難しくなる種類のものだからです。外部ライブラリを1つ読み込めば、その中で何が行われているかまでは私が保証できません。数値計算とDOM操作しかしないツールに、そのリスクを負わせる必要はないと判断しました。

コードはテーマファイル側に置き、記事本文と同じくページ本体にはロジックを一切持たせていません。読み込むのも is_page('web-estimate') で該当ページに限定し、バージョン文字列にはファイルの更新時刻（filemtime）を使って、更新したのに古いJSがキャッシュから配られる事故を防いでいます。

「送信しない」をコードの構造で担保する

入力値がサーバーへ渡る経路は、そもそもコードの中に存在しません。

• fetch / XMLHttpRequest / sendBeacon を1か所も使っていません。通信するための手段を持っていないので、設定ミスで送ってしまうということが起こりません。
• localStorage は使いません。ブラウザに残り続ける保存先を持たせないためです。
• アクセス解析へ送るのは「ツールを開いた」「入力を始めた」「結果を表示した」といった行動のイベント名だけで、金額・工数・案件名といった値は一切含めていません。

例外は「この見積について相談する」を押した瞬間だけです。このときに限り sessionStorage へ1件だけ書き込み、お問い合わせページ側のスクリプトが読み出した直後に削除します。書き込むのは案件名と案件の種類のみ、タイムスタンプを持たせて24時間を過ぎたものは読み出さずに破棄します。タブを閉じれば消える保存先を選んだのも、意図せず残さないためです。

戻る操作で前の案件の数字が残らないようにする

意外と見落とされがちなのが、ブラウザの「戻る」です。多くのブラウザは前のページをメモリに保持して復元する（bfcache）ため、通常のリロードと違って入力欄の値がそのまま生き返ります。共有PCで別の案件を計算した痕跡が残る、という状態は避けたいところです。

そこで pageshow イベントを監視し、bfcacheからの復元だった場合はすべての入力と計算結果を初期状態に戻しています。ページを離れたら消える、という説明と実際の挙動を一致させるための処理です。

作業名を書き換えても壊れない行の持ち方

作業明細の行は <template> 要素を複製して生成しています。ここで少し工夫したのが、表示名とは別に data-role という識別子を各行に持たせている点です。

このツールには、見積もりから抜けやすい項目を指摘する「見落としチェック」があります。ヒアリング、打ち合わせ・連絡対応、ディレクション、修正対応、テスト・検証、公開・納品──この6つに時間が入っていなければ警告を出す、という仕組みです。

ところが作業名は利用者が自由に書き換えられるようにしてあるので、表示テキストで判定すると「ヒアリング」を「要件定義」に直した瞬間にチェックが空振りします。そこで判定は data-role 側で行い、名前を変えても、行を並べ替えても、追加した行が混ざっても壊れないようにしました。利用者が自分で追加した行は role が空になり、判定の対象から自然に外れます。

再計算のトリガーも、行ごとにイベントを張るのではなく、コンソール全体のルート要素に input と change を1つずつ委譲する形にしています。行が何行増えても、リスナーの付け外しを管理する必要がありません。

PCとスマホで結果の見せ方を変える

このツールは入力項目が多く、結果を見るために画面を大きく移動することになります。そこで、PCでは結果パネルを position: sticky で追従させ、明細を入力しながら金額の変化がその場で見えるようにしました。

横に並べられないスマホでは追従させる代わりに、「結果を見る」ボタンを画面右下に固定しています。ただし常時出しているわけではなく、IntersectionObserver で入力欄と結果パネルの位置を監視し、入力欄を見ている間だけ表示、結果パネルが画面に入ったら消すという制御を入れました。結果を見ている最中に「結果を見る」ボタンが居座るのは、単純に邪魔だからです。

細かいところでは、動きを減らす設定（prefers-reduced-motion）を有効にしている環境では発光や移動のトランジションを止めています。また、JavaScriptが無効な環境でも計算式と用語解説は読めるよう、解説セクションはすべて静的なHTMLで書いてあります。

計算結果は、入力された条件にもとづく試算です。実際の受注可否や適正価格、利益を保証するものではありません。また、受注する側が採算を確認するためのツールのため、正式な見積書としてそのままお客様へ提出することはできません（見積書・請求書の発行機能はありません）。最終的な判断はご自身の責任で行ってください。

G11 TOOLS には、今後もWeb制作の現場の判断に使える道具を順次追加していく予定です。見積もり、工数、採算。「なんとなく」のまま決めてしまいがちな判断を、相場や勘ではなく自分の条件から確かめられるようにすることを方針にしています。

「この項目が足りない」「この計算方法のほうが実態に近い」といったご意見があれば、ぜひお聞かせください。実務で使われることを前提に、改善していきます。

もちろん、工数の整理や見積設計、制作体制、外注範囲そのもののご相談も承っています。案件の一部を外部パートナーへ切り出したい、というご相談も歓迎です。

SYSTEM ALL GREEN.

• G11 TOOLS（ツール一覧）
• Web制作 見積・利益計算ツール｜無料・登録不要
• お問い合わせ