メンズ理容室（スタイリッシュ）のWebデザイン見本

身だしなみを「仕事の道具」と考える、30〜50代の男性。安さより、毎回きちんと同じ仕上がりになるかで選ぶ人。静かで、隙のない店だと一目で分かるページにする。にぎやかさは要らない。


業種	美容・サロン
テイスト	スタイリッシュ
色	白・黒・グレー（差し色なし。白→灰→黒の段階で見せる）
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A07 縦3枚に割った写真が時間差でゆっくり拡大＋縦書き／E04 崩れた英字が正しい綴りに揃う（スクランブル）／C03 横に流れる途中で背景が白→灰→黒＋番号の進み具合
架空の店	「理容硯（すずり）BARBER SUZURI」— 席が3つだけの、予約制の理容室

だれに向けたページか

身だしなみを「仕事の道具」と考える、30〜50代の男性。安さより、毎回きちんと同じ仕上がりになるかで選ぶ人。 静かで、隙のない店だと一目で分かるページにする。にぎやかさは要らない。

変数	値	使う所
`--c-bg`	`#f4f4f2`	背景（紙の白）
`--c-ink`	`#111111`	見出し・黒い面
`--c-gray`	`#b5b5b3`	横に流れるメニューの中ほどの面（面は #fff→#e4e4e2→#b5b5b3→#3a3a3a→#111）
`--c-line`	`#c9c9c9`	線
`--c-accent`	`#d4d4d4`	黒い面の上の小さな英字・線（黒地で 12.7）
`--c-accent-text`	`#4b4b4b`	白地の上の小さな英字（白地で 7.9）
`--c-text`	`#374151`	本文
`--c-sub`	`#4b5563`	補足

灰の面（#b5b5b3）までの上の文字は --c-ink。濃い灰と黒の面の上は白。黒い面の上は白か --c-accent。

メインビジュアル（演出① A07）：画面を縦に3枚に割り、はさみの手元／かみそりと泡／椅子の3枚が時間差でゆっくり拡大していく。真ん中に縦書きで「整える、という作法。」。スマホも3枚に割る（細い縦の帯でも成り立つ写真にした）
店について（演出② E04）：英字の見出し「QUIET CRAFT」などが、画面に入ると崩れた文字から正しい綴りに揃う。ロゴの英字も読み込み時に1回だけ揃う。揃うのは1回だけ。aria-label に正しい綴りを入れる
メニュー（演出③ C03）：PCでは区切りを止めて、縦にスクロールすると5つのメニューが横に流れる。進むごとに面が白→薄い灰→灰→濃い灰→黒に変わり、上に「01 ―― 05」の進み具合の線。スマホはそれぞれの色の面が縦に並ぶ
料金：細い線だけの表
ご予約：黒い面に大きなボタン
アクセス・フッター

縦長の3枚（はさみの手元／かみそりと泡／椅子）・刈り上げ・蒸しタオル・ヘッドスパ・店内、の7枚。白黒に近い調子。顔は写さない。