本動画は、Claude CodeとAIモデルFable 5を活用し、エージェントネイティブなデザインツールであるPaperを操作してデザイン作業を完全自動化するワークフローを実演する。Figmaに似たインターフェース上でプロンプトを入力するだけで、AIがキャンバスを直接制御する仕組みを解説。YouTubeのサムネイル画像、Instagram用のグラフィック生成、プレゼンテーション資料の自動作成など、具体的なユースケースを提示する。さらに、スクレイピングを用いたWebサイトのスタイル適用や、背景透過、テキスト置換などの高度な編集技術も紹介。最終的には、生成したプレゼンテーションを組み込んだレスポンシブなランディングページを構築し、Vercelを通じてワンプロンプトでインターネット上にデプロイして公開するまでの全工程を網羅する。
Fable 5とPaperによる新時代のデザイン
Fable 5を使ったエージェントベースのデザインという新しい世界へようこそ。ここでお見せしているのは、Fable 5を実行しているClaude Codeで、Figmaを完全に制御しています。いや、Figmaではありませんでした。これは実際にはPaperと呼ばれるエージェントネイティブ版のFigmaです。この動画では、YouTubeのサムネイル、ランディングページなどのWebサイト、Instagramのグラフィック、ドキュメント、プレゼンテーションなどのデザイン作業すべてをAIエージェントを使ってどのように行うかをお見せします。AIエージェントであるFable 5にプロンプトを出し、AIエージェント向けに作られたこのキャンバス風のアプリ上でデザインを作成させます。それでは動画本編に入りましょう。
Claude CodeとPaperのセットアップ
さて、ここにあるのはClaudeデスクトップアプリで実行されているClaude Codeです。ご覧の通り、Fable 5を実行しています。これは私がたった今入力したプロンプトです。そしてClaude Codeは、ここにあるキャンバスのようなボードを制御します。さあ、始まりました。AIエージェントが実際にこのボード上で直接プレゼンテーションを作成し始めています。私のプロンプトは、Paperの使い方に関するプレゼンテーションを作成してほしいというものでした。後ほど設定方法を紹介するスキルのおかげで、インターネットからすべての素材をスクレイピングして、プレゼンテーションに直接配置することができます。見てください。Fable 5が文字通りここでこのプレゼンテーションをデザインしています。そして、これを見てください。とてもクールなグラフィックを簡単に作成できます。ランディングページやプレゼンテーションを作成でき、こうしたグラフィックも作成してくれます。すごいですね。これが、Claude CodeがPaperのMCPサーバーにデザインを書き込む仕組みです。MCPサーバーについては後ほどお話しします。そしてClaude Codeがコンテキストを読み取ります。次のステップは、それをPaperのデザインファイルに渡すことです。これが全体の仕組みです。今のは実に役立つグラフィックでした。Paperはpaper.designでダウンロードできるデスクトップアプリです。MacまたはWindowsをお使いなら、Paperをダウンロードをクリックすれば自動的にダウンロードされるはずです。MacとWindowsの両方で動作すると思います。セットアップが完了すると、画面はこのような感じになります。そしてコンピューター上でPaperが開きます。画面の下の方に、エージェントを使用するというボタンがあるので、それを押して開始することができます。ここで簡単にできるのは、paper.design/docs/mcpというリンクをそのままコピーすることです。そして、Claudeを使用している方はClaudeデスクトップアプリに移動します。Codexでもできますし、CursorなどのAIコーディングツールでも、コンピューター上でエージェントが実行されていれば可能です。新しいチャットを開き、paper.designを制御するためにMCPサーバーをセットアップしたいと伝えます。先ほどのリンクを貼り付けると、Claudeが接続のセットアップを行ってくれます。Claude Codeにプロンプトを入力し終えたら、Claude Codeの隣でPaperを開いてください。これから接続をテストします。新しいファイルを作成して、これをRileyサイトと名付けます。そして、ボード上にhelloと入力するだけにします。これはFigmaと非常によく似たプロセスであることを覚えておいてください。Figmaを使ったことがある方なら、とても親しみやすく感じるはずです。Claude Codeさん、私がPaperで開いているボードはどれか教えてください、と伝えます。その答えを教えてもらい、Paper.designを制御できることを確認するために、シンプルで簡単なグラフィックを一つ作成してもらいます。この処理にHighモデルは使いません。Lowモデルで十分です。Fableのトークンを無駄にする必要はありませんからね。これで実行します。現在、ClaudeとPaperの間の接続をテストしているところです。
PaperとClaude Codeの連携テスト
はい、できました。これで制御できています。そして、このフレームをClaude Codeからの挨拶と名付けました。これで、Figmaに似たこのボードをClaude Codeが完全に制御できるようになりました。これらはすべてHTMLベースなので、非常に高速で高品質です。こんにちは、Riley。Claude CodeによってあなたのRileyサイトのキャンバスに直接描画されました、と書かれています。そして、青い波線が描かれました。なぜそうしたのかはよくわかりませんが、なかなかかわいいですね。これでテストは完了です。Claude CodeとPaperの接続が完了しました。本当にこれほど簡単なのです。
YouTubeサムネイルの作成
これら2つのツールを組み合わせて使う最初のユースケースとして紹介したいのは、YouTubeのサムネイルやあらゆる種類のグラフィックの作成です。Paperの内部には、画像生成機能が直接組み込まれています。ここをクリックすれば、Paperに直接組み込まれた最高峰のAI画像モデルを使用できます。そのため、ここにある非常に高品質なサムネイルを簡単に取得し、さらに私の写真を取得することができます。これら2つの写真を隣同士に並べて、このサムネイルを選択します。Shiftキーを押しながらこちらの写真をクリックして、真ん中の男性をこの人物に置き換えてください、そしてテキストをFable verse GPT 5.6に変更してください、と指示することができます。その後は、さらに多くのサムネイルを生成するだけです。これはPaperの中で直接グラフィックを反復し作成する非常に楽しい方法です。このプロセスではClaude Codeは使用されていません。しかし、高品質なYouTubeサムネイルをインポートする際に、Claude Codeが役に立ちます。それについてはすぐ後で説明します。ご覧の通り、サムネイルが生成され始めています。Paperを使えば、サムネイル内のキャラクターを私に置き換えるのがいかに簡単かおわかりいただけるでしょう。しかも、この高品質な仕上がりを見てください。では、他のYouTuberの高品質なサムネイルをどのようにしてPaperに取り込むのかという疑問が湧いてきます。ここでClaude Codeの出番です。Claude Codeに移動して、Callawayという名前の男性のサムネイルを探すように指示します。彼をご存知の方も多いかもしれませんが、私のお気に入りのYouTuberの一人です。彼のベストなサムネイル10枚、いや12枚を見つけて、Paper内のフレームにインポートしてほしいと頼みます。彼の最もパフォーマンスの高いサムネイル12枚をPaperに取り込み、画像がPaperのボード上に配置されるようにインポートしてください、と指示します。これでClaude Codeを実行できます。Claude Codeはサムネイルをスクレイピングしてボード上に配置してくれます。ご覧の通り、YouTubeサムネイルスキルを使用しています。このスキルを使用するためのリンクは概要欄に貼っておきます。デフォルトではClaude Codeはこれを行うことができませんが、概要欄にある無料のスキルを使用すれば、YouTubeからサムネイルをスクレイピングできます。AIが下の方で作業しているのがわかりますね。Callawayのトップ12 YouTubeサムネイルです。見てください。この小さなプレゼンテーションを作成し、12枚すべてをインポートしようとしています。はい、彼のサムネイルがインポートされています。これで6枚です。さらに6枚入ってくるはずです。Claudeが処理を進めているのがわかります。次の3枚が来ました。これはとても良いサムネイルですね。はい、これで彼の12枚のYouTubeサムネイルすべてが揃ったフレームが作成されました。これで私の写真をコピーして、CallawayのYouTubeサムネイルのすぐ隣に配置することができます。ここから一番気に入ったものを選ぶことができます。今回は、このサムネイルを使ってみましょう。この画像をコピーして、ここに配置します。そして実際に置き換えていきます。Callawayの画像を選択し、こちらの私の画像を選択します。スマートフォンを持っている男性をこの人物に置き換えてください、と指示します。テキストは中毒性のあるアプリとしてください。スマートフォンの中身は同じままで、App Storeのアイコンにしてくださいと伝えます。私のニッチな分野に合わせるためですね。これで実行します。はい、生成されてきました。悪くないですね。背景が変更されているのが気に入りました。見てください。今のところこれが一番のお気に入りかもしれません。しかし、AIは選べるオプションを7つも提示してくれます。これにより、アイデアを練り直し、YouTubeサムネイルの正しいフォーマットを見つけ出すことができます。
複数画像の参照と反復作業
さて、今度は複数の参照画像を使ってみましょう。先ほど取得したサムネイルを上に貼り付けました。同じ私の写真と、これら3つのアイコンを取得します。見ていてください。ここに来て、常に編集したい画像を選択します。この画像は16対9の比率です。最終的に望むアスペクト比が何であれ、それを最初に選択する必要があります。ですので、この画像を選択します。次にこちらに来て、この画像編集機能を使用します。ここでShiftキーを押しながら、ここをクリックし、ここをクリックし、ここをクリックし、ここをクリックします。これで、これらすべてが参照画像になります。テキストをあなたはまだ早いという内容に変更して、アイコンをここに貼り付けた3つのアイコンに置き換え、男性をもう一人の男性に置き換えてください、とお願いします。あとは必要な数だけバージョンを作成すれば、目の前で新しいサムネイルが生成されるのを見ることができます。はい、できました。キャラクターの背後にある照明や全体的な光の加減のせいか、なぜか暗い色調にしたかったようです。しかし、指示に付け加えることもできました。写真にあるのと同じ白い背景を維持してください、キャラクターの周りの照明を削除してください、と伝えて反復を続けることができます。おそらくキャラクターの照明のせいで暗くしたくなったのだと思いますが、これでもかなり良い出来です。はい、グラフィックが作成されました。Kaneのオリジナルのものにかなり似ていますね。どれもかなり堅実な仕上がりです。これが現在の私のYouTubeサムネイルの作成方法です。素早く反復することができます。常に他の人のサムネイルから引っ張ってくるわけではありません。過去のサムネイルを使用することもよくあります。過去にサムネイルデザイナーと一緒に仕事をしたことがあるので、それらをベースに始めることもあります。しかし、これは自分が望むコンセプトに到達するまで、本当に素早く反復するための方法です。私はこのワークフローがとても気に入っています。
Instagram用グラフィックの作成
次に紹介したいワークフローは、Instagramのグラフィックです。これについては新しいボードから始めたいと思います。そこで、これをInstagramグラフィックと名付けます。wealthというアカウントからこのInstagramグラフィックを見つけて取得しました。Paperを使えば、これと全く同じようなグラフィックを作成できることをお見せしたいと思います。テキストオーバーレイを追加して、そのテキストを直接編集したり、AIエージェントに同じテキストを直接編集させたりすることもできます。どういうことかお見せしましょう。まず自分の写真を撮って、AirDropで自分に送信します。そして、Instagramから取得したこのグラフィックのすぐ隣に貼り付けます。このグラフィックには興味深い要素がたくさんあります。テキストの後ろに黒いグラデーション効果がありますが、これはとてもクールだと思います。そこで私たちができるのは、Claudeを開いて新しいチャットに進むことです。現在開いている新しいPaperのボードを見てください、と伝えます。そして、その男性のInstagramグラフィックを作成してほしいと頼みます。新しい画像を生成しないでください、とも伝えます。男性の画像を使って、そこに見える黒いグラデーション効果を追加してほしいと指示します。画像を見ると、テキストの後ろに黒いグラデーション効果がありますよね。それから、テキストオーバーレイを追加してもらいます。そのテキストは私が編集できるようにしますが、テキストの色は白にしてくださいと伝えます。すぐ上にwealthと書く代わりに、Riley Brownと書いてください。帽子をかぶった男性の右側の画像の上でこれを行ってください、と指示します。ここでのポイントは、AIが作業している間にマルチタスクを行うことです。処理には少し時間がかかりますからね。私が何をするかというと、これを選択してShiftクリックし、これも選択します。この男性の画像を、ビデオゲームを持っているキャラクターと同じスタイルで生成してください、ただしテキストオーバーレイやその背景は入れないでください、とお願いします。背景は黒だけで、他には何も入れないでください。同じ服を着た男性で同じスタイルにして、髪型は変えないでくださいと伝えます。これでキャラクターを生成しています。はい、ここを見てください。現在エージェントがこれを作成していると思います。上にアニメーションが表示されているので、エージェントが作業中であることがわかります。こうして新しいInstagramグラフィックを作成しています。グラフィックに写真が追加されました。クールですね。これが最初のステップです。次にオーバーレイが追加されるはずです。はい、全く同じオーバーレイが追加されました。次はその上にテキストが追加されるはずです。見てください。Riley Brown、GTAアルティメットエディションを買うためにあとどれくらい働く必要がありますか、と書かれています。いいですね。では、ClaudeにPaperを制御させる方法というテキストの別バージョンを作成してくださいと頼みます。左側で生成した私の他の画像のいずれかを使用するように指示します。使用する私の正確な画像を選択したいと思います。もしこれを使いたければ、これを選択できます。ここにリンクをコピーという項目があることに注目してください。このリンクをコピーして、この画像を使ってくださいと伝えることができます。そして実行します。この小さなリンクがこのアセットを指し示しているので、使用したい正確なアセットをClaude Codeに伝えることができます。これで別のバリエーションが作成されるはずです。了解しました、あのドラマチックな暗いポートレートでバージョン2を構築しています、と返ってきました。それなら、これもコピーしましょう。これを使ったバージョンも作成してくださいと頼みます。ただし、テキストのバリエーションをいくつか考えてください。要点は、Claudeを使ってPaperを制御するという同じユースケースに対して、良いコピーにしたいということです。それから、Paperという文字を青色に変更してください、すでに作成したテキストのPaperと同じようにして、Riley Brownを同じサイズの赤色にしてくださいと指示します。さらに3つのバージョンを作成し、まだ使っていないボード上の他の生成画像を使用してくださいと伝えます。はい、できました。これを見てください。このグラフィックとこのオーバーレイがあり、こちらのスタイルと一致しています。実はこの効果を手作業で出すのはかなり難しく、以前試した時は少し面倒でした。しかしここでは、こうしたグラフィックを要求するだけで基本的に何でもできます。もう一つお見せしましょう。おっと、色を変えていますね。Riley Brownに変更するのを見てみましょう。別のバージョンも来ました。私の別の画像を使用していますね。私はもうPaperを開かない、Claudeが開くのだ、と書かれています。なかなかイケてますね。これらの画像は直接クリックすることができます。この画像をクリックして、デザイン内の画像を直接編集してくださいと伝えることができます。背景だけを変更して、クールで明るい背景にしてくださいと頼みます。そしてこれのバリエーションをいくつか生成できます。はい、この画像が生成され、明るい背景になりました。では、このグラフィック内の画像を、明るい背景を持つこのキャラクターの画像に置き換えたい場合はどうすればよいでしょうか。ただ選択してコピーするだけです。そして画像を入れたい場所をクリックして、コマンドとシフトとRキーを同時に押します。すると一瞬で、生成した画像に置き換わります。はい、Paperという文字が追加されました。Paperのブランドスタイルである青色になっています。このようにして反復作業を行い、とてもクールなInstagramのインフォグラフィックを作成することができます。これをやるのは本当に楽しいと思います。以上がInstagramグラフィックの作成方法です。素早く反復できるのが本当に楽しいです。ちなみに、これらのテキストはすべて直接編集できます。私が開かない、というテキストも直接編集できます。テキストが画像の一部になっている画像を生成しているわけではなく、直接編集できるところがとても気に入っています。Instagramのグラフィックや、その他のあらゆるグラフィックを作成したい場合には、これは本当に楽しいユースケースです。
プレゼンテーションとランディングページの作成
次にお話ししたいのは、Claude CodeとPaperを使ってプレゼンテーションとランディングページを作成する方法です。この同じキャンバスボード上で、Fable 5との同じチャットセッションを使用して行います。ここで、Fableの処理能力を少し上げて、Highに設定します。私がやりたいのは、個人的なランディングページを作成することです。作成中のこのプレゼンテーションでこれらの画像を使用する予定です。そのため、まずこれらの画像すべての背景を削除したいと思います。これも簡単にできます。ここに来て、背景を素早く削除するだけです。これを作成するサイトに配置します。ここで一つのヒントです。複数のものを参照したい場合、私はよくFキーを使用します。フレームを作成できるのです。これらの画像の周りにフレームをドラッグするだけで、私は今このフレーム上にいます。これでフレーム全体を参照できるようになり、フレームに名前を付けることもできます。たとえば、私の写真という名前にします。これにより、フレーム全体を参照できるようになりました。すべての画像のリンクをコピーする代わりに、フレームのリンクをコピーしてClaudeに渡すだけで済みます。それではこのフレームリンクを渡します。このフレームには私の写真がたくさんあります、これを使って6枚のスライドからなる高品質なピッチデックを作成してください、と伝えます。いや、ピッチデックというより、私のクリエイタービジネスを売り込むプレゼンテーションですね。私はコンテンツクリエイターであり、人々に教育を提供しています。私が非常に高品質な教育チュートリアルを作成し、YouTubeで大量のリサーチを行っていることをスポンサーに示すための資料を作りたいのです。私たちが作成したスクレイパースキルを使用してくださいと伝えます。このブランドをPerplexityのような外観にしたいと思います。彼らは素晴らしいブランドイメージを持っているので、この資料をあのスタイルに合わせたいのです。シンプルに保つことを忘れないでください。フッターは入れないでください。フッターのテキストは好きではありません。サブタイトルのテキストすら好きではありませんが、すっきりとしたヘッダー、良いデザイン、クールなグラフィック、シンプルなレイアウト、非常にシンプルな説明は好きです。余白も好きです。6枚のスライドを作成し、各スライドに私のこれらの画像を一つずつ使用してください、と指示します。このプロンプトを実行すると、Claudeが動き出し、このフレームを見てすべての画像を取得します。現在、スクレイパースキルというスキルを使用しています。これにはFirecrawlと呼ばれるAPIが使われており、インターネットを検索してあらゆるサイトからスタイルをスクレイピングし、そのスタイルをプレゼンテーションやWebサイトなど作成するあらゆるものに適用することができます。AIが構築するのを待つだけです。さあ、始まりました。現在資料を作成しています。見てください。資料を作っていますね。邪魔をしたくないのでこれらを下に移動させますが、AIが資料を構築しています。ちなみに、皆さんのFableはまだこれを理解していないかもしれませんが、最初の資料をよく確認してくださいね。画像の上にテキストが被っているので、二度とやらないでくださいと注意します。Fable 5は現在資料に取り組んでいます。見ての通り、Perplexityのデザイン、同じ色、同じフォントを取り入れ、画像を資料に配置しました。資料の1枚目です。これが表紙で、私の仕事内容が書かれています。ああ、ここにAIを使った構築方法を教えます、チュートリアル、深掘り解説、同時進行での構築、と書かれています。まさにその通りです。非常にシンプルな資料で、こういうものは大好きです。ごちゃごちゃしているのは好きではありません。クールなグラフィックをいくつか作成してくれることを期待しています。おっ、青い背景に私を配置してくれました。気に入りました。いいですね。そしてここでも、実際に処理を中断することができます。私の個人サイトの情報を渡すのを忘れていました。個人サイトから情報を取得できると伝えます。はい、うまくいきました。私の個人Webサイトを渡し、リーチの情報を更新してくれました。これで最新の状態になり、まさに望んでいた通りになりました。すべての動画の裏に何時間ものリサーチがある。素晴らしいです。リサーチ、すべてのツールのテスト、カメラの前での構築、シンプルに教える。このまま素晴らしい資料全体を完成させてくれそうです。画像も移動させてくれましたね。気に入りました。最後のスライドは背景色を変えているようですが、かなり堅実な仕上がりです。Claude Codeを使ってAIでちょっとしたスライド資料を作成するのは、これほど簡単なことなのです。
Webサイトのデプロイ
最後のおまけとして、この資料を組み込んだ個人的なサイトを実際に作成してみます。Webとモバイルの両方に最適化し、たった一つのプロンプトでインターネット上に公開します。このスライド資料全体がとても気に入りました、素晴らしい仕事です、と伝えます。次に、Webとモバイルに最適化されたランディングページであるWebサイトを作成してください。一番上にRiley Brownと表示され、その下にクールなキャッチフレーズが1行あり、さらにその下に人々がスライドを切り替えられるスライド資料があるようにしてください。このWebサイトを作成し、Vercelにデプロイしてリンクを送ってください。そうすれば実際のインターネット上で確認でき、人々に送ることもできます、とプロンプトを出します。これを実行します。はい、完了しました。サイトが完成しました。これをクリックして開くことができます。見てください。インターネットにデプロイされたWebサイトの中にスライド資料があります。riley-sponsor-site.vercel.appというサイトにアクセスすれば、Paperで作成した通り、Webサイトの中に直接スライド資料が配置されているのがわかります。AIがさらにいくつかの要素を追加しているのがわかりますね。私のWebサイトから情報を見つけて、かなり良い感じの非常にレスポンシブなWebサイトを作成してくれました。実際、私は今の自分のWebサイトよりもこちらの方が好きなくらいです。これを使うかもしれません。かなり堅実な出来栄えです。
結論と今後の展望
ということで、今回はグラフィックの生成についてお話ししました。最初にYouTubeのサムネイルについて話し、次にInstagramのグラフィックを作成し、そしてプレゼンテーションを作成しました。Claude Fableにグラフィックを作成するよう依頼するだけで、このPaperボード上に配置してくれます。さらにWebサイトも作成でき、そのWebサイトにプレゼンテーションを組み込むこともできます。それがまさに今回私たちが作成したものです。ここで作成されたサイトをご覧いただきました。セットアップは本当に簡単です。paper.designにアクセスしてサインアップするだけです。Paper上で何かを行うためにClaude Codeを使用するたびに、クレジットが消費されます。一定量を使用すると課金が開始されます。そのため、いずれかの時点でPaperのサブスクリプションが必要になります。詳細はわかりません。この動画はClaudeのスポンサーによるものではありませんし、Paperのスポンサーによるものでもありません。私は純粋にこれらのツールを、特にサムネイルやInstagramのグラフィックに多用しています。今後も自分のワークフローを構築し続け、おそらく数週間以内には、デザインにFableをどのように活用しているかについてさらに共有できると思います。私がFableを使えるようになってから、まだ4〜5日しか経っていません。まだ多くのことを学んでいる最中です。Paperの使用に関しても比較的初心者なので、ワークフローを構築していく過程で、必ずここでも共有したいと思います。それでは、この動画をご視聴いただきありがとうございました。Riley Brownでした。さようなら。
コメント