印刷会社（ポップ・元気）

だれに向けたページか

チラシ・名刺・グッズを作りたい小さなお店、個人のクリエイター、イベントの主催者。 「印刷って楽しい！」と一目で元気が伝わるページにする。紙とインクの勢いを見せる。

色

文字

• 見出し：Mochiy Pop One（太く丸い）
• 筆記体の一語：Pacifico（SVG の文字の線をなぞって描く）
• 本文：Zen Maru Gothic 500 16px

ページの構成と演出

1. メインビジュアル（E05）：太い見出し「刷って、届けて、よろこばせる。」の上に、赤い線で筆記体の「Print!」が一筆書きで描かれ、塗りが入る。最後に黄色の丸いシール「最短 翌日発送」がポンと弾んで貼られる。背景に網点の模様
2. 数字（F05）：「50」「24」「1」の大きな数字の形に、二色刷りにした印刷機・インク・名刺の写真をはめる。数字は見本の値
3. 刷れるもの（C01）：名刺・チラシ・ポスター・ステッカー・冊子・パッケージの6枚のカードが、縦スクロールで横に流れる（PCだけ）。写真は二色刷り。スマホは指で横に送る
4. こだわり：色を見る手元の写真（二色刷り）と、短い文3つ
5. 注文の流れ：4段のステップ
6. お見積り：赤い面と大きなボタン、回るシール
7. フッター

動きの決まり

• JSや GSAP が無いとき：筆記体は最初から描き終わった形、シールは貼られた形、カードは指で横に送れる。全部読める
• prefers-reduced-motion のときは、上と同じ「動かない版」。回るシールも止まる
• 弾む動きは読み込み時の1回だけ

写真（codex）

印刷機／ポスター／名刺／ステッカー／パッケージ／冊子／色を見る手元／インク、の8枚。二色刷りは CSS で付ける（白黒にしてから赤とピンクを重ねる）ので、写真は元の色のまま。

見本の値（会員が本物に替える）

創業年・納期・最小部数・料金・住所・電話は見本（〇〇）。会員が本物に替える。

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

• 見出しは Mochiy Pop One。筆記体の一語は1ページに1つまで
• 写真は二色刷りか元の色のどちらかに、1ページでそろえる
• 赤い面は1ページに1回まで。ピンクの面は何度でもよい