古民家再生（可愛い系）のWebデザイン見本｜カツプロデザインギャラリー

実家や祖父母の古い家を、壊さずに住み継ぎたい30〜50代の家族。古民家カフェや宿を始めたい人。「古い家って、こんなにかわいくなるんだ」とワクワクさせ、気軽に「家を見に来て」と頼める雰囲気にする。


業種	建設・工務店・不動産（古民家再生）。架空の会社「えんがわ堂」
系統	可愛い系（太い線 3px・ずらした影・丸み・手書き風の見出し・桃色と若草色）
骨組み	K02 雑誌の格子：12列（スマホは2列）の格子に、大きさのちがう枠を組む。区切りの帯は無く、「枠の大きさの差」で読ませる（大きなイラスト枠＋コピー枠＋写真枠／見出し枠＋4枚の付箋／大きな写真＋目次枠／大きな「1」の枠＋小さな枠…）
形	ふつうの縦長
スライド	Swiper（実例5件。点・矢印・キーボード。自動送りは止められる。JSなしは scroll-snap で指送り）
メインビジュアル	イラスト・図形：SVG の家・椿の木・お日さま。CSS クラスで色を付けるので、会員が変数を替えれば絵の色も変わる
演出の型	D03（ぼかした色の雲）／B04（丸い小窓だけが入れ替わる）を枠1つに縮めて使う
外した型と理由	B04 は「全画面の写真を止めて小窓を入れ替える」形だと、格子と動きの主役が2つになる。そこで「格子の1枠の中の丸い小窓」に縮め、スクロールではなくボタン（ラジオ）で切り替える形にした（動きではなく操作）
動きの主役	D03 の雲（CSS の `@keyframes` だけ・16〜22秒でゆっくり形を変える）。ほかの枠は動かさない。GSAP は使わない（`vendor/` は Swiper だけ）

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

--c-bg #fff6f4・--c-bg-alt #ffe1e7・--c-text・--c-sub・--c-line #3a2226（線と影の濃いこげ茶）・--c-accent #d63a45（椿の赤）・--c-accent-text #b4232c・--c-on-accent・--c-2 #ffb48f（桃橙）・--c-3 #a9dcae（若草）。赤い面の区切り（相談の枠）は .t-red が同じ名前の変数を上書き。書体：--font-head Yusei Magic／--font-en Grandstander（後ろに日本語書体）／--font-ja Zen Kaku Gothic New。

動かないとき

JS なし：雲は CSS なので動く。小窓の切り替えはラジオボタン（CSS）なので動く。実例は指で横に送れる。prefers-reduced-motion：雲を止め、自動送りもしない。

スライドの作り方

Swiper（MIT）を vendor/ に。JS が .swiper クラスを付けて初期化する。無いときは overflow-x: auto; scroll-snap-type: x mandatory。

写真の出どころ

新しく作る：kominka（かやぶき屋根の古民家・顔の1枚。写真.json に prompt を残す）。すでに images/ にある：engawa（縁側）・doma（土間）。写真庫から（画像を開いて、古民家・和の家に合うと確かめて選んだ）：house（柿の木のある古い家／027）・craft（鉋をかける手／004）・joint（継手／035）・tatami（苔庭に面した和室／006）。