Web / Tools

エラツク

サイトを作る前に、目的・予算・運用体制に合う作り方を選ぶための診断・比較サイトです。9 種類の作り方を同じ評価軸で採点し、掲載する金額は各社の公式ページ本文を出典として突き合わせています。

2026年7月31日に開発を開始したプロダクトです。現在は公開前の実装段階で、サイトはまだ公開していません。日本語のみで運用します。

Next.js 16React 19TypeScriptCloudFrontAWS CDK

エラツク

概要

エラツクは、サイトを作る前に「どの作り方が条件に合うか」を選ぶための診断・比較サイトです。8 問の質問に答えると、WordPress・ノーコード・EC サービス・独自開発・制作会社への依頼まで 9 種類の作り方を同じ評価軸で採点し、適合度と理由、費用の目安、次に取る行動を示します。想定する読者は中小企業・店舗・士業・個人事業主で、Web の専門家でない方が読んで判断できることを基準に書いています。2026年7月31日に開発を開始し、現在は公開前の実装段階です。

解決したい課題

作り方の比較情報は、各社の宣伝か、条件を欠いた一般論に寄りがちです。金額も出典のない相場として流通していて、契約してから前提が違ったと気づくことがあります。診断を名乗るサービスでも、同じ回答から結果が揺れたり、提携先が上位に来ていないかを利用者が確かめられなかったりします。

主な機能

  • 8 問の質問から、9 種類の作り方を目的・予算・機能・更新頻度・体制・保守・公開時期の 7 軸で採点
  • 順位と適合度は決定的に計算し、乱数も現在時刻も使わないため、同じ回答からは必ず同じ結果になる
  • 提携情報は採点処理から隔離し、採点側が参照していないことをテストで検査
  • 掲載する金額はすべて公式ページの本文を保存したファイルからの引用で、その文字列が実在しないと検査が落ちる
  • 条件を満たせない作り方は上位に出さず、満たせない点を理由として画面に出す
  • 料金を公開していない作り方には相場を書かず、見積もりであることを示す
  • 初期費用・月額・1年 / 3年 / 5年の合計を切り替えて比べられる料金シミュレーション
  • 診断の回答はサーバーへ送らず、ブラウザ内だけで計算する

技術スタック

フロント
Next.js 16, React 19, TypeScript, Tailwind CSS 4
診断ロジック
TypeScript (framework-agnostic), node --test
配信 / フォーム
S3, CloudFront, Lambda (Function URL), SES
IaC / CI
AWS CDK (TypeScript), GitHub Actions
検証
Playwright, source matching, contrast check

アーキテクチャ

Next.js 16 App Router の静的書き出しを S3 + CloudFront で配信し、バックエンドを持たない構成です。診断はブラウザ内で完結し、回答はサーバーへ送りません。例外は相談フォームだけで、独立した Lambda Function URL から SES 経由で届きます。採点ロジックと構築方法のデータは React にも Next.js にも依存させず、Node から直接読める形にしてテストしています。CSP とセキュリティヘッダーは JSON 1 ファイルを唯一の出典とし、CDK と手元の厳格配信の両方が同じ値を読みます。インフラは AWS CDK の 3 スタック(本体 / CI・CD / フォーム)で、ドメイン eratsuku.jp はさくらインターネットで管理し、DNS を CloudFront へ向けます。

AIの役割と担当範囲

ブランド名に AI を掲げていますが、順位と適合度の計算に LLM は使いません。同じ回答から必ず同じ結果が出ることを比較の土台にしているためで、説明文が AI 生成ではないことは画面にも明示しています。説明文の生成だけは差し替え口として切り出してあり、将来 LLM に任せる場合も順位のロジックは動かしません。AI が担うのは実装・記事構成・レビューなど、制作プロセス側の作業です。AI を外しても順位は変わらず、品質は採点ロジックの 28 件の単体テストと、掲載金額を公式ページの本文と文字列単位で突き合わせる検査で担保しています。

評価・運用

公開前のため流入はこれからです。基準は、利用者に誤った金額で契約させないことに置いています。掲載する金額は保存した公式ページの本文と文字列単位で突き合わせ、一致しなければ検査が落ちます。料金ページは JavaScript で描画する事業者があるため、Playwright で実際に描画して取得しています。採点ロジックの単体テストは 28 件で、型検査・lint・出典の照合・文字色のコントラスト・単体テスト・ビルド・ブラウザ検証の 7 段を push 前に通します。公開後は、配信が成功したことと本番で直っていることを分けて確かめるため、sitemap の全 URL とセキュリティヘッダーを本番に対して検証します。