スクロールすることが、そのまま「焙煎」になる。珈琲店のための、3Dで動く1ページのホームページひな形です。 ▼ 動く見本（ブラウザで触れます） https://ugoku-site.pages.dev/roast/ ※見本のページには「制作見本」の表示が入っています。お届けするファイルには入っていません。 ■ 動く仕掛け ・緑の生豆が、スクロールに合わせて 浅煎り → 中煎り → 深煎り と色を変えます。1ハゼ・2ハゼでは火の粉が舞います ・焙煎の物語：画面が止まったまま4つの段階を語り、温度・経過時間・焙煎度・「味のかたち」グラフが動きます ・豆のラインナップ：カードの中で、それぞれの焙煎度の3Dの豆が回ります ・おうちで淹れる：スクロールで、カップにコーヒーが注がれます ・営業時間から「いま営業中」を自動で表示 豆はすべてプログラムで描いた3Dです。写真やAI画像は1枚も使っていません。 ■ 中身 ・index.html / css / js（お店の情報は js/config.js の1ファイルにまとめてあります） ・vendor（Three.js・GSAP・Lenis と、それぞれの利用条件） ・README.txt（書きかえ方、色の変え方、公開のしかた） ・LICENSE.txt（利用規約） ■ 使い方 1. ダウンロードして、zipを開きます 2. js/config.js をテキストエディタで開き、店名・電話・住所・営業時間・豆と料金を書きかえます 3. フォルダごと、レンタルサーバーや Cloudflare Pages などにアップロードして公開します ■ ご注意 ・このひな形は、AIツール（Claude Code）を使って制作し、表示と動作を確認しています ・3D は WebGL を使います。古いパソコンやスマートフォンでは動きが重くなることがあります（自動で画質を下げる仕組みと、3Dが使えないときの代わりの表示があります） ・文章や料金はすべて例です。ご自分のお店の事実に書きかえてください ・書きかえの作業はご自身で行っていただきます。書きかえの代行はしていません ・商用利用できます。お客さまのサイト制作に使って納品することもできます。ひな形そのものの再配布・再販売はできません（詳しくは LICENSE.txt） ・ダウンロード商品のため、返品・返金はできません