Web制作会社（スタイリッシュ）

だれに向けたページか

ブランドを大事にしている小さな店・メーカーで、サイトを作り直したい経営者。 「この会社は細部まで気を配る」と、触った瞬間に伝わること。色を使わず、動きと余白だけで見せる。

色

区切りごとに「テーマの色」を1つ持たせ、メニューで移るときはその色の幕で切り替える。

文字

• 英字：Space Grotesk（500・700）
• スクランブルの途中の文字：JetBrains Mono（崩れている間だけ等幅にして、行がガタつかないようにする）
• 日本語：Zen Kaku Gothic New（400・700・900）

ページの構成と演出

1. メインビジュアル（E04）：大きな英字「Quiet sites, / loud results.」が、ランダムな記号から1字ずつ正しい綴りに揃う。読み上げは aria-label の正しい文で。日本語の見出しは普通に表示
2. 実績 WORKS（G03）：黒い区切りに、案件名・業種・年の一覧6行。PCでは行にマウスを乗せると、その行の上に案件の写真が浮かび、マウスに少し遅れてついてくる。キーボードで行に入ったときも写真を出す。スマホ（ホバーが無い端末）は、行の中に小さな写真を最初から並べる
3. できること SERVICE：灰色の区切り。4項目。見出しの英字は画面に入ったときにスクランブル（E04 を小さく使う）
4. スタジオ STUDIO：黒灰の区切り。仕事場の写真と、4人の役割（名前は伏せる）
5. お問い合わせ CONTACT：白に戻る。大きなメールの導線
6. フッター

• 幕の切り替え（G04）：ヘッダーのメニュー（スマホはメニューの中）から区切りへ移るとき、行き先の区切りの色の幕が下から上がって画面を覆い、その間に移動し、幕が上へ抜けて行き先が現れる。幕の上には行き先の名前（WORKS など）を一瞬出す
  • 移動は本当のページ内リンク（#works など）のまま。幕を出すのは JS のときだけ。URL の # は変わるので、ブラウザの「戻る」で前の位置に戻れる。移った先の見出しにフォーカスを移す
  • prefers-reduced-motion・JSなしのときは幕を出さず、普通に移る

動きの決まり

• JSや GSAP が無いとき：英字は最初から正しい綴り／実績は行の中に写真／メニューは普通のページ内リンク。全部読める
• 幕は 0.9 秒以内に終わる。画面全体を揺らさない
• 案件名・年・人数は見本の値。会員が本物に替える

写真（codex）

スタジオの机／実績6件のキービジュアル（器・パン・住宅・自転車・香水・ホテル）、の7枚。顔は写さない。Webサイトの画面そのものは写さない（文字が崩れるため）。

下層ページを作るときの決まり

• 下層も「区切りごとにテーマの色1つ」。使う色は白・黒・灰・黒灰の4つだけ
• 英字の見出しのスクランブルは、1ページに見出し3つまで
• 実績の一覧ページは G03 をそのまま使う（スマホは行の中に写真）