最新AI情報満載！毎日無料朝LIVE実施中！GPTs研究会では、AIツールの最新活用法を毎朝シェアしています。AI初心者の方も、ぜひAI氣道.jp無料メルマガで朝LIVEブログを毎日チェックしてくださいね。
🎬 LIVE配信アーカイブはこちら！
家事と子育てのスキマで経営する3方よしAI共創コンサルタントの田中啓之、ひろくんです。
Claude 3.7がついに登場！コーディング能力の飛躍的な進化
AIの進化は本当に早くて、少し目を離すと浦島太郎状態になってしまいますよね。今回は、ついにリリースされたClaude 3.7について、その実力を深掘りしていきます。
おはようございます！今回のGPTs研究会モーニングLIVEでは、一般社団法人ウェブ解析士協会の理事であり、新しいもの好きとして知られる積高之（積さん）をゲストにお迎えしました。積さんは、京都華頂大学の准教授も務められていて、常に最新のAIツールを使い倒しているまさに「AIの探求者」なんです。
僕もClaude 3.7を使ってみて、その進化の凄まじさに驚いている一人なんですが、積さんの視点はやっぱり鋭いんですよね。これまでのClaudeの歴史を振り返ると、3.0から始まり、3.5 Sonnet、Opus、そしてHaikuと進化してきました。正直なところ、3.5 Haikuが出たときは「軽くていいけど、そこまで話題にならなかったかな？」という印象を持っていた方も多いかもしれません。
でも、今回のClaude 3.7は違います。積さんが動画の[00:03:00]あたりで語ってくれていますが、最初は「3.5から3.7への0.2のアップデートなんて大したことないでしょ？」と思っていたんです。ところが、実際に使ってみると、特にコーディング（プログラミングコードを書く能力）において、圧倒的な進化を遂げていることがわかってきたんです。
料理で例えるなら、これまでは「美味しい家庭料理が作れるロボット」だったのが、いきなり「三つ星レストランのシェフ並みの手際でフルコースを作れるロボット」に進化したような衝撃です。特にWebデザインやアプリ開発に関わる人にとっては、まさに革命的なツールになったと言えるでしょう。
関西vs広島！仁義なき「お好み焼き論争」をAIで可視化する
さて、Claude 3.7の凄さを体感するために、今回はちょっとユニークな題材を選んでみました。それが「お好み焼き」です。
皆さんは「お好み焼き」と聞いて、どの地域を思い浮かべますか？大阪？それとも広島？実はこのテーマ、触れると火傷するほど熱い議論を呼ぶんです。動画の[00:05:00]で積さんが面白い話をしてくれました。
積さんは最近、広島に滞在されていたそうなんですが、そこで「オタフクソース」のミュージアムに行って衝撃の事実を目の当たりにしたそうです。なんと、そこに展示されていた「お好み焼きの歴史」の年表には、こんなことが書かれていたんです。
- 江戸時代・明治時代：前身となる料理が登場
- 大正時代：東京から全国へ普及
- 昭和時代：広島で一気に進化し、戦後お好み焼きとして発展
そして、大阪については「洋食が云々…」と書かれているだけで、あたかも「お好み焼きの正統進化は広島である」と言わんばかりの展示内容だったとか！これには大阪出身の積さんも「大阪の扱い、ちっちゃ！」と苦笑い。大阪人としては「お好み焼きは大阪のものや！」というプライドがありますし、広島の人たちは「広島風なんてない、これが普通のお好み焼きじゃ」と思っていますよね。
この「各地のお好み焼きの違い」という複雑な情報を、Claude 3.7を使って一瞬で分かりやすいデザインに落とし込んでみよう、というのが今回の実験です。複雑な情報をどう料理するか、AIの腕の見せ所ですね。
最強のレシピ：ChatGPT × Canva × Claude 3.7
ここからが本題の技術的なお話です。積さんが披露してくれたのは、3つのAIツールを組み合わせた「最強の時短Web制作レシピ」です。
料理を作る手順と同じように考えてみてください。
- ChatGPT：食材（テキスト情報）を準備する下ごしらえ担当
- Canva：盛り付け（デザインの見た目）を決めるスタイリスト担当
- Claude 3.7：それらを統合して実際に食べられる状態（Webサイトやコード）に焼き上げるシェフ担当
この3つを連携させることで、専門的な知識がなくても、驚くほどクオリティの高いWebコンテンツが作れてしまうんです。これまでは、デザインができてもコーディングでつまずいたり、コーディングはできてもデザインが素人っぽくなったりしていましたよね。でも、このフローを使えば、それぞれの得意分野を活かして、プロ級の仕上がりが短時間で実現できるんです。
積さんのデモを見ていると、まるで魔法を見ているようでした。それぞれのツールが独立しているのではなく、一つのチームとして機能している感覚。これがこれからのビジネスにおけるAI活用のスタンダードになっていくんだなと確信しました。
Step 1：ChatGPTで「食材」となる情報を整理する
まず最初のステップは、コンテンツの中身を作ることです。動画の[00:05:40]で積さんが実演されています。
ここではChatGPT（モデルは4oなど何でもOK）を使って、「お好み焼きの各地の違いを説明してください」と指示を出します。すると、AIが関西風、広島風、さらには静岡の「遠州焼き」などの情報をリストアップしてくれます。
ここで重要なのは、正確で構造化されたテキストデータを用意することです。料理で言うなら、新鮮で質の良い野菜やお肉を用意する段階ですね。積さんは、この出力されたテキストをコピーして、次の工程であるClaudeに渡す準備をしていました。
ちなみに、コメント欄では「遠州焼きにはタクアンが入っている」というマニアックな情報も飛び出し、AIも完璧ではない部分を人間が補足する面白さもありましたね。こういった地域ごとのニッチな情報も、AIと対話しながら深掘りしていくと、よりオリジナリティのあるコンテンツになります。
Step 2：Canvaで「盛り付け」のテンプレートを選ぶ
次に、デザインの「型」を決めます。ここで登場するのが、皆さんも大好きなデザインツールCanvaです。
積さんは「インフォグラフィック」や「Webサイト」のテンプレートを検索していました。動画の[00:09:40]あたりです。自分でゼロからデザインを考えるのは大変ですが、Canvaにはプロが作った美しいテンプレートが山ほどあります。
ここでのポイントは、テンプレートを画像（PNG）やPDFとしてダウンロードすることです。これまでは、Canvaで作ったデザインをWebサイトにするには、Canvaの機能で公開するか、画像として貼り付けるしかありませんでした。しかし、今回の方法は違います。「このデザインの見た目を再現するコードを書いて」とAIに指示するために、デザイン自体を「指示書」として使うのです。
料理で言えば、「この雑誌に載っている料理の写真と同じように盛り付けて！」とシェフに写真を見せるようなものです。視覚的な情報をAIに渡すことで、言葉だけでは伝えきれないニュアンスやレイアウトを正確に伝えることができます。
Step 3：Claude 3.7という「天才シェフ」に調理させる
さあ、いよいよ仕上げです。ここでClaude 3.7の出番です。動画の[00:10:30]をご覧ください。
手順は以下の通りです：
- Claude 3.7の画面を開く
- ChatGPTで作った「お好み焼きのテキスト情報」を貼り付ける
- Canvaでダウンロードした「デザイン画像（またはPDF）」をアップロードする
- プロンプトで「この文章を使って、このデザイン画像のようなWebサイト（またはインフォグラフィック）のコードを書いてください」と指示する
するとどうでしょう。Claudeの画面右側に「Artifacts（アーティファクト）」と呼ばれるプレビューウィンドウが開き、みるみるうちにWebサイトが組み上がっていきます！
ただの画像生成ではありません。HTMLやCSS、JavaScriptといったプログラムコードが裏側で生成され、実際にブラウザで動くWebサイトとして表示されるのです。積さんのデモでは、Canvaのおしゃれなデザインを踏襲しつつ、中身の文章はChatGPTが作ったお好み焼きの解説になっているページが一瞬で完成しました。
これ、本当に凄くないですか？これまではコーダーさんが何時間もかけて書いていたコードが、数秒から数分で出力されるんです。しかも、もし気に入らない箇所があれば「ここの色を変えて」「もっと文字を大きくして」とチャットで指示するだけで修正してくれます。
Web制作の常識が崩壊？PDFからWebサイトが一瞬で完成
さらに積さんは、応用編として「Webサイトのデザインテンプレート」をPDFでダウンロードし、それをClaudeに読み込ませる実験も行っていました。動画の[00:12:30]あたりです。
PDFを読み込ませることで、より高解像度で詳細なデザイン情報をAIに伝えることができます。結果として生成されたのは、まるでプロが制作したようなランディングページ（LP）のプロトタイプでした。
この技術があれば、例えば「手書きのメモ」や「ホワイトボードの写真」、あるいは「競合他社の参考サイトのスクリーンショット」などを元に、自分たちのコンテンツを流し込んだWebサイトを爆速で作ることができます。積さんも「このセミナー中にWebサイトぐらいすぐできますからね」とおっしゃっていましたが、決して大げさではありません。
もちろん、最終的な微調整や公開設定には人間の手が必要ですが、「0から1を作る」という最もエネルギーが必要な工程をAIが肩代わりしてくれることの意味は計り知れません。ビジネスのスピード感が劇的に変わる瞬間を目の当たりにしました。
まとめ：AIを「優秀な部下」として使いこなそう
今回のLIVE配信を通じて感じたのは、AIはもはや「質問に答えてくれる箱」ではなく、「具体的な成果物を作ってくれる優秀なパートナー」になったということです。
特にClaude 3.7のコーディング能力と、画像認識能力の高さは特筆すべきものがあります。積さんが実演してくれた「ChatGPTでネタを出し、Canvaで器を選び、Claudeで料理する」というフローは、Web制作に限らず、資料作成やプレゼン準備など、あらゆるビジネスシーンに応用できるはずです。
そして何より、こういった新しい技術を「お好み焼き論争」のような身近で楽しいテーマで実験してみる積さんの姿勢が素敵ですよね。楽しみながら使うことが、AI習得の一番の近道かもしれません。
皆さんもぜひ、今日からClaude 3.7とCanvaを組み合わせて、自分だけの「3分クッキング」ならぬ「3分Web制作」にチャレンジしてみてください！
よくある質問（FAQ）
Q1. Claude 3.7は無料で使えますか？
Claudeには無料プランもありますが、今回紹介したような高度な機能や、使用回数の制限を気にせず使いたい場合は、月額20ドルの有料プラン（Claude Pro）への加入をおすすめします。積さんも有料版を使用されていました。特に画像認識や大量のコード生成を行う場合、無料版だとすぐに制限がかかってしまうことがあります。
Q2. プログラミングの知識が全くなくてもWebサイトを作れますか？
はい、基本的には可能です。Claudeがコードを書いてくれるので、自分でタグを打つ必要はありません。ただし、生成されたものをサーバーにアップロードして一般公開するためには、ドメインやサーバーの契約など、最低限のWeb知識が必要になる場合があります。まずはClaude上のプレビュー機能（Artifacts）で動くものを作って楽しむところから始めてみてください。
Q3. Canvaのデザインはそのまま使っても著作権的に問題ないですか？
Canvaのテンプレートや素材は、Canvaの利用規約の範囲内で商用利用が可能です。ただし、Canvaのテンプレートをそのまま「自分のオリジナルデザインです」と言って販売したり、商標登録したりすることはできません。今回のように、自分のWebサイトの構成案として利用する分には問題ありませんが、不安な場合はCanvaの公式ライセンス規約を確認することをおすすめします。
この記事が参考になったら、ぜひAI氣道.jp無料メルマガに登録して、毎日の朝LIVEブログをお届けさせてください。また、AIを使って人生を変えたい方は人生が開花する30日メルマガや、自分の強みを知りたい方はあなたの富を生み出す神様タイプ診断もおすすめだよ。
いろんなAI診断を楽しみたい人は「AI診断フェス」をチェックしてみてね。ドラクエ風に楽しく本格な「ドラゴンビジネス3」も人気だよ。そして多田啓二（ただっち）のホームページはこちらからチェックできるよ。
毎週日曜日は登録制ZOOMで「WAKAコラボLIVE」を配信しているよ。詳細・登録はこちらからチェックしてね。
AI氣道の最新情報をチェックしよう
毎朝のライブで実践的なAI活用を学べる。仲間と一緒にAIの最前線を追いかけよう。
