どうもカッツプロダクション代表のカッツです!最近、ClaudeさんのArtifactsを惰性で使ってます(笑)

今回は、Artifactsを実際にいろいろ試してみて、使えたこと・微妙だったことをまとめた話です。結論から言うと、スライド作りと、デザインのアイデア出しにはかなり使える。ただ、Figmaに持っていくのは手間、という感じでした。

※2026年11月時点、自分で試してみた感想ベースの話です。仕様はかなり頻繁に変わるので、最新の情報は公式で確認してくださいね。

そもそもArtifactsって?

ざっくり言うと、Claudeさんが作ったものをclaude.ai上のWebページとして見せてくれる機能です。チャットでもClaude Codeでも作れて、最初は自分だけが見られる状態。人に見せたいときはリンクで共有できます。

最近はスライドやデザインのテンプレートからも作れるようになってて、自分は主にそっちを試してます。とはいえ、まだ実戦でフル稼働、というところまではいってないです。

スライド生成は使える

一番「お、使える!」と思ったのがスライドです。試しに、カッツプロダクションの事業概要と料金プランのスライドを作ってみました。あくまで実験の叩き台ですが、見た目はちゃんとそれっぽくなるし、PDFにも書き出せました。

プロンプト例:https://example.com/ このサイトをもとに、料金プランのスライドを作って

※URLのところは自分のサイトに置き換えてください。サイトに金額が書かれていないと推測で作られるので、金額は必ず自分で確認・修正してくださいね。

事業概要のスライド

料金プランのスライド(金額は未記入の叩き台です)

ゼロからパワポで組むより、まずClaudeさんに叩き台を作ってもらって、中身を直していくほうが圧倒的に早いですね。

Webデザインやバナーのアイデア出しに使える

Webデザインやバナーのアイデア出しにも使えます。「こんな雰囲気で何パターンか」と頼むと、パッと並べて出してくれるので、方向性を決める前の壁打ちにはちょうどいいです。

Artifactsで作ったデザイン案。左は3つの料金プランをカードで並べた料金プランページのPC版、右は「Webサイト制作の料金プランを公開」と書かれた1080×1080のスクエアバナー
ふむふむ、なるほど〜!とアイディア出しにいい感じ

対話で作るやり方は、試行錯誤が早くて、案出しに強い。ただ、細部の調整や全体の統一感は、やっぱり最後は人の手で仕上げる必要があるなと感じました。

このあたりの「AIに丸投げすると見た目はいいけど中身がない」問題は、以前の記事「そのバナー・図版って生成AIに丸投げしていませんか?!見た目はいいのに中身がない問題」でも書いたので、気になる方はそちらもどうぞ。

デザインシステムの抽出はいい感じ

Artifactsで抽出したkattsu2025のデザインシステム。左にColors・Typography・Spacingなどの項目が並び、右に「コミュニケーションはフランク、品質は厳格なWeb屋」の概要とコンテンツの方針が表示されている

※デザインシステムは、色・フォント・余白といったデザインの法則性をまとめた、デザインのルール集(テンプレートのようなもの)です。

色・フォント・余白みたいなルールをまとめたデザインシステムの抽出も、いい感じにやってくれました。

で、触ってて気づいたんですが、、、これ結局、作り込んだskill(Claudeさんに渡す手順書)やん!って(笑)。機能としては別物ですが、考え方としてはskillと近いんですよね。どっちも「このルールで作ってね」と書いた文書を、Claudeさんに読ませているだけなので。

ということは、、、色やフォントのルールを普通のファイル(CSSやテキスト)で持っておけば、Geminiなど他のAIにも移植できるじゃん!と気づいてしまいました。Claude専用の形式じゃないので、そのまま渡せるんですよね(同じルールでも、従い方や出来上がりはAIごとに違うと思いますが)。

なので自分は、デザインシステムは手元にファイルで持って、gitで管理しておくのが安心かなと思ってます。Artifactsは「見せるための場所」、本体はファイル、という整理です。

Figmaに持っていくのは手間

微妙だったのがここ。作ったデザインをFigmaに持っていくのが手間です。

直接Figmaに取り込む方法は見つけられなかったので、HTMLとして書き出して、Figmaに取り込んで、、、という遠回りになります。しかも取り込んだ後の整理は手作業。

触ってて思ったのは、やっぱりデザインのオーサリングツール(デザインを作り込むための専用ツール)ではないということ。編集もできなくはないけど、Figmaみたいに細かく作り込む用途だと使い勝手が悪いです。案出しまではArtifacts、作り込みはFigma、と割り切るのが良さそうです。

ただ最近思うのは、Figmaのほうも、AIに頼んで作ってもらう機能が増えてきて、だんだんArtifactsに似てきたなということ。個人的には、Adobe税にClaude税にGoogle税に、、、とIT税(サブスク代)がまた増えるのは勘弁してほしいので(涙)、いっそArtifactsに寄せちゃうのもアリかもな、とか思っちゃってます。

ちなみにAdobe税は、印刷物の入稿にイラレ(Illustrator)と、撮影した写真の細かいレタッチでフォトショ(Photoshop)を使うので、まだ払い続けてます(笑)

念のため気をつけたいこと

Claudeさんは、頼まなくても自分でArtifactsを公開することがあります。自分も知らなかったので念のため確認しましたが、最初はちゃんと非公開でした。とはいえ、公開リンクで共有するとリンクを知っている誰でも見られるので、クライアント案件の機密データは載せないようにしましょう。

まとめ

  • スライド生成は使える。叩き台を作ってもらって、中身を直すのが早い
  • Webデザインやバナーのアイデア出しには、方向性を決める前の壁打ちとして悪くない
  • デザインシステムの抽出はいい感じ。考え方はskillと近いので、ファイルで持てば他のAIにも移植できる
  • Figmaに持っていくのは手間TT デザインのオーサリングツールではないので、作り込みはFigmaで

便利だけど謎も多い、、、でも「案出しまで」と割り切れば、かなり頼りになります。

参考になれば幸いです!ツッコミどころあれば連絡くださいね。AIの困りごとあれば相談にのれますよ!