手作りジュエリーのお店（可愛い系）のWebデザイン見本

20〜30代。高すぎない、でも安っぽくない「毎日つけたくなる」アクセサリーを探している人。友だちへのプレゼントを探している人。ひと目で「かわいい！」と思わせ、新作をめくって、そのままネットショップへ行ける流れにする。


業種	小売・EC（ジュエリー）
系統	可愛い系（丸み・太い線と影・シールと吹き出し・弾む動き）
テイスト	かわいい／ポップ・元気
色	オレンジ・黄
形	ふつうの縦長
スライド	Swiper（新作の一覧。点・矢印・キーボード・止められる自動送り）
メインビジュアル	コラージュ（切り抜きのアクセサリー・丸く切った写真・シール・図形・大きな文字を重ねる）
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A09 切り抜き写真のコラージュが奥と手前で違う速さで動く／F02 写真の後ろに色の板を重ねてずらす（奥ほど速く）
架空の店	「pipi bijou（ピピ・ビジュー）」— 小さな工房で手作りする、毎日つけられるアクセサリーのお店（ネットショップと工房の小さな店）

だれに向けたページか

20〜30代。高すぎない、でも安っぽくない「毎日つけたくなる」アクセサリーを探している人。友だちへのプレゼントを探している人。 ひと目で「かわいい！」と思わせ、新作をめくって、そのままネットショップへ行ける流れにする。

変数	値	使う所
`--c-bg`	`#fff7e0`	背景（クリームイエロー）
`--c-yellow`	`#ffd43b`	面・色の板・シール（上の文字は `--c-ink` で 10.2）
`--c-orange`	`#ff8a2a`	面・色の板・ボタン（上の文字は `--c-ink` で 6.2。白い文字は乗せない）
`--c-cream`	`#ffe9b8`	色の板（薄）
`--c-ink`	`#3a2414`	見出し・太い線・影
`--c-accent-text`	`#b04a00`	クリームの上のオレンジの文字（5.1）
`--c-text`	`#374151`	本文（9.6）
`--c-sub`	`#4b5563`	補足

メインビジュアル（A09・コラージュ）：中央に大きな「きらっと、まいにち。」。そのまわりに、切り抜きの指輪・ピアス・ネックレス、丸や雲の形に切った写真（手もと・花・手鏡）、星やハートのシール、「NEW!」の吹き出しを重ねる。読み込むとぽんと弾んで出て、スクロールすると奥の物はゆっくり、手前の物は速く動く（data-speed）
ごあいさつ（F02）：手鏡の写真の後ろに、黄・オレンジ・クリームの色の板を3枚ずらして重ねる。スクロールすると奥の板ほど大きくずれる
新作（Swiper）：色の面の上に切り抜きのアクセサリーを置いたカードを横にめくる。点・矢印・キーボード。自動送りは「一時停止」ボタンで止められる。prefers-reduced-motion では自動送りしない
つけるとこんな感じ（F02）：手もとの写真と花の写真、それぞれの後ろに色の板
3つのやくそく：金属アレルギーに配慮／名入れ／ギフト包装。丸いアイコンと太い線のカード
お店とネットショップ：黄色の面にボタン2つ
フッター

JSや GSAP が無いとき：コラージュは止まった配置のまま全部見える。色の板はずれた位置で止まっている。新作は指で横に送れる並び（scroll-snap）に戻る。全部読める
prefers-reduced-motion のときは、上と同じ「動かない版」。Swiper も自動送りしない
弾む動きは読み込み時と画面に入ったときの1回だけ。回り続ける物は置かない
値段・お客様の声の数・店の住所は見本の値（〇〇）。会員が本物に替える

Swiper（MIT・vendor/ に本体と LICENSE）。.swiper が初期化される前は CSS で overflow-x: auto; scroll-snap-type: x mandatory の並びになる。

新しく作る：指輪・ピアス・ネックレス（3枚とも切り抜き）。写真庫から：手もと（014）・手鏡（017）・花（017）。