Xに流れてきた、ChatGPTのDeepResearchでまとめた情報をClaude 3.7 SonnetでHTMLの資料を作成するというコンボ、試してみたらめちゃくちゃ使えたのでメモと共有です。
元ネタのポストもリンクしておきます。
元ネタのポストでは、家庭菜園デビューする前の準備として「ベランダで手軽に野菜を育てる方法」をDeepResearchで情報収集し、それをClaudeにコピペして「インフォグラフィックなHTMLの資料を作成して」とお願いしています。
それが上に貼ったポストなのですが、なかなかの出来です。見やすいですし、普通にデザインも可愛い。これでいいじゃん！という出来です。
気になって試しに自分でもDeepResearchで「最近のコメ価格の高騰の要因と今後の予測」について調べてもらったレポートを、Claude.aiの公式サービスとPerplexityでAIモデルをClude 3.7 Sonnetにして、両方で「インフォグラフィックなHTMLの資料を作って」とお願いしてみました。
その結果がこちら（HTMLで実際のページ見れます）
・Claude.ai上で作成したページ：https://www.goemon-biz.com/ai/kome-claude.html
・PerplexityでC作成したページ：https://www.goemon-biz.com/ai/kome-perple.html
どちらも普通に使えそうですが、Perplexityの方はちょっと安っぽい感じがしなくもない。残念ながらClaudeは有料プランにしていないので、回数制限がすぐ来てしまって色々と試すことができなかったのですが、Perplexity内でAIモデルをClaude 3.7 Sonnetを使うより、Claude上で作成したものの方が他の使い方含めてクオリティ高い気がしています。
ただ、エンジニアのようにガッツリ使うわけでもないので、自分はまだ有料課金はしないでいいかなぁと思っているところ。
また、参考までにChatGPT o3-mini-highでも作ってみました。
・ChatGPT o3-mini-highで作成したページ：https://www.goemon-biz.com/ai/kome-chatgpt.html
あら、全然ChatGPT o3-mini-highでもいい感じかもですね。
さらに試しに、ChatGPTで「下記のレポートをプロのデザイナーが作ったようなデザインに、インタラクティブな要素を加え、見やすくて見ていて楽しいインフォグラフィックなHTML, CSS, Javascriptを使った資料にして」とお願いしてみたら、こんなのができました。
・ChatGPT o3-mini-highで作成したページ②：https://www.goemon-biz.com/ai/kome-chatgpt2.html
グラフやアコーディオンは追加されましたが、なんか思ったよりレポート感が増しちゃいましたね。ここらへんのプロンプトは要検討です。
出力されたHTMLに対して、改善して欲しい箇所と参考サイトなんかをチャットで伝えて何往復かやり取りすれば、もっと良いのが簡単にできると思うので実務などで使う場合にはもう少し時間をかけた方が良さげですね。
しかしながら、このDeepResearch×ClaudeでHTML資料作成は使い方によっては活躍しそうですね。純粋に見ていて楽しいですし、このブログ記事みたいになにかの説明のためにインフォグラフィックHTML資料を作ってリンク置いておくだけでコンテンツの質が上がりそうです。
またなにか面白い使い方を知ったら、試して共有します。