世界初の和風モバイルWeb IDE

Introduction

お疲れ様です
ジュニアフロントエンドエンジニアの
Kanataです。

世界初の和風モバイルWeb IDEを
先日2026年2月28日19:30に
リリースしました

 
   2026年2月28日19:12（JST）時点の
　検索結果（Google検索AIモード）  

 
   2026年2月28日19:30（JST）時点の
　デプロイ完了画面（Cloudflare Pages）  

今回はその備忘録を共有します

Background

なぜ、和風モバイルWeb IDEを
作ろうと思ったのか。
理由は3つあります。

1.和風のIDEがまだなかったから

　どのIDEも同じようなデザインばかりで、
　「使っていて便利」 ではありますが
　「使っていて心地良い」 IDEが
　まだないなと感じていました。
　「日本人が日本人のために
　デザインしたIDEが欲しい」
　という思い付きが
　このプロジェクトの始まりでした。

2.ひらめきを即コードにしたかったから

　毎日どこへ行くにも
　ノートパソコンを常に持ち歩くのは
　現実的ではありません。
　手元のスマートフォンひとつで
　アプリ開発を進めることができたら
　とても便利だろうなと思いました。

3.アプリ開発の楽しさを広めたかったから

　「プログラミングに興味はあるけれど、
　まだスマートフォンしか持っていない」
　という未来のエンジニアたちの
　最初の一歩を後押しする
　身近なIDEを作りたいと思い、
　ユーザー登録、クラウド連携、課金、
　広告、AIサジェスト、トラッキング、
　テレメトリーをすべて排除した
　IDEにしようと考えました。

Workflow

全部で2か月（188時間30分）
かけて企画からデプロイまで
完遂しました！
CMやLPの制作時間を加えると
190時間超になります
開発＋宣伝で2か月（200時間）
を予定していたので、計画通りです。
どのように進めていったのかを
紹介します。

Phase0：発案

　LINE Keepメモを使って
　浮かんだアイデアを
　書き溜めていきます。
　身近な人の困りごと（悩みごと）を
　一緒に解決できるように
　考えるクセを持っておくと
　アイデアが浮かびやすいです

Phase1：企画

　Googleドキュメントを使って
　企画書を作ります。
　アプリの概要、ターゲット、競合、
　競争優位性、コスト、レベニューを
　明確にします。
　「誰のどういった課題を
　どのように解決したいのか」
　を考えるとアプリのコンセプトが
　決まりやすいです。

Phase2：要件定義

　企画書をもとに、
　Googleドキュメントを使って
　要件定義書を作ります。
　最初から完璧なアプリを
　作る必要はありません。
　まずは
　ターゲットのニーズを
　満たすために必須の機能だけを
　搭載したアプリ（MVP）
　を考えます。
　「こんな機能もあったらいいな」
　は、バックログとして
　要件定義書から
　切り離しておきましょう。

Phase3：外部設計

　企画書と要件定義書をもとに、
　MediBang Paintを使って
　デザインカンプを作ります。
　ロゴ、アイコン、画面ラフ、
　カラーパレットが完成したら、
　それらをもとにCanvaを使って
　画面サンプルと画面遷移図を作ります。
　実際にアプリを使うことを
　想像しながらデザインしましょう。

Phase4：内部設計

　要件定義書、画面サンプル、
　画面遷移図をもとに、
　Google Geminiを使って
　技術スタックリスト、
　コーディング規約、
　ディレクトリ構成案、
　開発ロードマップを作ります。
　技術的に実現不可能な要素はないか
　注意して壁打ちしましょう。

Phase5：コーディング

　要件定義書、画面サンプル、
　画面遷移図、技術スタックリスト、
　コーディング規約、
　ディレクトリ構成案、
　開発ロードマップを
　プロジェクトフォルダに配置して、
　Antigravityを使って
　アプリを作ります。
　1機能1ステップで実装し、
　その都度Gitにコミットする
　ことをお忘れなく
　AIにもこのルールを
　遵守させましょう。

Phase6：デプロイ

　アプリが完成したら、
　Cloudflare Pagesに
　デプロイします。
　数あるホスティング
　サービスのなかで
　無料プランでできることが
　最も多く、おすすめです。

Phase7：CM制作

　デプロイを達成した喜びを
　噛みしめながら、
　Cubaseを使って
　CMのBGMを作ります。
　BGMが完成したら、
　Clipchampを使って
　アプリを操作しながら撮影した
　スクリーンショットや
　アプリのロゴなどと組み合わせて
　CMを作ります。
　15秒から30秒くらいのものを
　作りましょう。

Phase8：LP制作

　CMを公開したら、
　はてなブログを使って
　LPを作ります。
　この工程でも
　Antigravityが
　活躍してくれました。
　機能を増やしていくことを
　見越して、現時点では
　シンプルなLPにしておきましょう。

Tips

全体を通して、用途に応じてAIを
使い分けることが重要です。

最新情報を得たい
Google検索のAIモード

抜け漏れや矛盾をチェックしてほしい
GeminiのThinkingモード

アイデアを広げてほしい
GeminiのProモード

仕様駆動開発（SDD）で使う
Gemini Pro、Claude Opus

また、AIに
コーディングを丸投げすると
修正ループに陥ることがあるので、
重要な部分は
自分でコーディングしましょう

Conclusion

最後までお読みいただき
ありがとうございました

これからも、
日々の学習で得た気づきや
試行錯誤の結果などを
積極的に発信していきます
不定期での発信になりますが、
よろしくお願いいたします。