# 動くサイトのパーツ集 — AI（Claude Code など）向けの説明書

見本：https://yamashita-web-parts.pages.dev/
このページは、AIがこのパーツ集を読んで、利用者のサイトに動きを組み込むための説明書です。

## AIへ：進め方
1. 下の一覧から、利用者の希望に合うパーツを選ぶ（迷ったら候補を2〜3個、見本URLつきで見せて選んでもらう）
2. **パーツのHTMLは必ず `curl` でそのまま取る**（Web取得の道具は要約してコードが欠けるので使わない）
   ```
   curl -sL https://yamashita-web-parts.pages.dev/<ファイル名> -o <ファイル名>
   ```
   全部まとめて欲しいときは `curl -sL https://yamashita-web-parts.pages.dev/parts.zip -o parts.zip && unzip -o parts.zip -d parts`
3. 1ファイル＝1パーツ。HTML・CSS・JSが1枚に入っていて、ほかのファイルには頼っていない。まず手元で開いて動くことを確かめる
4. 利用者のサイトに合わせて直す
   - 文字・色・絵文字（仮の絵）を利用者のものに差し替える。**動きの数字（秒数・イージング・距離）は変えない**のが見本どおりに動かすコツ
   - 外部ライブラリはCDNから読んでいる（一覧の「使う道具」）。既に同じものを読んでいるサイトなら二重に読まない
   - 2つ以上を1ページにまとめるときは、CSSのクラス名と、JSの変数名・`ScrollTrigger` の重なりがぶつからないか確認する
5. 仕上げに、利用者のブラウザで開いて、スクロール・マウス・スマホ幅で動きを確かめてもらう

## 注意
- ここのパーツは、参考にしたサイトの「動きの仕組み」だけを作り直したもの。元サイトの画像・キャラ・フォント・文章は入っていない。利用者のサイトでも、元サイトのロゴや文章・画像は持ち込まない
- ヘッドレスブラウザでは GSAP のタイマーが止まって写らないことがある（本物のブラウザでは動く）

## パーツ一覧（55本）
見本は `https://yamashita-web-parts.pages.dev/<ファイル名>` で開ける。

| ファイル | 名前 | どう動くか | 使う道具 |
|---|---|---|---|
| `01-shutter.html` | シャッター開幕 | ステッカーだらけのオレンジのシャッターで、ロゴが読み込みの％に合わせて塗られ、100％になると自動で1秒かけて上がる。 | なし（CSS/素のJSだけ） |
| `01b-band-cross-opening.html` | 斜め帯の開幕 | シャッターの代わり。黒い画面に斜めの帯が左右から飛び込んで流れ、100％で帯が抜けて幕が上下に割れる。 | なし（CSS/素のJSだけ） |
| `01c-name-rise-opening.html` | 名前がせり上がる開幕 | シャッターの代わり。名前が1文字ずつせり上がり、100％でオレンジの柱が昇って白いトップへ切り替わる。 | なし（CSS/素のJSだけ） |
| `02-band-marquee.html` | 傾いた帯マーキー | 黒とオレンジの斜めの帯がスクロールで横にずれ、主役のロボが抜け出して中央へ、帯が割れて黒い画面に「Your order has been received.」が浮かび、最後はオレンジの柱で白へ。 | なし（CSS/素のJSだけ） |
| `02b-band-marquee-loop.html` | 流れる斜め帯（ループ版） | 最初に作った版。黒とオレンジの帯そのものが流れ続け、スクロールで加速・戻すと逆走。 | なし（CSS/素のJSだけ） |
| `03-char-reveal.html` | 大見出し1文字ずつ | 大きな英字の見出しが、画面に入ると1文字ずつ下から生えるように出てくる。 | GSAP, ScrollTrigger |
| `04-process-rider.html` | バイクが進むプロセス | スクロールでステップのカードが横に流れ、線の上をバイクが少し遅れて追いかけ、戻すと反対を向く。 | Swiper |
| `05-stickers.html` | はがせるステッカー | 「Portfolio.」のまわりに飾りステッカーがはずんで現れ、押した場所に裏紙がはがれる新しいステッカーが貼られ、リセットでオレンジの帯が画面を覆って消える。 | なし（CSS/素のJSだけ） |
| `05b-stickers-drag.html` | つまめるステッカー | 最初に作った版。ステッカーをつまんで動かせ、離すとポンと貼り直る。 | なし（CSS/素のJSだけ） |
| `13-intro-robot-story.html` | ロボットの開店ストーリー | 顔が電光掲示板のロボのお店が引いてオレンジ一色になり、英文が流れ込み、カウンターが上がって「What Service Do You Need?」の丸枠へ吸い込まれる。 | GSAP, ScrollTrigger |
| `14-order-float-icons.html` | 浮かぶアイコンと看板ロボ | まん中のロボのまわりを8つのアイコンが違う速さで上へ流れ、ロボの顔の文字が近くを通るアイコンの名前に切り替わる。 | ScrollTrigger |
| `15-order-now-cards.html` | メニューカードが畳まれる | 白いカードの列がスクロールで横に流れ、1枚ずつ見出しだけの札に畳まれ、下からキーワードの丸ボタン一覧が上がってくる。 | ScrollTrigger, Swiper |
| `16-gradient-bar-wipe.html` | オレンジの柱で場面転換 | 黒い場面の終わりに、オレンジから白のグラデーションの柱が段々に昇ってきて白い画面に入れ替わる。 | ScrollTrigger |
| `17-pickup-turntable.html` | 回転台のお店ピックアップ | 丸い台の穴から小さなお店が次々と生えては沈み、配達員がまわりを一周する。スクロールで見出しが入れ替わりキャラがせり上がる。 | ScrollTrigger |
| `18-portfolio-flip-gallery.html` | 黒い板と起き上がる作品 | 斜めで小さな黒い板が滑り込んでまっすぐ画面を覆い、中の作品の四角が手前に起き上がるように立ち上がる。 | ScrollTrigger |
| `19-awards-trophy.html` | 受賞リストとトロフィー | 黒い画面に白い実績カードが順に浮かび、王冠ロボのまわりに星とバッジが漂い、最後にオレンジの柱で白へ。 | ScrollTrigger |
| `20-special-cards-ride.html` | 3枚のカードと絵の中の旅 | 扇に開いた3枚のカードが1枚に閉じ、白がめくれてオレンジに。カードの窓が画面いっぱいに広がって絵の世界を横に旅し、また戻る。 | ScrollTrigger |
| `21-review-spotlight.html` | お客さまの声スポットライト | 背景が黒に変わってハート目のロボが飛び込み、画面のまん中に来たお客さまの声だけが順に明るくなる。 | ScrollTrigger |
| `22-logo-dot-cover.html` | ロゴの点が画面を覆う | ロゴが組み上がって左上へ縮み、オレンジの棒が回りながら中央へ、さらに回転して画面全体を覆い、白いカードが右から滑り込む。 | ScrollTrigger |
| `23-people-gather-swiper.html` | 集まる顔と黒いメンバー紹介 | 散らばった顔が整列し、飛び去って背景が黒と巨大な英文に変わり、残った顔がメンバー列の席に着地して大きなキャラが出る。 | ScrollTrigger, Swiper |
| `24-header-sidenav.html` | ヘッダーと左の目次ドット | 下へスクロールで隠れて上で出るヘッダー、黒い箱が伸びるメニュー、いまの場面がオレンジになる左の点、右下の上へボタン。 | なし（CSS/素のJSだけ） |
| `25-faq-main.html` | トップのよくある質問 | 説明→大きなFAQ→右端の枠ボタン。質問の札が順に出て、乗せると伸びて薄いオレンジ、押すと答えが開く。 | なし（CSS/素のJSだけ） |
| `08-floating-faces.html` | ふわふわ集まる顔 | 黒から紫のグラデーションに大きなオレンジの英字、その下で顔が左右2か所に集まって浮かび、マウスで押しのけたり投げたりできる。 | Matter.js |
| `30-sticker-peel-hero.html` | ステッカーがめくれる見出し | 見出しが下からせり上がり、まわりのステッカーがポンと出て裏紙がはがれるように絵が現れ、押した場所に新しいステッカーが貼られる。 | なし（CSS/素のJSだけ） |
| `31-line-rise-text.html` | 1行ずつせり上がる文章 | 画面に入るとオレンジの見出しと文章が見えている1行ごとに0.1秒ずつずれて下からせり上がる（角丸の大きな写真つきの形も）。 | GSAP |
| `32-member-card-grid.html` | メンバー紹介カード | 黒い背景に白いカードが5列で並び、マウスを乗せると四角がゆっくり丸になってキャラが立体版に入れ替わる。 | なし（CSS/素のJSだけ） |
| `33-faq-pill-accordion.html` | よくある質問（開く質問カード） | 質問の帯が順に下から出て、乗せると横に伸びて薄いオレンジになり、押すと＋が回って答えがスルッと開く。 | なし（CSS/素のJSだけ） |
| `34-vending-night-footer.html` | 夕焼けの自販機フッター | 夜空から夕焼けのグラデーションに星と大きな「Contact Us」、オレンジの自販機と地面、すりガラスの連絡先板、上へ戻るボタン。 | なし（CSS/素のJSだけ） |
| `06-fist-bump-footer.html` | グータッチのフッター | 最後まで来ると黒い画面に黄色が円で広がり、左右から腕が入ってグータッチ、遅れて「LET'S GO!」ボタンが出て、下でメールアドレスが流れ続ける | なし（CSS/素のJSだけ） |
| `07-menu-hand.html` | 手を振るメニュー | 右上の白いカプセルを押すと×に変わり、画面が黄色にフェード→白い板が右上から広がり→項目がふわっと出る。大項目は乗せると緑の矢印丸と斜体、小ボタンは文字が下から入れ替わる | なし（CSS/素のJSだけ） |
| `35-hero-giant-marquee.html` | 巨大文字が流れるトップ | 左上のロゴと丸枠ラベルの下を、画面幅の1/5の高さの極太文字がゆっくり左へ流れ続ける | なし（CSS/素のJSだけ） |
| `36-popup-collage.html` | 作品がポンポン飛び出す | 段が画面の真ん中に来ると、作品画像9枚がばらばらの順にポンと飛び出して重なり合う | GSAP, ScrollTrigger |
| `37-line-reveal-heading.html` | 下からせり上がる見出し | 見出しが画面に入ると見えない枠の下からスッとせり上がり、横棒と太い斜体の強調語、右に本文と丸バッジが並ぶ | GSAP, ScrollTrigger |
| `38-offset-video-pair.html` | ずらして並ぶ縦長動画2本 | 縦長の作品動画を左右に、右だけ少し下げて段違いに並べる（音なし自動再生） | なし（CSS/素のJSだけ） |
| `39-tilted-testimonial-marquee.html` | 斜めに流れるお客様の声 | 左に傾いた白い帯2本が逆向きに流れ続け、お客様の声と丸い顔写真が交互に並ぶ | なし（CSS/素のJSだけ） |
| `40-asterisk-buttons.html` | ボタンいろいろ | 乗せると＊が消えて緑の矢印丸が出る白ボタン、文字が入れ替わる丸枠ボタン、緑が広がる丸ボタン、右下の相談ボタン | なし（CSS/素のJSだけ） |
| `41-deliverables-section.html` | できること一覧の段 | 大見出しがせり上がり、左に説明文・ボタン・道具アイコン、右に「できること」の2列一覧 | GSAP, ScrollTrigger |
| `42-dark-switch-portfolio.html` | 黒に切り替わる作品一覧 | 作品の段まで来ると背景が黄色→黒に切り替わり、見出しが2行ずつせり上がり、作品カードがまとめてふわっと現れる。乗せると画像が暗くなる | GSAP, ScrollTrigger |
| `09-face-wall-opening.html` | 顔の壁オープニング | 音のON/OFFを選ぶと、名札の顔ロゴが弾んで出て口をパクパク、LOADING％→WELCOMEのあと上へ飛び、灰色の幕が丸く抜けて、下の段から顔が弾んで並び左右に流れ続ける | なし（CSS/素のJSだけ） |
| `10-color-story-scroll.html` | 色が変わる言葉スクロール | 画面に貼り付いたまま、次の色が下から丸く盛り上がって塗り替わり、言葉が1行ずつ下から上へ流れながら濃く薄くなる。右に場面の点、下にSKIP、最後はロゴとGO丸ボタン | なし（CSS/素のJSだけ） |
| `50-header-pill-nav.html` | カプセルのヘッダー | 1画面スクロールするとロゴ・白いカプセルのメニュー・音の丸が順にぽよんと出る。乗せると赤く塗られて文字が入れ替わる。スマホは三本線から吹き出しカードのメニュー | なし（CSS/素のJSだけ） |
| `51-member-cards.html` | メンバーのカード | 白い角丸の板が下から追いかけて上がり、写真カードが順に弾んで出る。乗せると青い縁と音マーク、押すと棒がはねて写真が入れ替わる | なし（CSS/素のJSだけ） |
| `52-works-cards.html` | 実績のカード | ピーチ色の板の上で、画像が1.4倍からふわっと等倍に戻りながら現れ、乗せると縁が出て題名が上下に入れ替わる | なし（CSS/素のJSだけ） |
| `53-contact-form.html` | お問合せの板 | 青い角丸の板に白い入力欄。種類は左右の丸ボタンで切り替え、送信ボタンは乗せると白く塗られて文字が入れ替わる。下に細い足元 | なし（CSS/素のJSだけ） |
| `54-roll-buttons.html` | 入れ替わるボタン集 | 乗せると塗られて文字が上下に入れ替わるボタンのまとめ（SKIP・MORE・ALL WORKS・送信・GO・ON/OFF・メニュー・矢印丸・場面の点） | なし（CSS/素のJSだけ） |
| `55-stacked-sheets-flow.html` | 重なる色板の流れ | 白→ピーチ→青の角丸の板が、少し下・少し大きめから追いかけて重なり、前の板の中身はわずかに縮んで沈む（メンバー→実績→お問合せ→足元） | なし（CSS/素のJSだけ） |
| `11-sketch-wall-hero.html` | 手描きカード壁のヒーロー（幕開けつき） | 白い画面のロゴ→灰色のラフがばらばらに浮かんで並び→青いカードが収まり→キャラが弧を描いて飛び乗り→吹き出し→見出しとボタンが出る、4.2秒の幕開け。 | GSAP, MotionPathPlugin |
| `12-stacking-service-cards.html` | 重なるサービスカード | 青い面で左の目次が貼り付き、右のカードが右下から45°傾いて飛んできて重なり、下のカードは縮んで束になる。足元に流れる白抜き文字と足ぶみキャラ。 | GSAP, ScrollTrigger |
| `60-glass-pill-header.html` | すりガラスのカプセルメニュー | 上に固定のすりガラスのメニュー。乗せると青い丸がふくらみ、青い面ではロゴが白に。スマホは丸ボタンから青い全画面メニュー。 | なし（CSS/素のJSだけ） |
| `61-glass-about-panel.html` | すりガラスの自己紹介パネル | 壁の上にすりガラスの白い板がぷるんと広がり、ロゴ・見出し・本文・ボタンが順に下から出る。 | なし（CSS/素のJSだけ） |
| `62-glass-works-grid.html` | すりガラスの実績一覧 | 上が大きく丸いすりガラスの面に、イチオシ1件（PICK UP丸・ぼかしが晴れる写真）と3列カードが順に出る。スマホは横スワイプ＋位置バー。 | Swiper |
| `63-blog-balloon-cards.html` | つぶやき吹き出しのブログ欄 | 黒い吹き出しアイコンがぽよんと出て、横長の吹き出しの文字が1字ずつのぞき、キャラが飛び込んで着地でつぶれる。記事カードは順に出る。 | なし（CSS/素のJSだけ） |
| `64-member-pop-cards.html` | ぽんっと出るメンバー紹介 | 青い角丸の板の角からキャラが降りてきて、名刺カードが左上から順に「ぽんっ」と出る。NEWシールは遅れてふくらむ。 | なし（CSS/素のJSだけ） |
| `65-contact-dome-footer.html` | 丸い山の相談ボタンとフッター | スクロールに合わせて大きな丸い山が降りてきて、吹き出しと「相談してみる」が出て、降りきるとキャラがストンと落ちてつぶれる。下に青いフッター。 | GSAP, ScrollTrigger |
| `66-page-transition.html` | ページ切り替えとカード拡大 | リンクを押すと灰色の幕に足ぶみキャラと咲く花が出て、次のページでは青いカードの形の窓が画面いっぱいに広がって紹介ページになる。 | GSAP, CustomEase |