非エンジニアが AI だけで「24時間で消える地図SNS」を1日で作った話（Cloudflare 無料 + 独自ドメイン）

はじめに

SNS疲れへの個人的な応答として、「つながらない、蓄積しない、ただ近くの気配だけ見える」SNSを作りました。

→ myscape

この記事では、以下の2つを並行して書きます。

1. プロダクトの内容と技術的な設計判断
2. 非エンジニアが AI だけで、構想から本番公開まで1日で到達した開発プロセス

後者は2025〜2026年の「いま」にしか書けないメタ情報なので、先にそちらから書きます。

---

きっかけ — 沖縄の丘の上の話

少し前、沖縄を歩いていて、山の上の小さな公園にたどり着きました。そこでは地元産のクラフトビールのフェスタが開かれていて、老若男女が微笑みながら、ゆるやかな南国のダンスを眺めていました。

すぐ下の国際通りには旅行者がたくさん歩いていたけれど、高低差のせいで、その盛り上がりに気づいている人はほとんどいなかった。たぶん地元の人でも、知らない人は多かったと思います。

「こういう、いま・ここで起きている温度感って、どうやって伝わるんだろう?」

X や Threads は大きすぎて、メタトレンドしか可視化されない。Google Map はリアルタイムの雰囲気を持たない。広告と評価に覆われていない、もっと素朴で、デジタルに飲み込まれきっていない情報の流れがあってもいいはず — そう思って、作ってみました。

---

開発プロセス — 非エンジニアが AI と1日で作った

この記事を書いている私は、プロのエンジニアではありません。
ターミナルの使い方もよくわからない。Git も雰囲気でしかわからない。コードは書けない。

それでも、このサービスは実質1日で、構想から本番公開まで到達しています。

タイムライン

• 沖縄の丘の上で ビールを飲みながら「こういうの作れないかな」と Claude.ai に雑談し始める。思想と体験のスケッチがそこで生まれる
• ホテルと帰りの空港で 雑談を元に要件定義ドキュメントを作る。Claude と対話しながら、「やること」「やらないこと」を含めて固める
• 家に戻って その日、生まれて初めて Claude Code（デスクトップ版）を起動。黒画面（ターミナル）無し。
• 各サービスのアカウント作成と設定を、Claude Codeにスクショを投げながら実施。セキュリティチェックはClaude自身のダブルチェックとともに、Gemini(Pro)や各サービス内のAIを併用。
• Phase 0（PWA プロトタイプ） が同日中に完成
• 翌日以降、Phase 1（Cloudflare D1 バックエンド）、Phase 2（エリアトレンド、Wisp 機能）を追加
• 独自ドメイン取得、メール設定、セキュリティ設定まで含め、すべて GUI のみ

私が触ったのは、基本的に Claude Code Desktop の対話画面、Cloudflare のダッシュボード、ブラウザ、この3つだけ。非エンジニアにとっては昔のwindowsの青画面並に恐ろしく忌避感のある黒いターミナル画面を1度も開いていません。

何をしたか、何をしていないか

• やったこと: 対話、意思決定、動作確認、公開
• していないこと: コードを書くこと、CLI を叩くこと、npm install を手で実行すること

たぶん、これは「vibe coding」と呼ばれている領域の、非エンジニアにとってのちょっと背伸びしたチャレンジの一例だと思います。2025〜2026年の時点ではここまでできる、そういう時系列のマーカーとして記事を残しておきます。

ただし、AI にぶん投げれば全てできるわけではない

• 「24時間で消える」「アカウント不要」「45秒制限」といったコンセプトの取捨選択は人間がやる必要があった。私自身は建築設計・デザインを専門としているが、事業企画、webサイトの基本デザイン・企画・運営（専門のディレクターではなく、web制作会社に依頼する事業会社側の担当者）などを小規模ながらいろいろ経験してきた、よくいえばジェネラリスト、悪く言えば半端者の器用貧乏。ひとまず今回は、どの領域も何となくわかるし、デザイン含めた良い悪いの判断はそれなりにできるのが活きた。
• 「個人情報は持たない」「画像は R2 ではなく D1 に置く（無料枠超過で自動停止させるため）」みたいな判断は、AIの話を鵜呑みにせず、リスク感覚を働かせながら、コストと運用について自分で考えて、ある種の嗅覚をはたらかせないと出てこない
• AIに任せすぎると、無数の案と無限のアウトプットが出て、ただただ複雑化していきかねない。何を作らないか、何をやめるか、を繰り返し確認するのが人間の役割のひとつ

AI は「速く・正確に実装する」ことは得意だけれど、「何を作るべきか」「何を作らないべきか」、そして、何を欲望するのかは、作り手の身体と経験からしか出てこない。沖縄の丘の上の記憶と体験、そして少しのアルコールがなければ、このサービスはなかった。

---

プロダクトのコンセプト

• アカウント不要
• 写真を撮って、ハッシュタグと短いひとことを付けて、地図に落とす
• 45秒の投稿タイムリミット
• 理想は、地域のイベントとかフラッシュモブとかをみた人がワッと投稿して、なにか起こってる感が一目で・リアルタイムで感じられること。部屋にこもってリプを返すんじゃなくて、靴を履いてとりあえず向かってみたくなるSNS
• それらもすべて、だんだん薄くなって、24時間ですべて消える
• いいねなし、返信なし、フォロワーなし
• 広告なし、履歴なし
• 将来は、GoogleとかPeatixとかのデータも取り込んで表示したり、個人のお店とかがパン焼きたてだよとか叫べると面白い。
• 収益化？どうしたらいいでしょうね。

---

技術スタック

• フロントエンド: React + Vite + TypeScript + Leaflet
• バックエンド: Cloudflare Pages Functions
• DB: Cloudflare D1（SQLite）
• スケジューラ: Cloudflare Cron Workers
• PWA 対応

---

設計上の選択

1. 画像を R2 でなく D1 に入れた理由

• R2 は無料枠超過時に自動課金が発生する
• D1 は Free プラン超過時に自動的にリクエスト拒否される（課金なし）
• 24h で消える前提なら 5GB で十分収まる

悪意ある攻撃で青天井の請求が来るのが一番怖いので、「超過で課金されず自動停止する」構成を優先しました。

2. ズームレベル連動レンダリング

Leaflet zoom	表示
〜13	色とりどりのドット
14〜16	写真サムネイル + ハッシュタグ
17〜	ミニチェキカード（手描きの polaroid 風）

3. Wisp（気配）機能

空の地図問題への対策として、ユーザー投稿がない場所に「wisp」という薄いグレーのマーカーを表示しています。

• OpenStreetMap Overpass API で近くの POI を取得（完全無料）
• カテゴリごとのテンプレートで「気配」のひとことを自動生成
• 画像も AI も使わず、API コスト¥0
• 投稿が増えると wisp は消えていく（ユーザー投稿が優先）

4. 24時間ライフサイクル

• 投稿は createdAt + 86400000 で expiresAt を持つ
• Cron Worker が1時間おきに期限切れを DELETE
• 残り時間に応じて地図上での透明度がグラデーション（12段階）
• 時間の経過が「見える」のが体験の一部

---

法的対応・モデレーション

• 利用規約 / プライバシーポリシー（EN/JA 両対応）
• IP ハッシュ記録（生 IP は保存せず、24h で削除）
• 通報3件で自動削除
• 投稿レート制限: 20件/日/IP

---

運用コスト

• Cloudflare Free プラン
• myscape.app ドメイン代: 年 $14.20
• それ以外ゼロ

攻撃されても Cloudflare が無料枠の範囲で自動的にレート制限・遮断してくれるので、天文学的請求は構造的に発生しません。
投資もしていないし、収益も特にないので、変な状況になったり、わたしがやめたくなったら、その瞬間にやめられます。

---

学んだこと

• 「消える」ことが機能になる体験は、作ってみると確かに成立する
• D1 は思ったより速い。画像すら入れて問題ない
• PWA は App Store 審査回避の有力な選択肢
• 非エンジニアが1日で本番公開まで到達できる時代になっている
• ただし「何を作らないか」は今でも人間の仕事

---

おわりに

プロフェッショナルに運営し続けるのは私の得意分野ではありません。

もしこの方向性を「こうしたらもっと面白い」とか「自分が育ててみたい」と思ってくれる人がいたら、遠慮なくご連絡ください。私の直感と、AI と一緒に手探りで作ったこの小さなプロトタイプが、私よりもっと優れた人たちのヒントになって、もっと面白いものが世に出ていくなら、それが一番ありがたいなと思っています。

→ myscape.app

---

Studio ZaiYa
[e-mail]