GPTs LABO MORNING LIVE

Claude 3.7とCanvaでWebサイトを爆速で作る方法
お好み焼き論争を題材に、文章とデザインを別々のAIに作らせて一枚に焼き上げる|GPTs研究会 日曜あさLIVE

2025年3月9日(日)朝 GPTs研究会モーニングLIVE

CAST

多田啓二(ただっち)

AI共創ディレクター・GPTs研究会

積高之(積さん)

京都精華大学 准教授・エボラニ シニアDXコンサルタント

※この回は、新しいもの好きの積さんがClaude 3.7の使い倒し方を実演する“最新ツール検証スペシャル”

家事と子育てのスキマで経営する3方よしAI共創コンサルタントの田中啓之、ひろくん(@passion_tanaka)です。今回は、ただっち(多田啓二)と積さん(京都精華大の准教授ね)が、Claude 3.7とCanvaを組み合わせてWebサイトを爆速で作る回を紹介するね。私はこの日登壇してなくて、あとからアーカイブを見せてもらった立場なんだけど、これがもう、面白すぎた。

お題はなんと「お好み焼き」。大阪か、広島か。あの永遠の論争を題材にしながら、ChatGPTで作った文章をCanvaのデザインに合わせてClaude 3.7にコードで焼かせていく。Webサイトが、スライドが、目の前でみるみる組み上がっていくんですよ。そこをまるっと、ありのままお届けします。

この回のみどころ

  1. 0.2の進化が、別物だった:3.5から3.7。たった0.2のはずが、コードを書かせると「なるほどそういうことか」って世界が変わった
  2. 文章とデザインを別々に作る:ChatGPTで文章、Canvaでデザイン、それをClaudeでガッチャンコ。専門家を2人雇って合体させる感覚
  3. 素材が、ぜんぶだった:形はいろいろ作れる。でも最後に効くのは「どんな素材を、どう使うか」だった

最新AI情報満載!毎日無料朝LIVE実施中!GPTs研究会では、AIツールの最新活用法を毎朝シェアしています。AI初心者の方も、ぜひAI氣道.jp無料メルマガで朝LIVEブログを毎日チェックしてくださいね。

🎬 LIVE配信アーカイブはこちら!

01

「0.2の進化」を侮ってたら、別物だった話

「0.2の進化」を侮ってたら、別物だった話
▶ 配信 2:28 時点の画面

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

まずは導入から。この日のテーマは、Claude(クロード)3.7。ただっちが「久しぶりに3.7を使ってみたら、進化の凄さを感じた」って切り出して、そこに新しいもの好きの積さんが乗っかっていく、という流れなんですよ。積さんって、新しいツールが出るとどんどん飛びついて使い倒す人。だからこの人の「すごい」は、けっこう信用できる。で、その積さんが、Claudeの歴史をふり返りながらこう話してくれたんです。

積さん(2:28〜)

「皆さん、クロードって、最初の頃というのは、だいたいチャットGPTとジェミニーとクロードと、この3つの思いですよという話をずっとしてたんですけども、ハイク、ソネット、オーパスっていう、それぞれのモデルのランクがあって、ソネットの3.5が出てもすげーなーって言ってたんですけど、コーディングしている方々にとってはもう圧倒的に便利だよって、よく聞いてたんです」

この「ソネット」とか「オーパス」っていうのは、Claudeのモデルの呼び方なんですよね。同じClaudeでも、賢さと速さで何段階かに分かれてる。で、ずっと注目されてたのは「次にすごいのが出るぞ」っていう先の話だった、と。ところが、ここで積さんのトーンが変わるんです。3.7が出たとき、世間は最初みんな「0.2の差でしょ?」って薄い反応だった。私もたぶんそう思ったと思う。0.2なんて誤差じゃん、って。でも——。

積さん(2:28〜)

「3.7が出たときは、ああこんなの出たよ、久々にこんなの出しましたよね、みたいな感じでやってたんですけど、1日2日経って、1週間ぐらい以上経ってくると、担当の方が、ちょっと待てよ、これはすごいぞ、みたいな反応がすごくなってきたんです」

この「ちょっと待てよ、これはすごいぞ」って空気がじわじわ広がっていく感じ、すごく分かるんですよね。派手な発表で一気にバズるんじゃなくて、使い込んだ人から順に「あれ、これヤバくない?」って声が漏れていく。ただっちも、Claudeはもともと日本語の文章生成が得意で、好きな人はClaudeしか使わないくらいだったけど、ビジネスで実用するならどうかな、と様子を見てたタイプ。それが3.7で「ちょっと使ってみようかな」に変わったって言うんです。何がそこまで変えたのか。積さんの答えはシンプルでした。コードが書けること。その凄さが、使ってみるとひしひし来る、と。料理でいうと、いままで「美味しい家庭料理」を作ってたロボットが、急に「コースを一気に組み立てるシェフ」になった感じ。0.2じゃない。番地が変わったんですよ。ただっちも言ってたんですけど、Claudeはもともと日本語の文章生成がうまくて、アニメーションみたいな表現も含めて精度が高いから、ビジネスで実用するのに「ちょっと使ってみようかな」って気になる。私もそこ、すごく腑に落ちたんですよね。チャットGPTで足りるならチャットGPTでいい、って様子見してた人まで動かしちゃう。それって、ベンチマークの数字じゃ測れない「実際に仕事が回るかどうか」の話なんですよ。数字の0.2じゃなくて、現場での「使えるか使えないか」が、3.5と3.7のあいだでぐいっと変わった。だから世界中の担当者が、後から「ちょっと待てよ」って言い出した。私は、この「あとからジワジワ来る進化」のほうが、派手な発表よりよっぽど本物だと思ってます。

02

大阪か広島か — お好み焼き論争をAIで料理する

大阪か広島か — お好み焼き論争をAIで料理する
▶ 配信 6:25 時点の画面

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

ここから積さんの実演が始まるんですけど、選んだお題が、まさかの「お好み焼き」。AIの最新機能を見せるのに、なんでお好み焼き?って思うでしょ。でもこれが、後からじわじわ効いてくるんです。積さんは大阪出身で、いまは京都に住んでて、最近は広島に長く滞在してた。つまり、お好み焼きの三大勢力を全部またいでる人なんですよ。で、まずChatGPTに「各地のお好み焼きの違いを説明してください」って投げる。すると関西風、広島風、いろいろ出てくる。その流れで、積さんがこの論争の構図を語ってくれたのが最高でした。

積さん(9:13〜)

「大阪の人間というのは、お好み焼きというのは大阪のもので、広島のあれは広島焼きだっていうふうに思ってるんですね。広島に来ると、そんなこと全く思ってないですね。お好み焼きというのは広島のもので、その中の一つが大阪、みたいな感覚で思ってるみたいです」

この温度差、笑っちゃうけどリアルなんですよね。大阪の人は「お好み焼き=大阪、広島のは広島焼き」だと信じてる。ところが広島に行くと、誰もそんなこと思ってない。「お好み焼きは広島のもので、各地にもいろいろあるよね、大阪にもあったよね」くらいの感覚だっていう。同じ料理を、それぞれが「うちが本家」って思ってる。で、モダン焼きと広島焼きって何が違うの?ってただっちが聞くと、積さんの解説がまた丁寧で。

積さん(11:20〜)

「関西のお好み焼きっていうのは、小麦粉の生地の中に豚肉とか、最初のスタートをガーッと混ぜて、広島のお好み焼きは順番に、まず生地をひいて、豚をやって、キャベツを置いて、蕎麦を置いて、みたいな形で。まったく別物。どっちも怒りますから。広島も関西も間違うとどっちも怒りますから」

「どっちも怒りますから」って2回言うのが、もう本当だなあって。生地に全部混ぜるのが関西、層にして重ねるのが広島。まったくの別物。さらに積さんは、広島のオタフクソースのミュージアム(ソース記念館)に行ったときの話もしてくれて、そこに展示されてた「お好み焼きの歴史」の年表が、もう完全に広島目線だったらしいんです。江戸時代の前身から始まって、大正で東京から全国へ、昭和に広島で発展して、戦後お好み焼きになりました——って。「大阪はどこ行った?」ってただっちがツッコむと、積さんが「洋食が一銭洋食になって…」って苦笑い。大阪の扱いがちっちゃい、と。こういう「正解が地域で割れてる、ややこしい情報」って、実はAIに料理させるのにうってつけの題材なんですよね。論争が熱ければ熱いほど、情報が複雑に絡まってる。それを一枚のデザインにスッキリまとめられたら、AIの実力がよく分かる、ってわけです。ちなみにこの日は、お好み焼きだけじゃ終わらなくて、たこ焼きにキャベツを入れるか問題にも飛び火してました。京都のたこ焼きにはキャベツが入ってて、大阪では入れたら怒られる、なんて話まで出てきて。積さんいわく、大阪と広島は文化交流しないけど、たこ焼きのキャベツは食べたら大阪の人も「おいしい」ってなる、と。こういう脱線が全部おいしいんですよ、この回。私、聞きながらお腹すいてきました。で、笑いながら見てると、その横で積さんの手は止まってない。雑談しつつ、ちゃんとClaudeにお好み焼きの情報を覚えさせてる。次のセクションで、その複雑な話が一枚のデザインに化けていきます。

03

文章とデザインを別々に作って、Claudeで一枚に焼く

文章とデザインを別々に作って、Claudeで一枚に焼く
▶ 配信 13:00 時点の画面

▶ この話題を動画で見る(13:00〜)

さあ、ここが今日いちばんの肝。積さんのやり方は、ざっくり言うと「文章担当」と「デザイン担当」を別々のAIに作らせて、最後にClaudeで合体させる、っていう三段構えなんです。まず、さっきChatGPTに作らせたお好み焼きの文章を、Claudeに覚えさせる。次に、Canva(キャンバ)からデザインのテンプレートを持ってくる。インフォグラフィックでも、Webサイト用のレイアウトでも、好きな見た目を選んで、それをダウンロードしてClaudeに渡すんですね。手順を積さん本人の言葉で聞くと、こうです。

積さん(13:36〜)

「ここにデザインを持ってくるわけです。キャンバの中からデザインを持ってくる。これはインフォグラフィックスっていう形でテンプレートを出して、それをダウンロードする。そのテンプレートをさっきのクロードに持ってくるわけなんですよね。このデザインにしますよと、さっきの文章をこのデザインに作ってくださいとすると、ずっとコードを書いてくれるわけなんですよ」

これ、見てて「うわっ」てなりました。Canvaのおしゃれなデザインを「指示書」として渡して、中身はChatGPTで作ったお好み焼きの文章。それをClaudeが、HTMLやCSSっていうコードに書き起こして、ちゃんと動くインフォグラフィックにしてくれる。ただの画像じゃなくて、コードなんですよ。だから、そのままWebサイトにできる。ただっちが「これランディングページにも画像で入れれば…」って言いかけると、積さんは「そのまま入れていけばいい」って。ナプキンAIとかでもインフォグラフィックは作れるけど、自分の思い通りにならないことが多い。でもこのやり方なら、Canvaの好きなテンプレートをそのまま土台にできる。そこが効くんですよね。しかも、できあがったものはパブリッシュすればURLが発行されて、すぐ人に見せられる。

積さん(18:48〜)

「ダウンロードするときにPDFでダウンロードしておかないと。PNGでしたね、PDFでダウンロード。これでこのデザインが出てくるんですね。コードにできてるということは、そのままウェブサイト、もちろんこのまま公開しておくといいんですけども、編集もコーディングで編集ができる」

地味だけど、PNGじゃなくてPDFで渡すといい、っていう現場のコツ、こういうのが本当にありがたい。で、デザインの土台にWebサイト用のテンプレートを選べば、そのままサイトが組み上がる。中身が空っぽの素材ゼロ状態でも、ガワはできちゃう。ただっちが「1から入力してたらどのくらい時間かかるか…」とつぶやくと、積さんがサラッと言った一言が、この回をぜんぶ象徴してました。「このセミナー内でウェブサイトぐらいすぐできますからね」って。1時間のLIVEの、しかも雑談しながら。私、料理でいうと、レシピ(ChatGPT)と盛り付けの見本写真(Canva)を別々に用意して、シェフ(Claude)に「これ見て一皿にして」って渡してる感じだなあ、と思ったんですよ。ひとりで全部やらない。得意な人に分けて作らせて、最後に合体。これが効くんです。

04

スライドもアニメも — Claudeで作れるものが広がる

スライドもアニメも — Claudeで作れるものが広がる
▶ 配信 28:49 時点の画面

▶ この話題を動画で見る(28:49〜)

Webサイトとインフォグラフィックの次は、スライドです。積さん曰く、スライドってGammaとかイルシルとか、いろんなツールで作れる。でも、どれもテンプレートの数が限られてて、途中から全部レイアウトが似てくるんですよね。「あ、これあのツールで作ったな」って一発で分かっちゃう。あの“見た瞬間バレる感”が、けっこう辛い、と。その悩みを、積さんはこう言語化してくれました。

積さん(28:31〜)

「テンプレートの頭のトップページの何枚かは確かにテンプレートになってるんですけど、途中から全部一緒になりますね。レイアウトがほぼ一緒になっちゃうし、だいたい同じような並び方、3つポンポンポンってあって文章あるみたいな、ああいう作りに全部なっちゃうんで、見てるとこいつこれで作ったなみたいな感じがしますね」

「こいつこれで作ったな」、分かりすぎる。だから積さんは、ここでもCanvaを使うんです。Canvaでプレゼンテーションのテンプレートを選んで、18ページでも20ページでも丸ごとPDFでダウンロードして、Claudeに読み込ませる。すると、お好み焼きを題材にしたスライドが、Canvaのデザインのまま組み上がっていく。テンプレ感から抜け出せるわけです。一方、ただっちが見せてくれたのは、ちょっと毛色の違う使い方。アニメーションでした。

ただっち(40:01〜)

「やっぱり見た目がかっこいいというか、チャットGPTにはできない部分だなというところは思ったので。マーケットインとプロダクトアウトの説明を、小学生でも分かりやすいみたいな感じで、大人向けのセミナーやるときも説明が難しいので、あえてこういうふうにしちゃった方が分かりやすいかなと思って」

これ、いいなあと思ったんですよね。マーケットインとプロダクトアウトって、言葉で説明すると大人でもピンとこない。それをClaudeでアニメーションにしちゃう。動いて見えると、急に腹落ちするんですよ。ただっちは性格診断のチャットボットも、ChatGPTの画面をスクショで読み込ませて「こんなの作って」って言うだけで作ってた。スクショ1枚と、ひとことの指示。それだけでこの精度。本当だったら自分で考えてやったら相当時間がかかるものが、シンプルな2ステップでできちゃう。途中、エラーが出ても、そのエラーの画面ごと「これ直して」ってClaudeに渡すと直してくれる。作りながら直す、が地続きなんです。便利になったなあ、と素直に思いました。ただっちが言ってたのは、最初は次へボタンを押しても全然動かなくて、やりとりしつつ、その動かない部分のコードも入れてあげたら、そのまま動いた、って話。つまり、AIに丸投げして終わりじゃなくて、ちゃんと「ここがおかしいよ」って付き合ってあげると、ぐっと精度が上がる。私、ここが好きなんですよ。完全自動じゃない。人間が横についてやりとりするから、ちゃんと仕上がる。スライドにしてもアニメにしても、Canvaやスクショっていう「自分の手元にある素材」を渡してあげると、Claudeはその通りに作ってくれる。逆に言うと、渡す素材が雑だと、出てくるものも雑になる。だから、作れる幅が広がるほど、こっちが何を渡すか、が効いてくるんですよね。スライドのテンプレ感を抜け出すのも、結局は「自分のデザインの素材をちゃんと用意する」ことだった。これ、次のセクションの「素材が大事」って話に、まっすぐ繋がっていくんです。

05

結局「素材が大事」に着地した、その意味

結局「素材が大事」に着地した、その意味
▶ 配信 43:30 時点の画面

▶ この話題を動画で見る(43:30〜)

これだけ「なんでも作れる」を見せられると、最後はどこに着地するんだろう、って思いますよね。でも、この回の締めくくりが、私はいちばん好きでした。派手な機能の話じゃなくて、すごく地に足のついたところに降りていったんです。きっかけは、ただっちが見せてくれたフォーム作りの話。ChatGPTでアンケートのフォームを作って、デザインをCanvaとClaudeで作る。その「フォームを作る」と「デザインを作れる」の2つが、積さんにとって今回いちばんの発見だったらしいんです。

積さん(43:30〜)

「チャットGPTでアンケートを作る、フォームを作るね。クロードと関係ないけど、フォームを作るということと、今回デザインを作れるということが、2つ目から鱗、僕が目から鱗の一番の特徴でしたね」

「目から鱗」って、新しいもの好きの積さんが言うと、重みが違うんですよね。さんざん新しいツールを触ってきた人が、それでもまだ驚ける。そこがいいなあと。で、Google フォームをスプレッドシートと連携させるところまでやって、エラーが出たらまたそのエラーをClaudeに直させて…と進んでいく。コードを書かせて、それを貼って、実行して、ダメならまた直す。この「対話で直していく」感じが、すごく自然だったんです。そして最後、ふたりの会話が、ふっと本質に着地します。

ただっち(52:09〜)

「やっぱ素材が、いい文章作るのに、LP作るのに素材が大事だなということを今日。形じゃない、それぞれ最終形態はいろいろある。素材をどう使う、ということが大事ですね」

これに積さんも「そうですね、素材をどう使うということが大事」って重ねるんです。Webサイトもスライドもインフォグラフィックも、形はいくらでも作れる時代になった。じゃあ何で差がつくのか。素材なんですよね。どんな文章を、どんなデザインを、どう組み合わせて、誰に届けるのか。AIがガワを一瞬で作ってくれるからこそ、中身の素材がそのまま結果になる。料理でいうと、立派な厨房とプロの調理器具がタダで手に入っても、いい食材がなきゃ、いい一皿は出てこない。最後にただっちが「各県と同じように、自分個人の個性も大事ですから」って言ってたのが、じんわり残りました。お好み焼きが地域ごとに違うのと同じで、人もそれぞれ違う。その個性こそが素材なんだ、って。AIで作れるものが増えるほど、問われるのは「あなたは何を持ってるの?」っていう、すごくシンプルなところに戻ってくる。いい締めくくりの1時間でした。最後、ただっちが「皆さん今日はお好み焼きを作る家が多いんじゃないか」なんて言って、積さんも「食べたくなってます」って笑ってたのが、もう最高で。AIの最先端の話をさんざんしておいて、着地が「お好み焼き食べたい」。でもね、これが大事だと思うんですよ。すごい技術の話で終わらせず、ちゃんと自分の生活や、目の前の人の話に引きつけて終わる。積さんが「形じゃない、最終形態はいろいろある、素材をどう使うかが大事」って言ったその「素材」って、料理の食材であり、文章であり、デザインであり、その人の個性そのものなんですよね。Claude 3.7という、とんでもなく賢い調理器具を手に入れた。じゃあ、何を作って、誰に出すのか。そこを自分で決められる人が、これからいちばん強い。私はそう思いながら、このアーカイブを閉じました。

★ 初月無料・非エンジニアOK ★

IF塾 ASHURA

AIを“使う”側から“創る”側へ。
自分だけの専門特化AIツールを、自分の手で。

プログラミング未経験でもOK。毎月の開発講座+グループコンサル+AI賢者への24時間相談つき「AI開発コミュニティ アシュラ」

▶ 無料モニターに申し込む
COLUMN

ひろくんコラム — ひとりで全部、を手放したくなる回

あ、そうだ。アーカイブを見終わって、私がいちばんグッときたところを少しだけ。この回って、表向きは「Claude 3.7すごいね」っていうツール紹介なんですけど、芯にあるのは「ひとりで全部やらない」っていう考え方だったと思うんですよ。文章はChatGPT、デザインはCanva、組み立てはClaude。得意なやつに、得意なところを任せる。それを最後に一枚へ焼き上げる。これ、AIの話に見えて、じつは私がずっと大事にしてる「抱え込みOSを書き換える」って話と、まるっきり同じなんですよね。

私、昔は何でも自分でやらなきゃ気が済まないタイプだった。全部の工程を握って、全部に口を出して、結局パンクする。でもね。料理でいうと、シェフが下ごしらえも盛り付けも会計もぜんぶやってたら、肝心の味に集中できない。積さんが「素材をどう使うかが大事」って言ってたけど、これって、自分が何に集中するかを決めることでもあると思うんです。任せられるところは任せて、自分は「素材」と「誰に届けるか」に時間を使う。AIがガワを爆速で作る時代だからこそ、そこがいちばん人間らしい仕事として残る。なんてことを、ただっちと積さんの楽しそうな掛け合いを見ながら、ひとりで考えてました。任せるのは、サボりじゃない。むしろ自分の素材を磨くための、時間の作り方なんですよね。

👉 「ひとりで全部抱えない」をAIで実装する話は分身AI.comでも書いてるので、よかったらのぞいてみてね。

FAQ

よくある質問

Q. Claude 3.7で、文章とデザインを別々に作って合体させるって、どういう手順ですか?

LIVEでは、まずChatGPTで文章(お好み焼きの各地の違い)を作り、CanvaでデザインのテンプレートをPDFでダウンロードして、その両方をClaudeに渡す、という流れでした。「この文章を、このデザインで作って」と指示すると、ClaudeがHTMLなどのコードを書いて、そのまま公開できるインフォグラフィックやWebサイトにしてくれる、と実演されています。

Q. Canvaのテンプレートは、PNGとPDFのどちらで渡すといいですか?

LIVEでは、積さんが「PDFでダウンロードしておかないと」と話していました。PNGより、PDFで渡したほうがデザインの情報がきれいに伝わる、という現場の感触が共有されています。

Q. スライドを作るとき、テンプレ感が出てしまうのを避けるには?

LIVEでは、既存のスライドツールは途中からレイアウトがどれも似てしまう、という話が出ていました。その対策として、Canvaのプレゼンテーション用テンプレートをPDFでまるごとダウンロードし、それをClaudeに読み込ませてスライド化する方法が紹介されています。

Q. コードでエラーが出たときはどうしていましたか?

LIVEでは、エラーが出た画面やエラーコードをそのままClaudeに渡して「これを直して」と指示し、対話しながら修正していく様子が見られました。フォーム作りやGoogle連携でも、エラーを順番に直していけば動く、と話されています。

SUMMARY

まとめ — 道具はそろった。あとは「素材」だけ

Claude 3.7の「0.2の進化」は、ふたを開けたら別物だった。ChatGPTで文章、Canvaでデザイン、Claudeでコード化。専門家を分けて作らせて、最後に一枚へ焼き上げる。お好み焼き論争という、ゆるくて楽しい題材でそれを見せてくれた回でした。Webサイトもスライドもアニメも、ほんとに数分で組み上がっていく。

でもね。ただっちと積さんが最後にそろって言ったのは「素材が大事」だった。形はいくらでも作れる時代だからこそ、どんな文章を、どんなデザインを、誰に届けるのか——その素材と狙いが、そのまま結果になる。お好み焼きが地域ごとに違うように、人もそれぞれ違う。その個性が、いちばんの素材なんですよね。道具はそろった。あとは、あなたが何を持ってるか。そこから始まる1時間でした。

📺 日曜朝のWACAコラボLIVE — 生成AI最新ニュースまとめ

毎週日曜7:00〜/8:00〜、ウェブ解析士協会(WACA)と共催。AI最新ニュースを仲間と学べる無料ライブ。

🌐 WACAコラボLIVEに登録(無料)

🎯 AIと愛で、未来をひらく。「あいあいらぼ。」

起業家・経営者のためのAI実践型コミュニティ。AI実践ワークショップ・AIクリエイティブ会・AI目標達成会が月額5,500円で遊び放題!AIMUNIQ(株)主催。

📱 ただっちのFacebook 🌐 あいあいらぼ。

🎁 無料プレゼント

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

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

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

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

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

関連記事