開発事例 / Webアプリ

漫画マニュアルメーカー

URLを入力するだけでアプリの使い方を漫画LP形式で自動生成

公開中

アプリのURLを入力するだけで、Playwrightが複数ページを自動巡回してスクリーンショットを取得し、Google Gemini AIが漫画スタイルのイラストとストーリーを自動生成。チュートリアル・問題解決・発見・コメディ・ビジネスの5種類のストーリータイプと、少年漫画風からサイバーパンク風まで9種類の画風に対応。漫画+説明文+CTAボタンを組み合わせたLP形式で出力し、HTML/PNG/PDFでエクスポート可能。

この作品の要点

困っていたこと	アプリのマニュアル作成に多大な時間とデザインスキルが必要。
やったこと	URL入力のみでスクショ取得→AI画像生成→LP出力まで全自動化。
起きたこと	マニュアル制作時間を数時間→数分に短縮。

どこでつまずいたか
できあがったもの
どう作ったか
相談する

どこでつまずいたか

01アプリのマニュアル作成に多大な時間とデザインスキルが必要

02テキストだけのマニュアルはユーザーに読まれにくい

03スクリーンショットの取得・加工が手作業で非効率

どう解いたか

01URL入力のみでスクショ取得→AI画像生成→LP出力まで全自動化

02漫画形式で視覚的に分かりやすいマニュアルを自動生成

03Playwright連携で認証付きページも含めた完全自動スクショ

マンガでわかる

できあがったもの

できあがった画面

結果

01	マニュアル制作時間を数時間→数分に短縮
02	漫画形式で読了率・理解度が大幅向上
03	デザインスキル不要でプロ品質のマニュアルLPを量産可能

この作品でできること

URLを入力するだけで漫画マニュアルLPを全自動生成
Playwrightで最大12ページの自動巡回＆スクショ取得
5種類のストーリータイプ×9種類の画風で多彩な表現
HTML/PNG/PDF対応のレスポンシブLP出力
認証付きページにも対応したスクショ取得

どう作ったか

担当と道具

担当	企画・フルスタック・AI連携・UI/UX
使った技術	Next.js・TypeScript・Tailwind CSS・Google Gemini・Playwright・Supabase・Square API・Vercel