AIの変化は目まぐるしいですよね。数週間前にはChatGPTのGPT-4oが登場し、界隈を賑わせその性能に興奮と期待。王者OpenAIの素晴らしさを示したばかりでしたが、またその地位をひっくり返す進化が訪れました。
2024年6月21日、Claude 3.5 Sonnetの登場です。
一番の注目は「Artifact」という新機能。
これはClaude AIが作成したコンテンツを別画面でリアルタイムに確認・編集できる新機能。ユーザーとAIの協働作業が容易になり、効率的な制作が可能になります。
このニュースレター上では、わかりやすいように「プレビュー機能」と表現します。
■「Artifact」の主なポイント
この新機能により、ユーザーはClaude AIとより密接にやりとりしながら、必要なコンテンツを効率よく作成できるようになります。AIの力を借りつつ、ユーザー自身のアイデアや要望を反映させやすくなるため、より満足度の高い成果物が得られます。
今回の記事では「Artifact」の「プレビュー機能」を使った具体的な事例と方法を2点紹介します。
ここから先は機能や性能、他のAIとの比較なども紹介しますが、私がこのClaude 3.5 Sonnetに一番感動した点はこちらです。
1-5がとんでもなく高スピード・高精度で実行できる。
➔そしてリリース後の修正も爆速!
📝今回、Claude3 Sonnetの何が一番感動しているかと言うと、Claude上だけでアイデア出しからテストまでが完結できる点。
![]()
テツメモ|AI図解×検証|Newsletter @tetumemo
1- アイデア発案
2- 要件定義
3- 設計
4- 開発
5- プレビューテスト
1-5がとんでもなく高スピード・高精度で実行できる。
➔そしてリリース後の修正も爆速!
✅️例… https://t.co/A5Z1zzGPvDpic.twitter.com/wAz7ZoHAU7— テツメモ|AI図解×検証|Newsletter (@tetumemo) June 22, 2024
特に「プレビュー」機能が凄まじいです。
Claude 3.5 Sonnetならプロモーション用のLP(ランディングページ)、その営業資料の作成など、会議をしながらそのアイデアをその場で見える化し、さらに営業提案用の資料まで、かなり精度の高いカタチで作り上げられる。
📝パワポでたたき台を作っている人は今すぐやめたほうが良い。Claude 3.5 Sonnetを使えば、会議をしながらたった数分で、LPから営業提案スライドまで完成する。業務効率が10倍に上がる。特に「新人」が使えば入社初日から同期ごぼう抜きのハイパフォーマーに!
![]()
テツメモ|AI図解×検証|Newsletter @tetumemo
詳細はリプ欄へ 👇️ https://t.co/SpGd4yBJmo pic.twitter.com/KmVMpiQK2R— テツメモ|AI図解×検証|Newsletter (@tetumemo) June 22, 2024
比較サービスとして、ChatGPTにも自然言語だけでお願いすれば、PowerPointやExcel形式で出力してくれたり、ゲームを作ってくれたりなど優れたアウトプットを出してくれます。
📝GPT-4o活用事例 24選👉️順次追加予定
![]()
テツメモ|AI図解×検証|Newsletter @tetumemo
この投稿をブクマして、GPT-4oの活用事例をどんどんキャッチアップしましょう!
私のように活用事例や裏技が多すぎて試しきれない方へ
リプ欄に驚きの活用法・裏技・生の声を随時追加します
一気に「24選」紹介
これから増えていきますのでお楽しみに👇️ https://t.co/GWZP9U4wbOpic.twitter.com/kwWlzvGQwV— テツメモ|AI図解×検証|Newsletter (@tetumemo) May 14, 2024
しかし、今までChatGPTができていたのは表やグラフの見える化、またファイルの「ダウンロード」形式であって、その場でプレビューできることはかなり限定的でした。
以前紹介した記事のように、ChatGPTは他のサービスと組み合わせて”使う”ことで機能が拡張されていたイメージです。
【ノーコード革命】Gemini 1.5とGPTsで簡単字幕付け!英語動画に日本語字幕を付ける方法と事例紹介 |
|
||
|
それが、Claude 3.5 Sonnetを使えば、自然言語で指示したプログラミングも、その場でプレビューしてくれます。遊ぶこともできる。微調整も可能。
これは本当に大きな差。
サービスをまたがないだけで、作業はとんでもなく爆速になる。
しかもこれが誰でも無料で使える…、もう異常事態です。
次はClaude 3.5 Sonnetの機能や性能について、公式の記事をベースに紹介します。
Anthropic社は、その大規模言語モデルファミリーであるClaude 3.5の最初のリリース、Claude 3.5 Sonnetを発表。
Claude 3.5 Sonnetは、前世代と比べて、推論、知識、コーディング能力において大幅な性能向上を遂げ、より自然で質の高いコンテンツを生成することが可能となりました。
処理速度はClaude 3 Opusの2倍に向上し、画像理解能力も強化され、チャートやグラフの解釈など、視覚的推論を必要とするタスクに威力を発揮します。
さらに、新しい機能として追加されたArtifactsにより、ユーザーはClaudeが生成したコードやテキストをリアルタイムで確認、編集できるようになり、よりインタラクティブな作業環境が実現しました。
このArtifactがまさに「プレビュー機能」です。
Claude 3.5 SonnetのことはClaude 3.5 Sonnetに聞くのが一番!
以下のプロンプトを使って対話形式で聞いてみました。
■インプット 👇️
#説明してほしい事柄
・Claude 3.5 Sonnetについて、対話物語形式で、分かりやすく解説してください
・会話の前に説明する内容に適した架空の人物を設定し、箇条書きではじめに定義してください
・会話の内容に鉤括弧を付け、鉤括弧の前には話手も記載すること
■アウトプット 👇️
- 田中さくら:25歳、新人マーケター。AIに興味があるが、技術的な知識は乏しい。
- 鈴木健太:35歳、IT企業のプロジェクトマネージャー。Claude 3.5 Sonnetを実務で活用している。
さくら:「鈴木さん、最近話題のClaude 3.5 Sonnetって、実際どんな感じなんですか?」
健太:「ああ、Claude 3.5 Sonnetね。実はうちの会社でも使ってるんだ。驚くほど効率的だよ。」
さくら:「へえ、具体的にはどんなことができるんですか?」
健太:「例えば、会議の効率化に大きく貢献してるんだ。以前は5〜6時間かかっていた作業が、わずか15分程度で完了することもあるんだよ[1]。」
さくら:「えっ、そんなに時間短縮できるんですか?すごいですね!」
健太:「そうなんだ。特に印象的だったのは、会議中にアイデアが生まれて、その場でプロンプトを入力するだけで、サービスサイトと営業資料が完成したことだね[1]。」
さくら:「わあ、それはすごい!でも、私みたいな技術に詳しくない人でも使えるんでしょうか?」
健太:「もちろん!例えば、アプリ開発のモックアップ作成にも活用できるんだ。ペルソナ設定から始まって、カスタマージャーニーマップの作成、UIデザインまで、AIが手助けしてくれるんだよ[1]。」
さくら:「へえ、アプリ開発って難しそうだと思っていたけど、AIの助けがあれば私でもできそうですね。」
健太:「そうだね。さらに驚くべきことに、たった2分でECサイトを完成させた事例もあるんだ[1]。」
さくら:「2分!?それは信じられないくらい速いですね。」
健太:「本当にそうだよ。それに、日常生活でも役立つ機能があるんだ。例えば、レシート画像から支出カテゴリーを自動で分類・計算し、家計簿を自動作成してくれる機能もあるんだよ[1]。」
さくら:「わあ、それは便利そう!私、家計簿つけるの苦手なんです。」
健太:「そうだろう?Claude 3.5 Sonnetは本当に多様な用途に使えるんだ。ビジネスから日常生活まで、幅広く活用できるのが魅力だね[2][3]。」
さくら:「鈴木さん、ありがとうございます。Claude 3.5 Sonnetの可能性がよくわかりました。私も使ってみたいです!」
健太:「うん、きっと役立つと思うよ。新しい技術を積極的に取り入れる姿勢は大切だからね。」
ここではビジョン機能を中心に、Xでポストされた注目すべき事例を紹介します。
User Story Mapの作成やゲーム、画像変換など様々な事例が紹介されています。
こんなことまでできちゃうの?
![]()
木内翔大@SHIFT AI代表「日本をAI先進国に」𝕏 @shota7180
優れたUXで表示してくれる
Claude 3.5の「Artifacts」機能がすごい
Claude 3.5 Sonnetインタラクティブな活用事例10をスレッドで紹介:
ブックマーク保存をおすすめ↓ pic.twitter.com/TCyW7zKRj9— 木内翔大@SHIFT AI代表「日本をAI先進国に」𝕏 (@shota7180) June 24, 2024
プロレベルではないですが、現役デザイナーも唸らせる仕上がりをアウトプットします。
✨無料で使える!Claude 3.5 Sonnetがすごい✨
![]()
ミヤマ|営業部にいるデザイナー @mmmiyama_D
みなさん、今話題のAIツール、Claude 3.5 Sonnetをご存知ですか?🖥️✨
これ、かなりびっくりしました😯
もちろん全然プロレベルではないですが、この図解がたった数秒で作成できちゃいます📊⚡️… pic.twitter.com/katF4lumDQ— ミヤマ|営業部にいるデザイナー (@mmmiyama_D) June 21, 2024
3Dゲームやウェブアプリ制作、SVGアニメーション、Excelシートからダッシュボードを作成などビジネスにも有効活用事例が紹介。
AI業界を変えた衝撃的な発表から数日...
![]()
あるる ChatGPT × AIツール @chatgptair
『Claude 3.5 Sonnet』の激アツすぎる使用例を10個紹介:
ブックマーク保存をおすすめします↓ pic.twitter.com/Jc5mWXUHpQ— あるる ChatGPT × AIツール (@chatgptair) June 23, 2024
これはやばい!!!フローチャートをClaude 3.5 Sonnetの新機能『Artifacts』で作ったら過去最高の精度だった件。 pic.twitter.com/lPrKmwPNnV— Taiyo | AIで遊ぶ大学生 (@Taiyo_AiAA) June 20, 2024
![]()
Taiyo | AIで遊ぶ大学生 @Taiyo_AiAA
これ知らない人は損してる。Claude 3.5 Sonnetで作成出来るインフォグラフィックが凄い。自然言語で適当に指示して出来たSVGベースの図解をダウンロードして、Illustratorで微調整すれば本格的に資料で使える。 pic.twitter.com/DxxEfz4FtJ— KEITO💻AIディレクター (@keitowebai) June 24, 2024
![]()
KEITO💻AIディレクター @keitowebai
その他、注目すべき事例は山程ありますが、ここからは具体的な使い方を見ていきましょう!
それでは、先日ポストしたこちらについて、Claude 3.5 Sonnetとのリアルなやり取りをシェアします。
📝パワポでたたき台を作っている人は今すぐやめたほうが良い。Claude 3.5 Sonnetを使えば、会議をしながらたった数分で、LPから営業提案スライドまで完成する。業務効率が10倍に上がる。特に「新人」が使えば入社初日から同期ごぼう抜きのハイパフォーマーに!
![]()
テツメモ|AI図解×検証|Newsletter @tetumemo
詳細はリプ欄へ 👇️ https://t.co/SpGd4yBJmo pic.twitter.com/KmVMpiQK2R— テツメモ|AI図解×検証|Newsletter (@tetumemo) June 22, 2024
指示するプロンプトは非常にシンプルです。会議でディスカッションして出てきた意見をそのまま入力してみましょう!
■プロンプト ↓
以下のサービスを立ち上げます。
LPを作ってください。
#サービス
AIエージェント
- AIカスタマーサポート
- AIマーケティングアシスタント
- AIプロジェクトマネージャー
■アウトプット ↓
シンプルなプロンプトのみで最初のLPが数秒で完成しました。右側がプレビュー機能です。「今すぐ問い合わせる」ボタンにもしっかりリンク設定がされています。
承知しました。AIエージェントサービスのランディングページ(LP)を作成いたします。このサービスは、AIカスタマーサポート、AIマーケティングアシスタント、AIプロジェクトマネージャーの3つの機能を提供するものですね。
以下に、シンプルで効果的なLPの構造を提案します。HTMLフォーマットで作成しますので、必要に応じて修正や拡張が可能です。
このLPは以下の要素で構成されています:
1. ヘッダー:サービス名とキャッチフレーズ、そしてCTAボタンを配置しています。
2. サービス概要:AIエージェントサービスの全体像を簡潔に説明しています。
3. 機能紹介:3つの主要機能(AIカスタマーサポート、AIマーケティングアシスタント、AIプロジェクトマネージャー)をそれぞれ詳しく紹介しています。
4. サービスの特長:なぜこのサービスを選ぶべきかの理由を列挙しています。
5. お問い合わせセクション:興味を持った訪問者がすぐにアクションを起こせるようにしています。
このLPは、シンプルでありながら必要な情報を効果的に伝えるデザインになっています。レスポンシブデザインを採用しているので、様々なデバイスで適切に表示されます。
必要に応じて、以下のような要素を追加することで、さらに効果的なLPにすることができます:
1. 顧客の声や事例紹介
2. よくある質問(FAQ)セクション
3. 料金プランの詳細
4. デモンストレーション動画
5. ブログやニュースセクション
これらの追加要素について詳しく知りたい場合や、LPの特定の部分を修正したい場合は、お知らせください。
次に、もう少しデザインに手を加えてみましょう。
次にこのプロンプトを入れてみましょう。
■プロンプト ↓
もっとおしゃれに販売できるような完璧なSaaSのLPを作って デザインもよろしく
■アウトプット ↓
あえて雑なプロンプトを投げましたが、ここまでクオリティが上がりました。
承知いたしました。より洗練されたデザインと効果的な販売戦略を盛り込んだ、魅力的なSaaS向けのランディングページを作成いたします。最新のウェブデザイントレンドを取り入れ、視覚的にも印象的なLPを目指します。
Stylish AI Agent Service SaaS Landing PageClick to open website
このLPは以下の特徴を持っています:
1. モダンでスタイリッシュなデザイン:グラデーション背景、洗練されたカラースキーム、そして読みやすいフォントを使用しています。
2. レスポンシブデザイン:Tailwind CSSを使用し、様々なデバイスで最適に表示されます。
3. 効果的な構造:
- 印象的なヒーローセクション
- 主要機能の紹介
- サービスの特長
- 料金プラン
- コールトゥアクション(CTA)セクション
- お問い合わせフォーム
4. 視覚的要素:アイコンやカードデザインを使用し、情報を視覚的に魅力的に提示しています。
5. インタラクティブ要素:ホバーエフェクトなどを使用し、ユーザーエンゲージメントを高めています。
Claude 3.5 Sonnetを使うことで、会議中でもリアルタイムで見える化することができてしまいました。
次は営業提案資料を作ってみましょう。
さて、LPのたたき台ができたところで次は「どう売るのか?」という販売イメージです。
これも議論を進め、出てきたアイデアを提案書形式でまとめてみましょう。
■プロンプト ↓
次は営業資料を作りたいと思います。この内容をもとにおしゃれなスライドを作ってください。また費用対効果わかるようなグラフもそれなりに作ってください。業務時間の生産性削減などのグラフももっと作ってください。
■アウトプット ↓
とてもCoolに仕上がりましたが、少しサイズが小さいですね。
承知いたしました。AIエージェントサービス「AI Nexus」の営業資料として、おしゃれなスライドを作成いたします。費用対効果や業務時間の生産性向上を示すグラフも含めて作成します。
AI Nexus Sales PresentationClick to open component
このプレゼンテーションは以下の特徴を持っています:
1. モダンでおしゃれなデザイン:グラデーション背景、洗練されたカラースキーム、読みやすいフォントを使用しています。
2. インタラクティブな要素:スライドを切り替えることができ、視聴者の関心を引き付けます。
3. データの可視化:recharts ライブラリを使用して、以下のグラフを含んでいます:
- 生産性向上のラインチャート
- 費用対効果の比較バーチャート
- 業務時間最適化の比較バーチャート
4. 効果的な構造:
- タイトルスライド
- 主要機能の紹介
- データ可視化(3つのスライド)
- コールトゥアクション(CTA)スライド
5. レスポンシブデザイン:様々な画面サイズに対応します。
このプレゼンテーションを使用することで、AI Nexusの価値提案を視覚的に魅力的な方法で伝えることができます。生産性の向上、費用対効果、そして業務時間の最適化といった重要なポイントを、グラフを用いて明確に示しています。
プレゼンテーションの内容や設計をさらに調整したい場合は、お知らせください。特定のスライドの修正や、新しいデータの追加など、ご要望に応じて対応いたします。
またデザインもさらに洗練された形にしてもらいます。
■プロンプト ↓
169のサイズで、もっとおしゃれに販売できるような完璧なSaaSの営業スライドを作って デザインもよろしく
■アウトプット ↓
承知いたしました。169のサイズで、より洗練されたデザインと効果的な販売戦略を盛り込んだ、魅力的なSaaS向けの営業用スライドを作成いたします。最新のデザイントレンドを取り入れ、視覚的にも印象的なプレゼンテーションを目指します。
この新しいプレゼンテーションは以下の特徴を持っています:
1. 169アスペクト比:標準的なワイドスクリーンプレゼンテーション形式に最適化されています。
2. モダンでおしゃれなデザイン:
- グラデーション背景を使用し、視覚的な深みを追加
- 洗練されたカラースキームと読みやすいフォントを採用
- 半透明の要素を使用してレイヤー感を出し、デザインに奥行きを追加
3. 改善されたデータの可視化:
- 生産性向上のラインチャート:よりダイナミックで読みやすいデザイン
- 費用対効果の比較:円グラフを使用して直感的に理解しやすく
- 業務時間最適化の比較バーチャート:コントラストの効いた色使いで変化を明確に
4. 効果的な構造:
- インパクトのあるタイトルスライド
- 視覚的に魅力的な主要機能の紹介
- データ可視化(3つのスライド)
- AI Nexusがもたらす価値の詳細な説明
- 強力なコールトゥアクション(CTA)スライド
5. インタラクティブな要素:スライドを切り替えることができ、視聴者の関心を維持します。
6. レスポンシブデザイン:様々な画面サイズに対応しつつ、169のアスペクト比を維持します。
このプレゼンテーションは、AI Nexusの価値提案をより視覚的に魅力的かつ説得力のある方法で伝えることができます。生産性の向上、費用対効果、業務時間の最適化といった重要なポイントを、改善されたグラフィックスとレイアウトを用いて明確に示しています。
さらに、このプレゼンテーションは以下の販売戦略を組み込んでいます:
1. 問題提起と解決策の提示:各機能が解決する具体的な問題を示しています。
2. 数値による裏付け:生産性向上や費用対効果を具体的な数字で示し、説得力を高めています。
3. ベネフィットの強調:AI Nexusがもたらす具体的な価値を詳細に説明しています。
4. 強力なCTA:プレゼンテーションの最後に、明確なアクションを促しています。
この改善されたプレゼンテーションを使用することで、AI Nexusの価値をより効果的に伝え、潜在顧客の関心を引き付けることができるでしょう。
プレゼンテーションの内容や設計をさらに調整したい場合は、お知らせください。特定のスライドの修正や、新しいデータの追加など、ご要望に応じて対応いたします。
いかがでしょうか?
ここまでの流れ、実際に数分で完了しています。
これは会議中にリアルタイムで実行できてしまう内容です。
議論しながらホワイトボードにイメージを描くことがあると思いますが、その必要もなく、”今”話した意見、アイデアをそのままClaude 3.5 Sonnetに投げてみましょう!
どんどん議論が活性化しますよ♪
後半は「小学校から紙で配布された漢字プリントの写真を撮り、Claude 3.5 Sonnetでブラウザで動く「無限ドリル」を作る方法」を紹介します。
この方法をベースにClaude 3.5 Sonnetとのやり取りのコツを覚えてもらえれば、基本的な「たたき台」作りにはClaude 3.5 Sonnetが必須!という点がしっくり来ると思います。
その他、Claude 3.5 Sonnetにお願いすると、仕事の効率がUPするプロンプトを24個厳選して用意しました。「マーケティング担当者」「営業担当者」「人事担当者」「エンジニア」「デザイナー」「経営企画」と職種を分け、それぞれ数個ずつ分類しています。
誰でも無料で使えるClaude 3.5 Sonnetを使って、仕事の効率化を図っていきましょう!
ここから先は有料コンテンツです |
|
この続き:6275文字 / 画像18枚 |