SNS運用代行（カッコイイ系・青）のWebデザイン見本

会社や店の公式SNSを「やらなきゃ」と思いつつ、担当がいない・続かない・炎上が怖い、という中小企業の経営者と広報担当。派手に伸ばすより、信じてもらえるアカウントを1年かけて育てる、という誠実さを、強い対比の見た目で伝える。


業種	IT・Web（SNS運用代行）
系統	カッコイイ系（極太のグロテスクと極太ゴシック・黒・白・コバルトの強い対比・直線・角丸なし・速く切れのいい動き）
骨組み	K05 横に進む：PC（幅1080px以上・高さ600px以上・動きを減らす設定でない）は、縦スクロールがページ全体の横移動になる（GSAP の pin＋横移動、1本のタイムライン）。区切りは6つ（OPENING・PROBLEM・12 MONTHS・PLANS・NUMBERS・CONTACT）で、下の黒い帯に「03 / 06　12 MONTHS」と進み具合の線を出す。ヘッダーのリンクは該当の位置まで送る。スマホ・JSなし・動きを減らす設定は普通の縦並び
形	ページ全体が横に動く
スライド	なし
メインビジュアル	コラージュ：巨大な「SIGNAL」・青い四角・リングライトつきスマホの切り抜き・投稿の札4枚
演出の型	A09 コラージュが奥・中・手前で違う速さで動く（横移動と同じタイムラインの中。奥は遅く、手前は速く）／C04 「運用の12か月」を横長のパノラマ（330vw）として、中央の太い線の上下に月が交互に並ぶ／B05 料金の3枚はスマホ・JSなしでだけ CSS の sticky で上に積み重なる。PCの横移動では積み重ねず3枚を横に並べた（横移動が主役なので、もう1つ動きを足さない。B05 は縦並びの形でだけ使う）
動きの主役	横移動（K05 の骨組みそのもの）。A09 の速度差はその一部。ほかの出現アニメは無し。「下からふわっと」は使っていない
架空の会社	「SIGNAL（シグナル）SNS運用室」

色と書体（共通の変数名13個だけ）

--c-bg（冷たい明るい灰）--c-bg-alt --c-text --c-sub --c-line（黒）--c-accent（コバルト）--c-accent-text --c-on-accent --c-2（淡い青。黒の面では青）--c-3（見出しの墨色。黒の面では白）--font-ja（Noto Sans JP）--font-head（Murecho 900）--font-en（Bricolage Grotesque 800＋Murecho＋日本語）。黒の面は .is-dark、青の面は .is-blue が同じ名前の変数を全部上書きする。伏せ字の「〇」は .fz で日本語の書体にした。script.js に色は無い。

動かないとき

スマホ・JSなし・prefers-reduced-motion：縦並び。コラージュは止まったまま、12か月は縦の年表、料金は sticky で重なる。

写真の出どころ

新しく作る：phone（リングライトに載せたスマホの切り抜き・顔の1枚）。写真庫から（画像を開いて確かめた）：meeting（005 打ち合わせの手元＝1月の「設計」）・shoot（065 青い照明の撮影スタジオ＝3月の「撮影」）・post1〜4（053 白い器・053 パン・047 花の箱・044 黄色いマグ＝顧客の投稿に見立てた札）。camera と studio の新規指定は使わない。