本動画は、AIを活用してiOSアプリをアイデア出しからUI設計、マスコット制作、動画アニメーション、バックエンド接続、課金設定、App Store申請準備まで一気通貫で作る実践解説である。既存AIモデルを組み合わせたラッパー型アプリを例に、市場調査、デザイン参考の集め方、Claude CodeやChatGPT、FAL AI、RevenueCatなどの使い方を具体的に示しながら、見た目のよい実用アプリを短期間で作る流れを紹介している。
これまでで最もリクエストが多かったiOSアプリ制作
さて、今日は僕がテック系コンテンツクリエイターとして活動してきた中で、これまでで最もリクエストが多かった動画です。それは、こんな見た目のiOSアプリを作ることです。これはMerl AIです。僕が1週間で作ったアプリです。TikTokのタイムスタンプを見てもらえれば分かります。1週間です。1週間でこのアプリ全体を作りましたし、僕の人生で作ったアプリの中でも、かなりきれいな部類に入ると思っています。それだけではなく、いかにもバイブコーディングで作りました、という見た目にもなっていません。機能もかなり入っています。そして多くの人が特に聞いてきたのが、この小さなキャラクター、Merlです。このアニメーションをどう作ったのか、という話です。
なのでこの動画では、アイデアの段階から実際に完全に動くアプリになるところまで、一緒に進めていきます。しかも僕自身、まだ何を作るか分かっていません。これからアイデアを探して、UIの参考を見つけて、マスコットを作り、そのマスコットをAIでアニメーション化します。Paywallの設定も一緒にやります。App Storeへの提出も一緒にやります。これをやるために知る必要があるすべての部分を、一緒にやっていきます。
この動画が終わる頃には、あなたもまったく同じことをどうやればいいか分かるようになります。さらに僕と同時に進めれば、こんな見た目のアプリを丸ごと作って、App Storeに提出し、承認を待つのではなく、却下を待つ状態にできます。この話は後でします。
見てもらうと分かるように、タブをたくさん開いています。この見た目と同じように見えて、同じように動くアプリを再現する方法を、本当にステップごとに進めていきます。まず最初に言っておくと、これは嘘ではありません。これが実際のアプリです。App Storeに提出中のMerl AIです。これは僕が作ったランディングページです。ちなみに、ランディングページも作ります。これが僕の作ったランディングページで、後で一緒に軽く見ていきます。あなたのiOSアプリ用のランディングページも作ります。作る必要があるからです。
基本的にこのアプリが何をするかというと、ラッパーのラッパーです。見て分かるように、裏側にはGoogle Geminiがあり、Claudeがあり、FAL AIがあり、OpenAIがあります。他人のAIを使っていろいろやっているわけです。それがラッパーです。ラッパーというのは、画像生成やClaudeの賢さのような既存のAI機能を取り、それを別のものに接続して、そのAIを動力にすることです。
ラッパーであること自体に何の問題もありません。基本的に世の中のあらゆるAIは、裏側でより賢いAIに支えられていて、それを別の使い方にしているだけです。なので今日のアプリでは、どんなラッパーを作るべきかを探っていきます。
僕がMerl向けに作ったラッパーは、まだiOS Storeで承認待ちですが、履歴書を書き直すものです。自分自身の声を反映して、ツイートやキャプションやエッセイを書くのを助けるスキルファイルがあります。ここにあるShineはヘッドショット生成を助けてくれるものですが、正直まだ最高ではありません。これはもっと良くします。それから普通の画像編集にも対応しています。Cutterもあります。これはFAL AIを使っています。ここにはSeedance 2.0、Kling 3.0、そして最高クラスの動画生成や画像生成がMerlの中に入っています。
さらにDesignerがあります。これはとてもシンプルです。アパートの写真を撮ると、そのアパートのインテリアを飾るのを助けてくれるものです。繰り返しますが、ここにある5つはすごくシンプルなもので、ClaudeでもChatGPTでもすぐできます。ただ、そのままだとそこまで良くなりません。
そこでMerlの裏側で僕がやったのは、自分でかなり具体的なスキルファイルを作ることでした。だいたい1日くらいかかったと思います。ユーザーが入力するたびに、たとえば、履歴書を書き直してほしい、という入力を受け取ります。ただし、Claudeがやることをそのまますべて使うのではなく、僕たちのスキルファイルがそのプロンプトの間に入り、そのプロンプトをより良くします。そのスキルファイルは、成功している非常に良いエッセイを100本くらい参考にして作ってあり、それを使って書き直すわけです。
繰り返しますが、これは全部Claudeです。これはGoogle Geminiです。これはNanoban 2で、OpenAIの新しいGPT 2.0です。あなたが何を考えているかは分かります。ああ、ただのラッパーじゃん。オリジナルアプリじゃなくてClaudeだの何だのを使っているだけじゃん、という感じでしょう。でもそんなの気にしなくていいです。Cal AIは約3億ドルを稼いで、その後MyFitnessPalに買収されました。そしてあれはChatGPTのラッパーです。だから、その考えは頭から追い出してください。
市場調査をして作るアプリのアイデアを見つける
まず最初に、ここで2つのウェブサイトを一緒に見ていきます。そして今すぐ作れるアプリを探します。ここにはSensor Towerがあり、こちらにはAppfiguresがあります。念のため言っておくと、この動画全体で出てくるものは何一つスポンサーではありません。
ここでやりたいのは、僕が1週間前に実際にたどったのと同じプロセスを進めることです。その結果、今週、昨日にはアプリを完成させることができました。この2つは、さまざまなiOSアプリについて、どれくらい収益を出しているのか、どれくらいユーザーがいるのか、具体的に何をしているのかを見られるウェブサイトです。
ではスクロールしていきましょう。インスピレーションを探します。何が収益を上げているのか見て、それとまったく同じことをやります。繰り返しますが、iOSアプリ制作は、必ずしも斬新なアイデアである必要はありません。世界を変えるぞ、これとこれで革命を起こすぞ、みたいなものである必要はありません。すでに月100万ドル稼いでいるものを見つけて、その市場シェアの2%を取りに行けばいいんです。
ここで無料ダウンロード上位のアプリは、当然ChatGPTやYouTubeなどです。なのでChatGPTを作り直すことはできません。さすがにそれは無理ですよね。でもこれを見てください。フラッシュカードです。Gossip Harborはたぶんゲームです。ゲームはやりません。LinkedIn。LinkedInを作り直せるでしょうか。たぶん無理です。
では続けます。Looks AIがトップ14に入っています。これはちょっとすごいですね。Monopoly。見てください。またPuzzle Escapeです。本当にゲームを作ることもできるでしょうけど、僕は何かしらのラッパーを作りたいです。何かをするラッパーです。Poohがまだここにあるのも不思議ですね。50年前くらいに見た記憶があります。
ではカテゴリを変えてみましょう。ヘルス＆フィットネスにしてみます。ヘルス＆フィットネスアプリを作るのは良いアイデアですね。AutoSleep Watch Sleep Tracker。MyFitnessPal。MyFitnessPalは本当に早かったので驚きです。Streaks by Crunchy Bagel。Ladder Strength Training Plans。なるほど、面白いです。Food and Cosmetic Scanner。Workoutdoors。Cal AI。Cal AI、神です。この人たちは文字通り、最初期の最も成功したラッパーの1つなので、その勝利に値します。
Calm、Sleep、Wake、Be Healthy。Menu Fit。よく分かりません。MyFitnessPal、カロリーカウンター、血液型ダイエット。なんてことだ。Peptide Calculator。10ドルです。これを10ドルで買っている人がいるんです。すごいですね。これは本当にすごいです。
では、ここまでに見つけたものを見てみましょう。別のカロリーカウンター。Holistic Food Scanner。いや、これは実際にスキャンするやつですね。なんてことだ、月70万ドル稼いでいます。これはバーコードスキャナーなので、今回はやりません。月80万ドルです。無料でオープンソースのフラッシュカードプログラム。なんてことだ。これはすごいです。AI的なものですらなく、ただのフラッシュカードみたいです。
そしてこれは、Apple Watchで睡眠を記録するアプリです。押すボタンはありません。Watchアプリすら任意です。ただ寝るだけ。月3万ドルです。すごいですね。Streaks。良い習慣を続けるためのToDoリスト。別の習慣トラッカーです。月8000ドル稼いでいます。ちなみにLadderは筋トレアプリのナンバーワンです。なるほど。いろいろなことを手伝ってくれるアプリで、見た目はこんな感じです。悪くありません。
それからFood and Cosmetic Scanner。商品のバーコードをスキャンして、それが健康にどう影響するかを見られます。そしてPeptide Calculator。これは以前すでにやりましたね。どのアイデアもあまり気に入りません。もう少し見てみましょう。
ちょっと待ってください。Deal Seek Coupons。Deal Hunter。AI Shopping。AIで検索してみましょう。NovaのAIチャットボット。ChatGPTっぽい見た目です。面白いですね。AI Video Editor。AI Photo Editor。これは実際いいアイデアです。Up Photo。AI Photo Enhancer。収益を見てください。月9万ドルです。200万ダウンロード。すごい。見てください。ここにはスクリーンショットが4枚しかありません。ネット上で最高のセールを見つける。最高のアイデアをフィルタリングする。3万人。すごいです。AIがセールを採点する。これは悪くないアイデアです。
AI Photo Editorもあります。悪くないですね。正直、悪くありません。ちなみに月6万ドル稼いでいます。AI系、AI系。あ、アイデアがあります。分かりました。ちょっと待ってください。アイデアがあります。
では、僕たちが作るラッパーはこれです。少し待ってください。プランをまとめます。僕のアイデアはこうです。筋が通るように説明してみます。これは次にやることにもつながります。このアイデアを、写真補正アプリではなく、動画生成アプリにしましょう。動画に自分の顔をかぶせられるようなものです。それだけです。アプリ全体の機能は、動画に自分の顔を追加することです。単純です。
あなたが何を考えているかは分かります。そんなバカみたいなものに誰がお金を払うんだ、と思うでしょう。でも今、AI編集アプリが月9万ドル稼いでいる例を5つ見せました。AI Photo。まあCanvaはカウントしません。月9万ドル、月50万ドル、月300万ドル、月200ドル、月20万ドル、月100万ドル、月5000ドル未満。なぜ僕たちも、少なくとも月1万ドル稼ぐアプリの1つになれないのでしょうか。100万ドルはいりません。望むならいつかそこまで行けます。でもまずは1万ドルを目指しましょう。
自分のアイデアがバカげていると決めつけてはいけません。Paywallを置いて、人々がお金を払う気がないと確認できるまでは、バカなアイデアかどうかは分からないんです。購入ボタンを置いて、それでも人が払わないと分かったとき、それがバカなアイデアだと分かります。だから、このアイデアに購入ボタンを置きましょう。失敗したら失敗です。
アイデアが決まったら、これはまだアイデアのかけらみたいなものですが、ステップ1は完了です。市場調査をして、何ができるかのアイデアを得ました。ほかの人たちがまったく同じことをやっていることも見ました。つまり機能するということです。斬新で偉大なアイデアではありません。そして、それが完全に実現可能で、少なくとも0.5%の市場シェアを取れる可能性があると分かりました。ここで狙っているのはそれだけです。月1万ドルが必要なだけです。いきなり月100万ドルに行く必要はありません。
これでアイデアは検証されました。市場は、それが機能することを客観的に証明しています。そして僕たちにはこれを作る能力があります。Sensor Towerはこれで終わりです。
PinterestでUIの方向性を決める
次のステップはインスピレーションです。ここを見ると、すでにいろいろ検索していたのが分かると思います。これはMerlのために検索したものです。僕が狙った雰囲気そのものです。キャラクターに画面の大部分を占めてほしかったんです。明るい色で、キビキビしていて、ポップな感じにしたかった。
ではPinterestでiOS tech app inspoと検索して、何が出てくるか見てみましょう。これはいいですね。本当にいいです。ちょっと開いてみましょう。これも本当にいいです。小さなキャラクターを作っています。この小さなキャラクターは良いですね。これも良いです。ただ、もしこのアイデアが気に入らないなら、もちろんこのタイプのUIにする必要はありません。自分が一番好きなUIにしてください。見たときに、待って、これはすごい、見た目が本当に好きだ、かっこいい、と思えるものです。
これも良いですね。このタイプのアートが好きです。名前は分かりませんが、好きです。この明るい色が好きです。分かりますよね。これも良いです。見つけられるインスピレーションは全部集めましょう。Pinterestでの目標は、自分が狙っている雰囲気を見つけることです。iOS app designだけで検索して、techという言葉を外してもいいです。自分が好きなものだけを見るのではなく、思いつかなかったようなものも見てください。
たとえばこれを見てください。美しいです。この人物を見てください。これを見てください。これをやりましょう。オンボーディングではこれをやりましょう。これはオンボーディングですよね。オンボーディングでアプリに何ができるかを見せて、そのままアプリに入る。余計なことはしません。覚えておいてください。このアプリがすることは、動画に自分の顔を載せることだけです。繰り返しますが、バカみたいに聞こえるかもしれません。でも、あの人が似たようなことをして100万ドル稼いでいるなら、僕たちは月1万ドル稼げます。単純な話です。
これも良いですね。ちょっと待ってください。良いUIを見ると、さっき言ったように、僕の中の興奮が出てきます。これは美しいです。待ってください。すごい。これ、僕たちにもできると思いますか。AIは本当にここまで来ているんでしょうか。これはいいですね。全部いいです。
これでいくつかインスピレーションができました。Pinterestを見ました。これでiOS UIがどういう見た目になるか分かりました。雰囲気が最も重要だからです。実際の機能はまったく難しくありません。これは単にAPIを使うだけだからです。心配しないでください。文字通り5分でできます。実際のAI生成、画像生成をやるのはまったく問題ありません。
でも見てください。僕たちにはキャラクターが必要です。皆さんから一番多かった質問は、いったいどうやってMerlを作ったのか、というものでした。Merlは素晴らしいですし、僕が作った動画も本当に良かったです。なので、それをどうやるか考えてみましょう。
ここにいるこのキャラクターは、ちょっとミレニアル感が強すぎます。このアートスタイルはけっこう好きです。なかなか良いです。このかわいい小さな人もいます。これもあります。猫もいます。この猫は素晴らしいです。この全体的なUIも本当に美しいです。
UIの参考を実際のアプリ設計に落とし込む
次のステップです。ステップ3は、UIのインスピレーションを取り、それを実際のアプリにどう実装するかを考えることです。ここには4枚か5枚くらいの画像があります。ここから分かるのは、大きなマスコットキャラクターがいること、明るい色が使われていること、独特なアートスタイルがあること、テキストがかなり大きく見えることです。枠線のないデザインのような感じで、要素同士がつながって見えます。
ここでも、この画面で見えているボタンは1つだけで、言葉は最大3語です。残りはアートです。僕はMerlでそこがうまくできたと思っています。Merlを開いたとき、目に入る大部分はテキストではありません。読み物が多すぎる感じではありません。ただMerlがかわいくいて、大きなタイトル部分に、これが何をするものかが書かれているだけです。アイデアがシンプルなので、複雑にする必要がありません。シンプルでいいんです。こういうシンプルなラッパーの一番良いところはそこです。シンプルにしてください。
次にやることはChatGPTに入ることです。ここでClaudeではなくChatGPTと言ったことに注目してください。なぜここではClaudeではなくChatGPTを使うのかというと、画像生成をするからです。ChatGPTにはチャット内に画像生成が組み込まれています。なので、あれこれ行ったり来たりする必要がありません。そしてGPT 2.0は、おそらく世界でも最高クラスに強力な画像生成の1つです。この部分でClaudeを使う理由はありません。
次のステップではClaudeを使います。ここに見えている通りです。そこは心配しないでください。ここでやるのは、プロジェクトを作ることです。そのプロジェクトに、やろうとしていることをそのまま名前として付けます。そうすると、一貫した記憶を持ち、プロジェクトファイルもまとまります。
ではマスコットをどう作れるか見ていきましょう。新しいプロジェクトを作ります。名前はrapper appにしましょう。この中で作業していきます。前の動画でも言ったように、プロジェクトを持つことは重要です。一貫したローカルメモリを持てるからです。そしてここにあるソースも全部この中に入ります。
ここで、これらの画像や、ここで使う他のファイルをすべてアップロードします。そうすることで、このプロジェクトはこれらのファイルだけにアクセスできます。ここでの仕事は、これは何と呼ばれるのか、このUIはどんな種類のUIなのか、自分たちがやっていることにできるだけ近い形でどう再現できるのかを見つけることです。
何より先に、プロジェクトに文脈を与える必要があります。AIは僕たちが何に取り組んでいるのか知りません。何をしているのかまったく分かっていません。ただUIか何かに関する5枚の画像がある、くらいしか分かりません。なので、ここでは音声入力を使います。基本的に、取り組んでいることの概要を伝えました。こんな感じです。今こういうものを作っています。これをやっています。UIは5つあります。マスコットをどんな感じにしたいかまったく分かっていないので、このあたりを手伝ってください、という感じです。
上のタブを順番に進めています。それが進捗が出ている証拠です。
では、このUIスタイルは何と呼ばれるのでしょうか。最初の画像、ToDoアプリ。はい。3D playful。あ、claymorphism。なるほど、クレイモーフィズムですね。ちなみに僕の好きな映画は、実はここにあります。どこだろう。そう、ここです。Fantastic Mr. Foxです。あれもたしかクレイアニメーションだったはずです。
どう使うか。顔をアップロードして、誰にでもなる。なるほど、これが最初の印象になります。動物カード、ゲーム化されたコレクションカードUI。なぜうまくいくのか。ありがとうカード。マスコットの方向性。ランダムな動物にしないこと。汎用的な人間やかわいい塊にしないこと。メタモンみたいな変身マスコット。おっと、それは本当にいいアイデアです。ちょっと待ってください。これには立ち上がります。完全に忘れていました。この子がフレームに入っていません。はい、ここです。出勤しないと。出勤、出勤。
いいですね。これは素晴らしいアイデアです。顔を盗むけどフレンドリー。クローンの相棒、監督マスコット。おすすめのビジュアルスタイルとUIスタック。考えていないことは、生成前のプレビューです。次のステップが欲しければ教えてください。いいですね。
粘土の塊がいろいろなものに変身できる、というアイデアが好きです。それに関しては動画生成のアイデアがたくさん思いつきます。もちろん、メタモンをそのまま盗むつもりはありません。それはできません。でも本当に良いアイデアだと思います。では、どうなるか見てみましょう。
ここに画像を入れました。これでAIは、上にタイトルがあり、ボタンは1つ欲しいのだと分かります。そしてここにキャラクターを置くわけです。ここでは当然、僕はたくさん話しました。いつもたくさん話すべきです。AIと話すとき、特に考える部分では、とにかくしゃべる必要があります。自分が何を考えているのかを正確に共有しなければ、AIは何をすればいいか分かりません。そうすると変なことをします。
ここでも、5.5はものすごく賢いのに、見てください。すごくたくさん話します。本当にしゃべりすぎです。そして、なんてことだ、これはものすごくいいです。どうしてこんなにいいんでしょう。これは本当にすごいです。めちゃくちゃ良いです。しかも速かったです。10秒くらいしかかかりませんでした。驚きました。これは素晴らしいと思います。
見てください。後ろのものまで作っています。全体が粘土みたいに見えます。3人の違うキャラクターを作ってくれました。粘土なのだから、1人だけである必要もありません。そしてメタモンにも見えません。この子が一番メタモンに近い色です。でもメタモンは文字通りガムの塊みたいなものです。ちょっと待ってください。文字通りぐにゃっとした塊です。なのでメタモンに似せるのは難しくありませんが、僕たちはそれはやりません。ここではやりません。
ではこれを編集しましょう。本当にいいです。実際すごくいいです。何なんでしょう。すごいです。うわ、本当にすごいです。何をしたか分かりますか。実際にまったく同じものを取って削除したんです。どうやってこんなにうまくやっているのか分かりませんが、本当に良い仕事をしています。
もう一度やりましょう。これは素晴らしいです。左に黄色い子、真ん中に紫の子、右に青い子が見えます。3人とも本当に良いと思います。ただ、今後はピンクと紫は避けたいです。なので、この紫の子を黒に変えて、黒い子にしましょう。そして全部で5体くらい、色違いで作りましょう。また背景は白にして、彼らの写真撮影をしているように見せます。
ここまで本当に素晴らしいです。正直に言って、1週間前にこれをやったとき、これはまだ出ていませんでした。GPT 2.0はまだ出ていませんでした。だから1週間前より、マスコットを作るのがずっと簡単になっています。それが本当にすごいです。これはすごいです。
紫の子が黒になりました。青い子。これは同じものを持っているんでしょうか。それから緑の子を追加し、白の子も追加しました。これは素晴らしいです。本当に良いです。この5体のキャラクターのままでいきましょう。ただ黄色い子には絵筆を持たせましょう。そして白い子にはスマホを持たせます。それぞれのキャラクターに何か持ち物があるようにします。そして保存しましょう。紫の子はいりません。これを保存して、次のステップに進みます。
AIで作ったマスコットを動画として動かす
ステップ4は、作成した実際のデザインを、これから作るものに実装することです。ただし、まだUIデザインを作っていないので、すぐにClaude Designに入るのではなく、Higgsfieldに行きます。繰り返しますが、Higgsfieldもスポンサーではありません。僕はこの人たちが大好きです。以前一緒に仕事をしたこともあります。
基本的に必要なのは、Seedance 2.0へのアクセスです。必要なのはそれだけです。Seedance 2.0が使える場所であれば、次に行く場所はそこです。ではSeedance 2.0に行きます。この作成した画像をアップロードしましょう。繰り返しますが、これは素晴らしい画像です。
ここからやるのは、作ったキャラクターたちをアニメーション化することです。これも皆さんから一番多く聞かれた、どうやってやったのか、という部分です。まずMerl用にこれまで作ったものを見せたいと思います。今回目指す雰囲気は、こういう動画です。同じ一貫したマスコットが動画の場面にいるのが分かると思います。こういうのを20本くらい作ったと思います。
これは魔法の杖を持っているところです。これは書いているところです。ちなみにこれは実際のアプリのオンボーディングです。これはスマホを確認しているところです。これはMerlが動画をやっているところです。ピッ、スキップ、スキップ、スキップ。そしてこれはMerlが腕を組んでいるところです。これはMerlが同じことをしているところです。実際には直さないといけません。繰り返されています。繰り返されるべきではありません。
そしてまたMerlが書いています。Merlが帽子に手をかけています。Merlが巻物を持っています。Merlが呪文の本を読んでいます。ここで実際のライブアプリ上に見える、僕が作成したものすべてを、今からやっていきます。なので、このキャラクターたちをアニメーション化しましょう。ChatGPTで作成した画像をアップロードして、それぞれが何かをしている動画にします。その何かは何でも構いません。ただ、自分のブランドに合ったかっこいいものにしてください。最終的にどんなブランドになるかに合わせるわけです。
さっき言ったように、Seedance 2.0を使います。fastではありません。1080pにする必要があります。これを1080p、9:16に変更します。縦長の雰囲気にしたいからです。そして長さは15秒です。ただ、本当に15秒である必要はありません。多くのことをするほどクレジットを消費します。なので4秒くらいにしましょう。どうせループさせるだけです。動画がそんなに長い必要はありません。では5秒にします。
そして、参照写真に写っているすべてのキャラクターを取り、それぞれが楽しく交流しながら、手に持っている道具を最大限活用するようにしてください、という感じにします。どうなるか見てみましょう。普段ならChatGPTにプロンプトを書かせて、それを動画生成に渡しますが、今回はこのままどうなるか見てみましょう。
問題が起きています。黄色の子が出ました。ちょっと待ってください。大丈夫です。黄色の子が出ました。それで十分です。1体ずつやればいいだけです。なのでこの画像を削除します。ここに行きます。メディアをアップロードします。黄色の子をアップロードしましょう。今度は黄色の子だけの動画を作ります。
黄色の子は絵筆を持っています。この子のブランドは画家です。これらは全部、自分に与える違う顔のようなものです。そういうブランドを作ると決めたわけです。繰り返しますが、どんなブランドでも構いません。そしてここに動画をアップロードするたびに、適格性チェックが入ることに気づくと思います。たとえば有名人を入れると、うまくいかないことがあります。それは大丈夫です。僕たちは自分たちの画像を作っています。
では、参照写真のキャラクターを使って、イーゼルに何かを描かせてください、みたいな感じにしましょう。どうなるか見てみます。これで大丈夫なはずです。そしてこの2つが生成中になりました。では、もう1つがうまくいったか見てみましょう。
よし、完璧です。青い子ができました。次は、黒い子だけをください、と言いましょう。黒い子。これをダウンロードします。青もダウンロードします。そして同じものをHiggsfieldに直接渡します。いいですね。黒い子ができました。黒。いいです。では次に、白い子だけを単体でください。いいです。
これはまだ生成中です。まだコンテンツチェック中です。でも黒い子をアップロードしましょう。青い子が準備できました。参照写真のキャラクターを使って、手に持っているものをクリックし、サングラスをかけたり外したりさせてください。持っているものを活用するようにします。そうしないと、動画生成なので、それを消してしまうことがあるからです。
見てください、最初の1本が完成しました。なんてことだ、これはすごいです。誰がこれを悪いと思っても、僕は気にしません。僕はこれは素晴らしいと思っています。本当に良いです。すごいですね。ではこれをダウンロードします。これを保存しましょう。これは9:16なので、縦長のどんなものにも使えます。みなさん、これは素晴らしいです。繰り返しますが、Attack on Titanみたいなものを作ろうとしているわけではありません。でも、iOSアプリの背景にこれを置くと、大きな違いが出ます。
ではこれをyellow paintingと名付けましょう。たぶんここにフォルダを作ります。これは何という名前でしたっけ。Ditto。忘れました。これを何と名付けるのかすら分かりませんが、まったく問題ありません。そして黒い子をここに入れます。この子は写真みたいなことをしています。なので、添付した参照写真のキャラクターを使って、持ち上げている黄色い顔の画像を、青、ティール、白、黒の顔へ変化させてください、という感じにしましょう。待ってください。虹色です。これはiOSアプリの背景です。これで、ここに入れる味付けをさらにたくさん作れました。これを見ると、UIのボタンがダサいか、また別のバイブコーディングっぽいものに見えるか、ということよりも、まずキャラクターたちを見ます。それが一番大事です。
これは本当に良いですね。まさにやりたかったことです。素晴らしいです。これを取りましょう。directorと名付けます。いいです。黒い子も作れました。このティールの子を取りましょう。最後の1体です。ティール。そしてティールの子を入れます。何かさせましょう。この子はオーディオ担当みたいな感じです。はい。いいですね。これも生成します。これを外します。白い子をここに入れます。白い子を忘れていました。
添付した参照写真のキャラクターを使って、スマホを耳に当てて電話に出ているようにしてください。話しているように見せてください。スマホを見て嫌そうな顔をさせ、そのあと嫌そうにスマホの電源を切らせてください。いいショットです。ここまで見ているなら、あなたは成功に向かっています。つまり、この1週間か2週間、みんながずっと待っていたところまで来たということです。これでこういうキャラクターの作り方が分かりました。次に、これを実際にiOSアプリの背景に入れる方法を見せます。
でも、チャンネル登録はしておくべきです。この動画はたぶん制作に4時間かかりますし、ここまで来るのに1週間かかっています。先週この全部を学ばなければいけませんでした。なので今これを見ているなら、チャンネル登録してください。そうすればもっとこういう動画を作れますし、家賃も払えます。妻も僕を誇りに思ってくれます。何か学んだなら、登録する価値はあると思います。すごく良い交換条件ですよね。僕はそう思います。あなたもそう思うはずです。
黒い子が完了しました。どう見えるか見てみましょう。すごい、ズームインを見てください。ズームインも本当に良いです。繰り返しますが、最高ではありません。でもそれでまったく問題ありません。これをportraitと名付けましょう。portraitです。
添付した参照写真のキャラクターを使って、頭に付けているヘッドセットに手を当て、とても良い音楽を聴いているように見せてください。こんな感じでいいでしょう。
白い子も完了しました。うわ、眉毛まで。本当に良いです。これをダウンロードします。phone callと名付けます。そしてティールの子も終わりました。なんてことだ、動いています。僕の猫みたいです。これもダウンロードします。dancingと名付けます。
これで十分だと思います。1、2、3、4、5、6本の動画ができました。これらを、作ることに決めたiOSアプリの背景に入れられます。
Claude DesignでアプリUI全体を作る
次はステップ4だと思います。実際のアプリ自体のUIです。これで背景用のMP4やマスコットがたくさんあります。アイデアも決まりました。だいたいどんな見た目にしたいかも分かっています。ここから実際にそのデザインを作ります。
次に使うのはClaude Designです。Claude Designは、今年Claudeから出た機能の中でも最高のものの1つだと思います。本当に冗談ではありません。デザインがすごく良く、UIデザインを実際のClaude Codeに渡して本番用に作るのもかなり簡単です。
これをditto appにしましょう。繰り返しますが、名前は分かりません。Design systemはdefault、high fidelityにします。押します。そしてここでやるのは、さっき集めたUIインスピレーションの画像を取り、それについてどう考えるか、そして自分たちが作っているものにどう統合できるかを見てもらうことです。
さっきやっていたのは、間違いなくこれです。この雰囲気が欲しかったんです。画面の大部分が、僕たちが作ったMP4になっていて、メインCTAは1つだけ。ChatGPTで最後にやることは、すでに作ったものの記憶があるので、お気に入りのUIデザインの参考をもう一度渡して、最初の工程でやったのと同じように、Claude Codeに渡すための実際のUIデザインをもらうことです。
繰り返しますが、Codexは素晴らしいと思います。Codexは本当にすごいです。そして5.5はおそらくOpus 4.7より良いでしょう。なので望むなら、これをそのままCodexに入れても構いません。ただ、前回僕はClaude Codeを使い、ここでもClaude Designを使っているので、このビルドではClaude Codeを使います。もしもう一度やるなら、たぶんCodexを使うでしょう。
ではOpus 4.7に切り替えます。この動画のために自分のクレジットを使っています。みなさん、感謝してください。なんてことだ。これは本当に良いです。でも、さっき見たものの完全コピーみたいです。僕はそういう人間ではありません。全体を丸ごとコピーするつもりはありません。
ここで見えるのは、渡した画像からガイドを取り込んでいるということです。もちろん彼らのキャラクターは使いません。それは今回狙っている雰囲気ではありません。でも見てください。実際に僕たちのキャラクターがここに入っています。かなり良いです。ただ、僕たちがやることは1つだけです。なので少し話しかけてみましょう。
これはいいです。ただ、僕たちが作ったキャラクターを確実に活用する必要があります。青、白、黒、ティールの人たちです。このアプリでは、そのキャラクターたちが何より重要です。ではこうしましょう。オンボーディング画面だけ作りましょう。キャラクターをメインにしてください。画面全体を占めるくらいであるべきです。そして下にボタンをいくつか、上にテキストを少し置きます。黒いキャラクターを使って、画面全体の主役にしてください。そして3ステップのオンボーディングをデザインしてください。1つ目に黒い子、2つ目に白い子、3つ目にティールの子を使ってください。内容は、アプリへようこそ、みたいな感じにしてください。
名前を考えようとしていたのですが、思いつきませんでした。勝手に出てくると思っていましたが、出てきませんでした。まったく出てきませんでした。もう思いついているはずだと思っていたのに。いいですね。Monster Hunter。いや、それではありません。進捗を記録。つながりを保つ。これは本当に良いです。基本的にはここにある画像を削除して、さっきのものに置き換えます。問題ありません。でも悪くありません。全然悪くありません。
ではこれを保存して、onboardingと名付けます。そしてClaude Designに戻ります。スクリーンショットを追加します。そしてこれをスクリーンショットとして添付します。
この添付したオンボーディングのインスピレーションを使って、今取り組んでいるアプリのオンボーディングをデザインするのを手伝ってください。作っているアプリはシンプルなアプリで、自分の顔を動画に載せられるものです。基本的には、TikTokや映画のシーン、YouTubeクリップなどの動画をアップロードして、顔写真をアップロードすると、その顔が動画のメイン被写体に載るだけです。シンプルです。ここに添付したデザインを使って、これを説明する3ページのオンボーディングを作ってください。後で背景は僕が作った動画に差し替えます。
ではこれを動かしましょう。正直に言うと、これは時間がかかります。Merlを作っていたときは、たしか10分から15分くらいかかりました。しかも時々グリッチします。止まっていないか確認するために、ここを見ておいてください。ここでも実際に処理が進んでいるか確認します。でもいいですね。
アプリ名は何ですか。分かりません。まったく分かりません。Transform IO AI。分かりません。そんな感じです。スマホフレームで表示しますか。フレームなし、画面だけ。参照レイアウトにどれくらい忠実にしますか。精神は合わせつつ、バリエーションを探ってください。あなたの動画を待っている間の背景は。白の単色。はい。動画がここに入る長方形。はい、でも長方形にはなりません。このオンボーディングの背景に入れるMP4は、ページ全体を占めます。なので、全ページが僕の作ったマスコットのMP4になるような、境界のない雰囲気の効果になると理解しておいてください。
ヒーロービジュアルには何と書きますか。video static screenshotと書かれたプレースホルダー。いいえ。画面ごとに違うビジュアルを混ぜてください。アクセントカラー。任せます。タイポグラフィの雰囲気。任せます。太いディスプレイ系。遊び心があって丸い感じ。太いディスプレイ系にしましょう。インタラクションはどれくらい。スワイプとタップ。はい、3つ全部やりましょう。複数の方向性を探りますか。はい。加えたい調整はありますか。あなたが最善だと思うものを追加してください。そのあと一緒に決めます。右上にアプリ名とロゴマーク。ロゴなし。続行。
いいですね。ここで動画を使えるか見てみましょう。なんてことだ、できます。すごい。この添付した動画で、オンボーディング2ページ目の背景を置き換えられますか。これは完了するまで待つべきだったかもしれません。でも両方やるか見てみましょう。分かりません。10分後くらいに確認します。
これをアップロードしている間に言わせてください。まだここにいるなら、あなたは勝者です。前にも言いましたが、もう一度言います。まだここにいて見ているなら、たとえ食事中に流しながら聞いているだけでも、僕たちはもうすぐ実際の本番制作部分に入ります。でも、この最初の部分は思っている以上に大事です。まだ見ているということは、あなたにはすごいiOSアプリが控えているということです。リリースされるのが楽しみです。
APIキーとバックエンドの準備を進める
これが処理されている間に、このアプリを動かすために必要なAPIキーを取得しましょう。必要なのは、動画生成ができ、さらに画像をそこへ載せられるものです。Merlで僕が使っているのはFAL AIです。繰り返しますが、スポンサーではありません。これが何か知っているかもしれませんし、Higgsfieldを使ってもいいです。Higgsfieldはさっき画像をアニメーション化するのに使ったものです。APIキーもあります。
ただ、今回具体的に必要なのは、Kling 3 motion controlを使えるAPIキーです。これは、コピーしたい動き、つまり動画を追加し、自分のキャラクター、つまり顔を追加するものです。では、それを持っていて、一番価格が良いのはどれか探しましょう。
FAL AIでExploreに行き、Kling 3 motion controlがあるか見てみます。必要なのはそれだけです。motion controlで検索します。ありますね。Kling Video v3 Motion Control。これは良いです。踊っている男性。これはどんな感じかというと、プロンプトがあります。画像URLがあり、それがあなたの顔です。そして動画URLがあり、それがあなたの顔を載せたい動画です。見て分かるように、これは何らかのAI動画で、これが男性で、その人のものをここに載せています。今回やるのはこれです。
なのでここではFALを使います。僕個人がMerlで使っている、本当に良いものだと思っています。ここでAPIキーを取得して、後で実際のコードを書き始めたときに入れます。
うわ。これはかなり良いです。繰り返しますが、最終的にどうするかはあなた次第です。でもこれは悪くありません。考えてみてください。これはかなり良いです。ちょっと待ってください。ズームアウトしたいです。はい、全画面の動画があります。では実際にやってみましょう。この動画をここに入れます。そしてもう1つ入れます。オンボーディング1と3の背景をこれらの動画に差し替えてください。実際にやらせてみましょう。
どうやって見るんでしょうか。変ですね。あ、いいです。インタラクティブプロトタイプです。どんな動画にも自分の顔を載せる。ここで分かるように、任意の動画をアップロードして、写真を入れると全部あなたになります。ここには、実際にやる場合のフルブリードがあります。ウェルカムリールです。そして見てください、別のタイプCもあります。みなさん、これは悪くありません。ちょっと待ってください。僕の中のインド人が出てきています。
使えるバージョンが3つあります。どれが一番良いか見てみましょう。僕はこれが好きです。フォーマットがすごく良いと思います。とてもシンプルで、テキストも良い感じです。これはこっちとまったく同じですが、少しだけ違います。ここは動画が小さすぎると思います。あまり好きではありません。そしてこれは、アップロードが終わったら見てみます。基本的には選べるということです。どれが欲しいか、という話です。
ちなみに、もしまだClaude Designの使い方の動画を見ていないなら、その動画を見てください。ここではその使い方を説明するつもりはありません。ただ、選べるオプションが3つあります。これは本当に良いです。後で望むなら、人々が実際に使うような本物の人間の動画に差し替えることもできます。あるいは、やりたくなければやる必要もありません。あなた次第です。でもこれはかなり良いです。
いいですね。これで全画面アニメーションができました。まさにやろうとしていたことです。悪くないです。みなさん、これは当たりです。戻ってきてください。いいですね。まさか。これは本当に良いです。では今どう見えるか確認しましょう。
4つの選択肢があることが分かりますよね。そしてその3つには、同じ3ステップのオンボーディングが入っています。これは本当に良いと思います。自分の顔がここに入ることを見せていて、これは実際に選ぶ動画です。そして完成するとこう見えます。自分の顔プラスこれイコール最終動画です。これもあります。これ、どれが一番良いでしょうね。どれが一番良いか。Aが大好きです。これをオンボーディングとして、見た目そのままの3枚で使いましょう。B、C、インタラクティブプロトタイプは削除してください。Aを使ってアプリの残りを作りましょう。
ホームページ、履歴タブ、設定を作ってください。必要なのは3つだけです。ナビゲーションバーも3つだけにしてください。このアプリがやることは、オンボーディングで説明していることそのものだけです。なので、利用規約、プライバシーポリシー、アカウント削除、Paywall、本当に全部を含めて、残りのアプリ全体を作ってください。進めてください。
そして写真もいくつか渡しましょう。この画像を使います。この動画を渡します。作った別の動画も渡します。この写真も使います。MP4をいくつかと写真を渡しました。最適だと思う場所に入れてください。処理させます。必要なのはそれだけです。繰り返しますが、これは実際かなり時間がかかります。なので、離れて戻ってくる必要があります。それでまったく問題ありません。
SupabaseとRailwayをセットアップする
これが処理されている間に、別に必要なことをやりましょう。今やる必要があるのはSupabaseのセットアップです。Supabaseはユーザー情報を保存する場所です。何らかの情報を保存するなら、Supabaseや、それに類するクラウドベースのデータベース保存サービスが必要です。個人情報、たとえば名前などです。あるいはクレジット制にするなら、クレジットベースの情報を設定する必要があります。ユーザーが何クレジット使ったのか、いくら支払ったのか、いつ、どの日付に使ったのかを把握するためです。
Supabaseに行きます。プロジェクトを作る必要があります。プロジェクトを作ったらAPIキーを取得できます。設定に行ってAPIキーを取ります。そのAPIキーをClaude Codeに渡すと、ほとんどの作業をやってくれます。MCPを取得することもできます。プロジェクトを作ったら、好きな名前を付けて、MCPまたはAPIキーを取得し、それをClaude Codeに接続します。これは後でやります。ただし、MCPを使う必要はありません。はっきり言っておきますが、このアクセスやこのアクセスを持たれると、データベース全体を焼かれる可能性があります。以前にもミスで起きたことがあります。なのでMCPはかなりリスクがあります。それは頭に入れておいてください。
APIキーは、実際に何かをセットアップするためのものです。そこまで悪くありません。実際かなり役に立ちます。後でやります。
次に設定しておくべきものをやりましょう。Railwayです。Railwayに行きます。これはランディングページをホストする場所です。プロジェクトを作ります。そしてこのプロジェクトでもAPIキーを取得します。そのAPIキーを取得して、後でClaude Codeに渡します。
ここまでで、FAL AI、または動画生成に使いたいサービスのAPIキーを持っているはずです。その次にSupabaseのAPIキーと、使いたければMCPを持っているはずです。そしてRailwayのAPIキーが必要です。繰り返しますが、APIキーはコピーして貼り付けるだけです。本当に簡単です。そしてClaudeがだいたい残りをやってくれます。
後でRevenueCatを作ります。RevenueCatはかなり面倒ですが、そこまで難しくはありません。実際にPaywallを一緒に作り始める終盤で、それを進めていきます。ただ今のところ、Twitterに1日18時間いる人間であり、このバイブコーディングをやっている人間として言わせてもらうと、こういうマスコットキャラクターは信頼感にかなり効きます。もちろんあなたが開発者で、あれこれ分かっている人なら、これはバイブコーディングだね、と分かるかもしれません。でも大多数の人にとっては、そうでもありません。正直、僕にはかなり良く見えます。
これが処理されている間、横に置いておきます。終わったら知らせてくれます。では実際のClaude Code環境をセットアップしましょう。ステップ5はAPIキーの取得でした。これは完了しました。APIキーを取得しました。ステップ6は、このアプリ全体を作るClaude Code環境です。
これは普通のClaude Macアプリです。特に変わったものはありません。僕は月100ドルのサブスクに入っています。おそらくあなたにも必要かもしれません。月20ドルのプランでもできる可能性はありますが、たしかClaude Codeはそこから外されたような気がします。ただ、そこは見てみないと分かりません。正直、確信はありません。
GitHubに行って、新しいリポジトリを作ります。これはClaude Codeから直接でもできますが、ここでやる方法を見せます。GitHubでnewを押します。名前はtransformer iOS appにしましょう。Visibilityはprivateにします。READMEはオンにしてもいいです。gitignoreは後でやります。自動でやってくれるので心配しないでください。そしてリポジトリを作成します。
できました。ではselect repoを押します。これでtransformer iOS appがあります。mainブランチ上にあります。それだけです。本当に。hiと入れて、動いているか確認しましょう。繰り返しますが、この全体はSonnet 4.6でもできます。僕もそうします。同じ環境にできるようにです。Opus 4.7も本当に良いです。一部では使います。ただ、自分の使用量を見てください。週の使用量が丸ごと空いているなら使うべきです。ここで4.7を使うことを恐れないでください。4.6は本当に良いです。ただ、まずはOpus 4.7で始めて、何ができるか見てみましょう。
今のところはplan modeにしておきます。何もしないようにするためです。そしてtranscript viewをverboseに変えます。これは、考えている内容を最大限表示するという意味です。summaryやnormalではありません。僕は実際に何をしているか見たいです。ちゃんと作業しているか確認するためです。そしてここにはhold to recordがありますが、もちろんWhisperを使っているので、それは必要ありません。
すべて作ったものがあります。ここが履歴タブです。ここが作成タブです。ここが設定です。設定はこんな見た目です。これは実際にすでに知っているものです。これはオンボーディング。悪くありません。これは実際のアプリ本体です。クリップを置く。顔を置く。あなたが主役。保存。共有。新規。作ったものすべて。ここがPaywallです。うわ、Paywallは実際かなりきれいです。正直に言って。ここに利用規約、プライバシーポリシー、アカウント削除のwill miss you、そういったものがあります。
これで完了したと思います。ではshareを押します。Claude Codeにhandoffするとき、zipファイルとしてダウンロードした方が、実際のClaude Code Designよりうまくいく場合があるのを見たことがあります。ただ、僕は前回これをやったので今回もこれでやります。zipファイルは使いませんでした。zipファイルを使いたければどうぞ。Codexを使っているなら、これも絶対やった方がいいです。なぜなら、これを使ってCodexに渡せるからです。同じことです。
ここに行きます。accept editsになっていることを確認します。これをここに貼ってenterを押します。処理させます。そして、命を救ってくれることを1つやります。実際に3つくらいタブを開きましょう。ここで新しいセッションを作っているのが分かります。もう1つはすでに処理しています。そしてこちらはgeneral coding sessionです。これをditto oneに名前変更しましょう。そしてここはさっきとまったく同じ設定です。hiと言って作ります。そしてditto oneを、もう1つの横に開きます。そしてこれは閉じます。
これで1つのタブが1つのことをする代わりに、2つのタブが2つのことをできます。ただし今は、ここで何かを編集する前に、こちらが完全に終わるのを待ちます。UIなどがきれいに見えて、実際に動く必要があるからです。同時に作業を始めると、こちらがこちらの邪魔をする可能性があります。それは避けたいです。ここで僕は離れます。正直に言って。終わったら戻ってきます。
うわ。これは文字通り17分くらいずっと処理していたと思います。終わったと思います。push to main。push to mainは基本的に、GitHubの最新バージョンに反映して外に出す、という意味です。そして今のところ何を作ったか見てみましょう。誰にも分かりません。
Claude Codeをターミナルで使ってシミュレーターに表示する
ここまででClaude Codeアプリを間接的に使う方法を見せましたが、実際にはターミナルに切り替えます。僕はClaude Codeアプリではなく、ターミナルを直接使っています。でもやっていることはまったく同じです。どうやるか正確に見せます。
では閉じます。ターミナルを開きます。これも怖く見えるかもしれません。信じてください、怖くありません。ここではターミナルのタブを2つ開きます。こうしましょう。新しいタブを開きます。そしてこうします。これでターミナルタブが2つあります。もう1つやります。シミュレーターを起動します。ここでsimulatorを開きます。そしてここに置きます。
iOSアプリを作っているとき、基本的に画面はこういう見た目になっているべきです。そうでなければ、何かがおかしいです。ここに最終的にはアプリを読み込んでテストします。でも今はClaudeを開く必要があります。ここでclaudeと入力します。こっちも同じです。claude。まだセットアップしていない場合は、install claude、install claudeのような手順が出るはずです。
次のステップはGitHubに戻ることです。リンクをコピーして、ここに戻って、作業しているClaude Codeのターミナルに貼り付けます。繰り返しますが、これはClaude Codeです。これで作っていきます。インストールは本当に難しくありません。さっき言ったように、まだインストールしていないなら、ターミナルでこうするだけでClaudeをインストールできます。そしてこれをコピーして、そこに貼り付けます。するとターミナルがログイン設定を進めさせてくれて、月額サブスクと接続します。それが終わると、まったくこういう見た目になります。これで作業開始です。
ここでやったのは、以前作ったGitHubにどう接続すればいいか聞いただけです。GitHubはコードを保存している場所ですよね。ただ、ターミナルから直接作業したいなら、そのGitHubを自分のコンピューターにクローンするのが良いです。そしてGitHub上のコードを自分のコンピューターにクローンすれば、GitHub上ではなく、このコンピューターのローカルで作業できるようになります。シミュレーターで開くためにもこれが必要です。これもやります。
僕は文字通りやり方を忘れてClaudeに聞きました。ちなみに、これどうやってやるんだっけ、と聞いて、それをコピーしてここに貼り付けました。これでGitHubをウェブサイトから自分のコンピューターにクローンしています。
その間に、小技を見せます。command CかCを押します。claude –dangerously-skip-permissions。動くでしょうか。はい、いいですね。ここを見ると、shift tabを押してモードを変えても、この赤いbypass permissionsがありません。でもこちらにはあります。なので、ターミナルでClaudeを開くたびに、常にbypass permissionsをオンにしておくといいです。そうすれば、座ってaccept、accept、acceptと押し続ける必要がありません。そんなことはしません。
実際のデバイスにクローンされたら、次にやるのは、そのフォルダでClaudeを開くことです。やり方は超簡単です。僕は文字通りClaudeに聞きました。あなたも同じようにやるべきです。どうやってそれをやるのか。そして、dangerously skip permissions付きでそのコマンドをどう開くのか、と聞くだけです。
ここから同じものをコピーしました。ここに貼り付けます。そしてこっちにもまったく同じことをします。ここに貼り付けます。上を見ると、transform iOS app内で作業していることが分かります。ではシミュレーターでこれを開くように頼みましょう。前回、実際のアプリ上でシミュレーターで開くように頼んだときは動きませんでした。それを行う権限がなかったからです。でもターミナルからやると、このものは基本的にあなたのコンピューター全体を操作して、やりたいことを何でもできます。
なので、iPhone 17 Pro Maxのシミュレーターで開いて、みたいに言いましょう。これで動くはずです。モデルを変えたければ、slash modelと入力して上下します。Opusのクレジットを全部使いたくないのでSonnetにします。そしてこちらは念のためOpusのままにしておきます。処理しています。処理させます。繰り返しますが、bypass permissionsです。質問しているとき以外は常にオンにしておきます。質問するときはplan modeにしてください。
基本的に僕たちはAIに魂を明け渡して、好きなことをする権限を与えています。だって僕に何が分かるんでしょう。何も分かりません。今やったのは、Claude Designからこのデザインファイルを取り、それをClaude Codeに渡し、その同じClaude Codeをターミナルで開いたということです。これでシミュレーターに開いて、実際のアプリをさらに作り、もちろん見た目も確認できます。まだどんな見た目か分かっていませんから。
来ました。なんてことだ、生きています。いいですね。そしてほぼ期待通りの見た目です。よし。Show me how。これが新しいキャラクターです。任意の動画をアップロード。ここにランダムなボタンがあります。これは削除する必要があります。Got it。次へ。そして顔を載せます。行きましょう。はい、壊れています。skipを押します。興味深いですね。
見て分かるように、だいたいやるべきことはやっています。これは僕たちが合意したオンボーディングですよね。そして見た目はまさにその通りです。基本的にフレーム単位で、期待通りの見た目です。ただ1つ問題があります。ホームページや設定など、アプリの残りの部分がここに表示されていません。handoffの過程で、残りが渡らなかったのかもしれません。理由を見てみましょう。
問題は、アプリ全体のうちオンボーディングだけが渡されて、残りのアプリが渡されていなかったことのようです。なのでClaude Designに戻りましょう。問題はこれで、こうなりました、と伝えます。今度はすべてのzipファイルをダウンロードしましょう。以前はzipファイルがClaude Codeの実際のアプリではうまく動きませんでしたが、ターミナルでは動きます。ここがこのやり方の良いところです。
ターミナルを開いて、zipファイルをClaude Codeに渡し、これを使ってアプリの残りを作ってください、と言います。bypass permissionsをオンにしているので、文字通り離れても残りをやってくれます。終わったら戻ってきます。
バックエンド接続とランディングページの作成
これが処理されている間、このタブが開いているので使いましょう。さっき取得するように言ったAPIキーを全部渡します。そしてこのアプリのバックエンドを考えていきましょう。なぜなら、こちらはデザインとフロントエンド、きれいに見せる部分をやっていますが、バックエンドはまだ作る必要があるからです。
では実際に作ります。大きな作業を実際に始める前に、話しかけて計画できるようにplan modeにします。こんな感じで言いましょう。APIキーをいくつか渡します。必要に応じて設定して保存してください。これがFAL AIのAPIキーです。使うのはKling 3 motion controlだけです。
APIキーを取得しましょう。ここに行きます。settings、API keyに行き、ここからAPIキーを取得します。それを貼り付けます。そしてピリオドを打ちます。次に、これがRailwayのAPIキーです。後でランディングページを作って、ここに接続してホストします、と伝えます。
Railwayのアカウントでtokensに行きます。新しいものを作ります。ash and projectsにしましょう。testにします。新しく作ります。これをコピーします。ターミナルに行ってここに貼り付けます。あともう1つ必要だと思います。これを閉じてSupabaseに行きます。今回は自分のものは見せません。ここではSupabaseをセットアップしないからです。
今、3つの異なるAPIキーを接続しました。1つ目はFALのAPIキーです。これで実際のKling motion controlを行います。2つ目はRailwayです。ランディングページを作ったときに、そのランディングページをRailway上でホストできます。3つ目はSupabaseキーです。これは顧客データの保存などに使えます。このアプリではあまり使わないと思います。正直に言って。ただ、安全に保存する必要のある情報がある場合には使います。
ここで見て分かるように、Claude Codeのhandoffは半分うまく動いています。これは僕たちにとって良いことです。そしてもう1つのターミナルでは、バックエンドの計画が完了したと言っています。ではそれをbypass permissionsにして処理させます。これで2つの作業が動いています。こちらはUI全体を作っています。Claude Designで作ったUI全体のビルドがまだ進んでいます。正直、Merlにかなり似ていると思います。この左上でさえ、うわ。悪くないです。みなさん、これは本当にきれいです。完璧ではありませんが、それでもかなり良いです。
Paywallは本当に良いです。設定はまだかなりダサいですね。正直に言って。履歴は悪くありません。ホームページは、おっと。すごい。何かを作っています。では両方とも処理させましょう。
ここで両方保存されたのが見えます。今はランディングページを作りましょう。こう伝えます。作業しているフォルダ内のすべてのアセットと、あなたが知っていることを使って、iOSアプリ用のランディングページを作ってください。iOSスロットみたいなものや、ダサいものにはしないでください。すごくきれいにしてください。完了したらlocalhostで開いてください。
もっと良いプロンプトにできたでしょうが、この動画を3時間録画しているので疲れています。今はSonnetにこのランディングページを作らせます。localhostというのは、自分たちだけが見られるページで開くという意味です。この作業が終わったら戻ってきます。
今のところ、フルアプリは作られて、シミュレーター上で動いているようです。では動作を見てみましょう。Claude DesignからClaude Codeへのhandoffで、これがオンボーディングで、これがホームページです。実際の処理はここで起きます。これが履歴ページです。これも悪くありません。これが設定です。設定は少しダサいです。作っていたものに見た目が近いか見てみましょう。利用規約。悪くありません。プライバシーポリシー。よし。オープンソースライセンス。ここには何もありません。出力品質、通知、ウォーターマーク、購入復元などがあります。
作成に戻ります。Proに行きます。Paywallは悪くありません。正直、好きです。悪くありません。Claude Designで作ったものに基づいて、必要なことは基本的にできたと思います。ただ、このページが動くか確認する必要があります。どうすればいいのでしょうか。うわ、ローディングページも悪くありません。そしてこれは、生成完了ページです。これも悪くありません。shareを押せます。shareボタンは動きません。newは動きます。戻ります。はい、そう思います。
Claude Designがやるべきことは正しくやってくれたと思います。これはありがたいです。アカウント削除ボタンもあります。いいですね。サインアウトボタンもあります。Appleサインインすらまだ追加していませんが、それは後で追加できます。Claude Designは完了です。Claude Designで必要だったことは正確にできました。そしてそれはほとんど実際のアプリ本体に入っています。では閉じましょう。
ランディングページがこちらで作られています。これはしばらく処理させます。これをもっときれいにするにはどうすればいいでしょうか。今のところバイブコーディングっぽいという批判は避けられていると思いますが、それでも最高にきれいというわけではありません。もっと良くできます。
ここから僕なら、今あるものを取り、Pinterestに戻り、Mobbinのような別のサイトに戻って、こう聞きます。このUIをさらに強化する他の方法は何ですか、と。今はMP4と写真を背景に入れるために、5つくらいのものしか作っていません。さらに10個作りましょう。Higgsfieldに戻って、これまで作ったアウトプットの量を増やします。僕なら5つ以上作ります。
今アセットがこれだけしかないなら、あと10個作ってください。Merlには、何本あるか分かりません。たぶん20本くらいの動画があり、それがこの全体の中でランダムに切り替わっています。履歴に行くとき、ここに行って更新されるとき、新しい動画が表示されるので、常に新鮮に見えます。これは、自分の作っているものに味を加えるかなり良い方法だと思います。
それ以外では、ちゃんと動くか確認するだけです。つまり、このアプリは機能しているのか、ということです。ここでAPIキーを渡しました。ここにあるはずです。聞いてみましょう。APIキーはありますか。ストレージを確認してください。APIキーはありますか。タブを2つ開いていると、こちらのセッションメモリとこちらのセッションメモリが少し違います。こちらはAPIキーを覚えていて、どこかに保存しました。でもこちらはその出来事を覚えていません。ただ、覚えられます。なので、こちらに作ったファイルを確認させ、そこからアクセスできるようにする必要があります。
いまファイルを確認しました。envのような、secretなどを保存するファイルです。そしてここにAPIキーがたくさんあることを把握しました。では接続しましょう。FALとSupabaseを接続してください。Railwayは今は無視してください。この2つを必要な場所に入れてください。FAL AIが本当に動くかテストしたいです。
基本的にここで命令していることはとてもシンプルです。FAL AIを操作するAPIキーがあります。generateを押したとき、実際に動画を生成する必要があります。裏側に行ってKling 3 motion controlに課金され、その処理を実行するわけです。そしてrailwayは無視してと言ったことに気づくと思います。ランディングページはこのセッションでやっているからです。Railwayに関係するランディングページの作業は、このセッションにやらせます。そしてもう1つはSupabaseです。顧客情報やパーソナライズなど、保存したいものがあれば、そこはあなた次第です。このアプリでは保存するものがあまりないので、正直あまりやりません。その部分も飛ばします。
とにかく、動くこと、そして必要なら使えることを確認して、と言いました。SupabaseのプロジェクトURLは何ですか、と聞かれました。正直、今はスキップします。どのFAL AIモデルでボタンを生成しますか。Kling Motion Control 3だけを使う必要があります。そして実際にアプリを使うときに、画像を挿入できる機能も追加してください。覚えておいてください。これは、ユーザーが動画の顔に画像を載せるものです。なのでユーザーからは2つの入力が必要です。画像と動画です。それだけがKling Motion Control 3を使い、submitします。そして処理させます。
今言ったことをもう一度整理すると、使うべき動画モデルはKling Motion Control 3だけです。なぜそれを言ったかというと、ここには動画関連のものがとてもたくさんあるからです。僕たちは新しい動画を作っているわけではありません。新しい動画を編集しているわけでもありません。既存の動画を取り、それに処理をさせて、そこに自分の顔を載せているだけです。動画から画像へ、または画像から動画へ動きを転送する唯一の方法がKling 3 motion controlです。もし単に動画を生成するなら、Seedanceなど、いろいろなものが使えます。でも僕たちはこのモデルだけを使いたい。それがここで一番重要です。このAPIから別のモデルを使ってしまうと、うまく動きません。
そしてSupabaseについては何もしなくていい、今はスキップしていい、とも言いました。全部を1つずつやってください。ほとんどの場合、時間は十分あります。なので、すべてを一度にやる必要はありません。分けてやる感じです。今のところ僕はSupabaseを本格的にはセットアップしません。さっき言ったようにAPIキーはあります。APIキーをどう設定したいか。プロジェクトURLは何か。そこはできます。そして、法的に保存してよいもの、保存したいものがあれば保存してください。でも僕は本当に保存しません。
ではランディングページがどんな見た目か見てみましょう。これがもう1つのClaudeが作ったものです。好きです。繰り返しますが、これはかなりバイブコーディングっぽく見えます。史上最高のランディングページではありません。でも悪くありません。かなりバイブコーディング感はありますし、明らかにもっと良くすべきです。でも1プロンプトでこれです。僕は好きです。良いと思います。
背景で作ったアニメーションが本当に好きです。かなり高品質だと思います。これをInstagramに投稿したら、この上にブランドページを作れると思います。アニメーションは間違いなく僕のお気に入りの部分です。ですが、これは良いと思います。ランディングページにはこれ以上あまり手を入れません。もっと良くしたいなら、良くしてください。それは、あなたがどんな見た目にしたいか、どんな雰囲気を目指すか次第です。ただ、かなり良いランディングページを作って、その後RailwayのAPIキーを使うことはできます。RailwayのAPIキーを使ってこれをホストしてください、と言うだけです。単純です。
では今やるのはGitHubを更新することだけです。GitHubを更新してください、と言います。今はそれだけです。ランディングページは僕にとって十分です。ランディングページに8時間も使いません。実際のアプリがバックエンドからフロントエンドまできちんと動くことを確認する方に、もっと時間を使います。
これでこのタブは終わりだと思います。今やるべきことは、バックエンドとフロントエンドが接続されていることを確認するだけです。それはこちらのタブでやっています。では今はこれを閉じます。やり方はexitと言うだけです。終了したら、これは終わりです。閉じられます。こちらをフルスクリーンにします。そして処理させます。
ここで言わせてください。この動画開始から1時間以上経ってもまだ見てくれているなら、ありがとうございます。この動画からたくさん学んでくれていることを願っています。そしてすごいアプリを作ってくれることを願っています。神のご加護がありますように、インシャアッラー、そのアプリがあなたに10億兆ドルを稼がせてくれますように。これからも勝ち続けてください。何か学んだならコメントしてください。質問があれば教えてください。どこかの時点で僕が正気を失っていた可能性は間違いなくあります。これは8時間の、人生で一番長い動画だからです。もしどこか分かりにくい部分があればコメントしてください。僕は本当にすべてのコメントに返信しています。
実際に動画生成をテストする
処理が終わりました。ホームページはかなり良くなっているようです。設定はまだダサいですが、後でいつでも変えられます。ここで動画を追加しましょう。画像も追加して、すべて動いているか確認します。
この動画を使いました。これは僕が話しているだけの動画です。僕の顔がいろいろ動いています。照明がかなり良いことを確認しました。これを使って、僕の顔に誰か別の顔を載せるからです。では別の人を探しましょう。今日好きな顔は誰でしょう。Famous people。分かりません。有名人はうまくいかないかもしれません。AIの検出機能が組み込まれていて、有名人の顔が悪用されないようになっているからです。分かりますよね。Shaq。ちょっと待ってください。あ、これです。良いですね。Dwayne The Rock Cox。では彼の顔を使います。
これを閉じます。ここでテストしてみましょう。シミュレーターでやる必要があるのは、素材をドロップして写真に保存させることです。すでに僕の写真があります。この写真もドロップしましょう。はい。これでここに入りました。閉じます。アプリはここです。Transform AI。videoを押します。この動画を選びます。faceを押します。この顔を選びます。実際にリアルタイムで読み込んでいます。これはとても良い部分です。generateを押します。そしてまた動画を表示しています。かなり良いです。
動画アップロード18%。ローディング画面が好きです。単に裏でloadingと表示するのではなく、何が起きているかを示しているのが良いです。今はrendering 33%と出ています。あ、問題が出ました。スクリーンショットを撮ります。文字通り僕の鼻がそこにあります。素晴らしいですね。このエラーメッセージが出ました。直してください。それだけです。something went wrong、we hit a snagと出るのも良いです。エラーハンドリングも少し見せてくれています。ちょっとすごいです。
作ったものがすべて、ここには表示されません。それも直す必要があります。なるほど。FALは30×340か340×340以上の画像が必要だそうです。選択された画像を最小値より安全に大きくなるよう正規化し、それからJPEGとして再エンコードして保存します。これはそこまで大きなエラーではありません。基本的にFAL AIは画像が特定の形式と特定のサイズである必要があり、それでなければ失敗します。そこでClaudeは、常にそれに変換して動くようにすると言っているわけです。
では動くか見てみましょう。これが顔です。これが動画です。generate。動くことを願います。動くはずです。キュー内のラッパーのラッパー。これは実際かなり賢いです。ユーザーが多い場合、キューの先頭に行くためにアップグレードしないといけないと言えます。多くの人がやっていることです。
これは本当に見た目が良いです。僕の気のせいでしょうか、それとも本当に良く見えますか。バイアスがかかっているのかもしれません。分かりません。履歴でも、成功または失敗した生成が、レンダー前とレンダー後の状態と一緒に表示されるようにしてください。これも入れておきましょう。
ロード中です。まだ失敗は見えません。なので読み込んでいるはずです。頼みます。作業中です。伝えます。91%でかなり長く止まっています。バックグラウンドで実行するボタンを追加し、それを履歴にリンクしましょう。動くか見てみます。
そして、APIがそれくらい時間を取るので、6分くらいかかりました。でも見てください。完了しました。完了です。ちょっと待ってください。押せません。これはよくないですね。直しましょう。完了したよ、やった。でもカードをタップしても、押せないし見られません。
直りました。基本的に、壊れている部分を伝えたら直してくれました。今は履歴に戻ってTransformに行くと、これがフル動画です。saveを押せます。保存されました。そして写真に行くと、ここに保存されています。これが僕が作成した動画です。
ここで覚えておいてほしいのは、この品質は僕たちとは関係がないということです。使っている実際のモデルに関係があります。なので、使うモデルによって、もしmotion controlができる別のものを見つけられるなら、それを使ってもいいです。ただ入力が良いほど、たとえば照明がもっと良かったり、もっと近かったり、4Kカメラだったり、入れる写真がより良かったりすれば、当然アウトプットも良くなります。なので出力は、今僕たちが本当に作っているものではありません。このAI全体をトレーニングするつもりはありません。僕たちは実際にそれができるアプリが欲しいだけです。
RevenueCatで課金とPaywallを設定する
では価格設定について話しましょう。価格設定をするときは、RevenueCatに行って新しいプロジェクトを作り、たくさんコピー＆ペーストする必要があります。世界で一番難しいことではありません。ただ本当に面倒です。RevenueCatの部分をやるときは、Claude Codeを背景で開いておき、スクリーンショットを送って、これが分からない、どうすればいいのか、ここには何を貼ればいいのか、と聞いてください。基本的にはコピー＆ペーストの連続です。そこまで大げさなものではありませんが、これをやるときはClaudeに聞く必要があります。
そして市場調査もする必要があります。これにいくら請求するのか、という話です。まず一番やらなければいけないのはFAL AIに行き、FAL AIはいくらかかるのかを見ることです。これはClaudeから直接聞くこともできます。そして、FAL AIの上にどれくらい上乗せして請求したいのか、または同じコストにして月額制にするのか、クレジット制にするのか、何にするのかを考えます。
僕はClaudeにこの質問をそのまま聞きました。ここではどうすればいいのか、と。するとKling V3のコストは1秒あたり0.126ドルだと分かります。誰かが5秒使うと、1ドル未満です。63セントです。そこまで悪くありません。Pro tierなら1.4です。今は使っていません。使うべきですね。ではpro tierをオンにしましょう。なぜなら、やってみてもいいからです。
そしてAppleが30%を取ることも理解する必要があります。はい、30%です。これはすごいです。なので1ドルあたりの純額は85セントから70セントに変わります。良くありません。Claudeは、無料ティアで3回の無料変換を提供し、その後Pro monthlyを月10ドル、Pro yearlyを年60ドルにするべきだと考えているようです。
繰り返しますが、これは僕があなたの代わりに決めることはできません。自分で調査し、自分で裏付けを取り、自分でマーケティングをして、どうしたいのか理解する必要があります。何を請求したいかは誰にも分からないからです。僕が請求している価格はかなり普通です。Merlでとんでもない額を請求しているわけではありません。ただし、それはまだApp Storeに出てすらいません。ユーザーがそれにどう反応するかを見ないといけません。分かりますよね。
価格については、Higgsfield、FAL AI、動画生成系のiOSアプリストアの他のアプリに行って調べます。おそらく彼らもあなたと同じAPIキーを使っています。でも、より良いマーケティングがあれば、もっと高く請求できるかもしれません。あるいは、より良い別の商品や出力があれば、もっと高くできるかもしれません。なので、いくら請求するか、どう請求するかなどはあなた次第です。
そのためにはClaudeと話し、自分で市場調査をし、それをRevenueCatにつなぎます。RevenueCatをやるのはそこまで難しくないはずです。ただ面倒で見た目がきれいではありません。それができると、基本的に決済プロセス全体がセットアップされます。
アプリのRevenueCatを設定したら、何を請求するか、クレジット制、サブスク、何であれ、それをApp Storeにも接続する必要があります。そしてここからは、RevenueCatでやったことと基本的に同じことをやります。ただし、それらを互いに接続します。ここで見えるように、Merlには3つのサブスクリプションがあります。アプリ内購入は9つくらいあります。これはMerlで使っているmana、つまりクレジットのようなものです。あなたは自分の価格に基づいて自分用に作り、それをRevenueCatに接続します。この2つは親友です。
世界で一番難しいことではありません。ただ本当に面倒です。なので、いつものClaudeをバックグラウンドで開き、やり方を案内してもらってください。これが、Paywallにつながる実際の決済部分をセットアップする方法です。ここでyearly continueやmonthly continueを実際に押すと、動作して、そこにPaywallが接続されます。
最後にやる必要があるのは、おそらくここにサインイン部分を追加することです。Appleサインインだけを使ってください。ターミナルに行って、Appleサインインを追加して、と言うだけです。本当にそれだけです。そしてAppleサインインがUI上ここに追加されたら、Apple Store Connectに行ってセットアップします。これも史上最悪に難しいものではありません。ただClaudeをタブで開いて案内してもらってください。僕が代わりにできるわけではありません。やっていることに応じて、非常に具体的な数値や設定が必要だからです。
そして見てください、ちょうど良いタイミングでこれが完了しました。なんてことだ、彼はすごい見た目です。基本的にほぼ同じ出力があります。これはかなり良いです。モデルが動いていて、やるべきことをしているという意味です。うわ。はい、これは僕の人生で作った中で一番長い動画です。おそらく制作に4時間かかりました。さっきも言ったように、このアプリ自体は作るのに1週間かかりました。
ここまで来てくれたなら、本当にありがとうございます。ここまで一緒にいてくれてありがとうございます。そして、この動画を見たなら、あなたはもう、実際にiOS Storeへ提出できる高品質なiOSアプリを作るために必要なものをすべて持っている、と言いたいです。ブランディングもしっかりしていて、バックエンドのいろいろなものに接続されていて、フロントエンドにも接続されています。
10年以上コンテンツを作ってきた中で、これは僕の人生で一番長い動画です。冗談ではありません。なので、この動画が役に立ったことを願っています。役に立ったなら、友達に送ってください。作るのに本当に時間がかかりました。どうかチャンネル登録してください。お願いします。本当にお願いします。
何か学んでくれていたらうれしいです。何かを得てくれていたらうれしいです。そしてMerlが公開されたら、僕は皆さんのことが本当に好きです。僕たちは同じ人間だからです。僕たちは作れます。お金を稼げます。10億兆ドルを稼げます。あなたのアプリが僕のものよりきれいになることを願っています。そしてあなたが10億ドル稼ぐことを願っています。ありがとうございました。
コメント