スクロールアニメーションのサイトを作りたかった理由
Apple の製品ページのように、スクロールすると映像が「再生」されるサイトを見たことがあるはずです。料理が組み上がり、製品が回転し、場面が開けていく。私はエンジニアではなくプロダクトマネージャーですが、レストランのサイトにこの効果を入れたいと思いました。ここでは Claude Code と EMBER TABLE Skill を使った実際の手順を紹介します。Codex や Cursor でも同じように使えます。
スクロール連動のコマ送りアニメーションの仕組み
動画ではありません。ページには静止画の連番（EMBER TABLE のデモ素材は 192 コマ）が入っていて、スクロール位置に応じた 1 枚を canvas に描きます。下にスクロールすれば先へ進み、上に戻せば巻き戻ります。滑らかに動かすには、コマの先読み、スクロール位置とコマ番号の対応、Retina 画面での鮮明さ、スマホ向けの軽量版が必要です。一行のプロンプトでは伝えにくい部分ですが、Skill がそれを AI 向けにすでに書き出しています。
用意するもの
- インストールしてサインイン済みの Claude Code（または Codex／Cursor）
- 空のプロジェクトフォルダ
- Skill ページの EMBER TABLE Skill（どのプランにも含まれます。料金を参照）
- お店の名前と短いストーリー。まずはデモ素材（アニメーション 192 コマ＋写真 15 枚）で始めて、あとから自分の素材に差し替えられます
Skill が初めてなら、先にSkill とは何か、どう使うかをお読みください。
ステップ 1：Claude Code でプロジェクトフォルダを開く
ember-site などのフォルダを作り、そこでターミナルを開いて claude を起動します。デモのコマと写真をフォルダ（または assets サブフォルダ）に入れ、AI から見えるようにします。
ステップ 2：Skill を貼り付ける
EMBER TABLE Skill を全文コピーし、最初のメッセージとして貼り付けます。skills フォルダに SKILL.md として保存し、あとで名前で呼び出すこともできます。Skill は Claude に、何を作るか（オープニングアニメーション、オンラインメニュー、注文、予約フォーム）、何を質問するか、結果をどう確認するかを伝えます。
ステップ 3：質問に答える
Claude はお店の名前、ストーリー、コマや写真の場所などを尋ねてきます。普段の言葉で答えれば大丈夫です。HTML、CSS、JavaScript の知識は不要で、出来上がるのは素の HTML、CSS、JavaScript による完成したサイトです。
ステップ 4：結果を開いてスクロールする
Claude の作業が終わったら、ブラウザで index.html を開き、ファーストビューをゆっくりスクロールします。確認するのは三つ。アニメーションが上下どちらのスクロールにも追従するか、ちらつかないか、上に重なる文字が読めるかです。
ステップ 5：普段の言葉で調整を重ねる
ここに一番時間がかかりますが、それが普通です。うまくいく頼み方の例：
- 「アニメーションが終わるのが早すぎる。ファーストビューのスクロール距離を長くして」
- 「スマホだと重い。幅 768px 未満ではコマを減らして小さくして」
- 「動きを減らす設定の訪問者には静止画を 1 枚だけ見せて」
- 「見出しを……に変えて。フォントはそのまま」
コードの書き方ではなく、見えている状態を説明してください。何か壊れたら、ブラウザのエラーを貼るか、どこがおかしいかをそのまま伝えます。
ステップ 6：スマホとパソコンで確認する
Skill のレイアウトは 360 px のスマホから 1440 px のデスクトップまで確認済みです。それでも公開前に、ブラウザのデバイスプレビューでスマホ幅と広い画面を自分で試してください。
ステップ 7：自分のコマに差し替える
自分のアニメーションを使うには、短い映像を撮影するか AI で生成し、連番画像に書き出します（ezgif の「動画を画像に」のような無料ツールを使うか、Claude に FFmpeg を実行してもらいます）。それをコマ用フォルダに入れ、枚数を Claude に伝えます。コマが多いほど滑らかになりますが、ページは重くなるので、ほどほどに抑えましょう。
まず無料で流れを試したいなら
同じ「貼って、調整する」流れは、無料コーナーの Skill、たとえば WORLDVIEW SAAS でも使えます。コマ送りアニメーションはありませんが、EMBER TABLE を解放する前に、費用をかけずにこの流れを覚えられます。
よくある質問
コードが書ける必要はありますか？
いいえ。Skill を貼り、質問に答え、変更を普段の言葉で伝えるだけです。ターミナルとブラウザを開ければ十分です。
Claude Code だけでなく Cursor や Codex でも使えますか？
はい。Sketchry の Skill は Claude Code、Codex、Cursor 向けに書かれています。
スクロールアニメーションは動画ですか？
いいえ。スクロール位置に応じて静止画を canvas に描いているので、滑らかに逆再生できます。
スマホで重くなりませんか？
コマが大きいと重くなることがあります。小さい画面ではコマを減らすか小さくし、動きを減らす設定では静止画を出すよう AI に頼んでください。
作ったサイトをクライアントに納品できますか？
Sketchry の Skill で作ったものは、ご自身やクライアントの商用プロジェクトに使えます。クレジット表記は不要です。