爆速でアプリ開発が誰でもできる!?【Claude×Replit】での作り方を徹底解説〜UIデザイン編〜
このnoteは2024年1月8日のYouTubeの動画の内容をもとにAIで文字起こししたものです。
【プロフィール】
Oh my teeth CEO 西野誠（にしのまこと）
1994年生まれ。大学在学中にオープンロジにて創業期を経験。ワークスアプリケーションズに新卒入社し、大規模基幹システム開発に従事。2019年、Oh my teethを創業。日本初の通わない歯科矯正ブランドを東京と大阪6ストアで展開。体験者数は5万人を突破。Onlab 21th「DemoDay」最優秀賞 & オーディエンス賞、ICC 2022「D2Cカタパルト」優勝、ICC 2024「DXカタパルト」優勝、Forbes NEXT100 2024受賞。
▼YouTubeはこちら
今回のテーマはClaudeとReplit、この合わせ技によって爆速なアプリを開発するっていうそういう話になります。ClaudeっていうのはGPTみたいな感じで、対話型のAIツール。GPTの違いはUI作るの得意だなっていう印象があります。ただ実装とかアプリの公開とかできないので、その公開するためにReplitっていうAIのエージェントを使いますっていう感じです。
これは公開までいけまして、これもエージェントなので対話しながら、実際のアプリ公開まで。開発だけでなくて公開までいけるんですけれども、この合わせ技によって面白いことができるってことに最近気づいたので、それをちょっとお見せしていければなというふうに思います。
Nishino：Replit自体はこんな感じで、チャットしながら開発ができる。かつ何かエラーが起きたら、どんどん勝手に自己完結してくれていくっていうのが面白いものなんですけれども、こういうもう本当に動くアプリケーションっていうのが、1時間も経たないうちに作れちゃうみたいな。
いきなりこれでReplitで作って、ある程度いけるんですけど、僕のオススメはある程度、UIとか仕様はClaudeでやり取りしながら作った上で、本当に実装入りますよってタイミングでReplitに行くのが、なんとなく僕としては今のところ使いやすいなと思っていて。
AI：Oh my teeth AIサポートセンターでございます。本日はどのようなご用件でしょうか。
Nishino：Oh my teethはいくらですか。
AI：申し訳ございませんが、その件については確認させていただく必要があります。
Nishino：こんな感じでチャット系して、AIと対話できるみたいなアプリを作りたいって思ったらすぐに1時間あれば、こういうデモモックは作れるっていう。実際にこれ裏側では、GPT-o1のミニとWisperを使ってこうやってるんですけれども、こういうの含めてできるっていう。
話は戻って、まずはClaudeで今回はデモとして経営のダッシュボードみたいな。経営じゃなくてチームの数値費用とかの簡易的なダッシュボードを作るみたいなものをやろうと思います。
例えばユーザー数とか顧客満足度とか、そういう風なのを表示する。こういう画面とかに表示しておくと、メンバーが状況が分かるじゃないですか、会社のステータスが。今までもSlack上で流してたりしたんですけど、やっぱりモニタリングなので、わかりやすくビジュアルであるといいかなと思っていて、それをちょっと作ろうという風に思います。
そしたらいきなりコード書き始めちゃうんで、Claudeは。コードを書いてくださいとも言わずとも、言ってないので、ちょっとユーモアも入れてそれっぽいのは出てきます。そうするとまたこれも修正されていきます。もうちょっとわかりやすく3つぐらいの指標で、わかりやすくビジュアライズされるものを想定しましょう。目標に対して、シンプルなダッシュボードに変えてくださいと。やっぱりこれは早いので、Replitでやることもできるんですけど、結構Replitって本当にリアルな開発物を作っていくんで、色々検証とかして時間かかっていくんで。目標に対して今どこなのかっていうのがすごくわかるのか。3つぐらいにして、ユーザー数、2つの指標にしてましょうかと。ビジュアルでわかりやすくしたいから、無茶ぶりでもいいと思うんですよね。
Nishino：これを変えたい。ユーザー数、高評価数、数に全部したほうが良さそうだった。数、売上、全部数値ちょっと一旦、動きは別のシールを変更してもらって。
メンバー：動いてないな。
Nishino：アニメーション。こういうのを開いた時にタイミングとかで。あ、動かないな。なんか動かないね。こんな感じで気に入ったようになるまで、Claudeで作りきっちゃいましょうと。
Nishino：めっちゃわかりやすい。ここまで行けますと。あと結構ガチャ的な要素もあるんで、何回も言ってるんですけども、ちょっと違うなって思ったら新しいチャットウィンドウでやり始めて。やっぱり直すのに結構限界があるというか、結局時間かかっちゃうってことがある。最初からパッときたことがあるんで。何回も言ってたら、なんかそっちに勝てないから、ちょっと洗練はされましたね。すごいシンプルになってる。
わかりやすい。おーこれだ、わかりやすい。ちょっと、でも投げ方の参考になるんじゃないかな。こんな雑でも、これでいいんだっていう。
これがだからやっぱりAIのいいところだと思うんですよね。わかんなかったら聞いてくれるし、うまくいかないってただそれだけなんで、使ってくれたらいいぐらいの。言語化能力が本当に弱くなっていってる気がする。
そういう感じでまずは準備編という感じで。これを3つのパートに構成されます。これ見たら使えるようになった方がいいじゃないですか。だとしたらこれやるには、データを持ってこないといけないので、どっかから。これは非エンジニアに対象なので、スプレッドシートから取ってくるっていうことができるので、そしたら多分皆さん本当にClaudeとReplitでできるようになるので。
次回はデータを用意するっていう。データは実際に取ってきたものが表示されるように。しかもそれがリアルタイムで更新されるようにした方がいいから、そのやり方をお伝えします。
ここまで読んでくださりありがとうございました！
本内容は、YouTubeで毎朝7時に配信しているので、チャンネル登録して聞いていただけると嬉しいです。それでは本日もOh!全開でいきましょう！
Oh my teeth 採用情報
Oh my teethでは、最速で未来の歯科矯正体験を社会実装する仲間を募集しています。我々と一緒にリアルとTechを駆使した事業創りを経験しませんか？
一緒に戦える仲間をたくさん募集中です！
▼職種の例
・マーケター
・ストアマネージャー
・セールスリーダー
・プロダクトマネージャー
・歯科衛生士少しでも興味持った方、物作りしたいなとか世界中に届ける物作りしてみたいという方はぜひまずは僕と15分面談させてください。
▼興味がある方は、西野と15分面談をしましょう！
Oh my teeth マウスピース矯正
通わないマウスピース矯正、Oh my teethが今大好評です。サクッと歯並びをきれいにしたい方、ぜひ無料診断に来てください。今導入クリニック大阪東京6店舗で展開しています。
無料診断はたったの3ステップ！
Step1： Oh my teethの専門クリニックに行く
🔎Step2：歯型スキャンスタート
3Dスキャナーで実施いたします。結果は最短即日でLINEでゲット！
🧑🔬Step3：矯正相談・プランのご提案
理想的な歯並びの擦り合わせを行います。
▶️無料診断を予約する
ついでにNishinoのLINE追加もお願いします！採用について、矯正について、気になることがあればお気軽にご連絡ください！
▼WebCMが配信中！