Claude Fable 5で驚くほど美しいWebサイトを構築する4つのクレイジーな方法
AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00誰もが同じAIモデルにアクセスできますが、その周りにプロセスを構築できている人は誰もいません。
00:00:05「モデルそのものは重要ではなく、ハーネスこそが重要だ」というフレーズを聞いたことがあるかもしれません。
00:00:09ハーネスとは、AIモデルに従わせるために構築するプロセスのようなものです。
00:00:13しかし、理解しておくべきことがあります。
00:00:14モデルは進化し続けるため、3ヶ月前に構築したハーネスはすでに時代遅れになっています。
00:00:19収録時点で最高のモデルは、AnthropicのフラッグシップモデルであるFable 5ですが、
00:00:24心配はいりません。どんなモデルに対しても、皆さんのハーネスが
00:00:27進化し続けられるような様々な方法をガイドします。
00:00:30実はAnthropicには、フロントエンドデザインのための公式スキルがあります。
00:00:34それが存在するのは、彼ら自身が名付けたある問題のためです。
00:00:37何が起きるかというと、モデルが求めたデザインの中で、最も安全で平凡なバージョンに偏ってしまうのです。
00:00:42それを彼らは...
00:00:43「分布への収束」と呼んでいます。これは基本的に、モデルがこれまでに何度も目にしてきたものを
00:00:47そのまま作り出すことを意味します。
00:00:49最新のモデルがいかに強力であると宣伝されているかを知ると、もはやこれは問題ではないと
00:00:53思うかもしれませんが、私はそうは思いません。
00:00:56例えば、このプロンプトでは、プランテーションサイトのランディングページを作るよう単純に依頼しました。
00:01:01正しい方向に誘導するため、コンテンツそのものにあまりこだわらず、可能な限りクリエイティブになるよう指示しました。
00:01:06コンテンツだけに集中しすぎないようにとも伝えました。
00:01:07また、システム内には複数のスキルが利用可能なので、それらを利用しないようにと明示的に伝えました。
00:01:13それらを活用してしまわないようにしたかったからです。
00:01:16そして出来上がったのがこちらです。
00:01:18決して悪いデザインではありませんが、最高というわけでもありません。
00:01:22例えば、コントラストの問題があったり、画像の一部が正しく読み込まれなかったりします。
00:01:26しかし、ここでスキルを使うと状況はかなり変わります。
00:01:29このスキルには特別なことは何もありません。
00:01:31参照や外部リソースも一切ありません。
00:01:34ただのプロンプトです。
00:01:35それだけで、はるかに優れたデザインが作成されました。
00:01:37デザインは大幅に洗練され、見た目も美しいものになりました。
00:01:41繊細なアニメーションが追加され、細部へのこだわりも強まりました。
00:01:45全体として、モデルが自力で生成するよりも明らかに優れた結果となりました。
00:01:49新しいモデルが登場するたびに、AI企業はモデルAPIを使う人向けに新しいプロンプトガイドをリリースしています。
00:01:55そしてFable 5のガイドを使って、デザインスキルを修正しました。
00:01:58汎用的なデザインプロンプトとプロンプトガイドをコピーするだけでいいんです。
00:02:02両方をClaudeに貼り付けて、モデルのプロンプトガイドがあることを伝え、
00:02:06それに基づいて最新バージョンを作るよう依頼します。
00:02:09モデルはプロンプトを分析し、新しいモデル向けに書き換えられたバージョンを提供してくれます。
00:02:12そして、新しいサイトは見た目が格段に良くなっているのがわかります。
00:02:15構成もずっと良くなり、さまざまな要素がカード化されています。
00:02:19Claudeが通常出力するものよりもクリエイティブに見えるのは、細部へのこだわりのおかげです。
00:02:24CTAセクションが、切手が貼られたポストカードの手紙に変わっているような点です。
00:02:29こうした細部が、よりクリエイティブに見せてくれるのです。
00:02:32さて、企業がプロンプトガイドを公開する理由は他にもあります。
00:02:35多くの場合、モデルには行動上の問題があり、ガイドはその解決策を提示しています。
00:02:39Opus 4.8が出荷された際、Anthropicはモデルが特定の色に偏る傾向があると指摘しました。
00:02:45彼らの解決策は、まずモデルに複数のデザイン案を提示させ、その中から進む方向を選ばせるというものでした。
00:02:51しかし、Fable 5が登場した際、この問題はプロンプトガイドに記載されなくなりました。
00:02:56そして私たちが見た限り、モデルは依然として同じスタイルに陥ってしまいます。
00:02:59毎回そうなるわけではありません。
00:03:01しかし、私たちのテストでは、生成されたサイトの約3分の2が依然として非常に似たスタイルになっていました。
00:03:07つまり、本当の意味では解決されていなかったのです。
00:03:08だからこそ、過去のモデルのドキュメントも見ておく価値があるのです。
00:03:11最新のガイドには載っていない有益な情報が見つかることはよくあります。
00:03:15そのため、Opus 4.8のプロンプトガイドを使って、別のデザインスキルに切り替えました。
00:03:20どのようなデザインの方向にしたいかを確認してくれるものです。
00:03:23それに基づいて、このデザインを生成しました。
00:03:25これも良い出来です。
00:03:26しかし正直なところ、デザインmdファイルを使う方が良いアプローチです。
00:03:30これらのファイルには、ページに適用できるブランドの言語が含まれています。
00:03:33Get design.mdは、多くのブランドのファイルを入手できる非常に良いソースです。
00:03:38しかし、それらを使用するのはモデルがランディングページを生成した後です。
00:03:42これは特にランディングページ向けです。design.mdファイルの中身を実際に見てみると、
00:03:47フォントに至るまで全てが固定されているからです。
00:03:50そして例でも見たように、フォントはサイトをよりクリエイティブに見せる大きな要因です。
00:03:55アニメーションを追加する際には、2つのレベルがあります。
00:03:58マーケティングUIと機能的UIです。
00:04:00ダッシュボードのような機能的UIにデザインスキルを使うと美しくはなりますが、
00:04:05実際に使うことはできなくなってしまいます。
00:04:07アニメーションを追加するためには、2つのことを使います。
00:04:10マーケティングページの場合、このスキルはすでにCSSベースのアニメーションを追加するようモデルに指示していますが、
00:04:15GSAPアニメーションの方がはるかに優れています。
00:04:17ここでプロンプトガイドのもう一つのステップが登場します。
00:04:20今や、モデルを制御する主なレバーは「努力」です。
00:04:22単純なタスクなら低から中程度に保てますが、
00:04:25アニメーション追加のようなタスクには、X-Highを使う方がずっと良い選択肢であり、
00:04:30やり直しの回数も減ります。
00:04:32マーケティングUIスキルには、GSAPをいつ使用すべきかを指定するルールがあります。
00:04:36その条件が満たされるたびに、自動的にGSAPスキルも読み込まれます。
00:04:41実際、ここに表示されている同じランディングページでその設定を使いました。
00:04:44私たちの方で限定的な計画しか立てていなかったにもかかわらず、驚くほど良い仕事をしてくれました。
00:04:48ポストカードの中で画面アニメーションが再生される配置や、
00:04:52季節が次々と切り替わる様子を見事に決めてくれました。
00:04:55こうした専門スキルが、実装の詳細を自動的にどれほど処理できるかを示す良い例です。
00:04:59このスキルシステムは試行錯誤の末に達成しました。
00:05:00つまり、5時間の利用制限を何度も何度も使い切ったということです。
00:05:03それら全てをスキップしたい場合は、私たちのCommunity AI Labs Proから入手できます。
00:05:07リンクは概要欄にあります。
00:05:11さて、すでに触れたように、UIには2種類あります。
00:05:12機能的UIの背後にあるワークフロー全体は、マーケティングUIとは完全に異なります。
00:05:15例えば、計画は最初のステップであり、非常に重要です。
00:05:20この動画では深く掘り下げませんが、計画が準備できたら、
00:05:23Claudeに渡すことができます。
00:05:27その後、アプリを構築させるのではなく、
00:05:27HTMLを使ってモックアップを作るよう指示すべきです。
00:05:33私たちのプロセスはdesign.mdから始まります。
00:05:36使用するdesign.mdがすでに決まっているなら、それは素晴らしいことです。
00:05:40もし持っていなくても大丈夫です。
00:05:42なしで進めても構いません。
00:05:43例えば、私たちが独自に構築したコミュニティを見てみると、
00:05:45外側のデザインと内側のデザインが全く異なることにすぐに気づくでしょう。
00:05:50私たちのケースでは、全てがHTMLモックアップを使って最初に計画されました。
00:05:51Notionから部分的に着想を得たdesign.mdを作成することから始めました。
00:05:54そのデザインシステムを使って、実際のアプリケーションを書く前に全てのスクリーンをモックアップとして構築しました。
00:05:58それらのモックアップを最終確認し検証したら、それらを完全に機能するアプリケーションに変換しました。
00:06:04さて、機能的UIを設計する上で最も重要な部分に進む前に、スポンサーからの紹介を聞きましょう。
00:06:09最近Claude Codeを使っている多くの人が、コストが急騰していることに気づきました。
00:06:13正直なところ、それがKimiに注目した理由です。
00:06:14彼らはOpusの約8分の1の価格で、コーディングに非常に優れたオープンソースモデルを構築しました。
00:06:18彼らの最新モデル、Kimi K2.6は、現在最も難しい実世界のコーディングベンチマークである...
00:06:20Sweebench Proで1位を獲得しました。
00:06:26彼らはモデルをリリースしただけでなく、K2.6の上に真に役立つ製品を構築しました。
00:06:30優れたフロントエンドデザインを備えたプロダクション準備完了のウェブサイトを生成したり、
00:06:33単一のプロンプトからフルスライドデッキを作成したり、データベースや認証を最初から処理したりできます。
00:06:38しかし、最も驚くべき機能はおそらくAgent Swarmでしょう。
00:06:41単一のタスクで300個のAIエージェントを並列で稼働させることができます。
00:06:471つのエージェントが全てをゆっくり処理する代わりに、AIチーム全体が同時に作業するのです。
00:06:49そしてこれら全てが、人々が支払ってきたクローズドソースの代替品よりもはるかに安価なオープンソースモデルで実行されます。
00:06:53ですから、Claude CodeやCursorを毎日使っていて、最近API料金が高くなって悩んでいるなら、
00:06:58Kimiを試してみる価値があります。
00:07:03私たちのリンクからサインアップすると、6月30日までの最初の購入に対して...
00:07:0510%の追加クォータボーナスも受け取れます。
00:07:09概要欄のリンクをクリックして、構築を始めましょう。
00:07:11さて、機能的UIを設計する上で他にも非常に重要な部分があります。それは実験です。
00:07:16時間をかけて、この問題を解決するために多くの異なるアプローチを試してきました。
00:07:19最初は、複数のエージェントが並列で作業するタスクリストを使用していました。
00:07:24各エージェントが異なるUIバリエーションを生成するようにします。
00:07:28目標は、複数のデザインを実験して、どのアプローチが実際に最も効果的かを解明することでした。
00:07:32その後、このワークフローにサブエージェントを使い始めましたが、それはもう重要ではありません。
00:07:35100万トークンのコンテキストがあれば、プライマリのエージェントでも同じことができます。
00:07:40内部で「ギャラリービューアー」と呼ばれるものも構築しました。
00:07:45ギャラリービューアーの目的は単純です。
00:07:48複数のHTMLモックアップを生成したとき、それらが何十ものファイルの中に埋もれてしまわないようにするためです。
00:07:51代わりに、それらを単一のビューでまとめて開き、並べて簡単に比較できるようにします。
00:07:53例えば、コミュニティプラットフォームを構築していたとき、コミュニティの対話スペースがどのようなものであるべきか、
00:07:58最初はわかりませんでした。コミュニティ体験が必要だとはわかっていましたが、
00:08:03ユーザーが相互に対話する方法はたくさんありました。そのため、単一のデザインにコミットするのではなく、
00:08:08HTMLモックアップを使って実験を行いました。エージェントに複数の
00:08:12コミュニティチャンネルのUIをHTMLモックアップとして作成させ、比較できるようにしたのです。エージェントはその後、
00:08:17複数のバージョンを自動的に作成し、ギャラリービューアー内で開いてくれました。そこから、各
00:08:22バリエーションを比較して、どの方向性が最も優れているかを判断できました。この例で気づく一つのことは、
00:08:28デザインの見た目が必ずしも一貫していないという点です。理想的には、異なるUXアプローチを探索しつつ、
00:08:33同じデザイン言語を共有すべきです。そうなっていない理由は、
00:08:37design.mdが提供されていなかったからです。design.mdが存在する場合、モデルはそれを
00:08:42色、間隔、タイポグラフィ、コンポーネント、全体的なスタイリングの信頼できるソースとして使用します。
00:08:46そのため、生成された全てのモックアップは、異なるUXアプローチを探索しながらも、
00:08:53視覚的な一貫性を保ちます。機能的UIにアニメーションを追加するような、
00:08:59大きな違いを生む可能性のある細かい点もいくつかあります。私たちは独自のスキルにアニメーションのガイドラインを記録しており、
00:09:04もしよろしければコピーしてください。今のところ私たちにはうまくいっており、
00:09:10継続的に改良しています。しかし、一つ強く推奨したいのは、
00:09:15アプリケーションの機能的な部分でアニメーションをやりすぎないことです。過度のアニメーションは最初は印象的に見えるかもしれませんが、
00:09:20多くの場合、生産性重視のインターフェースを邪魔に感じさせます。デザインを最終決定したら、
00:09:25次はShadCNスキルを使うステップです。機能的UIスキルをすでにShadCNスキルと接続しているので、
00:09:29ワークフローのほとんどを自動的に処理してくれます。以前は、より複雑なワークフローがありました。
00:09:35ShadCN MCP用に詳細な実装計画を生成し、その計画を使ってインターフェース全体を構築していました。
00:09:40そのアプローチも機能しましたが、多くの複雑さが加わりました。今日ではワークフローは大幅にシンプルになっています。
00:09:45必要なのは最終的なHTMLモックアップとShadCNスキルだけです。
00:09:50これがうまく機能する理由は、ShadCNスキルにはすでに膨大な量のコンテキストと
00:09:55ShadCN作成者自身によってパッケージ化された実装知識が含まれているからです。
00:10:01そのため、最終的なHTMLモックアップを受け取り、実際のShadCNコンポーネントを使って
00:10:06ほぼ1対1で再現できます。この段階では、複雑な実装計画や
00:10:11変換ワークフローを作成する心配をする必要はありません。もしこれらのデザインプロセスが気に入ったら、
00:10:16チャンネル登録と「いいね」ボタンを押してください。AIを活用して、様々なビジネスで
00:10:21異なるプロセスを最適化する新しい方法を学ぶのに役立つコンテンツを投稿しています。
00:10:26皆さんのサポートは、私たちにとって大きな意味があります。
00:10:31また、ガイドでは、こうしたモデルに対して自己検証を明示的に行うよう求めています。
00:10:36Claude.mdにエージェントに出力を検証するよう求めるプロンプトを入れることができます。
00:10:41メインのエージェントを使う代わりに、出力を検証できるサブエージェントを使うべきです。
00:10:46検証するために、比較対象となるものが必要です。そのため、常にdesign.mdを
00:10:50サブエージェントに参照させるようにしましょう。ガイドで言及されているもう一つのことは、
00:10:55モデルはタスクに関するコンテキストがあるときにパフォーマンスが向上するということです。デザインの場合、
00:10:59実際にプロダクトが何であるかという知識を持つことを意味します。多くのフレームワークが
00:11:03個別のproduct.mdを設定していますが、Claude.mdを設定すれば、
00:11:09モデルがプロジェクトについて理解するのに十分なコンテキストがあると私たちは考えています。
00:11:13そのため、機能的UIスキルが新しいタスクを受け取るたびに、
00:11:18モデルにClaude.mdも読み込ませます。さらに、全てのHTMLファイルを含む
00:11:24moxフォルダーも含まれているため、アプリに新しい要素を追加するたびに参照できます。
00:11:28その上、design.mdもあるといいでしょう。これらがプロジェクトに必要なファイルです。
00:11:32今日、多くのSaaSアプリは簡単にクローンできます。
00:11:37私たちはチーム管理用に自作のソフトウェアを使用しています。多くの人をホストする必要がないため、
00:11:42自作したものを使っています。その場合、一から作る必要はありません。
00:11:46UIをできるだけ完璧にクローンすればいいだけです。新しいモデルでは、画像を理解する能力が
00:11:51はるかに向上しているため、ここでのワークフローは非常に簡単になります。
00:11:56クローニングには2つのモードがあります。モードBはマーケティングUI用です。
00:12:01「single-file CLI」という非常に便利なCLIツールがあります。それを使えば、HTML、CSS、
00:12:07さらにはそのウェブサイトで使用されている画像まで含めて、ページ上の全てをキャプチャできます。サイトに複数のページがある場合は、
00:12:13sitemap.xmlファイルをフェッチすることもできます。これは実質的にウェブサイトの地図です。
00:12:19それを使用して、モデルは他のページも発見してフェッチできます。問題は、認証の裏側にあるページに遭遇した時に始まります。
00:12:23例えば、NotionのUIをクローンしたい場合、Notionのウェブサイトにツールを向けるだけでは不可能です。
00:12:28NotionのURLを入力しても、ランディングページしか取得できません。
00:12:34実際に必要なのはログイン画面の裏側にあるアプリケーションインターフェースです。幸いなことに、モデルは
00:12:40画像からインターフェースを理解することに長けているため、そのような状況ではスクリーンショットが
00:12:45最良の選択肢となります。インターフェースの様々な状態を非常に慎重にキャプチャする必要があります。ページを開いているとして、
00:12:50ホバー時に何が起こるか、異なるインタラクションがレイアウトにどのような影響を与えるかを示すスクリーンショットを撮りましょう。
00:12:56もう一つの例を挙げます。2つのページが1つのカラムにあるページを開くとします。これだけを提供しても、
00:13:01モデルは2つのカラムを作れることを知りません。極めて徹底して、必要な全てのコンテキストをモデルに提供する必要があります。
00:13:07スクリーンショットを撮ったら、画像を直接プロンプトに貼り付けないでください。代わりに、
00:13:13Claudeにドラッグしてください。これにより、システムはモードAが使用できる画像パスにアクセスできるようになります。モードAは
00:13:19それらのスクリーンショットを全て集め、クローンフォルダー内に配置し、参照資料として使用します。
00:13:25それらのスクリーンショットは、クローニングプロセスの効果的な基盤となります。そこから、
00:13:29インターフェースの初期HTMLバージョンを生成し、実際のアプリケーション構築に進むことができます。
00:13:35これでこの動画は終わりです。もしチャンネルをサポートし、このような動画作りを続けてほしいと思っていただけるなら、
00:13:39下のスーパーサンクスボタンを使って支援してください。いつも見ていただき、ありがとうございました。また次回の動画でお会いしましょう。
Community Posts
No posts yet. Be the first to write about this video!
Write about this video