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

> Claude Codeでアニメーション付きウェブサイトを作る際の、テンプレート化を避けるルール、ビジュアルの方向性、GSAP、アクセシビリティ、パフォーマンスのテストについて解説します。

Source: https://ailoot.ai/blog/ja/animated-website-claude-code/
Canonical: https://ailoot.ai/blog/ja/animated-website-claude-code/
Language: ja
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-007
Revision: sha256-1c921c2db18e2ca0886f18dad458ce7f039bf5cb30086b322414c64aa8cf03bd


<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重要なポイント">

重要なポイント

Claude Codeは一晩でアニメーション付きウェブサイトを作れます。しかし、明示的な制約がないとモデルは学習データの平均的な傾向に流れるため、仕上がりはありきたりになりがちです。これを防ぐ方法は3つあります。`CLAUDE.md`にテンプレートを避けるルールを書くこと、曖昧な指示ではなく準備済みのビジュアルの方向性を与えること、そして最新のアニメーションライブラリのドキュメントをコンテキストに含めることです。最大の落とし穴は動きをやりすぎることです。アニメーションを盛り込みすぎると、アニメーションがない場合よりも生成物だと見抜かれやすくなり、ファーストビューの表示速度も悪化します。

</div>

モデルの活用方法について詳しくは、[Ailootのドキュメント](https://ailoot.ai/docs/)をご覧ください。

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重要なポイント">

重要なポイント

モデルに境界を設定しなければ、学習データで見たものすべてを平均化します。以前は紫色のボタンとInterフォントが生まれましたが、最近はセリフ体の文字とテラコッタ色のアクセントを組み合わせたクリーム色の背景が流行しています。Anthropicは自社スキルのドキュメントで、こうした標準的な見た目を3種類挙げ、明確にデフォルトの挙動だと説明しています。

</div>

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

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



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

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

<figure>
<blockquote>
<p>AI生成デザインは現在、3つの見た目に集中しています。暖かみのあるクリーム色の背景（#F4F1EA前後）に、対照的なセリフ体の見出しとテラコッタ色のアクセントを組み合わせたもの、ほぼ黒の背景に明るいアシッドグリーンか朱色のアクセントを一つだけ配したもの、そして細い罫線、角丸なし、新聞のように密度の高い段組みを使った幅広の新聞風レイアウトです。どれも特定のタスクには適していますが、意図的に選ばれたものではなく、デフォルトの挙動です。テーマに関係なく現れます。</p>
</blockquote>
<figcaption>— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md</figcaption>
</figure>

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

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

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

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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重要なポイント">

重要なポイント

ツール一式は無料です。必要なのはClaude Code本体、GSAPアニメーションライブラリ（2025年4月下旬以降、SplitTextやMorphSVGなど以前は有料だったプラグインを含め、完全に無料です）、Anthropicの`frontend-design`スキルです。公開には無料のホスティングサービスも使えます。費用がかかるのはエージェントの作業だけです。

</div>

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

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

<figure>
<blockquote>
<p>Webflowの支援により、GSAPはすべてのユーザーにとって完全に無料になりました。</p>
</blockquote>
<figcaption>— GSAP, https://gsap.com/pricing</figcaption>
</figure>

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

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

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

<figure>
<blockquote>
<p>新しいインターフェースの作成や既存のインターフェースの再設計において、独自性があり、よく考えられたビジュアルデザインを実現するためのガイダンスです。美的な方向性、タイポグラフィ、デフォルトのテンプレートに見えないデザインソリューションの選択を支援します。</p>
</blockquote>
<figcaption>— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md</figcaption>
</figure>

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





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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重要なポイント">

重要なポイント

手順は2つです。まず`CLAUDE.md`に禁止事項を書きます。標準の配色は使わない、見出しと本文に同じフォントを使わない、アニメーションは不透明度と変形以外に適用しない、といった内容です。次に`frontend-design`スキルをインストールします。コードを書く前に、エージェントがトークンシステムを組み立てて計画を批評するようになります。

</div>

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

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

```markdown
## 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の公式スキルはプラグインからインストールできます。

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

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

```bash
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のスキルの選び方](https://ailoot.ai/blog/ja/choose-claude-code-skills/)。

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

ここで重要なことは、すべてリクエストの前に行うことです。エージェントがその制約をもとに構築できるよう、あらかじめコンテキストに含めます。プロンプトの文面そのものは、ほとんど重要ではなくなります。この方法はコンテキストエンジニアリングと呼ばれ、`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向けの指示は次のとおりです。



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

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



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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重要なポイント">

重要なポイント

GSAPには`llms.txt`ファイルがあります。言語モデル向けに作られた25キロバイトのドキュメント要約です。エージェントにリンクを渡せば、過去の記憶ではなく、最新のメソッド説明をもとに作業できます。各ドキュメントページにはMarkdown版もあります。Motionライブラリにも同じファイルがあり、こちらのほうがさらに大きくなっています。

</div>

アニメーションライブラリでよくある問題は、エージェントが古い接続方法を覚えていることです。古いパスからインポートし、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を使いましょう。

<figure>
<blockquote>
<p>ScrollTriggerを使えば、最小限のコードで誰でもすばらしいスクロールアニメーションを作れます。</p>
</blockquote>
<figcaption>— GSAP, https://gsap.com/docs/v3/Plugins/ScrollTrigger</figcaption>
</figure>

ライブラリを使わない、ブラウザーだけで実現する方法もあります。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の公式サーバーは一つのコマンドで追加できます。

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

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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重要なポイント">

重要なポイント

順番は、テンプレートを避けるルール、デザインスキル、ビジュアルの方向性を一つ選ぶこと、静的ページの構築、そして最後に一つのアニメーションシーンを追加することです。動きを加えるのは最後にし、効果を一つずつ追加してください。そうしないと、問題が起きたときにどこから調べるべきか分かりません。何もかも一度にアニメーションにしなければ、以下の8つの手順は一晩でできます。

</div>

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生成らしく見えるのはなぜですか？

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重要なポイント">

重要なポイント

Anthropicはデザインスキルのドキュメントで、動きが多すぎるとページが生成されたという印象が強まると明言しています。エージェントは通常、すべてのセクションに順番にリビール効果を追加します。その結果、あらゆるものがちらついて動き、どこにも注意を誘導しないページになります。逆の方法が有効です。最初の画面に意図的なシーンを一つ置き、それ以降は控えめにします。

</div>

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

<figure>
<blockquote>
<p>ときには少ないほうが効果的です。アニメーションを過剰に使うと、デザインが生成されたという印象が強まります。</p>
</blockquote>
<figcaption>— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md</figcaption>
</figure>

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

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

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

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

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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重要なポイント">

重要なポイント

最大の落とし穴は、ブラウザーが不透明度0の要素をLargest Contentful Paintの候補とさえみなさないことです。「セクションを非表示にしてスクロール時に表示する」という一般的な手法を最初の画面に使うと、重要な速度指標に直接悪影響を与えます。また、アニメーションは変形と不透明度だけに適用してください。それ以外はすべてレイアウトの再計算を引き起こします。

</div>

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





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

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

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

<figure>
<blockquote>
<p>可能な限り、アニメーションを不透明度とtransformプロパティに限定し、描画パイプラインの合成段階にとどめてください。</p>
</blockquote>
<figcaption>— web.dev, https://web.dev/articles/animations-guide</figcaption>
</figure>

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

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

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

<figure>
<blockquote>
<p>will-changeを過剰に使うとメモリを過剰に消費し、変更の可能性に備えようとするブラウザーの描画処理を複雑化させます。その結果、パフォーマンスが低下します。</p>
</blockquote>
<figcaption>— MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/will-change</figcaption>
</figure>

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

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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重要なポイント">

重要なポイント

米国では40歳以上の成人の最大35%が、前庭障害を経験しています。こうした人にとって、スクロールアニメーションは吐き気や片頭痛につながることがあります。システムの「視差効果を減らす」設定は5年以上にわたりすべてのブラウザーでサポートされていますが、頼まなければエージェントは追加しません。CSSに加え、JavaScriptの設定で明示的な分岐が必要です。設定値を読むだけではタイムラインは止まりません。

</div>

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

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

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

```css
@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で要素を表示し、許可された場合だけ動きを生成します。

```js
// 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のライフサイクルと後処理](https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/)を参照できます。

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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重要なポイント">

重要なポイント

エラーのほとんどは、3つの原因に集約されます。最初の画面をアニメーションにすること、動きを使いすぎること、誤ったプロパティをアニメーションにすることです。スクロールジャッキングは別の問題です。適切なアニメーション時間は100〜400ミリ秒ですが、エージェントはデフォルトで1秒まるごと使いがちです。

</div>

**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か月分の上限を使い切らないようにするには？

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重要なポイント">

重要なポイント

この構成で使うツールはすべて無料です。費用がかかるのは、エージェントの作業そのものです。コードを読んでも結果を確認できないため、編集のたびにファイルを読み直し、さらに反復が必要になります。アニメーション制作では、通常のレイアウト作業よりも使用上限を速く消費します。シーンを一つずつ作ること、`CLAUDE.md`を短く保つこと、アニメーション要素に対するスクリーンショットのループを無効にすることが役立ちます。

</div>

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

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

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

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

[Claude Codeがプロジェクト全体を読み直す理由](https://ailoot.ai/blog/ja/claude-code-rereads-project/)では、プロジェクトで作業するときにトークンが消費される場所を説明しています。[Claude Codeの利用上限を使い切らない方法](https://ailoot.ai/blog/ja/claude-code-token-limits-saving/)では、使用量を抑える方法を取り上げています。

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重要なポイント">

重要なポイント

この方法は有効です。テンプレートを避けるルール、ビジュアルの方向性を一つ、動きのあるシーンを一つ、速度の確認、そして読者の設定への配慮を組み合わせます。複雑なのは、エージェントが構築のよりどころにできる正しい情報を、事前にコンテキストへ入れることです。アニメーション自体は、作業の中で最も簡単です。

</div>

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

<div class="section" role="doc-bibliography" aria-label="出典">

### 出典

- [anthropics/skills](https://github.com/anthropics/skills) - frontend-designなどを含むAnthropic公式スキル
- [GSAP：料金](https://gsap.com/pricing) - 無料であることの確認
- [GSAP 3.13のリリース](https://gsap.com/blog/3-13) - 2025年4月下旬に無料になったもの
- [GSAP：llms.txt](https://gsap.com/llms.txt) - 言語モデル向けのドキュメント
- [GSAP：ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger) - スクロールアニメーション用プラグイン
- [Motion](https://motion.dev/) - MITライセンスのオープンソース代替製品
- [web.dev：アニメーションガイド](https://web.dev/articles/animations-guide) - アニメーションに使うプロパティ
- [MDN：will-change](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change) - 事前設定が推奨されない理由
- [MDN：prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) - 動きを減らす設定
- [WCAG 2.2.2：一時停止、停止、非表示](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) - アクセシビリティ基準
- [W3C：インタラクションによるアニメーション](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) - 前庭障害への影響
- [Mobbin MCP](https://mobbin.com/mcp) - エージェント向けインターフェース参照ライブラリ

</div>



次のステップ：[Ailoot](https://ailoot.ai/)へ。

## Claude Codeで一晩でアニメーション付きウェブサイトを作る方法：よくある質問

### 視差効果を減らすCSSを入れても、GSAPが動くのはなぜですか？

CSSの時間指定はJavaScriptのタイムラインを中止しません。GSAPの生成をmatchMediaのno-preference分岐へ入れ、元の要素は表示しておきます。設定が有効なら静止したページになります。

### 画面遷移でアニメーションが蓄積するのを防ぐには？

ページやコンポーネントの削除時に、設定関数が返す後処理を呼びます。例のmm.revert()は、そのmatchMediaが収集したスタイルを戻し、アニメーションを除去します。


## Ailoot · 企業とそのプロジェクト群

Ailootは、蓄積した運営経験、幅広い顧客基盤、安定したサービス、継続的なKPI管理を基盤としています。

企業とそのプロジェクト群：数百万の顧客、毎月数十億規模の売上。

Ailootはこの運営経験を、お客様の製品、エージェント、アプリケーション、自動化でAI機能を利用するためのAPIアクセスに活かしています。