ECサイト制作の会社（カッコイイ系）

だれに向けたページか

実店舗はあるが、ネットで売れていない食品・雑貨・工芸のお店の経営者。「安く作るだけの会社」とは違う、売上まで一緒に考える会社を探している人。 最初の画面で言い切り、実績と進め方で信頼させる。

色

文字

• 英字の見出し・ロゴ：Unbounded（900。幅の広い極太）
• 日本語の見出し：Noto Sans JP 900
• 筆記体の一語：Mr Dafoe（線で描いてから塗る）
• 本文：Noto Sans JP 400・16px

ページの構成と演出

1. 開幕（A04）：黒紺の幕の中央にロゴ「BLUEDOCK」だけ。幕の奥から写真がにじみ出て（ぼかし＋透明→はっきり）、ロゴが縮みながら左上のヘッダーの定位置へ動いて溶け込む。2秒以内。2回目の表示では省く
2. メインビジュアル（画像1枚のLP風）：全面の写真に暗いグラデ、極太のコピー「売れる店を、設計する。」と相談ボタン。動きは控えめ（コピーが下から一度だけ）
3. 見出し（E05）：各区切りの極太の日本語見出しの上に、筆記体の英語の一語（Strategy／Services／Works／Flow／Contact）が水色の線で一筆書きに描かれ、描き終わると丸いシールがぽんと出る
4. できること（B05）：4枚の色付きカード（設計／制作／撮影／運用）がスクロールで上に積み重なる。奥のカードは少し縮んで暗くなる。CSSの sticky だけで成立
5. 実績（scroll-snap）：画面の端から端まで、実績の写真カードを横に送る。矢印つき
6. 数字：実績の数字（見本の値〇〇）
7. 進め方・料金の目安
8. 相談：青い帯に大きなボタン
9. フッター

「スマホのまま横に延長」の決め方

• PCでも段組みにしない。区切りの中身は上から1列
• 写真・色の帯・実績のスライドは画面の左右の端まで
• 文字の列は max-width: 760px、左寄せ。左の余白は clamp(20px, 8vw, 160px)
• 見出しは画面幅に合わせて大きくなる（clamp(40px, 9vw, 140px)）

動きの決まり

• JSや GSAP が無いとき：開幕の幕は出ない。筆記体は最初から塗られた状態、シールも出ている。カードの積み重ねは CSS だけで動く。全部読める
• prefers-reduced-motion のときは、幕・筆記体の描画・シールの弾みを全部止める（積み重ねは sticky なので残る）
• 実績の数字・料金・社名は見本の値。会員が本物に替える

スライドの作り方

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

写真

新しく作る：メインビジュアル（夜の机とスマホのショップ画面）・商品撮影の様子。写真庫から：打ち合わせ（005）・実績4枚（パン屋010・ビール013・和菓子009・ネイル014）。

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

• 1列のまま。段組みにしない
• 見出しは「筆記体の一語＋極太の日本語」の組。筆記体は1ページに3つまで
• 地は黒紺、明るい区切り（--c-light）は1ページに2回まで