特許事務所（可愛い系）のWebデザイン見本｜カツプロデザインギャラリー

アイデアや商品を持っているが、「特許って難しそう」「お金がいくらかかるか分からない」と止まっている個人・小さな会社。かたい士業のページの逆。明るく、やさしく、最初の相談の敷居を下げる。


業種	士業・コンサル（特許事務所）
系統	可愛い系（丸み・太い線・明るい緑と黄・吹き出し・弾む動き）
テイスト	ポップ・元気／ナチュラル・やさしい
色	緑
形	ふつうの縦長
スライド	CSSだけ（scroll-snap）（守れるもの4種類。矢印は `scrollBy` だけの JS）
メインビジュアル	イラスト・図形（電球の芽の SVG イラストと、種の粒が集まってできる文字）
アニメーション	あり（GSAP＋ScrollTrigger。粒は Canvas 2D）
演出の型	D03 ぼかした色の雲がゆっくり形を変える／A11 破片が集まって、かすれた文字の形になって漂う／G01 切り抜いた人物が隅からのぞき、区切りごとに吹き出しのひとことが変わる
架空の事務所	「たねまき特許事務所」— 弁理士2名。個人の発明家・町工場・小さなブランドの、特許と商標の相談

だれに向けたページか

アイデアや商品を持っているが、「特許って難しそう」「お金がいくらかかるか分からない」と止まっている個人・小さな会社。 かたい士業のページの逆。明るく、やさしく、最初の相談の敷居を下げる。

メインビジュアル（イラスト＋A11＋D03）：背景で緑・黄・水色のぼかした色の雲がゆっくり形を変える。中央に電球から芽が出たイラスト（SVG）。その上で、画面に散らばった小さな種の粒が集まって「ひらめき」の文字になり、少しかすれたまま、ふわふわ漂う。見出し「あなたのひらめきを、守って育てる。」
案内役（G01）：右下の隅から、切り抜いた弁理士（顔は写さない）がのぞき、区切りに入るたびに吹き出しのひとことが変わる（「こんにちは！」「これ、守れるかな？」など）
守れるもの（scroll-snap）：特許／実用新案／意匠／商標の4枚のカードを横に送る。それぞれ SVG のイラスト
こんな人に：町工場・個人の発明家・小さなブランド
相談から出願までの流れ：5つの段。緑の点線でつなぐ
費用の目安：〇〇円。表
事例：試作品の写真と短い話
よくある質問・相談の申し込み（緑の面に大きなボタン）
フッター

JSや GSAP が無いとき：色の雲は止まった形で見える。粒の文字は出ず、代わりに同じ「ひらめき」の文字が SVG で表示される。案内役は右下に止まり、最初の吹き出しが出たまま。全部読める
prefers-reduced-motion のときは、雲は止まり、粒は最初から文字の形で止まる（漂わない）
案内役はスマホでは小さく（高さ110px）、本文とボタンに重ならないよう右下の余白に置く
費用・件数・弁理士の名前は見本の値（〇〇）。会員が本物に替える

CSSだけ：overflow-x: auto; scroll-snap-type: x mandatory。矢印は scrollBy だけの JS。

新しく作る：案内役の弁理士（切り抜き・顔なし）・試作品の作業台。写真庫から：相談（024）・付箋の打ち合わせ（005）・事務所（024）。