15横
Summary
TLDRネットビジネスアナリストの横田秀珠が、Anthropic社のAI「Claude3.5」の新機能「Artifacts」を紹介。この機能により、AIと共同作業が可能で、ウェブサイト制作やデザインが直感的に行えるようになった。無料で使えるが、有料バージョンで無制限に利用可能。実際のウェブサイトのHTMLを生成し、デザインのカスタマイズも簡単。この技術は、ウェブ制作会社の仕事奪取をも暗示しており、ビジネスに直接貢献する可能性がある。
Takeaways
- 🌐 今回のトピックは、Anthropic社のClaude3.5のSonnetモデルに追加された新機能「Artifacts」についての紹介です。
- 📅 配信日は2024年6月24日月曜日に設定されています。
- 🔍 「Artifacts」はAIと共同作業を可能にする機能で、対話から協働へと役割が進化していることを示しています。
- 🆓 機能は無料バージョンでも利用可能ですが、有料バージョンでは制限が少なくなります。
- 💡 「Artifacts」を有効にするには、画面右上のプロフィールアイコンからFeature Previewを選択し、「Artifacts」をオンにする必要があります。
- 🛠️ Claude3.5Sonnetを選んで使用することで、ウェブサイトの制作やデザインが可能になります。
- 🏢 ウェブサイトの制作では、グローバルナビゲーションや左カラムのメニュー項目を自動生成することが可能です。
- 🖼️ ウェブサイトの見出しや具体的な内容を生成し、さらにHTMLファイルとしてダウンロードして使用できる機能があります。
- 📷 左カラムのトップに店長の写真を挿入することができる機能も含まれています。
- 📍 ウェブサイトのアクセス内容をカスタマイズすることができ、自分の会社情報に変更することができます。
- 🎨 見た目をカスタマイズし、例えば看板のデザインを変更することも「Artifacts」の機能の一つです。
- 🎮 Claude3.5の能力はウェブサイト制作や看板デザインにとどまらず、ゲームの作成など多岐にわたる可能性を示しています。
Q & A
「Artifacts」はどのような機能ですか?
-「Artifacts」は、AIがウェブサイトの制作やデザインなどを行うための新しい機能で、ユーザーの指示に応じてコンテンツを自動生成することができます。
「Claude3.5」とは何ですか?
-「Claude3.5」はAnthropic社が開発したAIのSonnetモデルのバージョンで、高度な機能を備えた対話型AIです。
「Artifacts」は無料版でも利用できますか?
-はい、「Artifacts」は無料版でも利用できますが、使用回数などに制限があります。有料バージョンではほぼ無制限に利用できます。
「Artifacts」を有効にするにはどうすればよいですか?
-「Artifacts」を有効にするには、画面右上のプロフィールアイコンを押して「Feature Preview」から「Artifacts」をオンにします。
「Artifacts」を使ってウェブサイトを作成する際、どのようなプロンプトを入力する必要がありますか?
-ウェブサイトを作成する際には、例えば「ネイルサロンのホームページを2カラムで制作予定です」といった具体的な要望やデザインの詳細をプロンプトとして入力する必要があります。
「Artifacts」が生成するHTMLコードはどのようにしてウェブサイトに反映させますか?
-「Artifacts」が生成したHTMLコードをウェブサイトのエディタに貼り付けることで、ウェブサイトに反映させることができます。
ウェブサイトのデザインをカスタマイズするにはどうすればよいですか?
-デザインをカスタマイズする際は、「看板の名前を「ネイルサロンよこたん」にしてください」などと具体的な変更を指示することで、「Artifacts」がそれに応じたデザインを生成します。
「Artifacts」でウェブサイトのコンテンツを生成したら、どのようにしてダウンロードできますか?
-生成されたウェブサイトのコンテンツは、「ダウンロード」ボタンを押すことでHTMLファイルとしてダウンロードできます。
「Artifacts」を使って看板を作成することはできますか?
-「Artifacts」は現在看板の画像生成までは対応していないため、テキストベースのデザインのみ生成できます。画像の生成には他のツールを使用する必要があります。
「Artifacts」の機能がウェブデザイン業界にどのような影響を与えると予想されますか?
-「Artifacts」の機能はウェブデザイン業界において、デザインの迅速なプロトタイピングやアイデアの具体化に役立つと予想されますが、専門家の感性や経験に基づくデザインには置き換えるものではないでしょう。
「Artifacts」を使ってスイカゲームを作成することはできますか?
-はい、「Artifacts」を使ってスイカゲームを作成することができます。AIはゲームのコードを生成し、ウェブブラウザ上ですぐに遊べるゲームを作成することが可能です。
Outlines
🌐 Claude3.5の新機能「Artifacts」紹介
ネットビジネスアナリスト横田秀珠が、2024年6月24日に配信した生放送でAnthropic社のClaude3.5のSonnetモデルに追加された新機能「Artifacts」について紹介。この機能はAIと共同作業が可能にし、対話から協働へ発展するという趣旨のニュースを紹介。無料バージョンでも利用可能だが、有料バージョンではより自由に使えると説明。実際の利用方法や操作内容を紹介する予定としている。
🛠️ ウェブサイト制作と「Artifacts」の応用
横田さんはClaudeの「Artifacts」機能を使ってウェブサイトの制作を行ったデモンストレーションを行い、その過程を解説。ウェブサイトの構成要素やデザインを入力すると、AIがHTMLコードを生成し、ウェブサイトの雛形を提示。さらに、看板のデザインや店長の写真の挿入、アクセス情報の変更など、具体的なカスタマイズ方法も紹介。この機能を通じて、ウェブ制作会社の仕事がAIによって奪われるとの懸念も触れている。
🎨 看板制作とClaudeの応用範囲の拡大
最後に、横田さんは「Artifacts」機能を使って看板のデザインを作成し、実際のビジネスに役立つノウハウを発信する予定であることを述べる。また、Claude3.5のアップグレードにより、ウェブサイト制作や看板作成だけでなく、ゲーム作成など、幅広い分野でAIの能力が応用されつつあることを強調。このセクションでは、AIの進化がビジネスに与える可能性と、今後の展望についても触れている。
Mindmap
Keywords
💡Anthropic社
💡Claude3.5
💡Sonnet
💡Artifacts
💡ウェブサイト制作
💡看板のデザイン
💡無料バージョン
💡有料バージョン
💡チャットAI
💡HTML生成
Highlights
ネットビジネスアナリスト横田秀珠が、2024年6月24日に配信された生放送でAnthropic社のClaude3.5のSonnetモデルの新機能「Artifacts」について紹介。
「Artifacts」はAIと共同作業できる機能で、対話から協働へと役割が進化しているとされる。
新機能は無料で使えるが、有料バージョンではより多くの回数で利用が可能。
「Artifacts」を有効にするには、画面右上のプロフィールアイコンからFeature Previewを選択し、機能をオンにする。
Claude3.5Sonnetを選択することで、ウェブサイトの制作やデザインが可能に。
ウェブサイトのグローバルナビゲーションやメニュー項目の生成が可能で、具体的な内容も提案される。
HTMLコードが自動生成され、ウェブサイトの制作が迅速に行われることが示された。
ウェブサイトの見出しや具体的な内容を仮で作成し、実際のサロンに合わせて調整が可能。
ウェブサイトのデザイン要素をカスタマイズすることができ、看板の名前変更も可能。
店長の写真をウェブサイトに貼り付ける機能が利用可能で、画像の添付も対応。
ウェブサイトのアクセス情報や連絡先をカスタマイズし、個々のビジネスに合わせたコンテンツを作成可能。
Claudeの機能を利用して、15分以内にウェブサイトを作成することがデモンストレーションされた。
デザインのカスタマイズが可能で、看板のデザインを変更し、より魅力的なウェブサイトを作成することができる。
画像生成はまだClaude3.5では未対応で、代替手段としてCanvaなどのツールが提案された。
Claude3.5のSonnetモデルは、ウェブサイト制作やデザインに加えて、ゲーム作成も可能に。
横田秀珠アナリストは、Claude3.5のSonnetモデルの新機能「Artifacts」をビジネス改善や売上アップに役立てる可能性があると語った。
Claude3.5の機能を活用して、ビジネスに役立つノウハウを発信していく予定である。
放送の最後、横田秀珠アナリストは視聴者に対してClaude3.5のSonnetモデルの新機能を試してほしいと呼びかけた。
Transcripts
皆さんこんにちはネットビジネス アナリスト横田秀珠です今日もネット
ビジネスに関する情報を生中継で15分間 お届けしてまいります今日もよろしくお
願いしますはい今日は2024年6月24 日月曜日になりましたが今日はですね先日
発表されましてXでも非常に話題になって いるAnthropic社のClaude3.5
のSonnetっていうのに新機能 「Artifacts」というものが追加になっ
たんだけどこれがやばすぎるって話につい てお話をしていきたいと思うんですけど
予定ではですねこれ1回では説明しきれ ないので2回ぐらいに分けて説明したいな
と思ってるので楽しみにしていただけばと 思ってるんですけどえまずはですね
ニュースの方ですねえこちらの方からご覧 いただきたいと思いますえ出ますでしょう
かどうぞはいこちらですねAIと共同作業 ができる「Artifacts」、チャットAI
の役割は対話から協働へっていう風に書い てるんですけどままさにねすごいこれ
ニュースいろんなとこから出してますけど ネーミングとして非常に素晴らしいなって
ことでこのですねえこちらですですねえ アスキーさんのですねニュース記事を今回
え紹介していますがこちらが始まってます ていうことでじゃ早速ねやってみましょう
ということなんですが今回のものは無料 バージョンでも使うことができるようなん
だけどかなりですね回数などに制限がある ようなんですが有料バージョンであればえ
まほぼなくですねえ使えるっていうものに なっていますはいでは早速なんですが見て
いきましょうはいClaudeの画面を出します ねそうすると何もしてないとここんとこに
「Artifacts」ていうのが表示されてる と思うんですけどこれが出てる場合はこの
Try Outっていうのを押してもらっ てえもしくはこの辺ですね押してもらえば
導入できるわけなんですけどこれをなんか 間違って消しちゃった場合ですね×って
消しちゃった場合はどうするかって言うと え画面の右上のですね自分のプロフィール
アイコン写真ですねえ押してもらうと Feature Previewってのは出てくる
と思うのでここのFeature Preview に進みましてそうすると「Artifacts」
っていうの表されてると思うのでこれを ですねオンですねえオンにしてもらうとえ
以降は何もしなくてもオッケーですはい そうするとですねどうなるかって言うと
はい自分が何かですねここで打とうとする とはいえちょっと適当にはい打とうとする
とここの特にですねモデルを選ぶこと できるんですけどここの特にClaude
3.5Sonnetを選んでくださいえ僕が 使ってる有料バージョンのOpusとかだ
とまだですね3.5のバージョンになって ないのでえこっちが本当は優秀なんです
けど今は3.5があるこっちの方が優秀に なっちゃってますということなんですねで
この右側の方に出てるこれですフラスコ みたいなマークありますねこのフラスコ
みたいなマークが出てる状態になってれば さっきのですねえ「Artifacts」っていう
のがオンになってる状態になってるんで これだけ確認してみてくださいあとはここ
のとこで打っていけばできるんです けどはいではですね早速なんですがどんな
ことができるかってことでやっていきたい と思うんですが今回のテーマはこちらなん
ですねウェブサイトの制作と看板の デザインの制作っていう話です以前にです
ねえCreate.xyzっていうサービスとか えMixoていうサービスとか紹介したん
ですけどこちらのものでももちろん ウェブサイトの制作とかできるんですけど
残念ながらですね無料バージョンの枠が 少なかったり有料バが使えなかったりと
かっていうものだったんですけど今回の ものはClaudeに搭載されてるのでほぼ
ですねまあの有料料金払っていればですね 月20ドルを払っていればえまほぼ無限に
使えると言ってもいいのでえ今回これを ですね押していきたいなっていうことで
紹介していきたいと思いますはいでは早速 なんですが今回ですねえウェブサイトをね
この時間内で作っていきたいと思いますの でよろしくお願いいたしますでは早速やっ
てみましょうはいまずですね何するかって 言うとここのとこに打たなきゃいけない
ですねということで今回はこんな プロンプトを考えてまし
たはいえネイルサロンのホームページを2 カラムで制作予定ですや2列で作るといい
ですねでページの看板下に横に並べる グローバルナビと左カラムのメニューに
並べる項目を教えてくださいとまたトップ ページの右カラム内に表示する見出しを
生成しその見出しで具体的な内容を詳しく 仮で入れてくださいというものを作ってい
ましたのではいこの文言ではい聞いてみ たいと思いますはいこれをね入れてはい
聞いてみ ますはいそうするとですね項目を作って
くれると思いますはいそうするとはい横の ナビですね横のグローバルナビの方はホーム
メニューこんなものが来てそして左からの メニューはこれこれが来てそして中身は
こんなのがいいですよってことで今出てき てると思うんですがでこの右側の方にです
ね今びょンって出てきたのはこのように ですね自動的に出てくるんですねという
ことでえこちらのものってのは中身が出 てるのかなこれ中身の方が今細かく出てる
んじゃないかなと思うんですけどでこれを ですねえウェブサイトにしてもらうわけな
んですがちょっと画面がですね小さくし ないと分かりづらいかなと思うのではい
このぐらいの大きさでやってみたいと思い ますもうちょい小さいがいいか
なはいこのぐらいでちょっとやってみたい と思うんですけどはいではですねこちらで
はいえコンテンツ案ですということで仮の のですが実際のサロンを合わせてくださ
いってことなんではいまこれでいいでしょ うっていうことではいこのでこの案で
サイトを作ってください 制作してくださいこっからがやばいですよ
ここまではChatGPTでもできます からねこっからがやばいですはいサイトを
制作してくださいとはいそうするとはい 右側見て欲しいんですけどはい右側の方に
HTMLが吐き出されていってですね たらたらたらたら書き始めてますねでこれ
で右側に今からウェブサイトが出来上がっ てくるんじゃないかなと思うんですけど
これはねやばいですよウブ製作会社の方 ですね仕事が奪われるとおなんかいい感じ
の出てきましたよねはいこんな感じで出て きましたということなんですこれ
素晴らしいですよねちょっともうちょっと 小さくした方がいいかなはいえこんな形で
出てきますそうすると今上にビューティ サロンっていうとこが看板に出てるんです
けどこれがねえできればですね自分の名前 とかのがいいかなと思うのでここを変えて
もらいましょうということでえ看板 の名前をえビューティサロン今なってです
ねま今名前言わなかったですからねはいえ を「ネイルサロンよこたん」にしてください
ちょっとかっこつけてみましょうか
に変えてくださいとに変えてくださいて いう風に行ってみ
ましょうはいそうするともう1回ですね 左側の方のHTMの生成を始めましてえ
しばらくするとできてくると今までなれば チャットGPTなんかもそうなんだけど
なんかくるくる回ってですねなんか考えて ますってなってるんだけど逆に裏側でこう
いう風に出てるよってことが見えた方がま 制作を待ってる時間もですねなんかすごい
裏で頑張ってるなってことは分かっていいですよね はい「ネイルサロンよこたん」に変わり
ましたねということでただ実際このような デザインだったらちょっとこれ格好悪い
ですねっていうことで普通あればここを ですね画像とかに変えてくると思うんです
けどまちょっとそれは後でねやってみたい と思いますがじゃ今度ですね左のメニュー
のとこにお知らせキキャンペーンとか出 てるんだけどここにねできれば店長の写真
入れたいねということで 左
カラムえ カラムの1番上
に上にえ店長の写真を入れ入てください と入れてくださいって書きますねでここ
一応添付ができるのではい添付ファイルっ ていうことではい例えば僕の店長の写真を
貼り付けてこれができるのかってことで やってみたいと思うんですけどはいこれで
送信しますはいま結論言うとできないん ですけどあのま一応ねあのこれがいずれ
できるようになるっていうことがイメージ として皆さん湧くんじゃないかなと思い
ますので一応やってみましたがはいそう するとどうなるかって言うと左上のとこに
ですねがありますよね店長の写真が 貼ってあるって状態が出てくると思うん
ですねで結局ねいつも僕言ってますけど 結局えいいじゃないですか丸く出てきて
素晴らしいね店長横たになってますね すごいね「よこたんサロン」だから「よこたん」
と分かってんだねすごいねということではい これもいいんじゃないでしょうかっていう
ことですねで下のとこなんですけどこれが なんかですねアクセスがこれが全然ですね
自分の住所になってないのでえアクセスの 内容を自分の内容に変えたいです
ねえ内容これ を書いたを以下にして
くださいということでえ当然変えられます よねと例えばえ僕の会社のホームページ
なんかのえ住所かなんかにこうしといてえ 電話マに入れましょうかなんかにしといて
えここのとこにはいこれにしましょう とはいえこれにしましょうて感じでえ入れ
ときましょうか まつまり日本語で今までホームペン
制作会社にこうしてって頼んだら分かり ましたってやり取りしてるのをAに相手が
変わっただけだからそのね日本語で依頼し てた相手のウェブ制作の会社がなくな
るって意味がよく分かるんじゃないかなと 思うんですけどまこのようにねえ直して
いきますまあとはもうですねやり取りだけ なんで文字でやり取りするだけなんでこう
やっていくとねえできていくってことが イメージして分かるんじゃないかなと思い
ますで今度1番上のですねこの看板のとこ なんですけどこれネイルサロンよくたん
じゃちょっと不細工ですねってことでえ ここのものをですね変えていきたいと思う
んですけど看板
に看板にえネイルサロン ぽいサロンらしいえ画像にしてえその
真ん中に真ん中に天明を入れてくださいと さあ果たしてこれができるのかまできれば
ですねこの画像を入れてくださいでいける と思うんですけどまやってみましょうか
はい本当はねピクセルとか指定したとこう いう風にねピクセル指定があるのでえま
これおそらくね考えていい感じでやって くると思うんでまこれはね信用してやって
みましょうかということです ねはいそうすると間もなくするとできてき
ますのでえ待ちたいなと思っているんです けどさあどうでしょう
かはいこれね生中継ですから ねはいここどこにこれ見えますかねえ
1200×300ピクルって入ってるんだ けど一応これ画像が入ってる状態になっ
てるんだけど画像の生成って現時点では できないでえここまでが限界っていう感じ
になっているんですけどであとはこの左の メニューとかの構造とかはですねもう
ちょっと詳しくしたりここ入れ替えたりと かしていけばですねえ詳しくなるって
イメージが分かるんじゃないかなと思い ますはいではですねここのとこで今日
ちょっとやりたいのははいこれ1回ですね 書き出しをしたいんですねこの右下のとこ
にありますはいこれえダウンロードって 押してもらうと今ダウンロードされました
そうするとHTMファイルがダウンロード されましたのでそうするとこんな感じです
ね実際のウェブサイトのHTMLファイル が出来上がってるのが分かると思いますえ
ここは一応画像ですよ本当はですねえに なっていますはいここまでできますね
じゃあですねちょっと実際にねあの作った ものがあるのでそれでお見せしていきたい
と思うんですけどこれさっき作ったものな んですけどえ左側あはこれで右側の方
もっと詳しくしたらこんな感じにもでき ますよねということですねで画像がこれ
入ってるイメージのものになってますが さらにはねこんなこともできますこれねえ
何をやったかって言うとちょっと拡大し ますねはいえちょっとこの辺からか
なはいこの辺からですねはい新潟駅前の車 が通る道沿いにネイルサロンをオープン
する予定です道路から入りやすい駐車場を 用意していますがそこに入りやすくなる
ような看板を作りたいのですがデザインを 書いてくださいということで依頼してみ
ましたそしたらこんな感じがどうでしょう かていうことでえ具体的にこういうことを
元に作りましたっていうことがちゃんと 説明文が書いてあってそしてこれができて
きますこれができてきますすごくないです かちょっと拡大しすぎて見えないですね
はいこれが出てくるんです ねはいちょっとリロードしますねということで
ここまでがねもうできるようになっちゃっ たんですよなので実は看板もね作れるん
ですねまあれがいいかどうかちょっと置い といてですねで結局これの後はレベルが
上がっていくって話なのでだんだん精度が 高くなっていくって話なのででさっきです
ねえこんなのもやってましたこれ何やっ たかって言うと僕のホームページの写真を
ですねここに貼り付けてそしてこれと同じ ようなホームページを作ってくださいとで
添付を参考にホームページを作ってくださ いって言ったらそっくりそのままこうやっ
てね作っていくんですよねちゃんとこれ 画像ですよ画像に書いてる文字をちゃんと
文字に起こしてで右側に写真があったから 右側にちゃんと写真に持ってきてでここ
まで作ってことはできるんですねあとは これHTMLですからこれ書き直してです
ね行けばですねこれでもできるわけですよ でこういうとこまでできるようになったん
ですよねでまあ今んところですねこの上の とこの看板を作るってとこまではちょっと
今回はできなかったですけど画像生成が まだClaudeできないんでねなので
ChatGPTなんかを使っていくともう ちょっとできるんですが例えばですね
さっき作ってみたので言う とえっと出るかなな作ったのがあるんです
けど例えばこんな感じのものとかはでき ますんでまこれCanvaで作ったのかなま
こんな感じのものを上にはめてもらえば ですねこれでできますよねとということで
はいということですね今日皆さんにえお 話ししたようにClaudeを使ってこの
15分間でここまでできるってことが 分かっていただけたんじゃないかなと思う
んですけどつまりですねこれ今やったのは そのホームページを作ると看板作
るってことをお見せしましたけど実はね僕 スイカゲームも作ったんですねウェブ
ブラウザーで僕スイカゲームを作って たらすぐ右側にスイカゲーム作ったんで
なんでまこういうこともですねすぐできる ようになりましたので素晴らしいなって
いう風に思いますので是非ですね皆さん ですねこのClaude3.5のSonnetの新機能
「Artifacts」ですねえ使ってみていただけれ ばと思っていますはい今日はですねあの
まだね実は続きがありましてこの右側に こういうことができるんであればどんな
ことができるかっていうことでビジネスに 役立つですね業務改善ではなくて売上アップ
に繋がるノウハウを僕はなるべくたくさん 発信しようかなと思っています。
今日はAnthropic社のClaudeが3.5に アップグレードされましてSonnetモデル
の新機能ですね「Artifacts」って いうものについて紹介いたしました
ネットビジネス・アナリスト横田秀珠でした ありがとうございました。バイバイ
5.0 / 5 (0 votes)