Land-book ·Picked 2026.10.18
Fernand
カスタマーサポートSaaSのサイトデザイン参考 — SaaS・無料訴求・利用者の実名・グラデーション
出典：getfernand.com ↗ 確認日 2026.10.18
Editor's note
編集部の視点
「無料」を見出しに置き、使っている創業者を実名と所属サービス名つきで並べるSaaSサイト。
SaaS チーム向けのカスタマーサポートツール Fernand のトップページ。見出しに「free」を入れ、そのすぐ下に「無料で始める」「デモを予約」「AIでインストール」「2分のデモ動画」と、検討の深さが違う入口を4つ並べる。そこから先は共有受信箱・AI・API連携・ドキュメント・埋め込みチャットと、1セクションに1テーマで機能を積み上げ、最後にもう一度料金の考え方と2つのボタンで締めている。
- 01 見出しの中に「free」を入れ、料金の不安を最初の1行で消している
- 02 ファーストビューの入口を「すぐ使う／人と話す／AIで入れる／まず見る」の4段階に分けている
- 03 機能は1セクション1テーマ。小見出しを3〜7個並べ、読み飛ばしても要点が拾える
Conversion
集客の工夫
- ヘッダーにCTAを常設 （あり） PC・SP 追従ヘッダーに「Book a demo」「Start for free」
- ファーストビューに行動ボタン （あり） 無料で始める・デモ予約・AIでインストール
- 動画で説明 （あり） 2分のデモ動画をファーストビューに
- 料金への導線 （あり） ヘッダーに Pricing、ページ末尾に料金の考え方
- 利用者の実名 （あり） 創業者の名前と運営サービス名
- SPの追従要素 （あり） 画面下に乗り換え相談の吹き出し
- 電話番号の掲載 （なし） なし（問い合わせはデモ予約とチャット）
- 言語の切り替え （なし） なし（英語のみ）
料金の不安を、見出しで先に消す
見出しは「The free customer support platform for SaaS teams」。料金ページに行く前に、無料で始められることが1行目で分かります。BtoB のツールでは「いくらかかるのか」が分からないことが離脱の大きな理由になるため、価格を見出しの中に入れてしまうのは効果の大きい判断です。ページの最後でも「無料で始められ、AIの解決件数では課金しない」と、料金の考え方をもう一度言い切っています。
入口を、検討の深さで4つに分ける
ファーストビューのボタンは「Start for free」「Book a demo」「Install with AI」、そして「Watch a 2 minute demo」。すぐ使いたい人、人と話したい人、まず見たい人のそれぞれに入口があります。資料請求や問い合わせにまだ進みたくない層を、2分の動画が受け止めています。
乗り換えの壁を、画面下の吹き出しで下げる
スマホでは画面下に「Fernand への乗り換えをためらう理由は？ 移行は無料で手伝います」という吹き出しが出ます。既存ツールから乗り換える手間は、SaaS の比較検討で最後に残る壁です。その壁に名前をつけて、無料で手伝うと先に言うことで、問い合わせのきっかけにしています。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #CAF1FE ファーストビューの空色グラデーション
- #F7F8FC セクション背景
- #1A2035 見出し・メインのボタン
- #00A0FF ヘッダーの「無料で始める」ボタン
- #717583 本文テキスト
- #151618 フッター背景
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ボタン | Inter | Inter |
| ショートカットキー・コード表記 | Monaco | JetBrains Mono |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 38px / 400 | 1.26 | 26px / 400 |
| h2 | 30px / 400 | 1.27 | 26px / 400 |
| h3 | 18px / 400 | 1.67 | 16px / 400 |
| 本文（p） | 14px / 400 | 1.57 | 14px / 400 |
| ボタン | 13px / 500 | 1.15 | 13px / 500 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 会社概要・料金・ログインと、「デモ予約」「無料で始める」の2ボタン。スクロールしても上に残る。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 「free」を含む見出し、4つの入口、製品画面の動画。 ファーストビュー／見出し＋CTA＋製品画面型
- 03 利用者 「同じような創業者が使っている」として、利用者を名前と運営サービス名で並べる。 信頼／ロゴ帯型
- 04 共有受信箱 メール・チャット・ナレッジベース・Slack など7つの窓口を1つにまとめることを、窓口ごとのカードで。 一覧／カード並び型
- 05 考え方 「製品を作ろう。サポートの仕組みではなく」という主張を、長めの文章で。 メッセージ／大きな一文型
- 06 チームとの連携 バグ報告・機能要望の管理、チーム招待、AIへの割り当て。 機能・強み／左右交互型
- 07 AI機能 製品を理解したAIの動画と、返信案・要約など5つの小見出し。 動画／動画カード型
- 08 API・自動化・ショートカット 独自データの取り込み、繰り返し作業の自動化、キー1つで複数の操作。 機能・強み／左右交互型
- 09 連携サービス 連携先のロゴを大きな図で見せ、「連携一覧」ボタンへ。 信頼／ロゴ帯型
- 10 ドキュメント機能 ヘルプページ作成機能を動画と6つの小見出しで。 動画／動画カード型
- 11 埋め込みチャット 製品内に置けるチャットとAIを、6つの特徴で。 一覧／カード並び型
- 12 落ち着いて使える設計 集中を妨げない作り（1つずつ処理、受信箱ゼロへの進捗、ショートカット、100ms以下の表示）。 機能・強み／左右交互型
- 13 料金の考え方 「無料で始められ、AIの解決件数では課金しない」と言い切ってから、2つのボタン。 行動喚起／ボタン帯型
- 14 フッター 製品・連携・比較（Alternatives）・規約の4列。 フッター／ナビ＋会社情報型
- 15 スマホの追従吹き出し 画面下に「乗り換えを無料で手伝う」という吹き出しが出る。 行動喚起／SP追従ボタンバー型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 無料プランや無料相談があるなら、ボタンの文字ではなく見出しの中で言い切る
- 02 入口は「すぐ使う」「人と話す」「まず見る」の段階で分けて並べる
- 03 機能紹介は1セクション1テーマにし、小見出しだけで流し読みできるようにする
- 04 推薦の声は社名ではなく、個人名と「何をしている人か」で出す
FAQ
よくある質問
Fernand のサイトで使われているフォントは？
見出しから本文・ボタンまで Inter で統一しています。ショートカットキーの表記など一部に Monaco（等幅）を使っています。Inter は無料で使えます。
機能が多いSaaSのトップページは、長くなりすぎませんか？
Fernand のトップは約14,000px（PC）と長いですが、1セクション1テーマで小見出しが揃っているため、スクロールで流し読みできます。長さより、どこで読むのをやめても入口が見えることのほうが大切です。ヘッダーの2ボタンは常に表示されています。
どんな業種の参考になりますか？
SaaS や業務ツールのほか、無料相談・無料体験を入口にしているサービス全般に向きます。「無料」を見出しに入れる型は、価格への不安が問い合わせの壁になっている業種で効きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はFernandおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Land-book
