スクロールで米が酒になる 3Dホームページひな形|酒蔵・日本酒|WebGL・スマホ対応・商用OK
- Digital9,800 JPY





スクロールすると、ひと粒の米が磨かれ、麹が咲き、しずくが搾られて、きき猪口に一合が注がれる。酒蔵のための、3Dで動く1ページのホームページひな形です。 ▼ 動く見本(ブラウザで触れます) https://ugoku-site.pages.dev/sake/ ※見本のページには「制作見本」の表示が入っています。お届けするファイルには入っていません。 ■ 動く仕掛け ・入口で「20歳以上ですか」を確認します(一度「はい」を押すと、次からは出ません。設定で外すこともできます) ・最初の画面:月の光が映る水面。ふれると波紋が広がります ・酒づくりの物語:精米・麹づくり・仕込み・搾りの4つの工程を縦書きで語り、精米歩合などの数字が動きます ・一献:スクロールで、きき猪口にお酒が注がれます ・お酒のラインナップ:3Dの瓶。ラベルは設定の色と文字から自動で描きます ・好みさがし:「甘口〜辛口」「香り」のつまみを動かすと、近い1本が選ばれます ・蔵見学の案内と予約フォーム、「直売所 営業中」バッジ、20歳未満の飲酒禁止の注意書き 写真やAI画像は使っていません。 ■ 中身 ・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) ・ダウンロード商品のため、返品・返金はできません




