mozcheck 開発の裏側 – WordPress×Laravel×Reactで作る無料診断ツール

本記事では、私が開発・公開した mozcheck（https://mozcheck.jp） の開発の裏側や実装時の工夫についてご紹介します。

mozcheckは、WordPressのURLを入力するだけで簡単に無料で診断できるWebサービスです。

診断結果は、セキュリティやパフォーマンス、SEOに関する項目など、サイト運用者が自分のサイトの状態を把握できる内容になっています。

この記事では、企画背景からシステム構成、実装の工夫、運用してみて分かったこと、今後の展望まで、ざっくばらんにお話しします。

mozcheckを作ろうと思った背景

mozcheckを開発した一番の理由は、「WordPressサイトの簡単な健康診断ができるツールがあまりにも少ない」と感じたからです。

Webサイト制作・運用に携わっていると、

• 自分で調べて設定できたけど、これで合ってるのか不安
• クライアントから「うちのサイトって大丈夫？」と聞かれる
• 新規案件の見積もり時に現状把握が必要
• 簡易診断だけでサッと状況を伝えたい

という場面が多々あります。

もちろん、細かく診断するには専門的なツールや知識が必要ですが、簡易的に今のサイトの「健康状態」を知るための無料ツールがほとんど見当たらなかったため、自分で作ろうと考えました。

診断するユーザー層は、

• 制作会社・フリーランス
• サイト担当者
• 自社サイトを気にしている一般ユーザー

を想定しています。

システム構成と技術選定の理由

mozcheckは、以下の技術構成で開発しました。

• WordPress：ユーザーインターフェース・公開サイト
• React：Gutenbergブロックで診断機能を実装
• Laravel：診断API、診断ロジックの実行

なぜこの構成にしたのか？

普段、WordPressサイトを利用している方に使ってもらうサービスなので、WordPressの世界観の中で完結するUIを目指しました。

ただ、診断ロジックやAPI部分はスケールさせやすく、機能追加も想定していたため、別システムとしてLaravel製APIを用意しています。

診断のリクエストはフロントのブロックから直接APIに投げ、結果を取得する形です。
この分離構成により、将来的にAPIだけを他のCMS向けツールでも流用できる拡張性を確保しています。

フロントエンド（Gutenbergブロック）開発

Gutenberg（ブロックエディタ）を活用し、診断用ブロックをReactで作成しました。

Reactで開発した理由は、GutenbergブロックがReact製なのと、フルサイト編集に合わせたデザイン修正を柔軟に制御したかったためです。

診断の流れは以下のように設計しています。

1. URL入力
2. 診断開始 → APIにPOST
3. 診断IDを取得 → 進捗状況をポーリング
4. 診断完了 → 結果表示

UXのこだわり

• 診断中は「進行中の文言」を表示し、ユーザーに待たされている感を軽減
• URL入力時点でのバリデーションも実施
• 診断項目を増やしても動的に表示するようにテーブル表示
• 診断後にそのまま診断レポートを表示

バックエンド（Laravel API）開発

診断処理はすべてLaravel側で担当しています。

APIの役割

• URL診断リクエストの受付
• 実際のサイト情報取得・解析
• 診断結果の集計
• 診断進行状況の管理

診断ロジックの工夫

診断項目は、パフォーマンス・SEO・セキュリティ・WordPress固有診断など、多岐にわたりますが、APIはそれぞれ診断タスクをJobに切り分けて実装しています。

診断実行時に、Laravel側で外部サイトにアクセスするため、

• 同一URLはキャッシュに格納
• タイムアウト制御
• サイトブロック対策
• 外部リクエストの失敗時のリトライ

なども実装し、なるべく安定的に診断できるよう工夫しています。

目的は「需要の確認」と「フィードバック収集」

mozcheckは、リリース初期段階において、機能面の完成度を追求するよりも、まずは市場の需要やユーザーからのフィードバックを集めることを主な目的としています。

そのため、診断機能自体は無料・登録不要で誰でも試せるように設計し、診断完了後にアンケートフォームへの導線を設けています。

実際の診断レポートの下部に設置しているアンケートは、単なる意見収集ではなく、

• ユーザーがどのような点に価値を感じたか
• 欲しい機能
• サービスの改善要望

など、今後の機能追加や改善に直結する貴重な情報を集める場として活用しています。

診断精度や表示内容は今後強化していく予定ですが、まずは「使ってもらえるかどうか」「求められているか」を確かめることを重視した段階です。

実際にリリースしてみて

リリース後、社内・外部の知人を含め多くの方に試してもらいました。

想定以上に喜ばれたのは「簡単に使える」ところです。
特に、非エンジニアの方からも「URL入れるだけで分かりやすかった」と言ってもらえたのは想定外でした。

一方で

• 診断結果があまり重要とは思えないものがある（解消済み）
• スコアの数値だけだと解りづらい
• 一部診断項目の結果が分かりにくい
• 結果が出た後に何をすればいいかわからない
• 放置していたWordPressなのにスコアが良いのは逆に不安

などの課題も見つかり、リリース後もアップデートを重ねています。

今後の展望

今後、以下の機能を追加・改善予定です。

• 診断レポートのPDF出力機能
• 診断項目の追加（特にセキュリティ、パフォーマンス）
• 定期実行できる有料プランの開発（診断結果のCSV・PDF出力、履歴管理）

特に定期実行は無料、有料などプランに切り分けて安心できるWordPress運用ができるためのツールとして開発していきます。

まとめ

mozcheckは「簡単に診断できる」という体験を第一に設計しました。

WordPress、React、Laravelといった技術の組み合わせで、サイト診断を誰でも気軽に行えるツールが作れたことは大きな成果です。
まだまだ改善の余地はありますが、今後も開発を継続し、より良い診断体験を提供していきます。

もし、この記事が似たようなツールを作りたい人や診断系サービスを考えている方の参考になれば嬉しいです。