Fable 5を活用し、デザインやアニメーションが組み込まれた高品質なウェブサイトを自動生成する手法を解説する。モデルの自律性を最大限に引き出すため、詳細な手順を指示するのではなく、目的と検証手段のみを与えるプロンプト設計が鍵となる。PinterestやHigsfield MCPなどの外部ツールを連携させることで、3D表現や変数フォント、ミニゲームを含む多様なサイトが短時間で並列生成される。AIによる静的ページから動的体験への移行が示されており、生成されたリソースやプロンプトの具体的な活用法も提示されている。
Fable 5によるウェブサイトの自動生成
皆さんご存知の通り、Claude Fable 5がさらに5日間使えるようになりました。そこで今回は、Fable 5を使って、徐々に品質が向上するウェブサイトを無限に量産するシンプルで簡単な方法をお見せしたいと思います。私はかなり面白い実験を行いました。それは、写真や動画のライブラリなど、必要なあらゆる手段を使って、Fable自身が最高品質だと考えるウェブサイトをデザインさせるというものです。そして、その最終的な結果は本当に驚くべきものでした。ここで素晴らしいのは、私がFableに対して特定の方法で作業するように頼んでいないということです。特定の構造も与えていません。このモーションデザイン、動画デザイン、画像デザインなど、すべてを完全に自律的に行ったのです。ですから、私がプロンプトで指示しなければならなかったことは実は何もありません。この動画を作っているのには2つの理由があります。1つ目は、皆さんが好きなものをデザインするために使えるように、これらのウェブサイトをすべて提供したいということです。また、ウェブサイトを作成するために私が使ったプロンプトも提供したいと思います。これは私のサイトのガイドルートで見つけることができます。これをFableではない他の少し劣るモデルにコピーアンドペーストして、私がこれらすべてを構築するために費やしたコストとの差額を利用することもできます。しかし2つ目の理由として、本当に高品質なサイトを作るために、4つや5つのステップからなるフレームワークのようなものは実際には必要ないということを皆さんにお見せしたかったのです。YouTubeの多くのクリエイターがおそらく言っているような、これを定義して、次にこれをして、その次にこれをする、といった指示は必要ありません。必要なのは、Fableの邪魔をしない方法を見つけることだけです。モデルの知能に干渉するのをやめて、本当に素晴らしいことを実現させる方法を見つける必要があります。これを1週間ほど実行して、これらのサイトを1万個デザインし、すべて無料で皆さんに提供しようと計画しています。それはすべて実行するつもりです。しかし、その前に、皆さんが自宅でこのようなものをどのように再現できるかをお見せしたいと思います。それがこの動画を録画しようと思った理由です。重要なのは、サイトをデザインすることではありません。すべてのサイトをデザインするプロンプトをデザインすることなのです。
自律的なデザインを促すプロンプト
それでは、実際のプロンプトをご紹介します。これは私が一言一句違わずにモデルに与えたものです。私はFableを使って25個のウェブサイトを構築し、ウェブデザイン、テイスト、芸術的センスにおけるその極めて高い能力を実証したいと考えています。その後、それについての動画を録画し、50万人以上の人々に私の意見を伝えたいのです。各ウェブサイトは根本的に異なるものにし、高度な視覚的テクニックの組み合わせを取り入れてください。その中には、高品質な3D技術、別世界のように美しいアニメーション、卓越したカラーパレット、斬新で興味深いフォントスタイルなど、あなたが自分のスキルを披露するために適切だと考えるあらゆるものを含めてください。あなたは多くのワークフローを用いて、多くの方法でこれを達成することができます。たとえば、Pinterestで画像をダウンロードし、ここで私のメールアドレスを渡しています。あなたがキーを持っているGPT image 2を使って、似ているけれども異なる画像を生成してください。数十のアニメーションモデルを含むClingなどのモデルにアクセスできるHigsfieldのMCPを使ってそれらをアニメーション化し、それらを主要なアセットとして使用してください。また、高度なモーションディゾルブスタイルのウェブサイトからインスピレーションを得ることもできますし、あなたの能力を最もよく示せると信じる方法でデザインするための完全な創造的自由があります。おそらくこれが最も重要な部分の一つですが、25個のウェブサイトすべてが完成したら、それらをNetlifyに配置してほしいのです。これは私がホスティングに使っているサービスで、その後私にリンクを提供してください。また、他の人も同じことができるように、ガイドルートでどのように行ったかの簡単な説明を追加してください。各サイトを承認する前に、少なくとも3回の反復パスを必ず実行してください。反復パスとは、サイトを完成させた後、デザイン上の問題や、デザインを改善して複雑にする機会などを探すために、細かいところまで徹底的に確認する作業のことです。これは非常に多くの人に見られることになり、私はあなたに十分なクレジットを与えます。ですから、夢中になって、あなたの能力を世界に示してください。ガイドルートと3回の反復パスを備えた、Netlifyでホストされる25個のウェブサイトがあなたの目標です。完全に自律的に作業し、すべてが完了するまで私には何も尋ねないでください。
モデルの知能を最大限に引き出す
その後、モデルは20分から25分ほど作業を続けました。作業を並列化するために多数の独立したサブエージェントを生成し、それらすべてが同時に完了するようにしました。そして、見ての通り、これだけです。25個のウェブサイトというこの並列化アプローチでウェブサイトあたりの時間を実際に計算してみると、それぞれ1分ほどしかかかっておらず、本当に驚かされます。なぜなら、繰り返しになりますが、昔はこれにはるかに長い時間がかかり、はるかに困難だったからです。ですから、以前にも言ったように、重要なのはモデルの邪魔をしないことです。モデルは、あなたが望むことをほぼ何でも実行できるほど十分に賢いのです。今、あなたに必要なのは、自分の持っている要望を適切に言語化し、モデル自身に自分の作業を検証する何らかの手段を与えることだけです。それさえ用意して、いくつかのツールへのアクセスを与えれば、出力の品質に驚かされることでしょう。こんなことすらできるなんて、全く想像もしていませんでした。これは驚くべき3Dパーティクルスウォームを思いつきました。そして、人々が発見した高品質なアート作品のような既存のアーティファクトをマッピングし、それをゆっくりと回転する宇宙のようなものに変換したのです。つまり、これはスプライト全体を生成したのです。それだけではありません。なんとビデオゲームまで作ってしまいました。ですから今、私は文字通りサイト上に小さなミニゲームを持っています。お分かりのように、私はこれらには一切関与していません。このデザインスタイル全体は、たくさんのピンを作成して地面に置き、これらの文字を通して反復するというものでした。当然、これを好きなだけ多くの文字にすることもできます。こちらのサイトは、可変フォントウェイトを使用し、サイズをゆっくりと変化させています。タイトルの方を見ると、こんなものを今まで見たことがあるでしょうか。非常に印象的です。これは私のコンピュータで直接本物のシェーダーを実行しています。これが最もパフォーマンスの高いウェブサイトになるでしょうか。おそらくそうではありません。しかし当然ながら、これが物事の進む方向なのです。静的なスクロールウェブサイトから、体験へと移行しつつあります。なぜなら、私たちは今やAIに文字通りこれらのクールな宇宙などをデザインさせる能力を持っているからです。私たちがこんなことをできるなんて、実際狂っていると思いますし、皆さんは文字通り、私のサイトのガイドにアクセスして入力するだけで、私がここで提供したすべてをコピーアンドペーストすることができます。それを行った後は、本当にただモデルに独自の作業をさせるだけであり、ほとんどの場合、モデルは自分でこれを行う方法を知っていますが、その出力をテストするだけでよいのです。
外部ツールの統合と自律的な検証
さて、私の場合はこれをGhosttyで行っています。これはターミナルビューのようなもので、基本的にはそのため、多くの人がクラウドのデスクトップアプリで行うような視覚化のための組み込みの方法がありません。そこで私がやったこと、そしてもし皆さんが似たようなことをしているならできることは、Chrome DevTools MCPのようなものへのアクセスを与えることです。これは単にウェブページを開いてそのウェブページ上で操作を行えるようにするツールです。しかし、Googleで検索してダウンロードできるClaudeのデスクトップアプリを使っているなら、そうする必要はありません。今ではすべてがそれくらい簡単になっています。モデルはプロセスを進め、そして実際にあなたのすぐ隣で直接ライブのデモを立ち上げ、そのすべての検証を自動的に行います。ですから、何らかの形の検証機能が組み込まれている限り、モデルに好きなようにやらせておけば大丈夫です。その次にすることは、いくつかのツールを与えることです。私の場合、基本的には、Pinterestが使えるから、使いたければPinterestに行ってくれと言っただけです。Pinterestへのアクセスを与えた理由は、そこにはただかっこいい画像があるからです。ソプラノズみたいなものもあります。スパイダーマンもあります。本当にかっこいい美学のようなものがあります。そしてそのアイデアは、もしモデルが何らかの理由でインスピレーションを必要とするなら、それを手に入れることができるということです。私の主なソースであったPinterestの次に、Higsfield MCPへのアクセスを与えました。ご存知ない方のために説明すると、Higsfield MCPは基本的に、高品質で非常に様式化された画像や動画のパイプラインの膨大な数にモデルがアクセスできるようにするものです。なぜ私がそんなことをしたかというと、モデルがこのようなかっこいい動画を生成し、それを自動的に挿入できるようにするためです。あるいは、モデル自身が独自のフォントを生成し、そのフォントを使ってスクリーンショットを撮り、それを何らかのパーティクルスウォームに変えることができるようにするためです。または、このようなビデオゲーム用のアセットを生成できるようにするためです。私が言いたいのは、これらのもののテイストは私のテイストよりも優れているということです。それなら、なぜ私が、そのものがどのように見えるべきかについて、自分自身のトップダウンの信念を押し付けようとする必要があるのでしょうか。そして私は目標を与えましたが、目標は特別なものではありません。目標は単に、自律的に働き続けるように促すための方法にすぎません。そして私がそうしたのは、率直に言って私が怠惰だったからです。私は別の部屋に行って、Netflixでガールフレンドと一緒にDarkのエピソードを見ました。そして戻ってきたとき、これらの素晴らしいウェブサイトがすべて完成していたのです。
生成されたウェブサイトの例と今後の展開
皆さんのために、これらのクールなサイトのいくつかをざっと紹介していきます。そして、皆さんは私のサイトのガイドにアクセスするか、あるいは私がこれらのすべてに加えてさらに多くのリソースへのリンクを貼っている下の概要欄を見ることで、先ほど述べたようにこのようなものを利用することができます。つまり、はい。私は文字通りこれをコピーして何にでも貼り付けることができ、そうすれば全体を再デザインしてくれるでしょう。単一のHTMLファイル、Three.js R160、フランシス・イタリック、スペース・グロテスク、すべてのフロー、フロートなど、これはプロのデザイナーが少しプロではないデザイナーに何かを渡しているようなものです。ですから、もし皆さんがこの種のアイデアを少し劣るモデルで試してみたいのであれば、絶対に可能です。私はこのウェブサイトがとても気に入っています。これは本当にかっこいいと思います。これは基本的には、新生代、中生代、古生代といった様々な時代についての歴史のウェブサイトです。発音の仕方は分かりませんが、見ての通りかなりクリーンな仕上がりですよね。こちらのウェブサイトはMurmurと呼ばれています。そのアイデア全体は、読むために近づくということです。近づくというのは、背景でこの種の効果が発生していて、すべてが少しぼやけていてよく分からないのですが、その後視界に統合され、形が安定するという意味です。しかし、背景にはスタティコンという小さなアプリがあります。それはたくさんのノイズを再生し、海のような音がします。ですから、これは灯台のようなアイデアであり、ここにはいくつかの詩もあります。私はあなたが細くなったテープのように息を巻き戻し、意味を通り越してしまった音を保っています。こちらにはたくさんのモーションサイトやインタラクティブなサイトがあります。私のお気に入りはこれまで皆さんにお見せしたものですが、オーディオリアクティブなものもあります。そこではモデルが処理を行い、ここのシンプルなシステムを使ってウェブサイトの束を合成したのだと確信しています。5分42秒、6分11秒。これらのいずれかを再生すると、実際にオーディオビジュアライゼーションのプレビューが変化します。
様々な目的で人々がこれを使用しているのを確実に想像できます。こちらにあるのは、手続き型で3D生成された都市の風景の中を飛び回るようなもので、なかなかかっこいいです。私はこちらのウェブサイトがとても気に入っています。これはアルバムカバーのサイトのようなものです。とてもノスタルジックな雰囲気などがあります。すみません、これは私のChrome DevTools MCPがポップアップを出しているだけです。ご存知の通り、基本的には無限の数のこれらを体験することができ、私はこのライブラリにものを追加し続けるつもりです。私がこれについて気に入っているのは、クールなことを起こすために非常にシンプルなモーションアニメーションを利用している点です。これはミレニアム2000のウェブサイトで、まさにY2Kといった感じです。今時、ある製品の周りを自動的に軌道を描いて回るような3Dの製品ウェブサイトを作るのがどれほど簡単か考えてみてください。この製品はAIによって生成されました。テクスチャはそのためのものです。これはAIのテキストから3Dへの変換モデルを使用してこの椅子を生成しました。私の知る限り、これは斬新な椅子かもしれません。これまでデザインされたことのないものです。ゆっくりと回転する1万個のこれらを備えたShopifyのウェブサイトを立ち上げ、人が欲しいものを選び、そして明らかにクリーンアップされたこの仕様書をメーカーに送るだけだとしたらどうでしょうか。言うまでもなく、その選択肢は狂っているほどに無限大です。というわけで、大体こんなところです。このサイトを作るときに、計画やプロジェクトが頭にあったわけではありません。ただ、それがどれほどシンプルで簡単かを皆さんに知ってもらうべきだと思ったのです。もし皆さんがこれらのアセットをすべて欲しいなら、下をチェックしてください。繰り返しになりますが、私は無料のコミュニティを持っていて、今はそこに私のすべてのリソースを保管しています。これらのプロンプトや、これらのウェブサイトのすべてなどです。私はもっとたくさん作成して、皆さんに提供し続けるつもりです。なぜなら現時点では、皆さんが無限のテンプレートを持てるようにするために、サイトあたり5ドルから10ドルといった私自身のトークン消費を少し負担しているだけだからです。たいしたことではありません。それでは、残りの一日を楽しくお過ごしください。皆さんがこれを楽しんでくれたことを願っています。また次回お会いしましょう。
コメント