00:00:00今日は、新しいClaude DesignとSeed Dance 2.0の力を組み合わせて
00:00:06このようなアニメーション付きのWebサイトを作成する方法を学びます。私が実践しているワークフローの全ステップを
00:00:12順を追って解説するので、これまで経験がなくても再現できるようになります。さらに
00:00:17その過程で、Anthropicの新しいツールを最大限に活用するためのヒントや
00:00:22コツも紹介します。さて、このようなWebページを作る場合、最初に必要なのは
00:00:28背景動画です。その背景動画を手に入れるには、まず元となる画像が必要です。今回は
00:00:32Nano Banana Proを使ってその元画像を生成し、次にその画像を
00:00:37Seed Dance 2.0を使って動画に変換します。これらすべてをHiggsfieldで行います。
00:00:44ここは、あらゆるAIコンテンツ制作ツールが揃ったワンストップショップです。まずは
00:00:49画像生成へ向かい、Nano Banana Proを開きます。すると、私が取り組んできた画像が
00:00:55いくつか表示されますが、Webページで見覚えがあるはずです。特にこれらはそうです。正確なプロンプトは
00:01:01私の無料スクールで公開しており、説明欄にリンクがあります。
00:01:05しかし、ここで画像について強調したいのは、特定のプロンプトそのものというよりも
00:01:11構成についてです。生成したい画像は人それぞれ異なりますが
00:01:15構成が重要です。なぜこの画像がこのような構成になっているのでしょうか？完成品を見てみると
00:01:21一目瞭然ですよね。右側に大きなヒーロー画像が配置されていますが
00:01:26左側にはテキストを置くための余白が必要でした。Nano Banana
00:01:31Proにこの画像を作らせる時、私はその構成を念頭に置いていました。「右半分に
00:01:38人目を引くような画像を配置し、左半分には
00:01:44ヒーローテキストを置こう」という感じです。ここがキャッチコピーの場所になります。
00:01:51上部にはナビゲーションバーを備えたバナーを配置して、ホームボタンや
00:01:55各ページへのリンク、サインアップや
00:02:00詳細を知るためのボタンを置き、下部にはティッカーを配置します。制作に入る前からそれを知っておく必要があり
00:02:04Nano Banana Proに指示する際も、その構成を意識する必要があります。
00:02:10どのような構成にするかで、プロンプトの内容が決まるからです。
00:02:17「そもそもどんな構成があるのか分からない」と思うかもしれません。どうやってそれを見つけるのかと言えば
00:02:22一番簡単な方法は、好きなWebサイトを見つけて、そのヒーローセクションや
00:02:25ランディングページの構成を分析することです。そのための素晴らしい場所がDribbbleです。
00:02:30Bが3つ並ぶDribbbleです。「landing page sass」などで検索してみると
00:02:35私が何を言っているのか分かるはずです。これを見てください。こちらでは
00:02:40下に画像、上にテキストを配置しています。これと同様の構成にするなら
00:02:47人物を中央に配置して、両端に雲を配置し
00:02:52テキストを中央に配置するなど、全く異なる構成にもできます。あるいは
00:02:56画像を中央に据えて、テキストをその周りに配置し、他の要素を追加する構成にするか
00:03:02スクロールしていくと、実に様々な方法があることが分かります。
00:03:07事前に2、3のアイデアを用意しておく必要があります。
00:03:11そうすれば、Nano Banana Proに対してそのスタイルを反映したプロンプトを入力できます。
00:03:16まとめると、画像作成において最も重要なのは構成です。
00:03:22「余白をどこに取るか」「テキストをどこに配置するか」
00:03:26左、中央、右、上など、どこでも構いませんが、決めておく必要があります。
00:03:32そしてプロンプトに関しては、Claudeのようなツールに作成を助けてもらうと良いでしょう。
00:03:37今回のデモではこの画像を使用します。この画像は
00:03:42コミュニティ内にコピーを用意しておくので、ステップバイステップで真似してみてください。静止画像が用意できたら
00:03:47次はClaude Designへ向かいます。全体的な流れとしては、Nano Banana Proで画像を作成し
00:03:51Claude DesignでWebサイトのモックアップを作成します。気に入った
00:03:56ランディングページのデザインが完成したら、画像を動画に変換します。
00:04:01最後のステップとして非常に簡単です。Claude Designが初めての方でも
00:04:05心配いりません。重要なポイントをこの動画でカバーします。さらに深く
00:04:10踏み込んだ解説動画も別途用意しており、上にリンクを貼っておきます。今回の
00:04:14目的としては、左側の「Prototype」へ移動します。
00:04:18プロジェクト名を入力します。私は「sd2」とします。デザインシステムは
00:04:24今回の場合、必ずしも必要ではありません。デザインシステムについて学びたい場合は
00:04:30例の深掘り動画をチェックしてください。今回は「High Fidelity（高精度）」を選択して「Create」をクリックします。
00:04:35するとこのページに移動します。最初に行うことは、コンテキストを追加することです。
00:04:40追加するコンテキストは、先ほどダウンロードした画像です。左下に
00:04:45アップロードしたスクリーンショットが見えます。次にプロンプトを入力します。スクリーンショットは
00:04:49他にも追加できます。Dribbbleで見つけた良い例などがあれば、ぜひ追加してください。
00:04:55プロンプトに関しては、先ほども言った通りClaude Codeに書いてもらうのがおすすめです。
00:04:59こちらがClaude Codeが作成したプロンプトで、これをClaude Designに貼り付けます。
00:05:04架空のSaaS企業「Olympus（マーケットインテリジェンスプラットフォーム）」向けです。
00:05:09会社概要、ヒーローセクションの詳細、ランディングページに必要なセクション、動きの指定などを記述しています。
00:05:13そして最後に非常に重要な「開始する前に質問があれば聞いてください」という一文を添えています。
00:05:19Claude Designのクールな点は、Claude Codeのように「プランモード」で動作することです。
00:05:25このプロンプトを入力すると、何を作ろうとしているのかをより明確にするために、
00:05:30向こうから質問を投げかけてきます。このQ&A機能が素晴らしいのは
00:05:36たとえプロンプトが今回の半分程度の詳細さしかなかったとしても、
00:05:42Claudeとの対話を通じて、かなりしっかりとした初稿が得られるという点です。貼り付けて送信します。
00:05:46Claude Designの利用制限について少し触れておきます。これは通常のClaude ProやMaxの制限とは別物です。
00:05:50非常にリソースを消費しやすいツールなので注意してください。私はすでに使い切っており
00:05:54追加料金が発生しています。参考までに、今回のデモをすべて実行した際の追加費用は
00:06:01約5ドルでした。もっと抑えることも可能ですが、目安として知っておいてください。では、質問が返ってきました。
00:06:06タイポグラフィ、セクションなど。モダンな「Mythic（神話風）」なカラーパレットにします。
00:06:11反転（Inverted）させます。実際に作成した後で、微調整（Tweaks）機能を使ってさらに選択肢を増やせます。
00:06:18コピーのトーンは「Mythic」を少し混ぜましょう。会社名のOlympusは知性アプリなので
00:06:23ここまでの画像はプロメテウスの火のような神話的な例えになっています。ヒーロー構成は
00:06:28フルブリード画像にします。セクションの順番も指定します。よく分からなければ
00:06:33すべてお任せ（Decide for me）でも構いません。ソーシャルプルーフもお任せで。
00:06:38これが「Tweaks」というクールな機能です。後で詳しく説明しますが、常に
00:06:43可能な限り多くのTweaksを使用することをおすすめします。後から追加も可能です。では続行します。
00:06:52これで作成が開始されます。Claude Designの画面の見方を説明します。
00:06:58右上の「Share」をクリックすると、Claude Designの中に留まる必要はありません。
00:07:06後に説明しますが、Claude Codeにエクスポートして
00:07:11利用制限を気にせず作業したり、HTMLとして書き出してCanvaへ送ったり、PowerPointやPDFとして
00:07:17ダウンロードも可能です。チームメンバーを招待して共同作業もできます。
00:07:26Claude Designは非常に多機能です。こちらが返ってきた結果です。動画の途中で色々動かしていきます。
00:07:32まず注目してほしいのが右側の「Tweaks」メニューです。
00:07:39これを使うと、ページの各要素を即座に変更できます。アクセントカラーや
00:07:45テーマをライトからダークへ切り替えたり、
00:07:50見出し、ロゴ、価格、名称、アニメーションなども変更でき、簡単にバリエーションを作成できます。
00:07:56さらに、より細かいレベルで編集も可能です。右上の「Edit」をクリックして
00:08:01ボタンなどを直接クリックすれば、色、フォント、余白、不透明度などを変更できます。
00:08:07コメントも残せます。ボタンをクリックして、直接変更する代わりに
00:08:12「大きくして」や「小さくして」といった指示を残したり、描画したりできます。
00:08:17例えばこのように範囲を選択して「左に移動して」と書き込み、下にいるClaudeへ送ると
00:08:22書いた内容をスクリーンショットとして認識し
00:08:27「分かりました、少し左へ動かします」と反応して動かしてくれます。変なものが残っていますが削除可能です。
00:08:33この段階で、まずは全体のデザインを確認します。
00:08:40最初の案で問題なさそうなら、Nano Banana Proに戻って画像を修正する必要があるか考えます。
00:08:48画像が良ければ、次の2ステップのプロセスに移ります。1つ目は
00:08:54Webページのバリエーションを確認することです。細かい調整ではなく
00:09:03少なくともあと2つ、全く異なるレイアウトを見て、どちらの方向性でいくか
00:09:07決めます。マクロなレベルで好みのものが見つかったら、それを絞り込んで
00:09:135つではなく15のTweaksを使って調整していきます。目標は、動画を取り込む前、そして
00:09:19Claude Codeに持ち込んで自分専用にする前に、90%完成させることです。
00:09:25手順は簡単です。Claude Designにこうプロンプトを投げます。「現在のものに加えて、
00:09:30クリックして切り替えられる2つのレイアウト案を作成してください」と。
00:09:39このようにマクロなバリエーションを作成し、その後に微調整を重ねる点が
00:09:44Claude DesignとClaude Codeの大きな違いです。プロンプト単体で見れば
00:09:49フロントエンドに関してはDesignの方が少し優れているかもしれませんが、
00:09:55この素早いビジュアルイテレーションこそが、Claude Designの真価であり、
00:10:02大きなメリットです。同じことをClaude Codeでやろうとすると
00:10:09少し手間がかかります。このように、上部に「Cinematic（映画風）」が残っており、
00:10:14アーカイブ版や「Terminal（端末風）」版も生成されました。
00:10:21どれもかなりユニークで、ヒーローセクションだけでなくページ全体に適用されます。
00:10:26正直なところ、このTerminal風のデザインはかなりイケてますね。画像を変更して
00:10:32動画は外さなければなりませんが、
00:10:37すぐにこれを見て、ありきたりなAI製Webサイトとは一線を画すクールなデザインだと感じました。
00:10:43Claude Designを使いこなすとは、こういったバリエーションを見ることです。
00:10:48自分で作ろうとしても思いつかなかったり、どうプロンプトを書けばいいか分からないものに出会えるからです。
00:10:53今回は動画の趣旨に合わせてCinematicバージョンで進めますが、これらを確認して
00:10:58好みのものを選んだら、2つ目のステップであるTweaks作業へ移ります。
00:11:03以前は控えめにTweaksを頼みましたが、今度は積極的にTweaksを
00:11:09出すよう指示します。何を調整したいか具体的に分からなくても
00:11:16とにかく沢山出してもらって、後で選べばいいのです。「Cinematicで進めるので
00:11:20他の2つは削除し、利用可能なTweaksを大幅に増やしてください」と指示します。
00:11:27すると、追加のTweaksが表示されます。
00:11:325つから15程度まで増えました。元のアクセント、
00:11:37テーマ、ロゴマークといったものに加え、
00:11:45フォント、本文フォント、タイプスケールなども設定可能です。
00:11:53とにかく、これらを使って何度も何度も調整を繰り返せます。
00:12:01CTAオーバーレイの明るさや輝きまで、無限に調整可能です。
00:12:09全ての調整が終わった結果がこちらです。「Present」のフルスクリーンモードで
00:12:13全画面で確認して、見え方をチェックしましょう。今のところかなり良い感じです。
00:12:20Claude Design内で100%を目指す必要はありません。できる限りのデザイン決定を行い
00:12:24Claude Codeに戻して細かい調整をすべきです。Designはリソースを食うので
00:12:29効率よく使うことが重要です。それでは、動画の背景をアニメーション化するステップに移行しましょう。
00:12:35静止画をベースにしておくことは重要です。モバイルユーザーに対して
00:12:40巨大な動画を読み込ませて速度低下させたくないからです。モバイルでアクセスした人は
00:12:46静止画のみが表示されるようにします。さて、Seed Dance 2.0を使います。
00:12:51これを使う必要はありませんが、現時点では最強です。他にはKling 3.0や
00:12:56Veo 3.1などもあります。動画の設定は非常に簡単です。画像を
00:13:00開始フレームとしてドラッグ＆ドロップするだけです。
00:13:04あとはプロンプトを入力します。プロンプトは単純です。「動きは極めて遅く、雲がわずかに
00:13:11動く程度。手のひらの火からの火の粉がゆっくりと漂う感じ」と指定し、このような結果を得ます。
00:13:15過激な動きではなく、微妙なニュアンスが必要です。ゲームのような激しい動画ではなく
00:13:22GIFアニメのように控えめにします。ヒーロー画像はサイトに
00:13:36ちょっとしたアクセントを与えるだけで、すべてを支配させてはいけません。また、動画は最大でも15秒です。
00:13:42ループさせるのは難しいので、この長さが最適です。
00:13:5115秒という長さは最初は長いように感じますが、実際はそう重くありません。
00:13:56また、Webサイトのヒーローセクションで15秒間じっと
00:14:02読み続ける人は稀です。ループの切れ目で驚くようなことはまずありません。
00:14:0810秒もすれば残りのランディングページを見にスクロールしていくからです。
00:14:14プロンプトはシンプルで繊細に保ちましょう。15秒間の動画で、比率は16:9、解像度は最低でも
00:14:181080pが必要です。モデルによってはプロンプトを補完する機能がありますが
00:14:23使わないでください。常にプロンプトの完全な制御権を自分自身で持っておくべきです。納得のいくものができるまで
00:14:29何度か生成を繰り返すことになるでしょう。
00:14:35上手くいくまで4、5回はやり直す覚悟が必要です。
00:14:39思い通りの動画ができたら、ダウンロードしてClaude Designに戻り
00:14:43プロンプトウィンドウにそのMP4ファイルをドロップします。
00:14:47左下にアップロードし、「ヒーロー背景の静止画像を、今アップロードした動画に置き換えてください」
00:14:52と指示します。するとこのように表示されます。文字通り、これだけで完了です。
00:14:58Claude Designでの作業はほぼ終わりです。必要に応じてさらに調整を加えるのも良いですが
00:15:04この状態になったら、Claude Designを離れて
00:15:08Claude Codeへ移行する準備ができています。やり方は非常に簡単です。「Share」をクリックして
00:15:15「Handoff to Claude Code」を選択します。ただし動画ファイルが含まれるため
00:15:21コピーコマンドではダウンロードに失敗する可能性があります。
00:15:26代わりに「Download Zip」を選択してください。全てのファイルや動画が
00:15:32一つのZIPファイルにまとめられます。
00:15:37ダウンロードして解凍し、そのフォルダーをClaude Codeにドラッグ＆ドロップして
00:15:43「すべて抽出してWebサイトを作成して」と指示します。
00:15:48これでもう終わりです。ドラッグ＆ドロップして
00:15:54「ファイルを抽出して、開発サーバーを立ち上げて」と指示すると
00:15:59ローカルの開発サーバーでWebページが立ち上がります。これでClaude Codeへの移行は完了です。
00:16:04動画と静止画を含むアニメーションヒーローセクションが完成しました。細かな調整をして
00:16:10GitHubにプッシュし、Vercelを使ってネット上に公開する準備は整いました。
00:16:15本日の解説は以上です。Claude DesignとSeed Dance 2.0を組み合わせて
00:16:20アニメーション付きWebサイトを作る方法について、少しでも理解が深まれば幸いです。
00:16:26いつも通り、感想を聞かせてください。すべてのリソースを手に入れたい方はChase AIを
00:16:30忘れずにチェックしてください。それでは、またお会いしましょう。
00:16:34プロンプトの完全な制御権を自分自身で持っておくべきです。納得のいくものができるまで
00:16:40何度か生成を繰り返すことになるでしょう。上手くいくまで4、5回はやり直す覚悟が必要です。
00:16:45思い通りの動画ができたら、ダウンロードしてClaude Designに戻り
00:16:50プロンプトウィンドウにそのMP4ファイルをドロップします。
00:16:57左下にアップロードし、「ヒーロー背景の静止画像を、今アップロードした動画に置き換えてください」
00:17:01と指示します。するとこのように表示されます。文字通り、これだけで完了です。
00:17:05Claude Designでの作業はほぼ終わりです。必要に応じてさらに調整を加えるのも良いですが
00:17:12この状態になったら、Claude Designを離れて
00:17:17Claude Codeへ移行する準備ができています。やり方は非常に簡単です。「Share」をクリックして
00:17:22「Handoff to Claude Code」を選択します。ただし動画ファイルが含まれるため
00:17:26コピーコマンドではダウンロードに失敗する可能性があります。
00:17:34代わりに「Download Zip」を選択してください。全てのファイルや動画が
00:17:38一つのZIPファイルにまとめられます。
00:17:44ダウンロードして解凍し、そのフォルダーをClaude Codeにドラッグ＆ドロップして
00:17:49「すべて抽出してWebサイトを作成して」と指示します。
00:17:56これでもう終わりです。ドラッグ＆ドロップして
00:18:03「ファイルを抽出して、開発サーバーを立ち上げて」と指示すると
00:18:10ローカルの開発サーバーでWebページが立ち上がります。これでClaude Codeへの移行は完了です。
00:18:14動画と静止画を含むアニメーションヒーローセクションが完成しました。細かな調整をして
00:18:19GitHubにプッシュし、Vercelを使ってネット上に公開する準備は整いました。
00:18:25本日の解説は以上です。Claude DesignとSeed Dance 2.0を組み合わせて
00:18:29アニメーション付きWebサイトを作る方法について、少しでも理解が深まれば幸いです。
00:18:33いつも通り、感想を聞かせてください。すべてのリソースを手に入れたい方はChase AIを
00:18:39忘れずにチェックしてください。それでは、またお会いしましょう。
00:18:44また次回お会いしましょう。