🚀 はじめに
こんにちは、**ZeNx（ゼン）**と申します。
私は大学で経営・マーケティングを学んでいる文系の学生で、システム開発に関する専門知識は一切ありません。プログラミングを独学で始めてから、まだたったの6ヶ月です。プログラミング言語の難しい文法やコードの構造なんて、今でも全然わかっていません。
そんな私が、AIエディタ「Cursor」を相棒に据え、17時間ぶっ続けで画面に向き合い、自身の統合Webプラットフォーム**「ZDNA Logic-Works」**（ https://zdna-official.com ）の超大規模リニューアルを完了しました。
「技術的なバックグラウンドがなくても、パッションとAIの扱い方次第で、Stripe決済も時間連動の防衛網も1人で形にできる」
この6ヶ月間の独学で得た知見と、17時間の死闘で得た「AIを100%コントロールして本物のプロダクトをローンチするノウハウ」を、Qiitaの皆さんに全力で共有します！
🏛️ 1. ZDNA Logic-Works のアーキテクチャ概要
今回のリニューアルで構築したシステムの全体像です。FastAPIをバックエンドの核（コア）に据え、目的とターゲットに合わせて完全に最適化された「3つの部屋」を直列で同期させています。
▼ システム構造のインフラマップ
-
⚙️ [ FastAPI Backend (main.py) ] —— すべての処理の起点
- ├── 🚪 玄関 (エントランス)
- │ ├── 無料3話ストーリー（ポップアップ閲覧）
- │ ├── 営業時間連動システム（04:00〜21:00）
- │ └── 夜間の「防衛パルスモード」（ブルー明滅）
- │
- ├── 💻 書斎 (Library) —— ターゲット：ギーク・エンジニア層
- │ ├── 左25%：右75%の「大画面2分割ビューア」
- │ ├── Stripe読書券認証（500円/2ヶ月売り切り・サブスクなし）
- │ └── 画面幅に吸い付く「AI解析コンソール」
- │
- └── 🌿 実験室 (LINE Bot) —— ターゲット：主婦・学生層
- ├── 目に優しい「極上クリーム色UI」（#faf7f2）
- ├── 左右に広がる「瑞々しい緑のつる草グラフィック」
- └── 100枠自動整列グリッド（現在「瞬殺君」が稼働中）
💻 2. 【フロントエンド】ターゲットの心理を見抜くUIUXリファクタリング
大学でマーケティングを学んでいる視点から、システムが「エンジニア向け」と「一般層（主婦・学生）向け」で完全にデザイン思想を分離させました。
① 【書斎】手続き感のパージと大画面化
有料の「読書券」を購入してPDF本棚を読み耽る「書斎」画面は、PDFの文字の視認性を最優先し、画面を豪快に**「左25%：右75%」に2分割する大画面レイアウトへリファクタリング。
さらに、AIエージェントの返答カードが「テキスト量に合わせてピタッと吸い付くように自動で伸縮する（高さ可変オートフィット）」構造をCSSで追求しました。
また、泥臭い「決済画面」をUIから隠蔽し、左カラムの底面に[ SYSTEM_DECRYPT_KEY ]**という名の暗号キー復号コンポーネントとして配置。Stripe決済とシームレスに直結させました。
② 【LINE Bot】冷たさを排除した「極上クリーム色×ボタニカル」
一般層をターゲットにした/line（ショーケースエリア）では、ディスプレイ特有のブルーライトによる「眩しさ」がユーザーに与える心理的拒否感を排除するため、背景色をパキッとした白から、モダンで温かみのある**「極上クリーム色（#faf7f2）」へ大改造。左右のエッジに「緑のつる草」をハンダ付けし、LINEのブランドグリーンと色彩をシンクロさせました。
最大100体のBot枠が自動整列する構造で、現在は写真を送るだけでAIが10秒で宿題を解説する「瞬殺君（BOT_001）」**が稼働しています。
🔒 3. 【バックエンド】04:00〜21:00限定の「生きている営業時間制御」
このシステムは、日本時間（JST）の時刻ログを24時間リアルタイムに監視し、店舗自体のAPIを物理的に遮断・解放する「営業時間連動システム」を採用しています。
- OPEN（04:00〜21:00）： エントランスの真裏から妖艶なネオンパープルとアンバーゴールドのバックライトが染み出し、つる草のシルエットが美しく浮かび上がる「覚醒状態」になります。
- DEFEND（21:01〜03:59）： 夜間は外部からの不正アクセスや負荷を警戒し、ライトを強制消灯。淡いブルーが10秒周期でゆっくり明滅する**「呼吸する防衛パルスモード」**へと切り替わり、サーバーサイドでPDF閲覧や決済などの店舗APIへのリクエストを厳重に拒否（インバウンド遮断）します。
🤖 4. 【AI自動化】ローカルGPU自動執筆とセーフティ・ブレーキ
本棚に格納されているPDF（1アプリあたり5冊構成、各約3,000字の横型論文）は、私が手書きしたものではありません。
リポジトリ内の特定のゾーンにアプリのデータを置くと、自宅のローカルGPUが覚醒し、AIエージェントが自動で内容・思想・バグの観察日記までをハンダ付けしてPDFを自動で生成する自律回路を組んでいます。
ただし、ローカル環境でのフルパワー駆動は、VRAMのパンクや電気代の爆発という物理的なリスクを伴います。
そのため、システム内に**「1日最大3ジョブまで」の強力な自動保護ブレーキ（リミッター）**を組み込んでいます。限られたリソースの中でシステムを安定稼働させるための、リアルな運用防衛ロジックです。
💡 5. 独学6ヶ月の初心者が、AI（Cursor）をコントロールするために意識したこと
プログラミング言語がわからない私が、17時間のエラー祭りを乗り越えてこのシステムをローンチできたのは、Cursor AIへの命令（プロンプト）の出し方を徹底したからです。以下に、私が掴んだコツをまとめます。
-
既存の正常なコードを「絶対に傷つけない」と明記する
AIは油断すると、関係のない別の正常なコードを勝手に書き換えてバグを発生させます。「変更するのは〇〇のHTML/CSSのみ。既存の決済ロジックやFastAPIのバックエンドコードには【絶対に1ミリも干渉せず、完全に維持】すること」と、毎回しつこいくらいに防衛線を張ることが最重要です。 -
世界観や目的（ターゲット）をAIと共有する
単に「ボタンを置いて」と頼むのではなく、「学生や主婦が親しみやすいように温かみのあるクリーム色にして」「サイバーボタニカルな世界観に馴染むよう、ソリッドなデザインにして」と伝えることで、AIが出してくるCSSやデザインの精度が劇的に跳ね上がります。 -
エラーが出たら「直列でハンダ付けし直す」パッションを持つ
AIが間違ったコードを出してきても諦めず、エラーログをそのままAIにぶち込み、「何が原因で、どこの回路が繋がっていないのか」を対等にディスカッションし続ける粘り強さが、独学開発において最大の武器になります。
💡 まとめ：パッションがあれば、半年で世界に要塞を作れる
今回のリニューアルの仕上げとして、Cursor AIにターミナル上で直接指示を出し、一撃で「公式システム説明書PDF」をプロジェクト内に自動生成させました。
PDFの文字が少しだけ荒くなってしまっている箇所はご愛嬌ですが、この説明書PDFも含めて、すべてスマートフォン対応（レスポンシブ）で快適に閲覧できるようになっています。
大学でシステム開発を学んだことは一度もありません。真逆の環境からの完全な独学です。
それでも、「こういう最高にお洒落な店（システム）を作りたい！」という強烈なパッションさえあれば、最新のAIを最強の相棒にして、ここまで形にできます。
新しく生まれ変わった ZDNA Logic-Works。
ロジックと美学の詰まったこの要塞の輝きを、ぜひ一度踏みに来てください。
- 🌐 公式プラットフォーム: https://zdna-official.com
- 📄 公式システム説明書PDFは、トップページの案内板リンクから今すぐスマホで閲覧可能です。
システム、オールグリーン。
皆様のアクセスログを、エントランスでお待ちしております。