第1話
v0始め方ガイド！文章で頼むとWebアプリができる。無料の範囲と気をつけること
「AIでアプリを作れるらしい」と聞いて試したものの、道具のインストールで止まってしまった人へ。AIにコードを書かせる道具は増えました。ところが、多くは「まずパソコンに入れてください」から始まります。黒い画面に英語のコマンドを打ち、エラーが出て、検索して、また別のエラー。作りたいものを考える前に、1日が終わってしまう。
- ホーム
- アプリ・ページをつくる
- 小学生でもわかるv0
連載中アプリ・ページをつくる目で確かめる公式サイト ほかと比べる
小学生でもわかる v0 文章で頼むと、Webアプリができる。
v0（ブイゼロ）は、ブラウザの入力欄に日本語で頼むと、動くWebアプリの画面を出してくれるサービス。作っている会社はVercel（バーセル）で、公開したアプリの置き場でもあります。言葉で注文できる仕立て屋にたとえて、言葉で頼む、画面を直接さわって直す、絵やファイルを渡して作らせる、ネットに公開する、データを保存する、鍵とログインを扱う、アプリの中にAIを入れる、コードを持ち出す、の8つを1話ずつやっていきます。無料は、1回きりの5ドル分のクレジットと、1日7メッセージ。利用規約は16歳以上が対象で、18歳未満は保護者の許可が必要です。まずは1行で頼んで、出てきた画面を自分の目で確かめるところから。
9 / 10話 公開
あなたのスタンプ：0 / 9話
Map
v0でできること
このシリーズの「見取り図」。1話で1つの部屋を開けていきます。
- 01言葉で頼む
- 02画面を直接さわって直す
- 03絵やファイルを渡して作らせる
- 04ネットに公開する
- 05データを保存する
- 06鍵とログインを扱う
- 07アプリの中にAIを入れる
- 08コードを持ち出す
Episodes
エピソード一覧
第1話から順に読むのがおすすめ。途中の話から読んでも、1話で完結します。
-
01
-
02
第2話
v0への頼み方ガイド！1行とくわしいお願いで、できる画面はここまで変わる
v0に1行で頼んだら、それらしい画面は出たけれど、頼んでいない見本のデータや知らない人の名前が入っていて、どこから直せばいいのか困っている人へ。今回は、同じアプリを「くわしいお願い」で頼み直し、小さく足し、気に入らなければ前の版に戻すところまでを、実際の画面と一緒に進めます。
-
03
第3話
v0の画面を自分の手で直す方法！ボタンの色と角の丸みを、部品を選んで変える
v0でアプリの形はできたのに、「ボタンをもう少し丸く」「この色をもう少し明るく」がうまく伝わらず、同じお願いを何度も送り直している人へ。今回は、画面の部品を直接選んで、色や角の丸みを数字で変える方法を、実際に試した結果と一緒に進めます。
-
04
第4話
v0に絵を渡して作ってもらう方法！ラフの絵1枚から、画面の部品ができるまで
頭の中には画面の形があるのに、「左に箱、その右にもう1つ箱、上に見出しがあって…」と言葉にしようとすると、うまく書けずに手が止まる人へ。今回は、ラフの絵を1枚渡して、そのとおりの部品をアプリに足してもらう方法を、実際に試した結果と一緒に進めます。
-
05
第5話
v0で作ったアプリを公開する方法！誰が見られるか、何に使えないか、止め方まで
v0でアプリができて、人に見せたくなったけれど、「公開」を押すと誰に見えるのか、お金がかかるのか、あとで消せるのかがわからず、ボタンの前で止まっている人へ。今回は、公開のボタンを押してからURLが開くまでと、公開を止めるところまでを、実際にやってみた結果と一緒に進めます。
-
06
第6話
v0のアプリで記録が読み込み直しても消えないようにする方法！置き場3つと選び方
v0で作ったアプリに記録を入れたのに、ページを読み込み直したら全部消えていて、「これでは使えない」と手が止まった人へ。今回は、記録が消える理由と、消えないようにする方法を、実際に試した結果と一緒に進めます。保存の置き場は3つ。
-
07
第7話
v0で「鍵」を安全に置く方法！チャットに貼ってはいけない理由と、ログインの考え方
v0のアプリを外のサービスとつなごうとして、「APIキーを入れてください」と言われ、その長い文字列をどこに書けばいいのかわからず、チャットにそのまま貼りそうになった人へ。今回は、鍵の正しい置き場と、置いてはいけない場所を、v0の実際の設定画面を見ながら整理します。
-
08
第8話
v0のアプリにAIを入れる方法！作れたのに動かなかった理由と、別のお財布の話
v0で作ったアプリに「AIで文章を整える」のような機能を足してもらい、v0も確認したと報告しているのに、ボタンを押すと動かなくて、何が悪いのかわからない人へ。今回は、アプリの中にAIの機能を足すところから、動かなかった原因を突き止めるところまでを、実際の記録と一緒に進めます。
-
09
第9話 NEW
v0で作ったコードの見方と持ち出し方！3つの出口と、GitHubにつなぐ前の注意
v0でアプリを育ててきたけれど、「このアプリはv0の中にしかないのでは」「v0が使えなくなったら、全部なくなるのでは」と、ふと不安になった人へ。今回は、v0が書いたコードの中身を見るところから、外へ持ち出す方法までを整理します。出口は3つ。
これから開く部屋
- 10使いすぎない・公開前の総点検
Follow
v0の続きを受け取る
第10話が出たら知らせが届くように。公開したらXで告知し、記事の感想は引用リポストで全部読みます。
RSSは、Feedly などのRSSリーダーにこのボタンのURLを入れると使えます。この連載の新しい話だけが届きます。