小規模事業のWebサイト・ヒーローセクション例（注釈付き）
小規模事業向けのWebサイト・ヒーローセクション例を注釈付きで紹介。顧客の行動、デザイン上の工夫、制約を示す最初の画面6例、比較表、コピーして使える依頼書を掲載します。すべてWe.Incのテンプレートデザインです。
ヒーローセクションは、ページを開いて最初に見える画面です。小規模事業では、訪問者がスクロールする前に3つのことを伝えましょう。何をしているか、どこで（または誰に）提供するか、次に何をすればよいかです。以下の6つはWe.Incのテンプレートデザインであり、実際の顧客サイトではありません。それぞれの顧客行動、デザイン上の工夫、利用前に直す点を説明します。
選定方法と対象読者
We.Incのショーケースから、見出しを中心にしたもの、写真を中心にしたもの、動画を使ったもの、ポートフォリオを中心にしたものを選びました。それぞれを前述の3つの質問に照らして評価します。スクリーンショットはデスクトップで最初に見える画面です。スマートフォンでは同じヒーローが縦に積み重なるため、実機でも選んだデザインを確認してください（モバイルファーストWebデザインを参照）。
注釈付きの例
1. 利点を伝える見出しと2つのボタン（配管業者）
顧客の行動：急いで助けを求める。デザイン：短い利点を示す見出し、サービスを説明する1文、目立つ「今すぐ予約」と控えめな「対応内容を見る」。利用前に修正：メーター風の図に「迅速な対応」と平均応答時間の説明があります。これは仮の主張です。免許番号や対応地域など、事実に置き換えるか削除します。緊急の顧客向けに電話番号も追加します。
2. 具体的な約束、地域の実績、写真（会計事務所）
顧客の行動：この事務所に連絡する価値があるか判断する。デザイン：具体的な見出し、眉見出しと文章で都市名を示し、地元の街並み写真、「今すぐ始める」と「問い合わせ」リンクを配置。利用前に修正：写真上のバッジはテンプレートの文言です。根拠を示せる数字だけを残します。
3. 写真と統計の行（芝生の手入れ）
顧客の行動：定期的な芝生管理の見積もりを依頼する。デザイン：簡潔な見出し、文章に都市名、「見積もりを依頼」と「最近の施工を見る」、数字の一覧を配置。利用前に修正：年数、案件数、評価はテンプレート用の仮データです。実際に確認できる数字に置き換えるか行を削除してください。作り上げた数字は信頼を損ね、広告規則に違反するおそれもあります。
4. 雰囲気を伝える全画面動画の見出し（レストラン）
顧客の行動：雰囲気を感じて予約する。デザイン：キッチン動画にレストラン名を重ね、画面下部に所在地と営業時間を表示。利用前に修正：目立つボタンがなく、「予約」は隅にある小さなリンクだけです。明確な「テーブルを予約」ボタンを追加し、スマートフォンでも速く読み込める動画にします。
5. 商品の接写と短いメッセージ（ジュエリーショップ）
顧客の行動：商品品質を確かめる。デザイン：接写写真を主役にし、2語の見出しと「コレクションを見る」を配置。利用前に修正：見出しでは何をどこで提供するか分かりません。「[町]の手作り指輪と修理」のような説明を加え、自分の商品写真を使います。
6. ポートフォリオを中心にした最初の画面（建築家）
顧客の行動：過去の仕事の品質を判断する。デザイン：図面上に大胆な見出し、サービスの説明、注目プロジェクトの「プロジェクトを見る」カードを配置。利用前に修正：このデザインでは見出しが文の途中で切れています（「建物が // 現代的に…」）。どの画面幅でも全文を読めるよう書き直し、問い合わせを始める方法も追加します。
比較
| 例 | 提供内容が分かる | 場所が分かる | 次の行動が明確 | 主な修正点 |
|---|---|---|---|---|
| 配管業者 | はい | ロゴのみ | はい | 仮の主張、電話番号なし |
| 会計事務所 | はい | はい | はい | テンプレートのバッジ |
| 芝生管理 | はい | はい | はい | 仮の数字 |
| レストラン | 一部 | はい（住所） | いいえ | 予約ボタンを追加 |
| ジュエリーショップ | いいえ | ロゴのみ | はい | 提供内容と場所を明記 |
| 建築家 | 一部 | 文中に記載 | 弱い | 見出しが途中で切れ、問い合わせ方法なし |
記入例とコピーして使えるヒーローの依頼書
架空の事業「Green Row Landscaping」の記入例です（説明用のデモであり、成果は主張しません）。空欄もコピーして使えます。
見出し（何を、誰に）： 小さな庭の設計と施工
補足（地域 + 方法）： [町]で営業。書面で見積もり、自分たちで施工します。
主ボタン： 現地訪問を予約
2つ目のリンク： 最近の庭を見る
実績（実際のもののみ）： 保険加入済み - Googleレビューへのリンク
画像： 完成した庭の自分の写真を圧縮して使用
電話（タップして発信）： ヘッダーに表示
見出し：
補足：
主ボタン：
2つ目のリンク：
実績（実際のもののみ）：
画像：
電話：見出し分析ツールで見出し案を試しましょう。
参考にする部分と、コピーしない部分
- 言葉ではなく構成（見出し、補足、ボタン、実績の根拠）を参考にします。
- 裏付けられないテンプレートの数字、評価、バッジは残さないでください。
- 写真や動画上の文字のコントラストをカラーコントラスト確認ツールで確認します。
- ヒーロー画像は圧縮してください（画像圧縮ツールが便利です）。ページで読み込みが遅い要素になりやすいためです。
目的に合うテンプレートから始める
ビジネステンプレートから事業に合うヒーローのスタイルを選び、We.IncのWebサイトビルダーで編集します。Freeではwe.incのアドレスでテンプレートサイトを最大3つ利用できます（AIクレジットと独自ドメインは含まれません）。月額$20のStarterではAIによる作成と独自ドメインが追加されます（料金プラン）。Webサイト評価ツールで結果を確認し、Webサイト費用計算ツールで予算を立てましょう。
よくある質問
Webサイトのヒーローセクションには何を含めるべきですか？
何をどこで、または誰に提供するか、主なボタン1つを含めます。実際の実績を示す一文や自分の仕事の写真を加えてもよいでしょう。
ヒーローセクションに動画を使うべきですか？
写真では伝えられない価値があり、スマートフォンでも速く読み込まれ、文字やボタンが読みやすい場合に限ります。必ず明確なボタンも設置してください。
これらは実在する事業のWebサイトですか？
いいえ。ヒーローのデザインパターンと公開前に修正すべき点を示すために使ったWe.Incのテンプレートです。
無料で始める · クレジットカード不要
製品
- AI ホームページ作成ツール：作りたいサイトを普段の言葉で伝えるだけで、数分で公開
- ホワイトラベル プラットフォーム：自社ブランド、自社ドメイン、自社の利益で運営
- エンタープライズ：SSO、個別の SLA、専任サポート
- 開発者向け API：自社の SaaS にサイト生成機能を組み込み
ご利用いただける方
- 制作会社・代理店向け：自社ブランドで再販
- フリーランス向け：自分ブランドのビルダーを持つ
- ホスティング事業者向け：サービスにビルダーを追加
- SaaS プラットフォーム向け：API でサイト作成を組み込み
- スタートアップ向け
- 金融サービス向け
- 医療・ヘルスケア向け