写真教室（綺麗系）のWebデザイン見本｜カツプロデザインギャラリー

スマホやカメラで撮るのは好きだけれど、「なんだか思った写真にならない」と感じている30〜60代。光と影の話から始まる、静かで上品なページで「ここなら丁寧に教えてもらえる」と思わせる。


業種	教室・スクール（写真教室）。架空の教室「写真教室あわい」
系統	綺麗系（広い余白・1px の線・明朝・白黒の階調・ゆっくり）
骨組み	K07 目次が横に固定された読み物：PC は左に目次（`position: sticky`・いまの章に線と太字）、右に長い読み物（01〜06の章。大きな細い番号・明朝の見出し・引用）。スマホは目次が上の開閉（`details`）。区切りの帯は無い
形	ふつうの縦長
スライド	CSSだけ（scroll-snap）：講座5つ。矢印は JS の `scrollBy` だけ
メインビジュアル	イラスト・図形：細い線の絞り羽根（SVG・静止）と、筆記体「light」。写真は使わない
演出の型	E05（筆記体の一筆書き）／B01（場面の入れ替え）をタブに縮めて使う
外した型と理由	B01 は「画面を止めたまま朝→昼→夕→夜が入れ替わる」形だと、読み物の骨組み（スクロールで読む）と動きの主役がぶつかる。そこで章の中のタブ（朝・昼・夕）にした（操作で切り替える。ラジオボタンの CSS だけ）。夜は、写真庫に合う写真が無かったので外した。E05 のシール（丸い「入門クラス」）も外した（主役を1つに絞るため）
動きの主役	E05 の一筆書き（表紙の「light」。CSS の `stroke-dashoffset` の animation・読み込み時の1回・2.4秒）。ほかは動かさない。GSAP は使わない

色と書体（共通の変数名13個＋筆記体の1つ）

--c-bg #f7f6f3・--c-bg-alt #ecebe6・--c-text・--c-sub・--c-line #cfcdc7・--c-accent #1c1c1c・--c-accent-text #3a3a3a・--c-on-accent・--c-2 #8c8a85（大きな章番号）・--c-3 #1c1c1c（見出し）。墨の区切り（体験レッスン・1回だけ）は .t-ink が同じ名前の変数を上書き。書体：--font-head Shippori Mincho／--font-en Josefin Sans（後ろに Noto Sans JP）／--font-ja Noto Sans JP。筆記体 Allura だけは --font-script を足した（1語の飾り。会員が使わなければ消してよい）。

動かないとき

JS なし：目次は開いたまま（「いまの章」の印だけ付かない）、筆記体は最初から見えている、場面のタブはラジオボタンなので動く、講座は指で横に送れる。prefers-reduced-motion：一筆書きなし。

スライドの作り方

overflow-x: auto; scroll-snap-type: x mandatory。JS なしでも指で送れる。矢印ボタンは scrollBy だけ。

写真の出どころ

新しく作る：morning（朝の光の静物・顔の1枚。写真.json に prompt を残す）。すでに images/ にある：dusk（夕暮れの路地）・camera（カメラを構える手）。写真庫から（画像を開いて確かめて選んだ）：leaf（逆光の若葉／026）。使わなかった：夜の街（高層ビルの夜景で、教室の「夜」と合わず、橋が実在のものに似る）・商店街（人が写る）・コーヒー（写真教室と関係が薄い）。写真は CSS で白黒に寄せる（filter: grayscale(.85)）。会員の写真の色に合わせて外してよい。