Land-book ·Picked 2026.10.18
Zaro
AI導入支援（SaaS）のサイトデザイン参考 — SaaS・淡い配色・信用の見せ方・CTAは2本
出典：zaro.ai ↗ 確認日 2026.10.18
Editor's note
編集部の視点
製品の説明より先に、創業メンバーの出身企業と出資者を並べるAI導入支援のサイト。
企業のAI導入を支える Zaro のサイト。見出しは「完璧な知識が、ここに」で、ボタンは「チームと話す」「仕組みを見る」の2本だけ。すぐ下に創業メンバーの出身企業・大学と出資者の帯がある。その後は「AIはもう買った。でも事業を読めない」という課題の提示、既存の手法との比較、投資対効果、セキュリティと続き、最後は「5分のAI準備度診断」で締める。
- 01 導入企業のロゴの代わりに、創業メンバーの出身企業と出資者を並べて信用を示す
- 02 CTA は「人と話す」「仕組みを見る」の2本に絞り、ヘッダーにも同じ「チームと話す」を固定する
- 03 最後の行動を「5分の診断」にして、問い合わせより手前の入口を用意する
Conversion
集客の工夫
- ヘッダーにCTAを常設 （あり） 「Talk to our team」を PC・SP で固定
- ファーストビューに行動ボタン （あり） チームと話す・仕組みを見る
- 信用の裏づけ （あり） 創業メンバーの出身企業・大学と出資者
- 課題の提示 （あり） 「AIは買ったが、事業を読めない」と3つの手法の限界
- 投資対効果の説明 （あり） 「最初の案件で元が取れ、5件目はほぼ無料」
- セキュリティの説明 （あり） 専用セクションと詳細ページ
- 診断コンテンツ （あり） 5分のAI準備度診断
- 電話番号の掲載 （なし） なし
実績の代わりに、チームと出資者を出す
見出しのすぐ下にあるのは、導入企業のロゴではなく BUILT BY THE TEAM FROM（Convergence、PolyAI、Salesforce、Celonis、Lovable、Pigment と、インペリアル・カレッジ・ロンドン、ケンブリッジ、オックスフォード）と BACKED BY（Cherry、Hugging Face）の帯です。実績がまだ少ない会社が信用を示す方法として、「誰が作っているか」「誰が支えているか」を事実として出す選択です。
ボタンは2本、ヘッダーにも同じものを
ファーストビューのボタンは「Talk to our team」と「See how it works」の2本だけ。ヘッダーにも「Talk to our team」が固定され、スマホでも常に表示されます。人と話したい人と、まず見たい人の2択に絞った最小の構成です。
問い合わせの手前に、5分の診断を置く
ページの最後は「自社がどれだけAI対応できているか確かめる」という呼びかけと「Take the 5-minute assessment」のボタンです。いきなり商談に進むのはためらう相手でも、短い診断なら気軽に始められます。結果をきっかけに会話を始められる、検討期間の長い BtoB らしい締め方です。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FAFAF8 背景
- #ECEBE5 セクション背景
- #201613 見出し・メインのボタン
- #524742 本文テキスト
- #292521 暗い面（動画・フッター）
- #DCD8FC ラベンダー（図版のアクセント）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ボタン | Saans | Geist |
| 番号・ラベル | JetBrains Mono | JetBrains Mono |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 84px / 500 | 1.00 | 40px / 500 |
| h2 | 40px / 500 | 1.20 | 28px / 500 |
| h3 | 18px / 500 | 1.30 | 16px / 500 |
| 本文（p） | 18px / 400 | 1.50 | 18px / 400 |
| ボタン | 14px / 500 | 1.35 | 14px / 500 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 選ばれる理由・製品・コンセプト・セキュリティ・資料と、ログイン・「チームと話す」。上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 見出しと一文の説明、2つのボタン。右に立体的な図版。 ファーストビュー／文字＋画像の左右分割型
- 03 チームと出資者 創業メンバーの出身企業・大学と、出資者の帯。 信頼／ロゴ帯型
- 04 課題 「AIはもう買った。でも事業を読めない」と、既存の3つの手法とその限界。 進め方／番号つきステップ型
- 05 既存手法との比較 「ナレッジグラフは過去を、Zaro は今を教える」と、2つを並べて比べる。 機能・強み／左右交互型
- 06 製品の動画 製品の画面と動画。 動画／動画カード型
- 07 投資対効果 「最初の案件で元が取れ、5件目はほぼ無料」。 メッセージ／大きな一文型
- 08 セキュリティ 「AIが働く層で管理する」と、セキュリティの詳細ページへ。 コンセプト／写真＋メッセージ型
- 09 できること Zaro にできる3つのこと。 一覧／カード並び型
- 10 診断 「自社がどれだけAI対応できているか確かめる」と、5分の診断ボタン。 行動喚起／ボタン帯型
- 11 フッター 製品・資料・会社のリンクと SNS。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 実績が少ないうちは、導入企業の代わりにチームの経歴や出資者で信用を示す
- 02 CTA は「人と話す」「まず見る」の2つに絞り、ヘッダーにも同じボタンを固定する
- 03 費用対効果は、数字や具体的な言い回しで一文にまとめる
- 04 問い合わせより手前に、短い診断やチェックリストの入口を用意する
FAQ
よくある質問
Zaro のサイトで使われているフォントは？
見出しから本文まで Saans、番号やラベルに JetBrains Mono（等幅）を使っています。Saans は有料書体なので、無料で近づけるなら Geist が候補です。JetBrains Mono は無料で使えます。
導入実績がまだ少ない会社でも、信用は示せますか？
Zaro は導入企業のロゴではなく、創業メンバーの出身企業と出資者を並べています。代表の経歴、提携先、所属団体、メディア掲載など、事実として示せるものを最初の画面の近くに置くと、実績の少なさを補えます。
どんな業種の参考になりますか？
立ち上げ間もない SaaS やコンサルティング、専門家の事務所など、実績より人で選ばれる段階の事業に向きます。「5分の診断」で締める型は、検討期間の長い BtoB サービス全般に使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はZaroおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Land-book
