Project事例
BtoBサービスLP
既存資料を、相談につながる一枚へ
情報は揃っているものの公開ページにまとまっていない状態から、1ページ・1つの相談導線へ整理する進め方を紹介します。
進め方の例 事例一覧へ戻るSummary 要点と証拠
最初に記録の要点を見る
既存の営業資料とWebサイトから伝える材料を拾い、読み手の悩み、提供価値、信頼材料、相談の順に並べ直します。構成だけで終わらず、スマートフォン対応と相談導線の確認まで含めて公開できる形にします。
相談先を分散させない構成
小さいスマートフォンからデスクトップまで確認
困りごと・価値・信頼・相談前の疑問
Method 課題と進め方
困りごとを分けて触る範囲を決める
扱った課題
- 営業資料、既存サイト、説明メモに情報が分かれ、初めて見る人が重要な内容を追いにくかった。
- 伝えたい内容を増やすほど相談導線が埋もれるため、一枚で扱う範囲を決める必要があった。
進め方と判断
- 素材を「相手の困りごと」「提供すること」「信頼材料」「相談前の疑問」に分け、読む順番を決めた。
- 相談先を一つに絞り、各セクションが次の判断へつながるよう構成した。
- 主要な画面幅、リンク、相談導線、基本的な読み上げ順を公開前の確認項目にした。
Record 詳しい記録
何が起きてどう確かめたか
背景
BtoBサービスでは、説明できる材料が多いほど、Webページに載せる順番を決めにくくなる。会社紹介、機能、料金、担当者の思いを同じ強さで並べると、初めて見る人は自分に関係があるかを判断できない。
この例では、新しく材料を作り始める前に、既存資料から相談判断に必要な内容だけを拾った。
制約
- 1ページ、相談導線は1つ
- 素材と権限が揃ってから7営業日
- 売上や問い合わせ数は約束せず、公開と動作確認までを成果とする
判断
最初に読み手の困りごとを置き、その次に提供すること、残る成果物、相談前の疑問を並べた。会社の説明から始めず、読み手が「自分に関係がある」と判断してから詳しい情報へ進める順番にしている。
完成後に確認すること
デスクトップとスマートフォンの表示、キーボード操作、リンク、問い合わせ先、基本計測の設定を確認する。公開URLを渡して終わりにせず、次の更新で迷わない確認記録も残す。
Handover 残したもの
作業のあとに使える形を残す
完成後に残るもの
- 01
5〜7セクション、1CTAのLP構成
- 02
デスクトップ・スマートフォン対応画面
- 03
リンク・フォーム・基本計測の公開前チェックリスト
担当した範囲
- 資料整理
- ページ構成
- 文章設計
- レスポンシブ実装
- 公開確認
使用した技術と道具
- Astro
- TypeScript
- CSS
- Vercel
Related 頼むなら
似た困りごとを相談するときに
同じ進め方がそのまま当てはまるとは限りません。今の状況を聞いて、必要な範囲から決めます。





