ゲーム開発会社（可愛い系・オレンジと黄）のWebデザイン見本

商品やまちを知ってもらう方法を探している、企業・自治体の広報や販促の担当者。ゲーム会社に頼むのは高そう、難しそう、と思っている人。LPの目的は「無料相談の申し込み」。悩み→解決→実績→特長→流れ→声→料金→よくある質問→相談、の1本の流れ。


業種	IT・Web（ゲーム開発）
系統	可愛い系（丸み・太い線と影・明るい色・弾む動き・シール）
テイスト	ポップ・元気／ナチュラル・やさしい
色	オレンジ・黄（クリームの地）
形	LP型（1枚もの）：ヘッダーはロゴ＋「相談する」だけ。相談ボタンは5か所。スマホは画面の下に固定
スライド	Swiper（制作実績。点・矢印・キーボード・自動送りの一時停止つき）
メインビジュアル	コラージュ：コントローラー・おもちゃのブロック・スケッチ・マグの切り抜きと、SVGのキャラが、画面の外周を囲む
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A10 散らばったカードが画面の外周を囲み、中央にタイトル／B06 制作の流れが付箋タブのように積み重なる（CSSだけ）／F03 波・ちぎれ紙の縁で区切る
架空の会社	「ぽこぽこゲームス（POKOPOKO GAMES）」— 企業や自治体の「遊べるPR」＝ブラウザのミニゲームを作る、8人の小さな会社

だれに向けたページか

商品やまちを知ってもらう方法を探している、企業・自治体の広報や販促の担当者。ゲーム会社に頼むのは高そう、難しそう、と思っている人。 LPの目的は「無料相談の申し込み」。悩み→解決→実績→特長→流れ→声→料金→よくある質問→相談、の1本の流れ。

白い文字をオレンジに乗せない（2.35 で足りない）。オレンジの面の文字は必ず --c-ink。

メインビジュアル（A10 コラージュ）：画面の外周を、角の丸いカード（写真の切り抜き・ドット絵のキャラ・星・吹き出し）が少し傾いてぐるりと囲む。中央に「あそべる広告、つくります。」と相談ボタン。読み込み時にカードが外から「ぽん」と弾んで並ぶ。スクロールするとカードは外へ散っていく
悩み：3つの吹き出し。下の縁は波（F03）
解決：ミニゲームなら「遊んだ人が覚えてくれる」。上下をちぎれ紙の縁（F03）で区切った黄色の帯
制作実績（Swiper）：6本。画面はSVGで描いた架空のゲーム画面
特長：3つ。丸いシール
制作の流れ（B06）：5段のカードが、スクロールで付箋のように上に積み重なる。それぞれ左にタブ（番号）がずれて並ぶ。CSSの position: sticky だけ
お客様の声・料金・よくある質問・相談。相談ボタンはヘッダー・最初の画面・実績のあと・料金・最後（スマホは下に固定）

JSや GSAP が無いとき：カードは外周に並んだまま止まる。B06 は CSS だけなので動く（prefers-reduced-motion でも積み重なりはスクロールに合わせた配置なので残す）。Swiper が無いときは、実績が指で横に送れる並び
prefers-reduced-motion のときは、弾む動き・散る動き・Swiper の自動送りを止める
弾むのは読み込み時の1回と、ボタンに触れたときだけ

切り抜き：コントローラー・おもちゃのブロック。上から見たキャラのスケッチ。写真庫から：ゲームを作る子ども（041）・黄色いマグ（055、切り抜き）・机で作業する人（055）・打ち合わせの手元（005）。

料金・本数・期間・お客様の声・電話はすべて〇〇。実績のゲームは架空。