ヒーローエリア
定義
ファーストビュー(最初に目に入る画面領域)に表示されるメインビジュアルとキャッチコピーのセクションです。訪問者がページを開いた瞬間に「このサービスは何か」「自分に関係があるか」を判断する最重要エリアであり、サイト全体の第一印象を決定します。
採用率
100%(62サイト中62サイト)
事実上すべてのB2Bサービスサイトがヒーローエリアを持っています。トップページの起点として不可欠なセクションです。
典型的な配置位置
中央値は 0.00(ページの最上部)です。定義上ファーストビューであるため、すべてのサイトでページ冒頭に配置されます。
位置分布

実例ギャラリー
調査サイトから一例をご紹介します。
backlog.com

バクラク

b→dash

Bill One

ClickUp

esa

go.chatwork.com

Helpfeel

HRMOS

invox受取請求書

ジョブカン勤怠管理

カミナシ

KARTE

Kibela

LegalForce

microCMS

MiiTel

Musubu

サイボウズ Office

PCAクラウド

rakumo

Scrapbox

slack.com

スマレジ

Talknote

クラウドサイン

CollaboFlow

ContractS CLM

eセールスマネージャー

GMOサイン

HubSpot

カイポケ

カオナビ

www.microsoft.com_teams

www.openpage.jp

楽楽精算

SHANON

見出しの傾向
- No.1訴求型: 「業界No.1」「国内利用者数No.1」「市場シェアNo.1」など、市場における優位性を数値で示すパターンです。
- 価値宣言型: 「データで導く スマートな人事へ」「名刺管理から、収益を最大化する」など、サービスの提供価値をキャッチコピーとして宣言するパターンです。
- 機能簡潔型: 「0円でカンタンに使えるPOSレジアプリ」「直感的に使える高機能ワークフローシステム」など、機能と手軽さを一文で表すパターンです。
- 課題解決型: 「バックオフィスの悩みは マネーフォワードで解決」「毎月の経費精算業務、脱・紙Excelで効率化」など、ターゲットの課題に直接応えるパターンです。
設計のポイント
ヒーローエリアでは「何のサービスか」「誰のためのサービスか」を3秒以内に伝えることが求められます。調査対象サイトの多くは、キャッチコピー(h1)に加えて「資料ダウンロード」「無料トライアル」などのCTAボタンを1〜2個配置しています。Chatworkのようにフォームを直接埋め込む形式も見られ、ファーストビューでのコンバージョン率を高める工夫が進んでいます。
また、No.1バッジや導入社数といった社会的証明の要素をヒーローエリアに組み込むサイトも増えており、初見の訪問者に対する信頼構築を最初の接点で行う戦略が主流です。
テキスト事例集
見出し(h1)の事例一覧
調査サイトのヒーロー見出しから、主要なパターンを紹介します。
| サイト名 | 見出しテキスト |
|---|---|
| Chatwork | 国内利用者数No.1 中小企業向けビジネスチャット Chatwork |
| SmartHR | データで導く スマートな人事へ |
| バクラク | AIエージェントで業務を完全自動化する |
| ジョブカン | 業界No.1 クラウド勤怠管理システム |
| 楽楽精算 | 申請から承認、処理・保存まで 毎月の経費精算業務、脱・紙Excelで効率化 |
| kintone | みんな、つくれる。 |
| Slack | Slack はチームの知恵が集まる場所 |
| HubSpot | マーケティング・営業・カスタマーサービスを一元化 |
| Airレジ | 0円でカンタンに使えるPOSレジアプリ |
| Sansan | 名刺管理から、収益を最大化する |
| ClickUp | Every app. Every team. Unlimited AI Agents. |
| クラウドサイン | 電子契約から気軽に始めるDX |
| KING OF TIME | 市場シェアNo.1の勤怠管理・人事給与システム キングオブタイム |
| invox | 受取請求書の入力・支払・計上をぜ〜んぶ自動化! |
| Asana | 人と AI が協働するプラットフォーム |
CTAボタンのラベル事例
ヒーローエリアに配置されるCTAボタンのラベルを紹介します。ほとんどのサイトが1〜2個のボタンを配置しています。
| サイト名 | ボタン1 | ボタン2 |
|---|---|---|
| SmartHR | 資料ダウンロード | 無料トライアル |
| Chatwork | 新規登録 | 資料3点セット無料ダウンロード |
| Sansan | 3分でわかる Sansan資料ダウンロード | お問い合わせ |
| HubSpot | デモを依頼 | 無料で試してみる |
| jinjer | 資料を請求する | 無料デモ・トライアル |
| KING OF TIME | お問い合わせ | 無料体験 |
| Money Forward | 実際の画面を無料で試す | サービス資料をダウンロード |
| カオナビ | 資料ダウンロード | 無料デモ申込み |
| 楽楽精算 | 無料お試し | 資料ダウンロード |
| BowNow | 資料ダウンロード | 無料で使ってみる |
「資料ダウンロード」系と「無料トライアル」系が二大パターンです。多くのサイトが「軽いアクション(資料DL)」と「重いアクション(問い合わせ/トライアル)」を組み合わせています。
実績数値の事例
ヒーロー内に掲載される社会的証明のテキスト例です。
| サイト名 | 実績テキスト |
|---|---|
| Chatwork | 導入社数97万社 |
| SmartHR | 登録社数70,000社以上 / 7年連続シェアNo.1 |
| KING OF TIME | 導入企業数67,000社 / 利用者数4,300,000人 |
| クラウドサイン | 導入社数250万社以上 / 累計送信件数4000万件超 |
| GMOサイン | 350万社以上 / 上場企業80%利用 |
| HubSpot | 世界135か国以上で28万8,000社を超える |
| Money Forward | 利用事業者数40万事業者突破 |
| microCMS | ご利用企業数14,000社以上 / 継続率99% |
企画のヒント
見出しの設計テンプレート:
- No.1型: 「[指標]No.1 [カテゴリ名] [サービス名]」
- 課題解決型: 「[業務名]の[課題]を、[方法]で[効果]」
- ブランド型: 「[ビジョン/メタファー]。」(短く、余韻を残す)
- AI訴求型: 「[AI/エージェント]で[業務]を[変革動詞]」
差別化の工夫:
- Chatworkはヒーロー内に資料請求フォームを直接埋め込み、CTAへの動線を最短化しています
- freeeはセグメント別(法人/個人事業主)にヒーローの内容を分岐しています
- kickflowは「継続率99.76%」という具体的な品質指標をヒーロー内に配置しています