25のウェブサイトレイアウト例（注釈付きワイヤーフレーム付き）
We.Incテンプレートライブラリから25のウェブサイトレイアウト例を紹介。各レイアウトのボックスワイヤーフレームとフルデザインのプレビュー、なぜそのレイアウトが効果的か、どのビジネスに適しているかを解説。レイアウトの選び方ガイドも含みます。
ウェブサイトレイアウトとは、ページ上のセクションの順序と配置のことです。何が最初に来るか、何が横並びになるか、メインボタンがどこに配置されるかを指します。以下に25のレイアウトを紹介します。各レイアウトはシンプルなボックスワイヤーフレームとフルデザインのプレビューで示されています。25点はすべてWe.Incのテンプレートデザインであり、お客様のサイトではありません。各ビジネスの種類に合わせてグループ化されています。各ワイヤーフレームの青いボックスはメインのCTAです。
ワイヤーフレームの読み方
ボックスの各行はページのひとつの帯で、スクロールすると上から下へ続きます。横並びのボックスはデスクトップでは隣り合って表示され、スマートフォンでは同じ順序で縦に積み重なります（左のボックスが先に表示されます）。このページではページ全体の配置を説明します。ページ上部についてはヒーローセクションの例を、ナビゲーションメニューについてはナビゲーションの例をご覧ください。
1つの表で見る5つのレイアウトパターン
| パターン | セクションの順序 | 最適な場面 | 以下の例 |
|---|---|---|---|
| サービスファネル | ヒーロー、サービス、実績、フォーム | 見積もりや予約が必要な訪問者向け | 1〜8 |
| 来店 | ヒーロー、メニュー、ストーリー、営業時間と地図 | 来店型ビジネス向け | 9〜14 |
| 予約・入会 | ヒーロー、料金またはスケジュール、予約 | 予約、クラス、会員制向け | 15〜19 |
| グリッド | ヒーロー、アイテムグリッド、詳細、問い合わせ | リスティング、商品、ポートフォリオ向け | 20〜24 |
| 読者向け | ヒーロー、作品、自己紹介、登録 | リピーター獲得が目的の場合 | 25 |
サービスビジネス向けレイアウト
1. 緊急対応業者：ヒーロー直下の緊急バンド
テンプレート：Ironpeak Roofing（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： ヒーロー直下の全幅カラーバンドが、スクロールする前に緊急の問題（暴風雨による被害）を抱えた人の目を引きます。適したビジネス： 屋根工事、修復業、鍵屋、レッカー業。
2. 複数業種＋サービスエリアブロック
テンプレート：Summit Trades（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 3つの均等なサービスカードの後に対応エリアのリストを表示することで、「このエリアで対応してもらえますか？」という疑問に2スクロールで答えます。適したビジネス： 対応エリアが定まっているすべてのビジネス。
3. 特長サービスを強調したサービスリスト
テンプレート：Voltline Electric（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 高単価サービスに専用セクションを設けることで、他のサービスを隠さずに最も売りたい仕事をアピールできます。適したビジネス： 利益率の高い専門サービスがある職種。
4. チェックリストと即時見積もり
テンプレート：Brightwell Cleaning（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 毎回の訪問に含まれる内容の見えるチェックリストが、料金フォームの前に主な不安（具体的に何をしてもらえるのか？）に答えます。適したビジネス： 清掃、芝生管理、プールサービス。
5. 地元職人のストーリー
テンプレート：Halden Woodworks（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 見出しに地名を入れ「仕事の流れ」を示すことで、大きな一回限りの依頼に対する信頼感を高めます。適したビジネス： 大工、建築業者、リフォーム業者。
6. 専門事務所：業務領域と担当者
テンプレート：Sterling & Vance LLP（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 依頼者は業務領域でまず事務所を選び、次に担当者を選ぶため、レイアウトがその順序に従っています。適したビジネス： 法律、会計、財務アドバイザリー。
7. コンサルティング：実績を前面に
テンプレート：Linden Consult（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 実績をヒーローの直後に配置し、サービスを「顧客が抱える課題」として提示します。適したビジネス： コンサルタント、コーチ、B2Bサービス。
8. シンプルな会計士ページ
テンプレート：Ledgerline CPA（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 4つのセクションのみ。会計士が必要だとすでにわかっている顧客には、シンプルさが最速の答えです。適したビジネス： 顧客がすでに必要性を自覚しているすべてのサービス。
飲食・ホスピタリティ向けレイアウト
9. カフェ：メニュー、ストーリー、来店案内
テンプレート：Ember & Roast（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： メニューを先に、来店案内を最後に：訪問者はまず何を提供しているかを確認し、次にいつどこに行けるかを調べます。適したビジネス： カフェ、ベーカリー、バー。
10. 事前注文対応のベーカリー
テンプレート：Flour & Fern（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 専用の注文セクションが閲覧を事前注文に変えます。適したビジネス： ベーカリー、精肉店、ミールプレップ。
11. レストランのロングスクロール
テンプレート：Azafran（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 目的地型レストランでは雰囲気が予約を促すため、ページはリクエストする前にストーリーを語ります。適したビジネス： 高級レストラン、テイスティングメニュー、宴会場。
12. 3セクションのレストラン
テンプレート：Crust（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： ヒーロー、メニュー、来店案内。すべての疑問に答えるためのレストランに必要な最小限のセクション数です。適したビジネス： カジュアルレストラン、テイクアウト。
13. スケジュール優先
テンプレート：ROAM（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 毎日場所が変わる場合、「今日はどこにいる？」が主な疑問なので、ヒーローの直下に配置します。適したビジネス： フードトラック、マーケット、ポップアップ。
14. 問い合わせフォーム付きイベントサービス
テンプレート：Harvest & Vine（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： イベント種別を先に示すことで訪問者が自分で選択でき、サンプルメニューが価格の具体感を生みます。適したビジネス： ケータリング、プランナー、会場。
予約・会員制向けレイアウト
15. 予約主導型サロン
テンプレート：Lumé Salon & Beauty Spa（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 料金表と予約ブロックがあれば、ほとんどのサロン訪問者のニーズを満たせます。適したビジネス： サロン、理髪店、ネイル・まつ毛サロン。
16. クラススケジュールと料金
テンプレート：Tidewater Yoga（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： スケジュール→料金→初回特典の順序が、新規受講者の意思決定の流れに合っています。適したビジネス： ヨガ、ピラティス、ダンス、武道。
17. プログラムと階層制ジム
テンプレート：Iron（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 会員プランを横並びにすることで比較しやすく、初回無料セッションがハードルを下げます。適したビジネス： ジム、クラブ、会員制サービス。
18. クリニック：診療内容、チーム、場所
テンプレート：Verdant Family Health（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 患者は何を治療してもらえるか、誰が担当するか、どうやって行くかを知りたいのです。適したビジネス： クリニック、歯科医院、理学療法士。
19. 緊急連絡付き動物病院
テンプレート：Meadowpaw Veterinary（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 来院セクションで緊急の場合は電話するよう案内することで、予約フォームが緊急時に使われるのを防ぎます。適したビジネス： 動物病院、緊急医療、緊急対応が必要なすべてのサービス。
グリッドレイアウト：リスティング、ショップ、ポートフォリオ
20. リスティンググリッド
テンプレート：Keystone Realty（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 購入者にはグリッドを、売り手には専用セクションと別のCTAを提供します。適したビジネス： 不動産、賃貸、自動車販売。
21. 単品商品ページ
テンプレート：Verre Halo（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 価格はメニューバーと最後に表示され、その間の内容はすべて「価値があるか？」という疑問に答えます。適したビジネス： 単品ブランド、ローンチ、クラウドファンディング商品。
22. 小ロットショップ
テンプレート：Cellar & Rowan（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 商品を先に、次に価格の正当性を示すストーリー、最後に次のバッチのリスト登録を配置します。適したビジネス： メーカー、キャンドル、陶磁器、食品。
23. 商品ドロップ
テンプレート：Loop（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 次のリリースを前面に出し、今すぐ欲しい人にはショップグリッドを用意します。適したビジネス： 限定品、アパレル、コレクターズアイテム。
24. ポートフォリオグリッド優先
テンプレート：Drafthouse（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 見出しの直後に6つのプロジェクトを配置。作品が売り込みをしてくれます。適したビジネス： 建築家、デザイナー、フォトグラファー。
個人・クリエイター向けレイアウト
25. ニュースレター付きライター
テンプレート：Plume（We.Incのテンプレートデザイン、お客様のサイトではありません）。
なぜ効果的か： 作品を先に、次にニュースレター登録。目標は1回限りの問い合わせではなく、戻ってくる読者です。適したビジネス： ライター、クリエイター、スピーカー。
レイアウトの選び方
- 1つのアクションを決める：訪問者に最もとってほしいアクション（電話、予約、購入、問い合わせ、登録）を決めます。それが青いボックスになります。
- 3つの疑問をリストアップ：訪問者がアクションを起こす前に抱く疑問（例：対応エリアか、費用はいくらか、信頼できるか）を3つ挙げます。各疑問がセクションになり、その順序で並べます。
- パターンを選ぶ：上の表から合致するパターンを選びます。
- 不要なセクションを削除：実際のコンテンツで埋められないセクションは削除します。空の「実績」セクションや仮の口コミは、ページを短くするよりも害になります。
- スマートフォンで確認する。 横並びのボックスは縦に積み重なります。メインボタンが早い段階で表示されることを確認してください（モバイルファーストデザイン参照）。
1つのページが長くなったら複数のページに分割します。ウェブサイト構造では、上記のセクションがどのようにサイトマップになるかを説明しています。
よくあるレイアウトの失敗
- 長いページの一番下にだけお問い合わせフォームを置き、ヘッダーにボタンを設けないこと。
- スマートフォンユーザーが多い場合に3列テキストを使うこと。きれいに積み重なるカードを使いましょう。
- 裏付けできないテンプレートの数字、口コミ、バッジをそのまま使うこと。
- 訪問者が何をするビジネスかを理解する前にギャラリーを置くこと。
これらのレイアウトを使う
ここに掲載されているすべてのレイアウトは、We.Incテンプレートライブラリのテンプレートです。無料プランでは、we.incアドレスで最大3つのテンプレートサイトを利用できます（AIクレジット・カスタムドメインなし）。月額$20のStarterプランでは「口コミをサービスの上に移動して」などのAIビルド機能とカスタムドメインが追加されます。詳しくは料金ページをご覧ください。まずウェブサイトモックアップジェネレーターでイメージを作り、ウェブサイトグレーダーで結果を確認しましょう。
よくある質問
ウェブサイトレイアウトとは何ですか？
ページ上のセクションの順序と配置のことです。何が最初に表示されるか、何が横並びになるか、メインのCTAがどこに配置されるかを指します。
中小企業のウェブサイトに最適なレイアウトは何ですか？
ほとんどのサービスビジネスには、明確なボタン1つのあるヒーロー、サービス、口コミなどの実績、お問い合わせまたは見積もりフォーム、そしてヘッダーにもボタンを繰り返す構成が最適です。
ホームページには何セクションが必要ですか？
訪問者の主な疑問に答えるために必要な分だけで、それ以上は不要です。ここの例では4セクションから8セクションまでさまざまです。
これらは実際のビジネスのウェブサイトですか？
いいえ。25点はすべてWe.Incのテンプレートデザインで、レイアウトパターンを示すために使用されています。
モバイルではレイアウトはどう変わりますか？
横並びのボックスは同じ順序で縦に積み重なります。最も重要なアイテムを左に配置し、メインボタンは上部近くに置いてください。
レイアウトと構造の違いは何ですか？
レイアウトは1つのページの配置です。構造はサイト全体でページがどのようにつながっているかを指します。階層、URL、内部リンクが含まれます。
無料で始める · クレジットカード不要
製品
- AI ホームページ作成ツール：作りたいサイトを普段の言葉で伝えるだけで、数分で公開
- ホワイトラベル プラットフォーム：自社ブランド、自社ドメイン、自社の利益で運営
- エンタープライズ：SSO、個別の SLA、専任サポート
- 開発者向け API：自社の SaaS にサイト生成機能を組み込み
ご利用いただける方
- 制作会社・代理店向け：自社ブランドで再販
- フリーランス向け：自分ブランドのビルダーを持つ
- ホスティング事業者向け：サービスにビルダーを追加
- SaaS プラットフォーム向け：API でサイト作成を組み込み
- スタートアップ向け
- 金融サービス向け
- 医療・ヘルスケア向け