GPTS研究会 モーニングLIVE

Create.xyzでAIと話すだけでサイトが完成した朝
スクショ1枚・雑な一言で、公式サイトまで出来ちゃった話|GPTs研究会 朝LIVE

2024年4月4日(木)GPTs研究会モーニングLIVE

CAST

田中啓之(ひろくん)

3方よしAI共創コンサルタント・GPTs研究会主催

戸野塚レン(れんくん)

GPTs研究会メンバー

家事と子育てのスキマで経営する3方よしAI共創コンサルタントの田中啓之、ひろくん@passion_tanaka)です。いやー、木曜の朝も元気に配信してます。相方のれんくんと一緒にお届けしてるこの回、実はAI界隈で「なんでも作れちゃう」ってざわざわ噂になってた「Create.xyz」を、その場で実際に触ってみる回だったんですよね。昨日ちょっと触ろうとして上手くいかなかったんですけど、今朝はいけそうな気がする……そんな謎の自信だけ持って画面を開きました。スクリーンショット1枚放り込むだけでサイトができる、って正直半信半疑だったんですけど、終わってみたら、AI氣道.jpの公式サイトまで、朝ごはんを作ってる間に出来上がってました。今日はその一部始終を、包み隠さずお届けします。

01

Create.xyzとは――AIと話すだけでサイトができる衝撃

▶ この話題を動画で見る(2:05〜)

Create.xyzとは――AIと話すだけでサイトができる衝撃 グラレコ

まずは、そもそも今日の主役「Create.xyz」って何なのか、ってところから。木曜の朝、配信が始まってすぐ、れんくんの髪型がいつもと違うことに気づいたりしながら雑談が一段落したところで、本題に入りました。

ひろくん(2:05〜)

「あの、クリエイト.xyzっていうのが、AI界隈だけだと思うんですけど騒がれていて、X状とかだよね。何でも作れちゃうって昨日やろうとしてたやつ今日は動いて作れそうな気がするので今日ちょっとそのどんなやつかってやったけ触りをめちゃくちゃ使ったことある」

れんくん(0:49〜)

「いやそうなんですよ。うんうんうん。無駄に夜仕事しないっていうのがありますね。はいはいはい。」

ひろくん

「確かにね、たぶんまだ20代だから全然いいかもしれないけど。結構40代入ってくるとね、早く出ないと全然やっぱ体力持たないっていうかね。」

正直、昨日はうまく動かせなかったんですよね。でも今朝はいけそうな気がする、ってなぜか自信だけ持って配信を始めた私がいました。れんくんにも「使ったことある人いたら使い方教えてもらえれば」って呼びかけたんですけど、私自身もまだ触ったばかり。まずは実際に画面を開いて、一緒に見てもらうことにしました。

Create.xyzとは――AIと話すだけでサイトができる衝撃 スクリーンショット

ひろくん(2:35〜)

「新しくプロジェクト作ってみましょうか。で、ニューページ。この左側のところが実際作られてくるので、右側のところがこのプロンプトですよね。要は何をしますかってことを見てるところなんですけど、例えばどうしようかな。なんか作りたいのあります?」

で、れんくんに振ったら「ホームページでもいいしアプリでもいい」って返ってきて。じゃあ試しに……ってことで、れんくんの発案で「Facebookの画面」をスクリーンショットで撮って、それを丸ごとCreate.xyzに投げてみることになったんです。この時点では、私もまだ半信半疑でした。ぶっちゃけ、雑にお願いしただけでどこまで再現できるのか、想像もついてなかったんですよね。

数十秒待つと、画面にそれっぽいレイアウトがどんどん出来上がっていく。私、思わず「これ、どうやって」ってつぶやいちゃいました。ロゴまでそれっぽく配置されて、アイコンまで再現されてる。私が「ロゴまでパクってる」って驚けば、れんくんも「それっぽいのができた」って半笑い。裏側では、私の雑な命令を受けたAIが一生懸命コードを書いて、デザインまで組み立ててる。しかも、ただの絵じゃなくて全部編集できるんですよ。ここがCreate.xyzの一番の衝撃だったんですよね。何を作りたいかさえ伝われば、あとはAIが黙々と組み上げてくれる。そういう時代に、もう入ってるんだなあ、と朝から実感した瞬間でした。いやー、正直これ、昨日はうまく動かなかったんですよ。それが今朝はスルスル動く。この一日の差って、なんなんでしょうね……AIツールって、ほんと数日でガラッと変わっちゃう。だからこそ、こうやって朝イチで触って、生の反応をそのままお届けするのが、いちばん面白いんじゃないかなあ、と思うんですよね。

02

スクリーンショット1枚でUIが再現できる驚き

▶ この話題を動画で見る(6:29〜)

スクリーンショット1枚でUIが再現できる驚き グラレコ

Facebookの画面が形になっていくのを見ながら、れんくんが「これ驚きなのが画面キャプチャーを入れられるっていうのが、スクリーンショットを入れてこれ作ってっていうだけでできちゃうのがすごい」って何度も繰り返してたのが印象的でした。私も同じところに引っかかってたんですよね。今って、写真を1枚見せるだけで、AIが「これはこういう構造のUIだ」って読み取って、コードに変換してくれる。れんくんが認識について気にしていたので、実際に確認してみたら、グループの表示もメンバー数もちゃんとコピーしてる。完全にFacebookだと思って作ってるみたいでした。

れんくん(6:29〜)

「確かに。本当に画期的すぎてびっくりしますね。僕も大学時代プログラミングとかしてたんですけどこういうサイト作りたいなどうやって作るんだろうこのボタンの作り方、何て検索したらいいんだろう?みたいなのがあったりとかしてそれがスクリーンショットを撮ってこれ作ってって言うだけで」

この話を聞いて、私、めちゃくちゃ共感したんですよね。昔は「このボタン、どうやって作るんだろう」って調べるところから始まって、そこで何時間も溶けてた。それが今は、スクショを撮って渡すだけ。ボタンの作り方を調べる必要すらなくなってる。れんくんも大学時代にプログラミングをやってたからこそ、この変化のインパクトが人一倍わかるんだろうなあ、と話しながら思いました。

スクリーンショット1枚でUIが再現できる驚き スクリーンショット

ひろくん(4:57〜)

「例えばこのデザイナーさんに渡した時に、今一生懸命このコード書いてデザインして作ってくれてる。今ビルディングなんでまだ作ってますね。これを絵を作ってるだけじゃないんですよ。全部これ編集できる?」

私自身、この「編集できる」っていうのが実はいちばん大事なポイントだと感じてるんですよね。見た目を再現するだけなら画像生成でもできる。でもCreate.xyzは、裏側でちゃんと動くコードとして組み上げてくれてる。だから、色を変えたり文言を直したり、あとから触れる。れんくんと2人で「これすごいですよね、編集できるし動く」って何度も確認し合いながら、画面をのぞき込んでいました。

れんくんが「フェイスブックってちゃんと認識してるんですかね」って気にしてたので、画面をよく見てみると、グループの表示もメンバー数もちゃんとコピーされてました。完全にFacebookだと思ってレイアウトを組んでる感じがして、そこもまた面白いポイントだったんですよね。写真1枚から、これだけの情報量を読み取ってくれるのか、と私自身も画面を二度見しちゃいました。ボタンの位置や余白の取り方まで近い感じに仕上がってて、雑に投げたはずのお願いに対して、想像以上に丁寧な仕事を返してくれたなあ、というのが率直な感想でした。ぶっちゃけ、ここまでとは思ってなかった。スクショ1枚ですよ。たった1枚。それを渡すだけで、ここまで読み取ってくれる。れんくんと2人、画面の前で「すごい」しか言えなくなる瞬間って……なかなかないんですよね。

03

20年前のプログラミングと今のAI――技術進化の体感

▶ この話題を動画で見る(7:09〜)

20年前のプログラミングと今のAI――技術進化の体感 グラレコ

画面がどんどん出来上がっていくのを眺めながら、私、つい昔話をしちゃったんですよね。プログラミングを始めたのって、実はもう20年以上前なんです。当時のことを思い出すと、今との差がありすぎて自分でも笑っちゃうくらいで。

ひろくん(7:09〜)

「本当ですよね。いやだって、僕がプログラミングとか始めたの時って20年以上前なんですけど、当時PHPとかSQLは電子商品でもなかったので、本を買ってくるじゃないですか。本に載ってるコードを1個ずつ手打ちするっていう」

本を1冊買ってきて、載ってるコードを1文字ずつ、手で打ち込む。れんくんも「でパクってくる、やって」って合いの手を入れてくれたんですけど、本当にその通りで。1個でも打ち間違えると動かない。エラーの原因を探すだけで半日つぶれる、なんてことがザラでした。半角スペースが1個抜けてるだけで、もう動かない。でね、それを見つけ出すのに何時間もかかる。今の若い子に言っても、たぶん信じてもらえないんですよね……。ダウンロードが当たり前になって、インターネットが普及して……って段階を踏みながら、今度はコードじゃなくて「言葉」で伝える時代に変わってきてるんですよね。

20年前のプログラミングと今のAI――技術進化の体感 スクリーンショット

ひろくん(7:31〜)

「そのうちダウンロードができるようになったり、インターネットができるようになったりすると、なかなかそういったね、今はエイヤーが考えてくれて一言こういうふうにしてほしいって言う言語の方がむしろ大事で」

本を手打ちしてた頃の私からしたら、これはもう別次元の話なんですよね。手を動かす技術より、何をしてほしいかを言葉にできる力の方が、今は圧倒的に大事になってきてる。れんくんの世代とも、また感じ方が違うんだろうなあと思いつつ、20年という時間の重みをその場でひしひしと感じた場面でした。

当時は、ホームページを作るってなったら、まずタグの意味を1個ずつ覚えるところから始まってたんですよね。閉じタグを忘れて表示が崩れたり、半角と全角を間違えて延々とエラーが出たり。当時は本当に真剣に、深夜まで机に向かってました。それが今は、思いついたことをそのまま言葉にすれば、AIが裏側のコードを全部引き受けてくれる。ボタン1つの配置に何時間も悩んでいたあの頃の自分に、この画面を見せてあげたいくらいです。れんくんも大学時代、YouTubeで検索しながら手探りでホームページを作っていた経験があるって話してくれて、そこからさらに数年でこの変化。技術の進化のスピードって、体感としてどんどん速くなってるなあ、と話しながら感じていました。しかも今日実際にCreate.xyzを触ってみて、その進化の速さを画面の前で直接体感できたのは、本当に貴重な朝だったなあと思います。いやー、20年やってきて良かった、って心底思いました。しんどかった手打ちの時代があるからこそ、この楽さのありがたみが骨身にしみるんですよね。悪いことこそ宝物、って言いますけど……あの遠回りは、ぜんぶ今日この瞬間につながってたんだなあ、と。

04

「隙間でAIコンサル」――新しい働き方のリアル

▶ この話題を動画で見る(9:57〜)

「隙間でAIコンサル」――新しい働き方のリアル グラレコ

Create.xyzでどんどんサイトが組み上がっていく様子を見ながら、私、ふと自分の働き方の話をしたんですよね。今まさにこの瞬間も、AIコンサルの仕事をしながら家事もこなしてる、っていう。

ひろくん(9:57〜)

「ほんとだから僕、家事と子育ての隙間でAIコンサルしてますよっていうのはまさにこの状態で。AIに何か作業振ってる間に朝ごはん作って振る間にまたこのスマホ上で何かちょっと」

AIに作業を振ってる間に朝ごはんを作って、また戻ってきてスマホで確認する。そういう働き方が、もう普通に成立しちゃってるんですよね。ずっとパソコンに張り付いてなくてもいい。これ、地味だけどけっこう大きい変化だなあ、と話しながら実感しました。

「隙間でAIコンサル」――新しい働き方のリアル スクリーンショット

ひろくん(8:54〜)

「本当に。本当なんだろう、誰でも作れちゃう時代。だからこそ、よりエンジニアの人たちが活躍する時代かなとも思っていて、うん一方でねあのホームページhtml触れるとできなかったっていう人が昔ホームページビルダーとかあのそういうツールアプリが出てきて誰でも作れるんいますね動画も誰でも作って編集できてスマホでショート動画とかみんなやっていますよねこれが今になったらさらにそのコートなことデータベースの仕組みを作るとか社内用のシステムを作るとか、もう業務用のシステムまで作れるような段階というか、そのうち来ると思うんですね」

ホームページビルダーが出てきた時も「誰でも作れる」って言われてたし、ショート動画も今は誰でも編集できる。それと同じ流れが、データベースや業務システムのレベルまで来つつある、って話には正直ちょっとゾッとしました。便利な反面、いつでもどこでも作業できちゃうからこそ、寝る前に思いついたらついスマホを開いてしまう。そういう怖さも、私の中にはちゃんとあるんですよね。だからこそ、朝ごはんを作る隙間、っていう区切りを自分なりに作ってるのかもしれません。

実際、今日の配信中も、AIに作業を任せてる合間に、キッチンと画面を行ったり来たりしてたんですよね。誰かに見られてるわけでもないのに、なぜか手が止まらなくて。これって裏を返すと、休憩のタイミングを自分で決めないと、いつまでも仕事モードが続いちゃう、ってことでもあるんですよね。便利さと引き換えに、自分なりの区切りを意識して作る必要がある。そんなことを、朝ごはんの匂いを感じながら考えていました。れんくんとも、便利になればなるほど怖さも増える、っていう話で盛り上がったんですけど、その感覚を持ち続けることが、AIと長く付き合っていくコツなのかもしれないなあ、と思います。実際、家事と子育ての合間だからこそ、逆に集中できる瞬間もあって。短い時間で区切られてるからこそ、余計なことを考えずにパッと判断できる、っていう発見もありました。制約があるって、実はそんなに悪いことじゃないんですよね。むしろ、限られた時間だからこそ集中できる。悪いことこそ宝物、じゃないですけど……不便に見える条件が、逆に自分の武器になっちゃうことって、あるんだなあ、と朝から気づかされました。

05

ビビ&モカGPTでコンセプトメイキング

▶ この話題を動画で見る(11:38〜)

ビビ&モカGPTでコンセプトメイキング グラレコ

ここで、私からちょっとした発表を。実は今日、Create.xyzを触りながら、自分のホームページも本気で作ってみようと思ってたんですよね。

ひろくん(11:38〜)

「いやーでもそうそうなんですよそれでホームページ作りたいなと思ってて、AI氣道と書いてアイキドウってやってるんですけど、AI氣道.jpって企画段階はできたけど止めてて。またホームページも作って、GPTs研究会もホームページないから作りたいんですけど、今日そのホームページを作りたいなと思っていて。でCreate.xyzでもいいんですけど、Wordpressでちゃんとした公式サイトっていうのを作りたいなと思っていて。いくつかAIのツールを試して良かったものがあるので、それ使って今日実際に作ってみようかなと思っているんですね」

AI氣道.jpは企画段階までは進んでたんですけど、ずっと止まったままだったんですよね。GPTs研究会もホームページが無いままだったし、いつかちゃんと作らなきゃ、と思い続けてました。で、せっかくAIツールを試せる日だから、今日この場でやってしまおう、って。ただ、ただサイトを作るだけじゃつまらないので、コンセプトのところもAIに考えてもらうことにしました。

ビビ&モカGPTでコンセプトメイキング スクリーンショット

ひろくん(11:38〜)

「でその時にコンセプトとかどういうサイトにしたらいいかっていうのも、AIに考えてもらいながらやりたいなと思ったんで。なんとれん君の猫ちゃんたち、ビビちゃんともかちゃんが活躍するAIを作って。AI氣道っていうのは、その、収益の半分を社会貢献に使うっていう目的でやってるプロジェクトなので。今はここで、ボタンの餌代にしようとか、砂代にしようとかね、ほぼ猫ちゃんのための収益分配っていうのもやっていく。その代わり、保護猫ちゃんからも猫ちゃんっていうキャラクターを借りてくるっていう」

れんくんが飼ってる保護猫、ビビちゃんともかちゃんのキャラクターを借りたGPTsに、コンセプトを考えてもらう。にゃーにゃー言いながら会議してくれるのが可愛いんですけど、出てくる中身は意外とちゃんと本質的で。「AIで愛と世界を平和に導く」っていう方向性や、遊び心を持って探求するという姿勢、縄文型ビジネスといったキーワードが、猫ちゃんGPTから次々と出てきたんですよね。れんくんも「後ろにいる猫ちゃんたちがそれをやってると思うとすげー可愛い」って言ってて、私も同感でした。そこからキャッチコピー案までまとめてもらって、最終的に「共に遊び、共に学び」っていう方向性のものを、2人で選びました。

猫ちゃんGPTが出してくれたコンセプト案を読みながら、私自身「ここまでちゃんと考えてくれるんだ」って何度も驚かされました。ふざけてるようで、実はかなり本質を突いてくる。ビビちゃんともかちゃんというキャラクターを介すことで、堅苦しくならずに議論できるのも良かったんですよね。れんくんも画面をのぞき込みながら「うんうん」ってうなずいてて、2人でGPTの提案を1つずつ確認していく時間は、地味にすごく楽しかったです。

06

「AI氣道.jp」のビジョン――AIで愛と世界を平和に

▶ この話題を動画で見る(22:34〜)

「AI氣道.jp」のビジョン――AIで愛と世界を平和に グラレコ

コンセプトとキャッチコピーが固まったところで、いよいよ本番。Create.xyzだとWordPressの形式にはならないので、WordPressサイトが作れる別のAIツールに切り替えました。

ひろくん(22:34〜)

「でいきましょうか。はい、じゃあそれももらって。じゃあこれをもとに、じゃあホームページを作っていきますね。ホームページ作るのに、クリエイトXYZだとワードプレスのサイトにはならないので、ワードプレスのサイトを作れるAIを発見したので」

コンセプトの言葉を丸ごとそのツールに入力して、住所を入れて、デザインを選んで。「AI氣道.jpって書いてアイキドウって読ませてるんですけど」って説明しながら、れんくんと一緒にデザイン候補を6つくらい見比べて。れんくんの直感で3番を選んで、あとはもういろんな機能を全部盛り込んで、作業終了。

「AI氣道.jp」のビジョン――AIで愛と世界を平和に スクリーンショット

ひろくん(25:53〜)

「はい。いろんな機能をどういうふうにつけるか、とりあえず全部入れちゃいます。はい。終了です。作業終了。あとAIが。この間に僕は朝ごはん作ったんですけど、朝ごはんはね出来上がる前にホームページできちゃうんです」

本当に、朝ごはんが出来上がる前にホームページが完成しちゃったんですよね。ダッシュボードに入れば普通にWordPressになってて、ブログ投稿もできるし、プラグインも自分でコントロールできる。日本語もちゃんと入ってる。これで、あとは自分の独自ドメインに移植すれば、AI氣道.jpの公式サイトが本当に出来上がる。れんくんも「恐ろしいですね」って何度も繰り返してましたけど、私もまったく同じ気持ちでした。

最後に、私からちょっとお伝えしたいのは、プロだからこそ必要になる部分の話です。

ひろくん(34:33〜)

「いやホームページ作成業でこれレースしてなくなりましたね、って本当にね。あのそうなんですよ。だからとはいえ、本当にプロフェッショナルなやっぱりレベルの制作は必要になってくるので。そういった部分も、逆により高度なことは、より高度なホームページ制作で必要になってくると思うんですけど。もう叩き台になる、誰でも作れるよってものは、誰でもやっぱり作れてしまうので。そのAIを使ったりツール使ったりっていうのを使ってもらうといいかなと思いますし」

叩き台のレベルは、もう誰でも作れる。だからこそ、より高度なプロの仕事の価値が、逆にはっきりしてくる。AI氣道.jpは「AIで愛と世界を平和に導く」を掲げて始まったプロジェクトですが、その一歩目が、朝ごはんを作る隙間で完成する。技術が誰の手にも届くようになるほど、何のために使うのか、誰のために作るのか、っていう部分が問われてくる。そんなことを、公式サイトが出来上がっていく画面を見ながら、しみじみ感じた朝でした。

COLUMN

ひろくんコラム — 誰でも作れる時代だからこそ、エンジニアリングの本質が問われる

ひろくんコラム:誰でも作れる時代だからこそエンジニアリングの本質が問われる

あ、そうだ。最後にちょっとだけ、個人的な話を。今日、Create.xyzとWordPressのAIツールを続けて触ってみて、あらためて思ったことがあるんですよね。20年前、私は本を1冊買ってきて、載ってるコードを1文字ずつ手打ちしてました。今は、雑な一言とスクリーンショット1枚で、公式サイトが朝ごはんの支度の間に完成しちゃう。技術としては、とんでもない進化なんですけど……不思議と、怖さと嬉しさが半々くらいで同居してるんですよね。

誰でも作れちゃう時代だからこそ、より高度なことをやる人の価値が、逆にくっきりしてくる。叩き台は誰でも作れる。でも、その先にどんな想いを乗せるか、誰のためにそのサイトを作るのか、っていうところは、結局は人が決めるしかない。AI氣道.jpの公式サイトも、猫ちゃんキャラクターに考えてもらったコンセプトも、全部「AIで愛と世界を平和に導く」っていう、私自身の願いが起点になってるんですよね。

いつでもどこでも作業できちゃうからこそ、寝る前についスマホを開いてしまう怖さもある。だからこそ、朝ごはんを作る隙間、家事と子育ての隙間、っていう区切りを大事にしたいなあ、と思います。分身AIについてもっと知りたい方は分身AI.comもチェックしてみてくださいね。

FAQ

よくある質問

Q. Create.xyzはどんなことができるツールですか?

LIVEでは、AIとの会話だけでサイトが組み上がっていく様子が紹介されていました。スクリーンショットを1枚渡すだけで、そのUIを再現してくれて、しかも見た目だけでなく編集できる状態で作られる、という点が語られています。

Q. Create.xyzで作ったものはWordPressサイトになりますか?

LIVEでは、Create.xyzで作るとWordPressの形式にはならないため、途中でWordPressサイトを作れる別のAIツールに切り替えた、と話されていました。

Q. AI氣道.jpのビビちゃんともかちゃんとは?

れんくんが飼っている保護猫のキャラクターで、AI氣道.jpのコンセプトメイキングをするGPTsとして登場しました。収益の一部を猫ちゃんのための社会貢献にあてる仕組みも語られています。

🎁 れんくんの公式LINE(Remotionテンプレ30種プレゼント)

動画で紹介された全30種類のRemotionテロップテンプレートを無料でお届け。登録するとシナリオが流れてくるよ。

📱 れんくんの公式LINEに登録

🎁 無料プレゼント

Aiport(ClaudeCode AIエージェント実践会)

ClaudeCodeでAI秘書+分身AI+AIカンパニー無料で作れるキット&解説動画をプレゼント!

▶ 無料で入会してキットを受け取る

🎁 無料プレゼント

Aiport(ClaudeCode AIエージェント実践会)

ClaudeCodeでAI秘書+分身AI+AIカンパニー無料で作れるキット&解説動画をプレゼント!

▶ 無料で入会してキットを受け取る

🤖 AI生成コンテンツについて

この記事はAIツール(Claude Code)を活用して制作しています。構成・文章生成・画像制作にAIを使用し、最終的な内容の確認・編集・公開判断はひろくん(田中啓之)本人が行っています。「分身AIひろくん」(bunshin-ai.com)とは別のコンテンツです。

関連記事