Flowra
面倒な業務を、AIに。
機能は説明できても「使っている姿」が想像されずに離脱してしまうSaaSのために、製品のUIを最初に見せ、課題・機能・導入手順・料金を一本道に並べ、社内稟議まで見据えた判断材料を問い合わせ前に渡すプロダクトサイトの設計例です。
想定クライアント自社プロダクトを持つBtoB SaaS・ITスタートアップ（Web経由で試用・商談を獲得したい事業者）
※ 掲載しているのはAIを活用した制作サンプルです。サンプルサイトの企業・人物・内容はすべて架空（フィクション）であり、実在のものではありません。
よくある課題
- 機能を並べても価値が伝わらず、比較検討の段階で他社と横並びになってしまう
- 料金や導入手順が分からないため、現場担当者が社内に上げる前に離脱してしまう
- 問い合わせが来ても検討状況が分からず、初回商談の温度感が読めない
この設計の狙い
「よさそうだが自社で使えるか分からない」という状態を、サイト上で解消すること。製品の使用イメージ・導入の手順・料金・セキュリティの考え方までを開示し、担当者がそのまま社内に持ち帰れる情報の束として設計しました。
この構成にした理由
製品画面を、最初に見せる
SaaSの検討は「自分が使っている姿」を想像できるかで決まります。そのためヒーロー直下にワークスペースのUIモックを配置。画像ではなくHTML/CSSで組んでいるため、文言やタスク例の差し替えだけで更新できます。
ダーク背景に、グラデーションは一点だけ
背景は #08080C のダーク、アクセントはバイオレット→シアンのグラデーション1系統に限定。日常的にツールを触る担当者や情シスの目線に寄せ、装飾を足さずに新しさと落ち着きを両立させています。
課題→機能→導入手順→料金の順に並べる
現場担当者は「自分の困りごと」から入り、社内では「導入負荷」と「金額」を問われます。読み手の関心が移る順にセクションを配置し、途中で判断材料を探しに戻らなくてよい一本道の構成にしました。
料金とよくあるご質問を隠さない
3つのプランを金額と機能差つきで公開し、セキュリティ・データの扱い・解約条件をよくあるご質問に明記。問い合わせ前に社内で検討できる状態をつくることが、結果的に商談の質を上げるという設計です。
ページ構成
- トップ
- 機能
- 料金プラン
- お問い合わせ
実装している機能
- スマホ・タブレット・パソコンの画面に合わせた表示
- 検索対策（検索結果やSNSで正しく表示される設定）
- お問い合わせフォーム（迷惑な送信を防ぐ対策・入力内容の確認つき）
- プラン選択つきの問い合わせ項目
- よくあるご質問（押すと答えが開く形）
- 画像ではなくサイトの中で組み立てた、製品画面の見本
- スクロールに合わせて表示されるアニメーション（動きを減らす設定の端末では止まる）
狙っている効果
- 製品の使用イメージが早い段階で伝わることで、機能一覧を読む前の離脱を減らすことを狙っています
- 料金と導入手順を先に開示することで、社内で検討を終えた状態の問い合わせが届くことを想定しています
- プランと課題を書ける問い合わせ項目により、初回商談の準備精度を上げることを狙っています
※ 上記は本設計が狙う効果であり、成果を保証するものではありません。
このサイトを作るなら
この構成は、ライトプラン相当です（標準的な構成で、原稿はご支給いただく前提）。
まずは必要な情報を整えて、きちんと伝わる一式を用意したい方へ。
￥380,000〜（税別）
- 表示価格はすべて税別です。「〜」は最低価格を示し、最終金額はページ数・機能・素材の有無により変動します。
- サーバー・ドメインの管理費（￥5,000 / 月・税別）が別途必要です。
- 正式なお見積もりは、ご要望をうかがったうえでご提示します。
Let's talk
この構成で、あなたのサイトをつくれます。
・Web経由で無料トライアルや問い合わせを増やしたいSaaS事業者・機能説明はできているが「使っている姿」が伝わっていないと感じるプロダクト・料金ページと問い合わせ導線をつくり直したいBtoBサービス
この内容で相談する（無料）