見本アプリ作り方解説

見本アプリのページでは、インド占星術のDチャートとダシャーのデータを取得するアプリを紹介しました。ここからは、そのアプリをどうやって作ったのかを、順番に説明していきます。

「AIでアプリを作るのが流行っているのは分かるけれど、何から手をつければいいのか分からない」——そういう方が、最初の一歩から最後の公開までたどれるように、という気持ちで書いていきます。

このシリーズのゴール

ひとつのアイデアを、ブラウザで動くアプリにして、誰でも使える形で公開する。これを、対話型のAI Claude（以下AIと表記）と対話しながら、自力でできるようになることを目指します。

プログラミングの知識は、あったほうがスムーズですが、必須ではありません。最初は環境構築も要りません。ブラウザとAIだけで「動くアプリ」が出せるところから始めて、必要になってきたら少しずつ本格的な方法に広げていきます。

題材はインド占星術、でも主役は「作り方」

題材は、インド占星術のアプリです。ただ、占星術に興味がなくても大丈夫です。このシリーズの主役は占星術ではなく「アプリの作り方」だからです。

各回の最後に「あなたが作りたいものでも同じ」という一般化をひとこと添えます。家計簿でも、仕事で使う計算用のアプリでも、ゲームでも、同じ手順に置き換えて読めます。インド占星術は、たまたま「天体計算」という難しい部分を含んでいて、作り方を説明する題材として優秀だっただけです。

このシリーズで一番伝えたいこと

「AIでアプリを作ってみた」という記事は、世の中にたくさんあります。でも、その多くが抜かしているのが検証です。

AIは、それっぽいけれど間違ったものを、平気で出してきます。私のアプリでも、最初は月の位置が数分ずれていて、その結果ダシャーが8日もずれていました。これを、外部の正解データ（AstroSeek）と突き合わせて見つけ、原因を切り分けて直しました。

だからこのシリーズの山場は、派手な機能追加ではなく「AIの出力を信用せず、正解と突き合わせて直す」回です。ここが、作って終わりにしないための一番大事なところだと思っています。

シリーズの地図

ひとつ、安心材料を先に。公開したアプリは、計算をすべてブラウザの中で行うので、何人に使われても無料で、AIの利用枠を消費しません。

次の「1」から、実際に手を動かしていきます。まずは「AIに動くアプリを出させる」ための、最初のスイッチを入れるところからです。

「1」では、最初のスイッチを入れます。やることは2つだけです。まず設定をオンにすること。そして、試しに小さなアプリを1つ作らせて、「本当に動くものが出てくる」という感覚をつかむことです。

ここを通ると、「AIでアプリを作る」が急に現実味を帯びてきます。

まず、設定をオンにする

AIにアプリを作らせるには、「コード実行とファイル作成」という機能をオンにしておく必要があります。これがオフのままだと、アプリを作る機能が動きません。手順は3ステップです。

一度オンにすれば、次回からは設定し直す必要はありません。

この機能をオンにすると使えるようになるのが「アーティファクト」と呼ばれるものです。むずかしい言葉ですが、中身はシンプルで、AIにお願いすると、会話の横に「実際に動く成果物」が表示される仕組みのことです。文章で答えが返ってくるだけでなく、操作できるアプリやページがその場に出てくる、と思ってください。これが、このシリーズでアプリを作る土台になります。

試しに、小さなアプリを1つ作らせてみる

いきなり大きなアプリを狙わず、まずは小さなもので「動くものが出る」体験をしておきましょう。たとえば、次のように頼んでみてください。

これを送るだけで、しばらくすると、会話の横（スマホの場合は別画面）に割り勘アプリが表示されます。金額と人数を入力すると、その場で「ひとり○○円」と計算されるはずです。

ここで大事なのは、あなたは一行もプログラムを書いていないということです。やったのは、作りたいものを普通の言葉で説明しただけ。それで、操作できるアプリが手に入りました。この「言葉で頼む → 動くアプリが出る」が、これから何度も繰り返す基本動作です。

できたアプリは、会話で育てられる

表示されたアプリは、そのまま会話で直していけます。「ボタンの色を青にして」「人数を最大10人までにして」のように頼むと、AIがその場で作り直してくれます。

つまりこの先の制作は、ずっとこの調子です。作る → 見る → 言葉で直す、の繰り返し。「2」からは、この力を使って、いよいよ自分の作りたいアプリに向かっていきます。

あなたが作りたいものでも同じ

割り勘アプリでも、家計簿でも、占星術のアプリでも、最初の一歩はまったく同じです。設定をオンにして、小さく1つ作らせて、動くことを確かめる。いきなり完成形を狙わず、まず「動くものが出てくる」感覚をつかむ。ここがすべてのスタート地点になります。

「1」では、「言葉で頼むと動くアプリが出てくる」という感覚をつかみました。「2」では、そのAIにいきなり作らせる前の「前さばき」をします。

ここを飛ばすと、AIはなんとなく作ってはくれるのですが、自分の欲しかったものと少しずつズレていきます。逆に、ここをほんの数分やっておくだけで、後の作り直しがぐっと減ります。

まず、一文で言えるようにする

最初にやることは、作りたいアプリを「○○を入力すると、○○が出る」という一文にすることです。

たとえば、私が作ったインド占星術のアプリなら、こうなります。

「1」の割り勘アプリなら、こうです。

この一文が、アプリの背骨になります。背骨さえはっきりしていれば、AIは大きく道を外しません。

最初の「分かれ道」を自分で決めておく

一文が決まったら、次にいちばん大事な分かれ道を、自分で決めておきます。

占星術アプリのとき、私が最初に決めたのは「自動で計算させるか／データを手入力させるか」でした。

• 自動計算：生年月日を入れたら、アプリが惑星の位置まで計算する。中身は複雑になるけれど、使う人はラク。
• データ入力：すでにあるチャートの数値を貼り付けて、表示するだけ。中身は簡単だけれど、使う人が自分でデータを用意しないといけない。

このたった一言の違いで、アプリの中身はまるごと変わります。だからこそ、AIに丸投げせず、自分で決めてから頼むのが大事です。

ここはAIの性質として覚えておくとよいのですが、AIは、あなたが決めていないことを「それっぽく」勝手に決めて作ってしまいます。だから、自分がこだわりたい分かれ道だけは、先に決めておくのです。

決めたことを、そのまま伝える

背骨（一文）と、決めた分かれ道。この2つがそろえば、あとはそのままAIに伝えるだけです。たとえばこう頼みます。

ポイントは、一文の背骨＋決めた分かれ道＋「まず何から作るか」を伝えていることです。動作確認をするときは、本物の誰かのデータではなく、サンプルの生年月日（たとえば 1995年8月15日 10:30 ニューデリー）で試すと安心です。

あなたが作りたいものでも同じ

どんなアプリでも、作り始める前のこの2ステップは変わりません。「入力→出力」を一文にする。そして、大事な分かれ道を自分で決める。 この前さばきが、後で何回分もの作り直しを節約してくれます。

次の「3」は、いよいよこのシリーズの山場です。アプリの「核」、つまりいちばん難しい部分をAIに作らせて、それをすぐに検証する——「作って終わりにしない」ための、一番大事な回になります。

「3」は、このシリーズの山場です。ここだけは、ぜひていねいに読んでほしいところです。

やることは2つ。アプリの「核（いちばん難しい部分）」を先に作らせること。そして、できたものをすぐに、外部の“正解”と突き合わせて確かめることです。

なぜこれが大事かというと、AIは「それっぽいけれど間違っているもの」を平気で出してくるからです。核が間違っていたら、その上にどんなにきれいな見た目や便利な機能を積んでも、全部が無意味になってしまいます。

まず「核」から作る

私の占星術アプリでいう核は、天体計算の部分でした。生年月日から惑星の位置を割り出す、この計算が間違っていたら、チャートもダシャーも、すべての結果が狂います。

だから私は、見た目を整えるより先に、この計算部分を作らせて確かめにいきました。

あなたのアプリの核は何か——それは、「そこが狂うと、ほかが全部おかしくなる部分」です。割り勘アプリなら金額の計算、家計簿なら集計のロジック。まずそこを作り、まずそこを疑います。

「正解」と突き合わせる

ここがいちばん大事なところです。AIは「検証しました」「正しく動いています」と言ってくれることがありますが、それだけを信じない。自分の手で、外部の“正解”と見比べます。

占星術には、AstroSeek という定番の計算サイトがあります。そこで同じ条件で計算した結果と、自分のアプリの結果を、数値で並べて比べました。

すると、見つかったのです。月の位置が数分ずれていて、その影響で、ダシャー（運勢期間）の区切りが8日もずれていました。パッと見は「それっぽい」のに、確かに間違っていたわけです。自分で突き合わせなければ、このズレには気づけませんでした。

ズレたら、原因を切り分けて直す

ズレを見つけたら、次は「どこが原因か」を絞り込みます。

並べて見ると、チャートの基本（ラグナや太陽の位置）はぴったり合っていて、ずれているのは月だけでした。ここから、「月の計算方法が簡易すぎる」ことが原因だと特定できました。

原因が分かれば、直し方も具体的に頼めます。AIに「月の計算を、もっと高精度な方法に置き換えてほしい」と頼みました。その結果、月のズレは数秒角まで縮まり、ダシャーのズレも1日まで小さくなりました。

このとき、ひとつ気をつけたことがあります。正解を1つだけで判断しないこと。突き合わせる相手が1つだと、その相手自身が間違っている可能性もあります。なので、複数の独立した計算結果と見比べて、確かに直ったことを確認しました。

どこまで合わせるかを、自分で決める

最後に残った「1日のズレ」は、運勢の解釈にはまったく影響しない範囲でした。だから、私はそこで止めました。

完璧に一致させようとすると、ここから先は時間がいくらあっても足りません。「実害があるかどうか」で、止めどころを決める。これも検証の大事な一部です。

あなたが作りたいものでも同じ

どんなアプリでも、流れは同じです。核を先に作る。“正解”と突き合わせる。ズレたら原因を切り分けて直す。そして、どこで止めるかを決める。

「AIが作ったんだから、たぶん合っているだろう」で先に進まないこと。これが、作って終わりにしないための、いちばん大事なコツです。

核が固まったら、あとは安心して肉付けしていけます。次の「4」では、機能を1つずつ足していく進め方を説明します。

「3」で、アプリの核を固めて、検証も通しました。ここからは安心して、機能を肉付けしていく段階です。

この回のコツは2つだけ。一度に全部頼まないこと。そして、危ない変更の前には版を分けておくことです。地味ですが、ここを守るかどうかで、後の作りやすさが大きく変わります。

一度に全部、頼まない

やりがちな失敗が、「あれもこれも」を一度にまとめて頼むことです。一気に作らせると、どこかが動かなくなったときに、どの変更が原因なのかが分からなくなります。

私の占星術アプリも、機能は1つずつ足していきました。分割図の種類を増やす。次にダシャーを足す。次にデータをコピーする機能を付ける——というふうに、1つ足すたびに、ちゃんと動くか確認してから次へ進みました。

この進め方の良いところは、もし何かが壊れても、直前に足したものが怪しい、とすぐ見当がつくことです。原因探しが一瞬で済みます。

危ない変更の前に「版を分ける」

大きく変えるとき、特に「うまくいっている部分に手を入れる」ときは、今のものを残したまま、コピーを作って、そのコピーのほうを変えます。

私の場合、月の計算を高精度な方法に置き換えるとき、元のファイルはそのまま残して、コピーに対して変更しました。色違いのバージョンを作ったときも同じです。

こうしておくと、たとえ失敗しても、いつでも元に戻れます。「戻れる」という安心感があるから、思い切って大胆に試せるのです。頼むときは、こんなふうに伝えます。

足すたびに、「まだ動くか」を確かめる

1つ機能を足したら、そのつど、サンプルの生年月日（たとえば 1995年8月15日 10:30 ニューデリー）で動作を確認します。「3」でやった検証の習慣を、小さく続けていくイメージです。

毎回ちゃんと確かめておけば、「気づかないうちに、前は動いていた部分が壊れていた」という事故を防げます。

あなたが作りたいものでも同じ

どんなアプリでも、肉付けのやり方は変わりません。小さく足して、そのつど確かめる。危ないときは、版を分けてから変える。 一見まわり道に見えますが、壊れたときの立て直しを考えると、結局これがいちばん速い進め方です。

中身が一通りそろったら、次の「5」では、いよいよ見た目を整えていきます。

「4」までで、アプリの中身が一通りそろいました。ここで、いよいよ見た目を整えます。

この回でいちばん伝えたいのは、見た目は最後でいい、という順番そのものです。

なぜ、見た目は最後でいいのか

理由はシンプルで、先に見た目を作り込んでしまうと、中身を直すたびに見た目も崩れて、作り直しになるからです。

色やレイアウトを整えたあとで「やっぱり計算をこう変えたい」となると、せっかく整えた見た目にもう一度手を入れることになります。中身が固まってから、最後に一度だけ整える。このほうが、ムダな往復が起きません。

見た目こそ、言葉で気軽に頼める

うれしいことに、配色や文字の大きさは、AIにいちばん気軽に頼める部分です。思いついたまま、こんなふうに頼めます。

私も、アプリ全体の色を何パターンも試しました。紺色から、青紫、水色、金色、そして淡い藤色へ——気軽に試して、いちばん好きなものを選べます。ここは、肩の力を抜いて楽しむところです。

「初めて開いた人」のための初期設定

地味ですが大事なのが、初期設定（デフォルト値）です。初めてアプリを開いた人が、何も入力しなくても「良い例」が表示されるようにしておくと、ぐっと親切になります。

私は、初期表示の出生地を東京に、チャートの様式を自分がよく使う形に変えました。自分や読者がいちばんよく使う設定を、初めから入れておく。これだけで、使い始めの印象が変わります。

読みやすさも、見た目のうち

見た目を整えるときは、きれいさだけでなく「ちゃんと読めるか」も確かめます。たとえば、背景が淡い色なら、文字は濃いめにしてコントラストをつける。せっかくの情報も、読みにくければ伝わりません。

あなたが作りたいものでも同じ

どんなアプリでも、見た目は中身が固まってから、最後に一度で整える。配色や初期値は、言葉でいくらでも試せます。ここは作業というより、楽しむ工程だと思ってください。

さて、いよいよ次が最終回です。「6」では、完成したアプリを公開して、誰でも使えるように配る方法を説明します。

ついに最終回です。完成したアプリを、誰でも使える形にして公開します。

公開には大きく3つの方法があり、それぞれ手間と自由度が違います。選ぶ前に、ひとつだけ押さえておきたいことがあります。それは、どこまでがチャットだけで完結し、どこから自分の環境（パソコンやサーバー）が必要になるか、という線引きです。

結論を先に言うと、アプリを作るところまでは、インストールもターミナルも一切いりません。チャットの中だけで完結します。自分のサーバーで本格的に公開したくなったときに、初めて環境の話が出てきます。

方法1：アーティファクトの公開リンク（いちばん手軽）

いちばん簡単な方法です。アーティファクトの「公開（Publish）」ボタンを押すと、共有リンクができます。受け取った人は、アカウントがなくても、ブラウザでそのまま使えます。何人に使われても、作った人に費用はかかりません。

向いているのは、すぐに配りたいとき、家族や友人、少人数に渡したいとき。まず試しに公開してみるのにも向いています。

注意点もあります。公開されるのはそのバージョンのスナップショットで、元のチャットを消すと公開版も消えます。有効期限やパスワード、アクセス解析はなく、検索に出てくる可能性もあります。

この方法は、すべてチャットの中で完結します。

方法2：単体HTMLを自分のサーバーに置く（1ファイルで完結）

AIに「1ファイルのHTMLにまとめて」と頼むと、必要なものを全部ふくんだ .html ファイルが1枚もらえます。これを、静的なファイルを置けるサーバー（レンタルサーバー、Netlify、Vercel、GitHub Pages など）に置くだけで公開できます。

向いているのは、自分のURLで見せたいけれど、手軽に1ファイルで済ませたいとき。リンク切れの心配なく、長く置いておけます。

必要なのは、ファイルを置ける場所（サーバー）だけ。ターミナルは使いません。

方法3：Viteでビルドして公開（本格的なサイト向け）

いちばん本格的な方法です。手元のパソコンで、Node.js とターミナルを使って「ビルド」という作業をし、できあがった一式をサーバーに置きます。

向いているのは、ちゃんとしたサイトとして、同じURLのまま更新を重ねていきたいとき。表示も速くなります。

必要なのは、Node.js とターミナル、そしてサーバー。ここで初めて「環境構築」が登場します。私自身は、この方法で自分のサイトに公開しました。最初はとっつきにくいですが、一度通してしまえば、あとの更新は「直す → ビルドし直す → 中身を上書きする」の繰り返しになります。

どれを選べばいい？

• とにかく早く、チャットだけで済ませたい → 方法1
• 自分のURLで、手軽に1ファイルで → 方法2
• 本格的なサイトとして、更新を続けたい → 方法3

迷ったら、まず方法1から始めてかまいません。あとから方法2・方法3へ引っ越すこともできます。

ひとつ安心材料を。公開したアプリは、計算をすべてブラウザの中で行うので、何人に使われても無料で、AIの利用枠を消費しません。アプリの中に個人情報も入りません。

シリーズのまとめ

全6回、おつかれさまでした。流れをふり返ると、こうなります。

道具を有効にする（1）→ 作るものを言葉で決める（2）→ 核を作らせて検証する（3）→ 機能を1つずつ足す（4）→ 見た目を整える（5）→ 公開する（6）

このシリーズで、私がいちばん伝えたかったことは、ひとつです。AIに「作らせる」だけで終わらせず、AIと「検証しながら詰めていく」こと。動くものを出すのはAIが得意ですが、それが本当に正しいかを確かめ、止めどころを決めるのは、人間の仕事です。

ここさえ押さえておけば、占星術でなくても、あなたの作りたいものを、自分の手で形にしていけます。ぜひ、何か1つ作ってみてください。