中古レコード店（可愛い系・オレンジと黄）のWebデザイン見本

レコードを聴きはじめた20〜40代と、家に眠っているレコードを手放したい人。専門店は入りにくいと感じている人。「ふらっと寄れる、ひなたの店」を、やわらかい色と丸い形で伝える。


業種	小売・EC（レコードショップ）
系統	可愛い系（丸い書体・太い線と右下の影・アーチ・シール・回るレコード）
骨組み	K07 読み物：「ひなたレコード読本」。PC は左に目次を固定（いまの章を丸ごと色で示し、大きな章番号と進み具合の線）、右が読み物の列。章は 00〜06 の7つで、章番号・段落・シールつきの引用・棚と手順のカードで読ませる。区切りの帯ではなく「章」
形	ふつうの縦長（スマホは目次を右上の三本線の開閉に）
スライド	なし
メインビジュアル	分割（3枚）：縦長の写真3枚をアーチに切り抜き、高さをずらして並べる。右上に回るレコード
演出の型	D01 章に入るたびにページ全体の背景色が変わる（クリーム→からし→桃→セージ→クリーム）／D02 「夜のレコード会」の章でページ全体が黒に反転。目次・ヘッダーも一緒に反転。B04（小窓の入れ替え）は外した：固定した全画面の写真が読み物の列と目次に合わず、主役の動きが2つになるため
動きの主役	D01・D02 の背景色の切り替え（0.25秒）。IntersectionObserver だけ。GSAP 不使用。レコードの回転（14秒で1周）はごく小さな飾り。「下からふわっと」は使っていない
架空の店	「ひなたレコード（HINATA RECORDS）」

色と書体（共通の変数名13個だけ）

--c-bg --c-bg-alt --c-text（こげ茶）--c-sub --c-line --c-accent（からし）--c-accent-text（赤茶・章番号など文字用）--c-on-accent --c-2（オレンジ・図形だけ）--c-3（若葉・図形だけ）--font-ja（Zen Kaku Gothic New）--font-head（Kaisei Decol 700）--font-en（Shrikhand＋Kaisei Decol）。章の色は .t-cream .t-mustard .t-peach .t-sage .t-night が同じ名前の変数を上書きする（夜は文字色・補足・線・影も全部）。script.js に色は無い。

動かないとき

JS なし：各章が自分の色の面で塗られた縦並びで、目次はスマホと同じく右上の開閉（PC は固定の目次が出るが、いまの章の強調だけ無い）。prefers-reduced-motion：色は即切り替え、レコードは止まる。

写真の出どころ

新しく作る：crate（箱をめくる手・顔の1枚。レコードの店だと一目で分かる）。写真庫から（画像を開いて確かめた）：coffee（001 手淹れのコーヒー）・lounge（049 日の差す本棚のある部屋＝試聴コーナーに見立てる）・night（013 木のカウンター。ビールのタップが写るので夜のバーの章に使い、レコードの写真とは言い張らない）。ターンテーブルの写真は写真庫に無いので使わず、SVG のレコードで代える。