SaaSサービス
サイト・LP制作

プロジェクト概要

バックオフィス業務を支援するBtoB SaaS（※サンプル）を想定し、サービスサイト全10ページと展示会連動のキャンペーンLPの制作を担当しました。既存サイトは機能の説明が中心で、はじめて訪れた方に「何が解決できるサービスなのか」が伝わりづらい状態だったため、情報設計から見直しています。

資料請求・無料トライアル・問い合わせという3つのコンバージョンを整理し、閲覧者の検討段階に応じて適切な導線に接続する構成へ再設計。ページ制作と並行して、フォームの改善と効果測定の環境整備まで担当しました。

担当した主な作業

• ヒアリングと競合調査にもとづく訴求軸・情報設計の整理
• サイトマップ・ワイヤーフレーム作成（Figma）
• UIデザイン（サービスサイト全10ページ・キャンペーンLP）
• レスポンシブ実装（スマートフォン・タブレット・PC）
• 資料請求・トライアル申込フォームの設計と実装
• 料金プラン比較表・導入事例・FAQの実装
• Core Web Vitals 最適化（LCP / CLS / INP）
• 構造化データ・OGP・サイトマップ・canonical の整備

使用技術・ツール

デザインはFigmaで制作し、コンポーネント単位でスタイルを定義してからNext.js（App Router）+ TypeScriptで実装しました。ページはすべて静的生成し、導入事例やお知らせなど更新頻度の高いコンテンツはヘッドレスCMSから取得する構成としています。マーケティング担当者が開発を介さず更新できる範囲を広く取ることを重視しました。

表示速度の面では、画像のWebP変換と遅延読み込み、フォントのサブセット化とプリロード、不要スクリプトの読み込み遅延を実施。計測環境としてアクセス解析とタグマネージャーを設定し、フォームの各ステップとボタンごとのイベントを計測できる状態を整えました。ホスティングはVercel、デプロイはGitHub Actionsで自動化しています。

工夫した点

サービスサイトとキャンペーンLPで役割を分けました。サービスサイトは検討中の方が比較・確認するための情報の網羅性を優先し、LPは展示会で接点を持った方が来訪する前提で、訴求を一点に絞った縦の流れに構成しています。同じ素材でも並べ方を変えることが、いちばん効きます。

改善を続けられる状態で引き渡すことも目的のひとつでした。ファーストビューの文言や訴求ブロックの並びをCMS側から差し替えられるようにし、施策ごとの効果をイベント計測で確認できる形に整備。実装して終わりではなく、運用しながら磨けるサイトを目指しています。

実績一覧に戻る