【Webサイト診断アプリ開発】PDFレポート出力機能の実装と日報システムの改善

はじめに

本日は、主力プロダクトである「Webサイト診断アプリ」のV3パイプライン統合・PDF出力機能の実装と、それを記録する「自動日報システム」の改善という、2つのレイヤーでの開発を行いました。

1. Webサイト診断アプリ (V3) の進捗

V3パイプラインの統合

• バックエンド実装: analyzer_v2.js で定義されたV3分析ロジックを server.js の /diagnose エンドポイントに完全統合しました。
• Evidence抽出と分析: URL入力から extractEvidence → generateV3Data へのデータフローを確立。
• レポート表示: result_v3.ejs を用いて、ビジュアル分析スコアや詳細な改善ロードマップを表示するUIを実装。

PDFレポート生成機能 (Puppeteer) – WIP

• Puppeteer連携: /api/v3/download-pdf/:id/:plan エンドポイントを作成し、実装を開始。
• ヘッドレスレンダリング: サーバーサイドでEJSテンプレートをレンダリングする処理を構築中。
• 課題: レイアウト崩れやフォント反映の微調整など、理想のデザイン再現に向けた試行錯誤を継続中。

2. コンテンツ製造システムのピボット

画像生成から「プロンプト生成」へ

日報のサムネイル生成において、画像生成AIの限界（日本語文字の崩れ、正方形出力）を回避するため、戦略を変更しました。

• Before: Agentが直接画像を生成（品質が不安定）。
• After: 人間が使用する外部ツール（Nanobanana）用の「設計図（プロンプト）」を出力する仕様に変更。

可読性の確保

生成されるテキストに対し、「不自然な改行の禁止」や「リズム感の確保」といった厳格なフォーマットルールを適用し、読み物としての質を向上させました。

まとめ

プロダクトのコア価値（診断レポート）を作る機能と、
その開発プロセス自体をコンテンツ化する仕組み。
この両輪が回ることで、開発と発信のサイクルが加速する基盤が整いました。

OCCHI

FBP・AIクリエイター・etc..

XFacebook

元デザイナー・猫の手も借りたい販促に関わる方の味方。デザイナー25年→営業10年→現在WEBマーケッター&AIクリエイター→世界中の広告とサッカーを見に行く事が目標。AI関連のTikTokで10日強でフォロワー3,000人達成。販促やアイディアにお困りの方が役に立つ情報やノウハウを発信していきます。SNS多数運営。総フォロワー数10,000人以上。