制作実績一覧へ
BtoB · 2025 · 架空サンプル
KanriBoard
中小企業向けタスク管理SaaSの紹介LP
情報設計 / UIデザイン方針 / 実装（架空案件・サンプル）
- Next.js 14
- TypeScript
- Tailwind CSS
- Framer Motion
01概要
中小企業の現場で起きやすい「誰が何を持っているか分からない」課題に対し、KanriBoard の価値を短時間で理解できるBtoB向け紹介LPです。Apple風のミニマルさを意識し、機能はカードで整理して比較しやすくしています。
02要件
・意思決定者が多いため、ファクトと導入フローを明確にすること ・デモ・資料請求・問い合わせへの導線を整理すること（仮定） ・技術スタックはモダンで保守しやすい構成にすること
03構造
- 1ヒーロー（プロダクト名＋一言価値）
- 2課題提起（現場の断片化）
- 3機能一覧（カード）
- 4導入の流れ・料金の目安
- 5FAQ・CTA
04トークン
背景
#FFFFFF / #F5F5F7
テキスト
#1D1D1F
アクセント
#0071E3
トーン
余白多め・装飾は抑えめ
05
課題
- SaaS LP は情報量が増えがちなため、初見で「何のプロダクトか」が3秒以内に伝わるかが焦点でした。
- BtoB向けの信頼感と、モダンさの両立をデザイントークンで統一する必要がありました。
06
アプローチ
- ヒーローでプロダクトの位置づけを固定し、以降のセクションはすべてその一文に紐づけて冗長さを削りました。
- セクション背景を交互に切り替え、スクロール時の区切りを視覚的に明確にしています。
07成果
個人開発のSaaS経験をアピールする用途を想定し、実装面では型安全・コンポーネント分割を意識した構成にしています（サンプル）。