ASADASHI
ツール速報
ツール速報2026.11.12·読了 2分·難易度: やさしい

ClaudeのアーティファクトでCanva・Figmaを解約する人が出始めている

朝の出汁版(通勤2分)

  • ポイント1: Claudeのアーティファクト機能を使ってデザインツールの代替として活用する動きが、X上の複数の発信者の間で広がっており、@id_1170573585796059136はCanvaとFigmaを実際に解約したと報告している。
  • ポイント2: プラン選択については@id_1705245651502878720がSonnetモードを中心に使えばProプランで十分と指摘しており、Maxプランへの移行を急がずに済む可能性がある。
  • ポイント3: まずClaudeのProプランでアーティファクト機能を開き、LP・バナー・簡単なUIの生成を試してみるところから始めるのが現実的な入口です。

出汁の素(深読みモード)

デザインツールの代替として使われ始めているClaudeアーティファクト

X上で、ClaudeのアーティファクトをCanvaやFigmaの代替として使い始め、実際にサブスクを解約したという報告が出ている。

アーティファクトとは、Claudeとの会話の中でHTML・CSS・JSなどのコードを生成し、その場でプレビューできる機能のこと。テキストプロンプトだけで、LP・バナー・ダッシュボードのUIといったビジュアルコンテンツを作り出せる。

注目したいのは、この動きが「デザインを外注していた人が内製に切り替えた」ではなく、「すでにデザインツールを自分で使いこなしていた人が乗り換えた」という点だ。CanvaもFigmaも、それなりのリテラシーが必要なツール。そのユーザー層がわざわざ解約を選ぶというのは、使い勝手の水準が一段階上がったことを示唆している。

現時点ではX上の個人の報告であり、全員に同じ体験が保証されるわけではない。ただ、「試す価値がある変化が起きている」という情報として押さえておきたい。

何ができて、何がまだ難しいか

アーティファクトで現実的に作れるものとして、公式ドキュメントや利用者の報告から挙げられているのは以下のようなものだ。

  • シンプルなLP(ヘッダー・CTAボタン・テキストブロック構成)
  • バナー画像の代わりになるHTML製のビジュアルパーツ
  • 簡易なダッシュボードUI
  • インタラクティブな説明資料(スライド的なもの)

一方で、現状の限界も存在する。複数ページにまたがる本格的なWebデザイン、細かいpx単位のレイアウト調整、チームでの共同編集といった領域は、まだFigmaには及ばない。印刷物・SNS向けの画像出力はCanvaのほうが直感的でもある。

「Canvaを全部置き換えられる」と受け取るより、「特定用途ではすでに代替できる」という理解が現実的だ。特に「急いでLPをプロトタイプしたい」「デザイン確認用のモックを作りたい」という場面では、Claudeのほうが速い可能性がある。

ProとMaxのどちらから始めるか

アーティファクト機能はClaudeの有料プランで利用できる。プラン選択について、X上では「Sonnetモードをメインに使えばProプランで十分」という声が出ている。

Claudeのプラン構成を整理すると、Proプランは月額約20ドル(約3,000円)で、Claude Sonnetを中心に利用できる。上位のMaxプランはClaude Opusや追加のコンテキスト長が使えるが、価格は数倍になる。

用途が「LP・バナー・UIの生成」に絞られるなら、Sonnetのアーティファクト生成能力でほとんどのケースはカバーできるという見方がある。Maxプランが必要になるのは、長大なドキュメントを丸ごと処理したい、複雑なコードのデバッグを繰り返したい、といった上位ユースケースに踏み込んでからの判断で良さそうだ。

ClaudeをAI英会話相手に使う実践法でも触れているように、Claudeはテキスト生成以外の用途でも幅広く使われ始めている。まずProプランで触ってから、必要に応じてアップグレードを検討する順序が現実的だ。

今すぐ試すための最初の一手

アーティファクトを試したい人への具体的な入口を整理する。

1. Claudeにアクセスする claude.ai にアクセスし、Proプラン(月額約20ドル)に加入する。無料プランではアーティファクトの利用に制限がある。

2. モデルをSonnetに設定する チャット画面の上部でモデルを「Claude Sonnet」に指定する。Maxプランがなくてもアーティファクトは動作する。

3. 最初のプロンプトはこう書く 「シンプルなLPをHTMLで作ってください。サービス名は○○、キャッチコピーは△△、CTAボタンのテキストは□□です」という形で投げるのが入りやすい。日本語で指示を出してそのまま動く。

4. 生成されたアーティファクトを確認する プレビューがその場で表示される。「背景色を変えて」「ボタンを中央に」など、後続のプロンプトで修正を重ねられる。

CanvaやFigmaのサブスクを継続したまま比較してみるのが安全な試し方だ。解約の判断は、実際に使ってから。

コードが読める人向け:アーティファクトをそのまま本番に持ち込む

アーティファクトで生成されたHTMLは、コードとしてそのままコピーできる。HTMLとCSSの基礎が読める人であれば、生成されたコードをNotionのエンベッド、Webflowのカスタムコードブロック、またはGitHub Pagesにそのままデプロイするといったワークフローが組める。

さらに踏み込むなら、「Reactコンポーネントとして出力して」「Tailwind CSSを使って」といった指定でフレームワークに合わせた出力も可能。デザインをClaudeに任せ、実装のコントロールは自分で持つ、という分担の仕方だ。

APIを通じてアーティファクト生成を自動化する道も技術的には存在するが、現状はGUIでのインタラクティブな操作のほうが精度が出やすい。まずは手動でのやり取りを繰り返して、どの粒度の指示が通るかを把握してから自動化を検討するのが現実的な順序だ。

元になったツイート

  • Claudeなら普通に使う分にはProプランで十分な気がしますね…。Sonnetメインとかにすれば困らないと… https://t.co/qr8E7QiZgO

  • Claudeのアーティファクトがあれば、もはやCanvaもFigmaもいらなくなって、課金してたけど解約してしまった あれはやばすぎる

  • ✨フフフフフ。 📚ここに作者・戯士堂本人が登場しましたね。 戯士堂によると、ChatGPT は文字化けがしにくく、GeminiやGrokでは文字化けするようです。 ただ、これはあくまでも戯士堂の環境下でのことでしょう。 #AI漫画 #AIMANGA https://t.co/t0kxeh6t2B

参照ソース