はじめに
フリーランスや個人事業主向けに、「収入不安定リスク診断」という無料のWeb診断アプリを作りました。
9つの質問に答えるだけで、自分の「収入が不安定になりやすいポイント」を0〜27点でスコア化し、4段階で見える化するというシンプルなものです。
技術的にはごく地味な構成で、フレームワークもバックエンドも使っていません。HTML・CSS・JavaScriptだけの単一ファイルを、GitHub Pagesにそのまま置いているだけです。ただ、「なぜここまで割り切ったか」という設計判断には、個人開発ならではの理由があったので、その部分を中心に書いてみます。
なぜ作ったか
フリーランスとして働いていると、「今月は大丈夫だけど、来月は分からない」という感覚がずっとついて回ります。会社員のように毎月決まった額が振り込まれるわけではないので、収入の波そのものは避けられません。
ただ、この「不安」は多くの場合、実体がはっきりしないまま漠然と抱え続けているものだと感じていました。取引先が1社に偏っている、貯蓄が少ない、契約書を交わさずに仕事を始めがち、といった要因は一つ一つは自覚していても、それらを合わせて「自分は今どのくらいのリスク状態にあるのか」を客観的に見る機会はあまりありません。
そこで、健康診断のように「今の状態を数字で確認し、必要なら手を打つきっかけにする」ものを作れないかと考えました。不安を煽って何かを売りつける方向にはしたくなかったので、診断結果の文言は段階を問わず「気づきを与えて、行動を後押しする」トーンで統一しています。過度に不安を強調する表現や、逆に安易に安心させる表現も避けています。
どう作ったか
構成はHTML・CSS・JavaScriptの単一ファイルのみ
サーバーサイドの処理は一切なく、ReactやVueといったフレームワークも、jQueryのような外部ライブラリも使っていません。1つのHTMLファイルの中に、質問文・スコアロジック・結果表示・スタイルがすべて入っています。
理由はシンプルで、この診断アプリが必要とする機能が「質問に答える→スコアを合計する→結果を出し分ける」というだけで完結するからです。フレームワークを導入するメリット（状態管理の複雑さを吸収する、コンポーネントを再利用するなど)が発生する規模のアプリではありません。むしろ、依存パッケージが1つもないので、ビルドツールもnpm installも不要で、HTMLファイルをブラウザで開くだけで動作確認ができます。個人開発を1人で完結させる上で、この「依存が何もない」状態は精神的にかなり楽でした。
なぜバックエンドを持たないか
診断結果はスコアを合計して閾値で振り分けるだけのロジックなので、ユーザーの回答をサーバーに送信して処理する必要がありません。すべてブラウザ内のJavaScriptで完結させています。
これには実務的な理由もあります。
- サーバーを持たなければ、サーバー代・維持費が発生しない（個人開発を継続する上で固定費0円は正義です）
- ユーザーの回答データを一切サーバーに送信・保存しないため、個人情報保護の設計を最初から考える必要がない（プライバシーポリシーの整備コストも下がります）
- 静的ファイルのみなので、GitHub Pagesの無料枠だけで恒久的にホスティングできる（「無料トライアル」ではなく、ずっと無料で運用できる)
「診断結果をあとで分析して統計を取りたい」というニーズは将来的にはあるかもしれませんが、それは診断ロジックそのものの価値とは切り離せると判断し、初期リリースでは完全に見送りました。個人開発では「今すぐ必要じゃない機能は作らない」判断が地味に効いてくると感じています。
ホスティングはGitHub Pages
静的ファイルだけで完結するなら、ホスティング先はGitHub Pages一択でした。
- リポジトリにpushするだけでデプロイが完了する
- 独自ドメインなしなら追加設定・追加費用が一切ない（
〇〇.github.ioのままでOK） - 個人開発の規模であれば、帯域やビルド時間の制限に引っかかる心配もほぼない
「まず動くものを世に出す」までのリードタイムを最短にしたかったので、インフラ選定に時間を使わずに済んだのは大きかったです。
スコアロジックの設計
質問は以下の9項目で、それぞれ0〜3点の4択で回答してもらいます。
- 収入源（クライアント/取引先）の数
- 最大クライアント1社が総収入に占める割合（依存度）
- 収入ゼロでも貯蓄で生活費を賄える月数
- 固定費（家賃・保険・ローン等）が月収に占める割合
- 過去半年の新規営業・発信活動の頻度
- 直近半年の月収の変動幅
- 事業用と生活費のお金の分離管理状況
- 年金・保険（国民年金/国民健康保険/所得補償保険等）の加入・備え状況
- 契約書・発注書を交わさず仕事を始める頻度（未回収リスク）
合計0〜27点を「安定・注意・警戒・要対策」の4段階に振り分けています。境界の設計自体はそこまで複雑ではないのですが、地味に気を使ったのは「どの段階であっても、読んだ人が不安になりすぎず、かつ何かしら次の一歩が見えるように文言を書く」ことでした。ロジック自体は単純な合計・条件分岐なので、実装の中で一番時間をかけたのは実はこの文言部分です。
テストについて
外部ライブラリを使わない分、ロジックにバグがあると全部自前で気づく必要があります。今回は、診断ロジック部分（採点・判定処理）だけをJavaScriptファイルとして切り出し、Node.js（JavaScriptCore）で単体テストを実施しました。
確認した内容は以下の通りです。
- 質問数が9問であること
- 各設問の選択肢が0〜3点の4択になっていること
- 境界値（0/6/7/13/14/20/21/27点）で意図した4段階に正しく振り分けられること
- HTMLのタグ対応（html/head/body/script/style/form）に崩れがないこと
大掛かりなフレームワークを使わずとも、境界値だけはきちんと機械的に確認しておく、というのは静的サイト開発でも省略しない方がいいと感じたポイントです。
工夫した点
シェアされることを前提にしたUI
診断結果ページには、X（旧Twitter）へのシェアボタン、結果テキストのコピー機能、再診断ボタンを実装しています。診断系コンテンツは「結果を見て終わり」ではなく「結果をシェアしてもらって初めて広がる」ものだと考えていたので、シェア導線は最初から組み込みました。シェア文言も、診断結果に応じて自動で変わるようにしています。
有料コンテンツへの接続は「押し付けない」設計に
診断結果の各段階の末尾には、より詳しい改善プランをまとめたnote有料記事への案内を1〜2文だけ添えています。診断自体は完全に無料で完結させ、「もっと知りたい人だけが次に進める」形にすることで、無料診断そのものの価値を薄めないようにしました。この辺りは、フリーランスとして働く人たち自身が「煽られること」に敏感だろうという前提で設計しています。
誇張しないトーンの徹底
これは実装というよりコンテンツ設計の話ですが、「要対策ゾーン」であっても危機感を煽る表現は使わず、「複数面で収入途絶への耐性が低い。焦らず、今日中にできる対策から1つ着手を」というように、行動へのハードルを下げる文言に統一しています。診断系コンテンツは数字の見せ方一つで受け取られ方が大きく変わるので、ここは実装以上に神経を使った部分です。
今後の展望
現状ではOGP画像・メタタグ（SNSシェア時のサムネイル表示）が未実装なので、次のイテレーションで追加したいと考えています。また、診断結果の分布を見ながら、質問項目や閾値の妥当性も継続的に見直していく予定です。
大掛かりな機能追加よりも、「無料で誰でもすぐ試せて、負担なく気づきを得られる」というコンセプトを崩さない範囲で、小さく改善を重ねていくつもりです。
おわりに
個人開発というと技術的に凝ったものを作りたくなりがちですが、今回は逆に「フレームワークもバックエンドも使わない」という制約を自分に課すことで、リリースまでのスピードと運用コスト0円を両立させることができました。特にフリーランス・個人事業主として働いている方には、テーマ自体にも共感していただけるかもしれません。よろしければ一度、診断だけでも試してみてください。
診断アプリ: https://freelab-jp.github.io/
X: @freelab_jp（開発の進捗や、フリーランスの「収入の波」にまつわる話を発信しています）
最後まで読んでいただきありがとうございました。