Fable 5とGPT 5.6を駆使して、このスキルで1万ドルのWebサイトを一撃作成
CChase AI
Computing/SoftwarePhotography/ArtInternet Technology
Transcript
00:00:00このウェブサイト全体が、Claude Fable 5のたった一つのスキルで一気に作成されました。
00:00:05単なる一つのスクロールアニメーションではなく、いくつかのスクロールアニメーションを繋ぎ合わせたものです。
00:00:10非常にスムーズで高品質、そして一貫性のある体験を提供してくれます。
00:00:15これは本当に凄まじいですよ。
00:00:16非常に完成度の高い製品であり、これらすべてを可能にするスキルをご紹介します。
00:00:22さらに、Claude Codeでどのように実行したかだけでなく、
00:00:25最新のGPT 5.6 Solで全く同じことをデモしてみせます。
00:00:31今の時代、一つのAIツールにこだわる理由なんてありませんからね。
00:00:35このツールは本当にクールです。
00:00:37先ほど言ったように、私が見つけて改善したこのスクロールアニメーションのスキルを使わずに手動で行おうとすると、
00:00:42どれほど難しいか分かるでしょう。
00:00:43複数の動画を作って、開始フレームを揃えて、マッチアップさせようとして、
00:00:47一コマずつ取り出していくなんて、本当に面倒な作業です。
00:00:50それが、このスキルを使えば非常に簡単に実行できます。
00:00:53このスキルの功績は、ピーター・ワン氏にあります。
00:00:55彼がオリジナル版を作りました。
00:00:57Twitterでそれを見つけて、彼が快くオープンソースにしてくれました。
00:01:00彼のScroll Worldへのリンクは下に貼っておくので、確認してみてください。
00:01:03私がやったのは、これをフォークしていくつか改善を加えたことです。
00:01:07具体的には予算ティアを導入して、あまりコストをかけずに実行できるようにしました。
00:01:10ウェブサイトのために6つものシーンを必ずしも必要とするわけではありませんし、
00:01:14モバイル版の改善や、SEO関連の調整も行いました。
00:01:19このスクロールアニメーションが全体としてどう機能するかというと、まず一枚の画像から始まります。
00:01:23今、目の前にあるのがそれです。
00:01:24その画像を動画に変換します。
00:01:27このスクロールアニメーションも元々は動画でしたが、FFmpegを使用して動画から全ての個別フレームを取り出し、
00:01:34ウェブサイト上でのユーザーの現在位置と関連付けています。
00:01:40スムーズな体験を実現し、ぎこちなくならないようにするために、裏側ではさらに多くの処理が行われています。
00:01:46さらに、各シーンを構築する際に、互いに参照し合うようにしています。
00:01:50そうすることで、一貫性が保たれます。
00:01:52すべてが一つの物語から繋がっているように見えるはずです。
00:01:55画像や動画の生成に関しては、Higgsfield MCPを通じて行っています。
00:02:00これはClaude CodeでもCodexでも可能です。
00:02:02ターミナルから離れる必要はありません。
00:02:04そのMCPやCLIを介して、GPT Image 2のような画像モデルや、Seed Danceのような全ての動画モデルを呼び出しています。
00:02:12これらのツールを好みのAIエージェントに接続するには、Higgsfieldに行き、MCPとCLIのセクションで手順に従うだけです。
00:02:20MCPのURLをコピーして、認証プロセスを実行します。
00:02:25その後必要なのはスキル自体だけです。
00:02:27私のバージョンも下にリンクしておきます。
00:02:30URLをコピーしてClaude CodeやCodexに読み込ませるか、プラグインとして使用することもできます。
00:02:35どちらの方法でも構いません。
00:02:36冒頭でもお伝えした通り、今回は最新のSol 5.6を搭載したCodexで実演しますが、Claude Code上でも同じように動作します。
00:02:44全く同じプロセスです。
00:02:46インタービューを通じて、どのようなウェブサイトを作りたいか、各シーンをどうしたいかを伝えると、段階的に案内してくれます。
00:02:53動画を作成する前に「この画像でいいですか？」と確認もしてくれます。
00:02:57スキルを実行したら勝手に動画が出てきて、何も意見できないというわけではありません。
00:03:01プロセス全体を通じてしっかりサポートしてくれます。
00:03:04というわけでCodex内でScroll Worldスキルを呼び出しました。
00:03:07「/scroll world」と入力しただけです。
00:03:08「ブティックな日本旅行ブランド向けのウェブサイトを作りたい」と伝えました。
00:03:14全体的なアートの方向性は、折り紙のようなスタイルで行こうと思います。
00:03:18どんなスタイルがいいか分からなくても、AIとやり取りを繰り返せば、いくつか質問して導いてくれます。
00:03:25私はあらかじめイメージがあったので良かったです。
00:03:27だから、最初から正確なアイデアがなくても心配しないでください。クリエイティブな方向性を伝えたら、次は予算について聞かれます。
00:03:36モバイル版の予算はどうしますか、と。
00:03:38シーンをいくつにするか聞かれます。
00:03:41今回は6シーンにしました。
00:03:43かなりの動画量になりますし、最初から最後までかなり長い旅になります。
00:03:48ほとんどの人にとっては過剰かもしれません。
00:03:50それにHiggsfieldのクレジットもかなり消費します。最終的に800ほどかかりました。
00:03:56上位プランを利用していないなら、4シーンくらいがスイートスポットだと思います。
00:04:03次はモバイルへの対応です。
00:04:04安全なクロップだけで済ませることもできますし、モバイル専用にポートレート形式の動画を別途作成するフルポートレートチェーンも選べます。
00:04:12どの程度こだわりたいかによって選べるので柔軟ですね。
00:04:15ただ、この動画では手軽に「crop safe」でいきます。
00:04:20一番安上がりなオプションですし、シーン数を減らすことも可能です。
00:04:243シーンまで減らせます。あくまでデフォルトの設定がこうなっているだけです。
00:04:28次に旅の提案が表示され、「各シーンはこんな感じになります」と教えてくれます。
00:04:32何回生成が必要になるかも分かります。
00:04:35画像生成が4回、シーンダイブ動画が4回必要になります。
00:04:40動画同士を繋ぐコネクターやクロスフェードも必要です。
00:04:43合計で9回の生成が必要で、予想時間も表示されますが、これはかなり控えめな見積もりです。
00:04:49AI動画とはいえ、通常はそこまで時間はかかりません。
00:04:52承認すると、次はアンカーの生成に移ります。
00:04:56アンカーというのは最初のフレームのことです。
00:05:00先ほど話した開始フレームですね。
00:05:01背景にあるようなイメージです。
00:05:03これは単なる静止画になります。
00:05:04「OK、気に入った」と言うのもあなた次第です。
00:05:06これが全体を左右するアートの方向性になります。
00:05:09あるいは「いや、一部を変えよう」となるかもしれません。
00:05:11ここが最も重要な部分です。もし気に入らないのに「はい」と言ってしまうと、全てがそれに依存してしまいますから。
00:05:17生成された画像がこちらです。
00:05:19今は気に入りました。
00:05:20もうお気づきかもしれませんが、
00:05:21CodexとSol経由で行っているなら、画像生成機能が組み込まれています。
00:05:26わざわざHiggsfieldにリクエストを送らなくても、ネイティブでGPT Image 2で画像を作れるのです。
00:05:31Codex内部で完結しますからね。
00:05:34ですからCodexならネイティブで生成できますが、動画生成には依然としてHiggsfieldへの送信が必要です。
00:05:41逆にCloud Codeでやる場合は、画像生成機能がないのでHiggsfieldが全工程を担うことになります。
00:05:44Higgsfieldにすべてお任せする形ですね。
00:05:48ともかく、この画像。
00:05:50気に入りました。
00:05:51どうしますか？
00:05:52「素晴らしい」と伝えましょう。
00:05:55あ、タイプミスした。
00:05:57次に進みます。
00:05:5932分後、ウェブサイトが完成しました。
00:06:014つの異なるシーンができました。
00:06:0210回の生成でした。
00:06:04ローカルホストで準備完了です。見てみましょう。
00:06:06こちらが日本ツアーのサイトです。
00:06:07スクロールして一通り見てみましょう。
00:06:08では、スクロールしながら全体に目を通していきましょう。
00:06:12旅行者向けに、地下鉄の情報がありますね。
00:06:15家の方へ移動します。
00:06:17開きましたね。
00:06:19そしてホテルへ。
00:06:20展開します。
00:06:22なかなかクールです。
00:06:23そこに鳥がいて、飛び始めます。
00:06:28さて、気に入った点はどこでしょう？
00:06:30気に入らない点は？
00:06:31まずビジュアルは気に入っています。
00:06:32すごくかっこいいと思います。
00:06:34各シーンの進行の仕方も気に入っています。
00:06:38地下鉄が入ってくるこのシーン、最高ですね。
00:06:41素晴らしい。
00:06:41唯一気になるのは、シーン1からシーン2への切り替わりです。
00:06:46結構急なカットですね。
00:06:47まあ、そういう演出と考えることもできますが。
00:06:48クリエイティブな選択といえばそうかもしれません。
00:06:51でも修正は可能です。
00:06:52ここも同じです。
00:06:53シーン2の細部までは信じられないほど素晴らしいですが、
00:06:57シーン2からシーン3へ行くときも、また急なカットが入ります。
00:07:01対照的にシーン3から4への遷移は素晴らしいです。
00:07:04こうやって開いて、
00:07:06ドカン！
00:07:06ホテルに入る。
00:07:07背景に注目してください。シーン4がフレームに入ってくるところ、最初はぼやけていて、そこから飛び出してくる。
00:07:12まるで3D効果のような奥行きが出ていますよね。
00:07:17ウェブサイトに深みを与えています。
00:07:19そしてシーン4へシームレスに切り替わります。
00:07:22これは素晴らしい。
00:07:23これと同じような遷移が1から2、2から3でもできていれば最高でした。
00:07:28それが主な不満点です。
00:07:31でも他はすべて良好です。
00:07:32シーン遷移を追加してスムーズにするのは、それほど難しくないと思います。
00:07:35そうですね。
00:07:36Sol GPT 5.6での生成と、Claude Codeで作成したものと比較すると、
00:07:41こちらのシーン遷移の方が確かに洗練されています。
00:07:45これがシーン1です。
00:07:46上から押し出される感じがして、シームレスに遷移していますね。
00:07:52可能な限りシームレスに繋がっています。
00:07:56ここも同じ。
00:07:57中に入って、
00:07:58お、ドカン。
00:07:58開きました。
00:07:59そして上から次のシーンへ。
00:08:01Fable 5での遷移の方が良いように感じます。
00:08:06ここも同じ。
00:08:06ドカン。
00:08:07着きました。
00:08:07ズームアウトして、
00:08:08次のシーンへ。
00:08:09それが主な不満点です。
00:08:11Sol 5.6よりFable 5の方がわずかに上手ですね。
00:08:15でも、これはワンショットですよね。
00:08:18一つのスキルでここまでできるとは。
00:08:19スキル自体が非常によく作られていることに感動しました。
00:08:25最高です。
00:08:26さて、次は「ビジュアルはすごいが、機能的なサイトにできるか？」という点です。
00:08:29目的によりますが、全く問題ないと思います。
00:08:33そうですね。
00:08:33全く問題ありません。
00:08:34一貫性があり、安っぽくなく、ぎこちなくないアニメーションスクロールサイトを作るのは、技術的に非常に難しい作業です。
00:08:38もし自分でやれと言われたら、多くの困難が伴うでしょう。
00:08:43このベースがあれば、テキストやCTAをどうするか、
00:08:46完成まで持っていくのは本当に簡単です。
00:08:47ユーザーをヒーローセクションから最後までどう導くか、
00:08:51例えばフォーム入力まで。
00:08:52難しくはありません。
00:08:53車輪の再発明をする必要はないのです。
00:08:56どのサイトでもやるようなことですから。
00:08:57難しくありません。
00:08:58それをベースの上に重ねるのは、
00:09:01全く課題ではありません。
00:09:02これらスキルをワンショットで使えるという事実は、本当に衝撃的です。
00:09:06難しくないのです。
00:09:09これがたった一つのスキルでできるとは、夢のようです。
00:09:13もしこれを3ヶ月前、6ヶ月前、9ヶ月前に自力でやろうとしていたら、
00:09:16とても面倒な作業でしたよ。
00:09:18オリジナル版を作ったピーター・ワン氏に感謝します。
00:09:21私と彼、両方のバージョンを説明欄の下にリンクしておきます。
00:09:24見た通り、非常にシンプルです。
00:09:26実際、何もする必要はありません。
00:09:27ただ起動するだけ。
00:09:28スキルを呼び出して、
00:09:29創造的な方向性を伝えるだけで、AIが働いてくれます。
00:09:32というわけで、今回はここまでにしておきましょう。
00:09:37いつものように、コメント欄で感想を聞かせてください。
00:09:40Chase AI Plusをチェックして、私のClaude Codeマスタークラスや、
00:09:43このようなAIレッスンをもっと体験してください。
00:09:46それでは、また。