13

SaaS · SUBSCRIPTION LP

OFISYSオフィシス

カテゴリ

BtoB SaaS / ITサポートLP

技術

HTML / CSS / JavaScript

デプロイ

Cloudflare Pages

ステータス

LIVE

概要

「社内に専任のIT担当者がいない」中小企業に向けた、ひとり情シス代行サブスク(架空サービス)のLP。ヘルプデスク・ネットワーク保守・セキュリティ・PCキッティングを月額定額でまるごと引き受ける、というサービスを想定して設計しました。

BtoB SaaSのLPに必要な要素——信頼感のあるヒーロー、サービス内容の整理、料金プランの比較、よくある質問——を、フレームワークを使わず純粋なHTML/CSS/JavaScriptだけで実装しています。

こだわり

  • ヒーロー見出しはセリフ体のタイプライター演出。「IT業務を、◯◯」の語尾が打ち替わり、視線を引きつける
  • 「できること」はスクロールで道具箱からサービスが飛び出す演出(sticky連動+時間差+オーバーシュート)。“道具箱=IT代行”のテーマを動きで表現
  • ヒーローに「サービスが繋がる」構図を採用。中央の専任チームを4つのサービスが囲み、各サービスはカーソルを乗せる(スマホはタップ)と詳細がポップする
  • 料金は月払い/年払いのトグルで金額がその場で切り替わる、SaaS定番のUI
  • よくある質問はクリックで開閉するアコーディオン。追従ヘッダー・モバイルメニューなど細部の挙動まで実装
  • ロゴ・アイコン・人物イラストまでオリジナルで制作(ロゴはSVG、画像はgpt-image-2でトンマナ統一)

技術構成

  • HTML / CSS / JavaScript — フレームワーク不使用の純粋実装
  • IntersectionObserver — スクロール連動のフェードイン
  • CSS Custom Properties — ブルー基調のテーマ変数管理
  • レスポンシブ対応 — PC / タブレット / スマホ
  • Cloudflare Pages — デプロイ・配信