Claude Codeで一晩でアニメーション付きウェブサイトを作る方法

モデルの活用方法について詳しくは、Ailootのドキュメントをご覧ください。

AIが作ったウェブサイトは、なぜ最初の画面で分かるのでしょうか？#

エージェントにランディングページを作ってもらいます。40分後には、セクションがそろい、レスポンシブなレイアウトで、ボタンも動くサイトができています。ところがすぐに、どこかで見たことがあるような気がしてきます。

原因は仕組みにあります。モデルは完成済みの膨大なページを使って学習していますが、そのデータには強い偏りがありました。

何千ものチュートリアルやスターターテンプレートがその色を模倣し、サンプルに偏りを生みました。そしてモデルは、ボタンは紫色だと学習しました。同じ仕組みは、フォントや角丸、影にも当てはまります。

その間に「AIらしい見た目」も変わりました。Anthropicはfrontend-designスキルのドキュメントで、現在は異なる見た目が使われていると説明しています。

根本的な問題は、模倣する具体例がないとslopが生まれ、モデルがウェブ上のあらゆるスタイルを単純に平均化することです。Qtに一貫性があるのは、ほかの見た目を知らないからにほかなりません。

ここでいう「slop」とは、機械が生成したものが平均化され、独自のスタイルを持たないありきたりな結果になることです。

実際に役立つのは、自由形式のタスクではなく、狭く定めたデザイン文法をエージェントに与えることです。「美しくして」と伝えれば、平均的なものを作ります。具体的な配色、書体を2つほど、そして特徴となるビジュアル要素を一つ与えれば、それをもとに組み立てます。

この状況で最も目立つ兆候は動きです。タイポグラフィが完璧な静的ページでさえ、テンプレートのように見えます。生きたウェブサイトには呼吸があるからです。スクロールに合わせて要素が現れ、カーソルに反応し、画面間の切り替えが唐突に途切れません。

Claude Codeでアニメーション付きウェブサイトを作るには何が必要ですか？#

料金については誤解が多いので、ツールを一つずつ見ていきましょう。

GSAPは、受賞歴のあるウェブサイトの多くを支えるアニメーションライブラリです。Webflowは2024年10月にGSAPを買収し、すぐにすべてが無料になったという噂が広まりました。正確にはそうではありません。当時、Webflowは既存の料金体系を維持すると確認していました。ライブラリが無料になったのは、バージョン3.13がリリースされた2025年4月下旬です。

3.13のリリースノートには、SplitTextやMorphSVGなど以前は有料だったプラグインも、商用利用を含め無料になったと明記されています。2026年7月時点の最新バージョンはgsap@3.15.0です。

ただし、無料でもオープンソースではありません。ライセンスは引き続きプロプライエタリで、Webflowと競合するGSAPベースのビジュアルアニメーションエディターの構築は禁止されています。ウェブサイトやクライアント案件、商用制作に制限はありません。

Anthropicのfrontend-designスキルは、エージェントがインターフェースに取り組む方法を変える指示のセットです。リポジトリの説明には、次のようにあります。

内部では、2段階の方法を使います。まずエージェントがトークンシステムを組み立てます。名前を付けた色を4〜6色、少なくとも2つの役割に対応する書体、テキストのスケッチで示すレイアウト案、ページを特徴づけるビジュアル要素を一つ用意します。その後、タスクに照らして自分の計画を批評し、それから初めてコードを書きます。

投稿では75個、リポジトリの説明では78個、そして現在のファイルツリーには91個のスキルが掲載されています。作者自身も率直に説明しており、説明が古いため、検索コマンドでリポジトリを確認するよう勧めています。

Claude Codeにテンプレートを作らせないようにするには？#

まずはルールファイルから始めましょう。すべてのリクエストに適用され、費用もかからないからです。

役立つ出発点は、アンチテンプレート・ガードレールのブロックです。考え方はシンプルです。モデルがデフォルトで選びがちな具体的な選択肢を挙げ、名前を指定して禁止します。

## Anti-Generic Guardrails

- Colors: Never use default Tailwind palette (indigo-500, blue-600).
  Pick a custom brand color and derive from it.
- Shadows: Never use flat shadow-md. Use layered, color-tinted shadows with low opacity.
- Typography: Never use the same font for headings and body. Pair a display/serif
  with a clean sans. Apply tight tracking (-0.03em) on large headings,
  generous line-height (1.7) on body.
- Gradients: Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth.
- Animations: Only animate transform and opacity. Never transition-all.
  Use spring-style easing.
- Interactive states: Every clickable element needs hover, focus-visible,
  and active states. No exceptions.
- Spacing: Use intentional, consistent spacing tokens - not random Tailwind steps.
- Depth: Surfaces should have a layering system (base -> elevated -> floating).

このブロックは意図的に英語で書かれています。ドキュメントの言語で短い技術的な指示を与えると、モデルがより正確に従うためです。

アニメーションに関する一文が、配色や影と並んで禁止事項に含まれているのには理由があります。ファーストビューで不透明度を使うと、表示速度の指標に直接影響することは後ほど説明します。

次はスキルです。Anthropicの公式スキルはプラグインからインストールできます。

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

一点注意があります。デザインスキルは個別にインストールできません。example-skillsプラグインを使うと12個すべてが一度に追加されます。一つだけ使いたい場合はフォルダーを手動でコピーしてください。セッションを再起動しなくてもClaude Codeが認識します。

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

同じコレクションには、10種類のテーマを用意し適用前に人間の確認を必須とするtheme-factory、既製コンポーネントを使ってReactで構築するweb-artifacts-builder、生成グラフィック向けのalgorithmic-artなど、役立つ可能性のあるスキルもあります。タスクに合ったスキルの選び方を詳しく解説した別の記事もあります：Claude Codeのスキルの選び方。

ルールとスキルは連携して働きます。ルールは悪い選択を禁止し、スキルは手順を定めます。まずシステムを作り、次に批評し、最後にコードを書くという流れです。

ここで重要なことは、すべてリクエストの前に行うことです。エージェントがその制約をもとに構築できるよう、あらかじめコンテキストに含めます。プロンプトの文面そのものは、ほとんど重要ではなくなります。この方法はコンテキストエンジニアリングと呼ばれ、CLAUDE.mdファイルがその最初の構成要素です。

既製のビジュアルの方向性やアニメーションのプロンプトはどこで見つかりますか？#

収録されているモーション技法は、animation-on-scroll、gsap、gsap-scrolltrigger-storytelling、cinematic-gsap-lenis-motion-system、cinematic-scroll-storytelling、marquee-loop、masked-reveal、staggered-word-reveal、reveal-hover-effect、scroll-progress-timeline、scroll-scrubbed-visual-sequence、scroll-scrubbed-word-reveal、scroll-world-storytellingです。

プログラマーでない人にとって、もっと重要なのは既製のビジュアルの方向性です。曖昧な「モダンにして」という指示の代わりに、以下から一つ選び、モデルに不足していた狭いデザイン文法を与えましょう。

• clean-minimal-beige-light-mode - 明るいベージュのミニマリズム
• dark-glass-clean-layout - ダークなガラス風デザイン
• documentary-brutalist-agency - ブルータリズムのドキュメンタリー風
• editorial-portfolio-chapters - 雑誌のように章立てされたポートフォリオ
• orange-clean-paper-saas - オレンジ色をアクセントにした紙風のサービスサイト
• solar-duotone-bold - 大胆な2色使い
• tech-green-dark-mode-modern - グリーンを使ったダークなテックスタイル
• light-mode-paper-technical - 明るいテクニカルペーパー風

threejs、matterjs、globe-gl、vantajs、unicorn-studio、progressive-blur、beautiful-shadows、css-border-gradientなど、3Dグラフィックやエフェクト向けの技術的なスキルもあります。

リポジトリにはインストールコマンドがありません。作者はロードマップで、連携方法が決まったら追加すると明言しています。Claude Code向けの指示は次のとおりです。

以下にインストール方法の一つを示します。このコマンドはリポジトリにはなく、インストール方法の提案です。

git clone '<OFFICIAL_URL>'
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/

GSAPの最新ドキュメントを一行でエージェントに与えるには？#

アニメーションライブラリでよくある問題は、エージェントが古い接続方法を覚えていることです。古いパスからインポートし、2年前の方法でプラグインを登録して、コードが動かないということが起こります。

解決策は、ドキュメントを自分でコンテキストに入れることです。GSAPは機械が扱いやすい形式でドキュメントを提供しています。

https://gsap.com/llms.txt

ファイルのサイズは、現時点で約25キロバイトです。各ドキュメントページにはMarkdown版もあり、URLの末尾に.mdを付けるだけです。

実際には、次のように使います。

Read https://gsap.com/llms.txt and https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

Then build one scene on the home page: the headline appears as you scroll
through the first screen, and the image on the right shifts more slowly than the text.
Use only transform and opacity. No transition-all.

Motionライブラリ（旧Framer Motion）にも同じファイルがあり、こちらのほうがさらに大きくなっています。MotionはMITライセンスで配布され、真のオープンソースとして提供されています。現行バージョンはmotion@12.42.2です。プロジェクトがReact製で、シンプルなリビール効果だけが必要ならMotionを選べます。複雑なスクロール演出には、ScrollTriggerプラグインと合わせてGSAPを使いましょう。

ライブラリを使わない、ブラウザーだけで実現する方法もあります。View Transitions APIによるページ状態の遷移は、2025年10月14日にBaselineの対応対象になりました。ただし、同一ページ内に限られ、ページをまたぐバージョンはFirefoxでまったくサポートされていません。CSSスクロールアニメーションは、まだBaselineの対応対象ではありません。Chromeは対応し、Safariも最近対応しましたが、Firefoxでは設定から手動で有効にする必要があります。そのため一般の閲覧者には動作しません。ブラウザーが対応しているかどうかを先に確認するようエージェントに指示し、対応していなければ標準の遷移を残してください。

気に入ったウェブサイトをプロンプトにするには？#

欲しいものを説明する最も一般的な方法は、例を見せることです。しかし、エージェントはウェブサイトを見るのではなく、テキストを読み取るため、そのままではうまくいきません。

video-to-superpromptスキルがその隔たりを埋めます。リポジトリの説明によると、動画のリファレンスを再現や着想に使える詳細なプロンプトに変換します。スキルは録画を、ストーリー、レイアウト、動き、タイポグラフィ、3Dグラフィックの各レイヤーに分けて分析し、その結果、一つのすぐに使えるプロンプトを作ります。

中心となるルールは、強い表現で書かれています。

2つ目のhtml-to-interaction-promptsスキルはソースコードを扱います。カーソルへの反応、3Dグラフィック、スクロール効果、異なる速度で動くレイヤーなど、動く要素をすべて見つけ、セクション、ボタン、ホバー状態、効果ごとに別々のプロンプトへ分解します。その原則は、ソースコードから分かる挙動を事実として扱い、コードが利用できるときにスクリーンショットから効果を想像しないことです。

3つ目のstitched-full-page-captureスキルは、実務上の問題を解決します。遅延読み込みや3Dグラフィックを使ったサイトを通常の全ページスクリーンショットで撮ると、レンダリング前にキャプチャされるため、灰色で何もない画像になります。このスキルは画面ごとにページをスクロールし、すべての描画が落ち着くのを待ってから、結果をつなぎ合わせます。

画面録画を使わない方法もあります。MCP経由で、ライブのインターフェース例のライブラリにエージェントを接続できます。Mobbinの公式サーバーは一つのコマンドで追加できます。

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

その後、新しいセッションを開いて、一覧からサーバーを選択し、ブラウザーでサインインします。エージェントは、一覧にある621,500件を超える実際に動作するアプリのスクリーンショットにアクセスできるようになります。コンポーネントやコードではなく、完成した製品のスクリーンショットです。重要な注意点として、Mobbinサーバーは無料プランでは動作せず、有料プランで利用できます（2026年7月時点）。外部サービスをエージェントに接続する方法と同じやり方で、デザインシステムをClaude Codeに取り込むGoogle Stitchについては、別の記事で解説しています。

手順：一晩でアニメーション付きウェブサイトを作る#

1. プロジェクトを設定する

   まだプロジェクトがなければ、空のフォルダーから始めます。フォルダーを作り、ターミナルで開いて、その中でclaudeを実行します。最初のプロンプトでは、次のように依頼してください。「自分のビジネス（内容を説明）のために、ライブラリを使わず、プレーンなHTMLとCSSで1ページのウェブサイトの骨組みを作ってください。」いくつかのファイルが作られたら、そこがプロジェクトのルートです。これからの作業はすべてここで行います。

2. ルールをCLAUDE.mdに入れる

   Anti-Generic Guardrailsのブロックをコピーして、プロジェクトのルートにあるCLAUDE.mdファイルに入れます。ファイルがなければ、エージェントに作成を依頼してください。ルールはTailwind向けです。ひな型がプレーンなCSSを使っている場合は、「これらの原則を通常のCSSに適用してください」と伝えます。ルールの意味は変わりません。ファイルの仕組みや、ほかに書き込む内容については、CLAUDE.mdの4つのルールの解説をご覧ください。

3. frontend-designスキルをインストールする

   上記の説明に従い、example-skillsプラグインを使うか、frontend-designフォルダーをコピーします。/doctorコマンドでスキルが読み込まれたか確認できます。

4. ビジュアルの方向性を一つ選ぶ

   一つだけ選びます。二つでも三つでもありません。ブルータリズムのドキュメンタリー風とベージュのミニマリズムを混ぜると、避けようとしている平均化そのものになります。

5. 静的ページを作る

   アニメーションは一切使いません。タイポグラフィ、余白、グリッドを先に整えます。エージェントにローカルプレビューを起動するよう頼み、表示されたアドレスを開きます。スマートフォンで見るには、「ネットワーク上のほかのデバイスから開けるように起動してください」と伝えると、エージェントがアドレスを教えてくれます。

6. 動きのあるシーンを一つ加える

   一つだけです。通常は最初の画面です。見出しが現れ、背景レイヤーが前景よりゆっくり動きます。ライブラリのllms.txtをエージェントに渡し、何がどこで何ミリ秒かけて動くのかを具体的に説明してください。最初の画面では不透明度を使わないようにします。その理由は後のセクションで説明します。

7. 動きを減らす設定に対応する

   アクセシビリティ節のCSSとJavaScriptの設定を適用します。公開前に、動きを減らす設定を有効にしたページを確認してください。

8. 公開して速度を確認する

   Vercel、Netlify、GitHub Pagesなど、無料の静的ホスティングサービスで公開します。エージェントには「このプロジェクトをVercelで公開して、リンクを教えてください」と頼みます。公開後に、できあがったURLをPageSpeed Insightsで測定します。このサービスは公開URLに対して機能するため、ローカルページは測定できません。指標の「Largest Contentful Paint」を確認してください。最大要素の描画にかかる時間を表し、2.5秒以下が緑の範囲です。公開前のローカル版は、エージェントが測定できます。Chrome DevTools MCPでChrome上にページを開けば、同じ指標を確認できます。

ここまでの作業を台無しにしやすいのは、手順6です。

アニメーションをやりすぎると、ウェブサイトがさらにAI生成らしく見えるのはなぜですか？#

このテーマに取り組む人のほぼ全員が、ここで考え違いをします。アニメーションが少ないと安っぽく見えるので、もっと加える必要があると思うのです。

これは、デザインを改善するためにインストールしたfrontend-designスキル自体に書かれています。Anthropicは、エージェントがページを装飾するために使うツールの中で、やりすぎないよう警告しています。

さらに、よくある定型的な手法も挙げています。どんなタスクにも、大きな数字と小さなキャプション、グラデーションのアクセントを組み合わせることや、実際に順序がある場合にだけ適切な01 / 02 / 03の番号付きブロックなどです。

実際には、やりすぎるとこうなります。「アニメーションを追加して」と頼まれたエージェントが、すべてのセクションにスクロールリビールを加えます。見出しが滑り込み、3つのカードが次々と現れ、お客様の声が横から滑り込み、フッターがフェードインします。それぞれの効果は単独なら問題ありません。しかし全部を合わせると、動きが止まらず、何も強調されないページになります。

実際のウェブサイトは違います。意図したシーンを一つ、通常は最初の画面に置き、その後は控えめにします。動きは強調表現のようなものです。一つの単語にかかっている限り、意味があります。

プロンプトには、次のようなルールを入れられます。「最初の画面に一つのシーンを作り、ほかはすべて静止させてください。」「アニメーションを追加して」という指示と数語しか違いませんが、結果は桁違いによくなります。

アニメーションはどのようにウェブサイトの速度を落としますか？#

Googleがページの評価に使う指標は3つです。最大要素の描画にかかる時間は2.5秒以下、操作への応答時間は200ミリ秒以下、レイアウトシフトは0.1以下です。実際の訪問の75パーセンタイルで測定されます。

これがなぜ重要なのか、詳しく見てみましょう。エージェントは通常、セクションの不透明度を0に設定し、そのセクションがビューポートに入ると設定を解除するリビール効果を作ります。これを最初の画面に使うと、画像の読み込みとデコードが完了していても、描画が始まるまで指標に含まれません。読み込み後にスクリプトが不透明度を解除する場合は、スクリプト全体が終わるまで指標の計測が遅れ、さらに悪化します。

対処法は2つあります。一つは、0ではなく小さな非ゼロの不透明度から始めて、初期描画を計測対象にすることです。もう一つは、最初の画面では不透明度を使わず、移動だけをアニメーションにすることです。

次の問題は、アニメーションに使うと負荷が低いプロパティと高いプロパティです。

平たく言うと、ブラウザーは画像をレイヤーごとに組み立て、位置と不透明度の変更は最後の、最も低負荷な段階で行われます。それ以外の変更では、ページを再計算する必要があります。同じドキュメントにある測定値では、topとleftのオフセットによるアニメーションはレイアウトに37ミリ秒、描画に79ミリ秒かかります。同じ見た目の効果をtransformで実現すると、どちらも0ミリ秒です。

そして覚えておきたい矛盾があります。不透明度は合成の負荷が低い一方で、要素を速度指標の対象外にします。つまり、ブラウザーにとって負荷が低いアニメーションと、パフォーマンス上安全なアニメーションは別のものです。

エージェントが「最適化」と称して多用するwill-changeプロパティについて、もう一点あります。MDNのドキュメントは、むしろ逆のことを述べています。

このプロパティは、すでに発生しているパフォーマンス問題に対処する最後の手段として使うものだとも説明されています。予防には役立ちません。50個の要素にwill-change: transform, opacityと書くのは、生成コードによくある典型的な兆候です。

レイアウトシフトについては、話がもっとシンプルです。Googleのドキュメントはアニメーションを責めていません。むしろ、丁寧な遷移は読者を驚かせることなくコンテンツを更新するのに役立つと説明しています。手順は同じです。幅と高さではなくtransformで拡大縮小し、座標ではなくオフセットで移動します。

動きによって身体に悪影響を受ける人にはどう配慮すればよいでしょうか？#

これは単なる礼儀の問題ではありません。事業主の商品を購入する読者層は、まさに40歳以上の人たちです。

吐き気や片頭痛が起き、ときには横にならなければならないほど重くなることもあります。

CSSとJavaScriptの両方で、動きを減らす設定に対応します。

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

覚えておきたい点は3つです。

アニメーションをデフォルトの挙動として書き、このルールの中で無効にします。そうすると、逆にするより安全な形でページが機能します。

仕様で述べられているのは「削除、軽減、置き換え」です。完全に削除することは、最初の選択肢ですらありません。急なスライドインを短いフェードに置き換えるほうが、完全に打ち切るより効果的です。すべてのアニメーションを無効にすると、読み込み表示やプログレスバーが壊れます。

JavaScript駆動の動きには別の設定処理が必要で、CSSの時間上書きではGSAPのタイムラインは中止されません。matchMedia(...).matchesを変数に入れるだけでは、分岐に使わない限り効果がありません。通常のHTML/CSSで要素を表示し、許可された場合だけ動きを生成します。

// Run after GSAP and the page elements have loaded.
function mountMotion() {
  const mm = gsap.matchMedia();
  mm.add('(prefers-reduced-motion: no-preference)', () => {
    gsap.from('.hero-title', { y: 24, duration: 0.35 });
  });
  return () => mm.revert();
}

const cleanupMotion = mountMotion();
// Call cleanupMotion() when this page or component is removed.

見出しの基本スタイルを非表示や移動状態にしないでください。動きを減らす設定では、表示されたまま静止します。ページを開いたまま設定が変わって条件が一致しなくなると、GSAPが動きを戻します。終了時のmm.revert()も収集した動きを除去します。Motionでも同等の分岐をそのライブラリの設定に実装し、CSSだけに頼らないでください。GSAP matchMediaのライフサイクルと後処理を参照できます。

正式なアクセシビリティ基準についても覚えておきましょう。レベルAの基準であるWCAG 2.2.2では、自動で動く、点滅する、またはスクロールするものが5秒を超えて続き、ほかのコンテンツと一緒に表示される場合、ユーザーが停止できるようにする必要があります。これは、自動で切り替わるカルーセルや無限マーキーに適用されます。エージェントはこうした要素をよく追加します。

うまくいかない7つのポイント#

1. 最初の画面がフェードインするまで非表示になる。 不透明度が0の要素は、描画指標の候補に含まれません。検索順位に影響する指標に悪影響を与えるため、最も損失の大きいミスです。

2. すべてをアニメーションにする。 あらゆるセクションが滑り込み、すべてのカードが飛び出します。Anthropicは、こうすると生成されたデザインという印象が強まると明言しています。

3. スクロールジャッキング。 ウェブサイトがマウスホイールの通常の挙動を、独自の「シネマティック」な動きに置き換えることです。

同じ調査で、参加者の大半が少なくとも軽い混乱を感じました。

4. レイアウトプロパティをアニメーションにする。 transformではなく、座標やサイズを変える方法です。所要時間は37ミリ秒と79ミリ秒、それに対して0ミリ秒です。

5. アニメーションが長すぎる。 適切な範囲は100〜400ミリ秒で、400ミリ秒はすでに非常に遅く、大きな動きにのみ適しています。エージェントはデフォルトで1秒まるごと使いがちです。

調査結果によると、適切な範囲は100〜400ミリ秒です。400ミリ秒でもかなり遅く、大きな動きにのみ適しています。エージェントはデフォルトで1秒まるごと使いがちです。

6. 動きを減らすルールがない。 エージェントは自分から追加しません。

7. 操作のたびにウェブサイトが遅くなる。 React特有の問題です。要素への参照を使わず、クリーンアップも行わずにアニメーションを作ると、コンポーネントが更新されるたびに増殖します。原因が分からないまま、ページの動作が徐々に遅くなります。

8つ目の落とし穴もあります。「エージェントにスクリーンショットを撮らせて、見たものを修正させる」方法は静的なページには有効ですが、アニメーション要素では終わりのない編集ループに陥ります。途中のフレームを見たエージェントが不具合だと思って修正し、次の途中のフレームを見つけるのです。さらに、スクリーンショットのたびにコンテキストを消費します。

費用はいくらですか？1つのウェブサイトで1か月分の上限を使い切らないようにするには？#

英語圏のバイブコーディングコミュニティでよく見かける話があります。宇宙をスクロールして進む派手なページを作り、結果を投稿したところ、議論の中で、そのサイト一つだけで月間利用上限をすべて使い切ったと分かるのです。

当然の結果です。アニメーションは、いくつもの理由から通常のレイアウト作業よりコストがかかります。コードを読んでも結果を確認できず、試行錯誤が必要です。編集のたびにファイルを読み直します。動く要素に対するスクリーンショットのループも、不要な処理を追加します。

役立つことは次のとおりです。

シーンを一つずつ作り、結果を確定させます。「サイト全体にアニメーションを追加して」と一度に依頼すれば、使いすぎは避けられません。アニメーション要素のスクリーンショットによる検証は無効にして、自分で見た目を確認できます。すべてのリクエストでルールがコンテキストを消費しないよう、CLAUDE.mdを短く保ちます。また、ライブラリのllms.txtを事前にエージェントへ渡しましょう。そうしなければ、古い接続方法をでっち上げ、自分で作った誤りのデバッグに時間を使います。

Claude Codeがプロジェクト全体を読み直す理由では、プロジェクトで作業するときにトークンが消費される場所を説明しています。Claude Codeの利用上限を使い切らない方法では、使用量を抑える方法を取り上げています。

次は何をすればよいですか？#

8つの手順に沿って、最初のページを作りましょう。ビジュアルの方向性を一つ選び、最初の画面にシーンを一つ作り、速度を確認してください。

次のステップ：Ailootへ。