ホームページのレイアウト・サンプル｜業者が使う定番10パターンと業種別おすすめを業者目線で公開

「ホームページのレイアウトはどう決めたらいい？」「業者が実際に使っているテンプレを業者目線で知りたい」と考えている方へ、制作会社の中の人として、定番レイアウト10パターン、業種別のおすめレイアウト、モバイル時代のレイアウト、CSS Grid と Flexbox の使い分け、CV重視とブランディング重視の違い、NGパターン、費用感、業者の本音まで、完全公開します。本記事は業者として日常的に観察する業界共通のパターンを業者目線で整理した内容で、特定の実在サイト名は伏せますが、業界で日常的に観察される設計傾向です。レイアウト選びで業者目線の判断材料としてご活用ください。

業者目線：そもそもHPレイアウトの基本とは

業者目線として、中の人視点では、ホームページのレイアウトは「情報の配置設計」を意味します。業界の体感として見ると、ユーザーが画面を見たときに「どこに何があるか」を直感的に理解できる構造を作るのがレイアウト設計の業者の役割です。業者の体感として、レイアウトはデザイン以前の「骨組み」であり、業者目線で先にレイアウトが決まってからデザイン要素（色・フォント・写真）を乗せていく、というのが業界の標準工程です。

業界の中の人として、レイアウトを考える際に、業者が必ず意識する4つの基本原則があります。業者目線で、この4原則を外すとレイアウトが崩れ、ユーザーは離脱します。

• 1. 視線誘導：業者目線でZ字またはF字でユーザーの視線を想定して配置する
• 2. グルーピング：業者目線で関連情報を近接配置する
• 3. 余白：業者目線で要素間の余白を十分に確保する
• 4. 優先順位：業者目線で最重要要素を最も目立つ位置に置く

業界の体感として見ると、業者として案件を受ける際は、必ず最初にラフレイアウトをワイヤーフレームで起こします。業者の体感では、ワイヤーフレームを作らずに業者目線でいきなりデザインに入る業者は、品質が安定しません。レイアウトの基本についてはホームページデザインの基礎でも業者目線で詳述しています。

業者目線：定番レイアウト10パターン

業者目線として、中の人視点では、業者が日常的に使っている定番レイアウトを10種類、公開します。業者の体感として、新規案件のラフレイアウト段階で、業者目線でこの10パターンのどれかをベースにすることが業界の標準です。

パターン1：ヒーロー+特徴+CTA（業界の体感で最多）

業界の中の人として、最も業者間で観察されるレイアウトです。ファーストビューに大きなヒーロー画像＋キャッチコピー、その下にサービス特徴3〜4個、最後にCTA（問い合わせ・購入ボタン）を業者目線で配置するパターン。業者目線で、コーポレートサイト・サービス紹介・LPで7割以上採用されます。当社のサイトもこの系統です。

パターン2：グリッド型

業界の体感として見ると、コンテンツを格子状に均等配置するレイアウトです。業者目線で、ポートフォリオ・実績一覧・ニュース一覧で標準。3列・4列のグリッドが業者間の主流で、スマホでは1列に業者目線で自動再配置します。業者の体感では、整然とした印象を与えるため業界で安定感のある設計です。

パターン3：カード型

業界の中の人として、各情報を独立したカードに分けて配置するレイアウトです。業者目線で、サービス紹介・スタッフ紹介・記事一覧で広く使われます。カードに影や枠線を業者目線で付けて立体感を出す業者の手法が業界で標準です。グリッド型と組み合わせて業者目線で使うパターンが多いです。

パターン4：フルスクリーン

業界の体感として見ると、画面いっぱいに画像・動画を表示し、コピーや情報を最小限に配置するレイアウトです。業者目線で、ホテル・旅館・高級ブランド・アパレルで主流。インパクト重視ですが、業者目線で情報量は業界で犠牲になります。CV重視のサイトでは業者目線で慎重な判断が必要です。

パターン5：分割スクリーン

業者目線として、中の人視点では、画面を左右や上下に2分割し、それぞれに別コンテンツを配置するレイアウトです。業者目線で、対比・選択肢提示（BtoB/BtoC、男女、サービスAとB）で有効。アパレル・サービス選択型サイトで業者間で採用されます。スマホでは業者目線で縦に再配置するのが標準です。

パターン6：タイムライン

業界の体感として見ると、時系列で情報を並べるレイアウトです。業者目線で、会社沿革・実績の流れ・サービスフローで標準。縦軸または横軸でステップを業者目線で見せると、業者の体感で「プロセスが伝わる」という業界の評価があります。ホームページ制作の流れでも業者目線で取り上げています。

パターン7：Z字レイアウト

業者目線として、中の人視点では、ユーザーの視線がZの形に動くことを前提に要素を配置するレイアウトです。業者目線で、画像が少なめ・テキスト主体のサイト（ブログ・コーポレート）で有効。左上→右上→左下→右下の順にユーザーが業者目線で読むため、重要情報をその経路に配置します。

パターン8：F字レイアウト

業界の中の人として、ユーザーの視線がFの形に動くことを前提に配置するレイアウトです。業者目線で、テキスト量が多いサイト（メディア・ブログ・ニュース）で標準。左上から横に視線が走り、下に降りてまた横に動くという業者目線の人間の読み方を活用します。記事一覧の業者の設計で業界の体感で広く使われています。

パターン9：1カラム

業界の体感として見ると、サイドバーなしでコンテンツを1列に並べるレイアウトです。業者目線で、スマホ最適化が容易で、近年業者間で主流化しています。LP・コーポレート・サービス紹介で業者間で広く採用されます。集中して読ませたいページに業者目線で最適、というのが判断です。

パターン10：2カラム/3カラム

業者目線として、中の人視点では、メインコンテンツ＋サイドバーの2カラム、またはサイドバー2つ＋メインの3カラムのレイアウトです。業者目線で、ブログ・メディア・ECで標準。サイドバーには業者目線でカテゴリ・人気記事・広告・CTAを配置します。スマホでは業者目線でサイドバーが下に再配置されるのが標準です。

業界の体感として見ると、業者として案件で10パターンのうち1〜2個を組み合わせて設計するのが業界の標準工程です。全パターンを1サイトに業者目線で詰め込むと、「ごちゃごちゃ」になります。お客様の業種・目的・ターゲットに業者目線で合うもを業者として選定する、というのが業者の役割です。

業者目線：業種別おすめレイアウト

業者目線として、中の人視点では、業種別におすめされるレイアウトを整理します。業者の体感として、業界で日常的に観察される業者目線の業種別パターンであり、業者として案件で参照する標準的な選択肢です。

コーポレート（企業）：ヒーロー+特徴+CTA + 1カラム

業界の体感として見ると、コーポレートサイトはパターン1（ヒーロー+特徴+CTA）と1カラムの組み合わせが業者間で主流。業者目線で、信頼感を示すため整然とした構造が業界で標準です。沿革セクションでパターン6（タイムライン）を業者目線で挿入することも多いです。コーポレートサイト制作ガイドでも業者目線で詳述しています。

EC（ネット販売）：グリッド型 + カード型 + 2カラム

業者目線として、中の人視点では、ECサイトは商品一覧をグリッド型で並べ、各商品をカード型で見せるのが標準。カテゴリ絞り込みのために2カラム（サイドバーにカテゴリ）を業者目線で組み合わせます。ECサイト制作ガイドでも業者目線で取り上げています。

メディア・ブログ：F字レイアウト + 2カラム

業界の体感として見ると、メディア・ブログサイトはF字レイアウトと2カラム（記事＋サイドバー）の組み合わせが業者間の主流。サイドバーには業者目線で人気記事・カテゴリ・著者プロフィールを配置するのが業者の標準です。

サロン・美容室：フルスクリーン + カード型

業界の中の人として、サロン・美容室はファーストビューでフルスクリーン（店内・スタイルのプロ写真）、その下にメニュー・スタイリストをカード型で配置するのが主流。世界観を業者目線で重視する業種なので、写真品質が勝負です。

士業：1カラム + ヒーロー+特徴+CTA

業界の体感として見ると、士業サイトは1カラム＋パターン1の組み合わせが業者間で主流。情報量が業者目線で多く、信頼感を出すため整然とした業者の設計が業界で標準です。サイドバーは業者目線で省略し、CTA（無料相談）を複数箇所に配置するのが業者の手法です。

医療（クリニック・病院）：1カラム + タイムライン + カード型

業者目線として、中の人視点では、医療系は1カラムをベースに、診療の流れをタイムライン、医師・診療科目をカード型で見せるのが主流。清潔感のため業者目線で余白を広めに取り、情報を整理するのが業界の業者の標準工程です。クリニックHPガイドでも業者目線で詳述しています。

業界の体感として見ると、業種別おすめは「最大公約数」のパターンであり、お客様の個別事情でカスタマイズするのが業者の役割です。業者として、業界の標準を守りつつ業者目線で差別化を図るのが業者の腕の見せ所、というのが業者の本音です。

業者目線：モバイル時代のレイアウト設計

業者目線として、中の人視点では、現在はモバイルファーストが業者間で標準です。業界の体感として見ると、訪問者の7〜8割がスマホからアクセスする業種が業界で多く、スマホレイアウトを先に設計するのが業界の主流工程です。

縦長スクロールが業界の体感の主流

業界の中の人として、スマホは縦長スクロールが前提です。1画面に詰め込まず、業者目線でセクションごとに区切って見せるのが業者の標準。1セクション＝1メッセージで業者目線で構成し、スクロールするたびに新しい情報が出るように設計するのが業者の主流です。

ハンバーガーメニューが業界の体感の標準

業界の体感として見ると、スマホではナビゲーションをハンバーガーメニュー（三本線アイコン）に格納するのが業者間で主流です。業者の体感では、画面上部にロゴ＋ハンバーガー、タップで業者目線でメニュー展開という構造が業者の標準です。重要メニュー（問い合わせ・電話）は業者目線でハンバーガーに隠さず、常時表示するのが業界の業者の体感の最適解です。

業者目線のスマホレイアウトの基本ルール

• タップ領域は業者目線で44×44px以上：業界の体感で押しやすさを確保
• フォントサイズは業者目線で16px以上：業界の体感で読みやすさを確保
• 1行は業者目線で20〜30文字：業界の体感で改行を意識
• 画像は業者目線で縦長または正方形：業界の体感で横長は読み込み遅延
• CTAは業者目線で画面下部固定が有効：業界の体感でスクロール時も表示
• フォームは業者目線で項目を最小限：業界の体感で入力負荷を削減

業界の体感として見ると、業者として案件ではPCデザイン完成後にスマホ調整、ではなく、スマホ先行で設計するのが主流です。業者の体感では、スマホで業者目線で違和感のないサイトはPCでも機能します。逆は業者目線で成立しない、というのが業者の本音です。

業者目線：CSS Grid と Flexbox の業者の使い分け

業者目線として、中の人視点では、現在のレイアウト実装は CSS Grid と Flexbox の組み合わせが業者間で標準です。業界の体感として見ると、両者の使い分けができるかが業者のスキルレベルを業界で示します。

CSS Grid：2次元レイアウト（業界の体感の業者の選択）

業界の中の人として、CSS Gridは行と列の2次元レイアウトを構築するのに最適です。業者目線で、ページ全体の大枠、グリッド型一覧、複雑なカードレイアウトで業者間の主流。grid-template-columnsとgrid-template-rowsで業者目線で枠組みを定義し、子要素を配置するのが業界の業者の体感の標準です。

Flexbox：1次元レイアウト（業界の体感の業者の選択）

業界の体感として見ると、Flexboxは1次元（行または列のみ）のレイアウトに最適です。業者目線で、ナビゲーション、ボタン群、横並びカード、アイコン＋テキストの組み合わせで主流。display: flexとjustify-content、align-itemsで業者目線で配置を制御するのが業界の業者の標準です。

業者の使い分けの業界の体感の判断軸

用途	業者の選択	業界の体感の理由
ページ全体の大枠	業者目線でCSS Grid	業界の体感で2次元を設計可能
サービス一覧（グリッド型）	業者目線でCSS Grid	業界の体感で整列が容易
ヘッダーナビゲーション	業者目線でFlexbox	業界の体感で1次元の配置
ボタン群（CTA）	業者目線でFlexbox	業界の体感で間隔と整列
カード内の要素配置	業者目線でFlexbox	業界の体感で縦/横の組み合わせ
複雑な雑誌風レイアウト	業者目線でCSS Grid	業界の体感で2次元の自由配置

業者目線として、中の人視点では、業者として実装する際は「外枠＝Grid、内側＝Flexbox」が業者の業界の標準パターンです。業者目線で、両方を使いこなせる業者と片方だけしか使えない業者では実装スピードが2倍以上違う、というのが業者の本音です。HTMLのみの限界でも業者目線で関連情報を業界で取り上げています。

業者目線：CV重視レイアウトとブランディング重視レイアウトの違い

業者目線として、中の人視点では、レイアウトはサイトの目的によって大きく変わります。業界の体感として見ると、CV重視（問い合わせ・購入を増やす）とブランディング重視（世界観を伝える）では設計思想が業界で正反対です。

CV重視レイアウトの業界の体感の特徴

• CTAボタンが業者目線で複数箇所に配置：業界の体感でファーストビュー・各セクション末尾・固定下部
• 情報密度が業者目線で高い：業界の体感でメリット・特徴・実績を詳細掲載
• 1カラム + ヒーロー+特徴+CTAが業者目線で主流：業界の体感で集中誘導
• 余白は業者目線で控えめ：業界の体感で情報量を優先
• 動きは業者目線で最小限：業界の体感で読みやすさを優先
• 画像より業者目線でコピーと数字が主役

ブランディング重視レイアウトの業界の体感の特徴

• フルスクリーン or 分割スクリーンが業者目線で主流：業界の体感でインパクト重視
• 余白が業者目線で大胆：業界の体感で世界観を表現
• 大型写真・動画が業者目線で中心：業界の体感で視覚で訴求
• CTAは業者目線で控えめ：業界の体感で押し付けない印象
• アニメーションを業者目線で多用：業界の体感で記憶に残す
• 情報量は業者目線で少なめ：業界の体感で世界観優先

業界の中の人として、業者として両者はトレードオフです。CV重視とブランディング重視の業者目線で両立を目指すと、どちらも中途半端になるのが業者の本音。業者目線で、サイトの主目的を1つに絞り、従の目的をサブセクションで補完するのが業界の標準工程です。

業者目線として、中の人視点では、お客様が「両方やりたい」とおっしゃる場合は、「メインCV型、サブブランディング型」または「メインブランディング型、サブCV型」を提案するのが業者の業者の標準対応です。詳しくは予算と目的の決め方でも業者目線で関連情報を業界で取り上げています。

業者目線：レイアウトNGパターン5

業界の体感として見ると、レイアウト設計で業者として案件で目にするNGパターンを5つ整理します。業者目線で、これらはユーザー離脱の主因です。

NG1：レイアウトが業者目線で複雑すぎる

業界の中の人として、要素を詰め込みすぎて視線誘導が崩れているケースです。業者目線で、1ページにカラム数が4以上、ナビメニューが10以上、ヒーローセクションに要素が5つ以上配置されると「複雑すぎ」になります。業者の体感では、業者目線でセクションあたり3要素以内が上限です。

NG2：余白がほぼない

業界の体感として見ると、要素同士が密着して「窮屈」「読みにくい」と判定されるレイアウトです。業者目線で、PCで上下の余白が40px未満、左右の余白が30px未満だと余白不足です。スマホでも業者目線で上下20px・左右15px以上の余白が業界の業者の体感の最低ラインです。

NG3：階層が業者目線で不明瞭

業者目線として、中の人視点では、H1〜H4の階層がデザイン的に区別されていないケースです。業者目線で、見出しと本文が同じ大きさ、H2とH3が見分けられないなど、業者の体感ではユーザーが「どこが章で、どこが節か」分からなくなります。業者目線でフォントサイズ・太さ・色で明確に階層を区別するのが業界の業者の標準です。

NG4：CTAの位置が業者目線で不明確

業界の体感として見ると、CTA（問い合わせ・購入ボタン）が1箇所にしかない、または背景に埋もれているレイアウトです。業者目線で、CTAはファーストビュー、各セクション末尾、ページ末尾、スマホ画面下部固定の最低4箇所に配置するのが業者の標準。色は業者目線でメインカラーとコントラストを出します。

NG5：スマホレイアウトを業者目線で考慮していない

業界の中の人として、PCレイアウトをそのままスマホに縮小したケースです。業者目線で、文字が小さい、タップしにくい、横スクロールが発生するなどの問題が業者の体感で発生します。業者目線で、スマホは別レイアウトを組むのが業者の標準工程です。

業界の体感として見ると、業者として案件で他社制作サイトをリニューアル受託する際、これら5つのNGパターンのうち2〜3個が同時に該当することが頻発します。業者の体感では、NGの修正だけで業界の体感でCVが3〜5割改善することも珍しくありません。

業者目線：レイアウト設計費用

業者目線として、中の人視点では、レイアウト設計（ワイヤーフレーム＋デザイン）を整理します。業界の体感として見ると、レイアウトはデザイン費の中に含まれることが業者間で多いです。

業者目線のレイアウト品質	業界相場の費用	業者の体感の内容
業者目線でテンプレ流用	業界相場で¥0〜¥50,000	業者目線で既存テンプレを軽微カスタマイズ
業者目線で標準カスタマイズ	業界相場で¥80,000〜¥200,000	業者目線でワイヤー作成＋業者のオリジナル配置
業者目線で完全オリジナル	業界相場で¥300,000〜¥800,000	業者目線での業者のリサーチ＋業者の専属設計
業者目線で複雑なサイト	業界相場で¥1,000,000〜	業者目線で大規模・業者の多階層設計

業界の体感として見ると、レイアウト設計費は見えにくいですが、業者の品質の根幹です。業者目線で、安価業者の体感のレイアウトはテンプレ流用が大半で、業者の標準カスタマイズ以上を求めるなら¥80,000以上の予算が標準です。当社のStandardプラン¥398,000〜では業者目線での標準カスタマイズ、Premiumプラン¥698,000〜では業者目線で完全オリジナルが業界の業者の標準です。費用相場はWeb制作の費用相場もご参照ください。

業者目線：業者の本音「レイアウトよりコンテンツ」

業者目線として、中の人視点では、ここで業者の本音をお伝えします。業界の体感として見ると、レイアウトがどれだけ洗練されていても、コンテンツ（文章・写真・サービス情報）が弱ければCVは出ません。むしろレイアウトが業者目線で平凡でもコンテンツが強ければCVは出る、というのが業者の体感の現実です。

業界の中の人として、レイアウトとコンテンツの重要度は業者の体感で「レイアウト3：コンテンツ7」が業者の体感です。業者目線で、お客様が「凝ったレイアウトにしたい」とご要望されることが多いですが、本当に投資すべきはコンテンツ作成（プロライターによる文章、プロカメラマンによる撮影）の業者の体感での標準工程です。

業界の体感として見ると、業者として案件を受ける際、レイアウトはパターン1（ヒーロー+特徴+CTA）の業者の体感の十分な業種が業界で大半です。業者目線で凝ったレイアウトに予算を使うより、コンテンツに予算を投じる方がROIが高い、というのが業者の体感の本音です。HP受注の納品プロセスでも業者目線で関連情報を業界で取り上げています。

よくある質問（業者の本音回答）

Q1. レイアウトは業者目線でテンプレ流用と完全オリジナルどちらがいいですか？

業界の体感として、予算と目的次第です。業者目線で予算¥50万円以下ならテンプレ流用＋業者のカスタマイズが現実解、予算¥100万円以上なら完全オリジナルが業者の選択。業者目線でブランディング重視なら完全オリジナル、CV重視ならテンプレ＋カスタマイズで十分です。

Q2. レイアウトはどの段階で業者目線で決めるべきですか？

業者目線として、中の人視点では、デザインの前、要件定義の直後が業者の標準。業者目線で「サイト目的→構成→ワイヤーフレーム→デザイン」の順で進めるのが業者の標準工程です。ワイヤーフレーム＝レイアウトの設計段階で業者目線でお客様と合意するのが業界の業者の体感の業者の標準です。

Q3. レイアウトは業者目線で途中で変更できますか？

業界の体感として、デザイン着手前なら変更費用は少額、デザイン着手後だと大幅な追加費用が業界で発生するのが業者の体感の業者の標準です。業者目線で、ワイヤーフレーム承認時にしっかり確認するのが業界の業者の体感の業者の最適行動です。

Q4. CSS Grid と Flexbox は業者目線で両方学ぶべきですか？

業者目線として、自作するなら両方が必須です。業者目線でFlexbox先行で基礎を押さえ、CSS Gridで全体レイアウトを組むのが業界の業者の体感の業者の学習順序の標準。業者目線で業者に依頼するなら知識不要ですが、発注時に「CSS Grid対応してますか」と聞くと業者の技術力が判別できます。

Q5. スマホレイアウトは業者目線でPCと別に作るべきですか？

業界の体感として見ると、レスポンシブ対応で1つのレイアウトをPC・タブレット・スマホで表示変更するのが業者の主流です。業者目線で別サイトを2つ作るのはコスト2倍で非推奨。業者目線でレスポンシブの設計時にPC・スマホそれぞれで違和感がないかチェックするのが業界の業者の体感の業者の標準です。

Q6. レイアウトの参考サイトはどこで業者目線で探せばいいですか？

業者目線として、中の人視点では、SANKOU!、I/O 3000、Web Design Clip、Awwwards、SiteInspireが業者間で標準ギャラリーです。業者目線で業種別・スタイル別で絞り込めるものが実用的。業者目線で週に1〜2時間これらを眺めるとレイアウトセンスが向上する、というのが業者の体感の業者の本音です。詳しくはおしゃれデザイン参考ギャラリーでも業者目線で取り上げています。

まとめ：業者目線での定番レイアウトを使いこなす

ホームページのレイアウトは、業界の中の人として、定番10パターン（ヒーロー+特徴+CTA・グリッド型・カード型・フルスクリーン・分割スクリーン・タイムライン・Z字・F字・1カラム・2/3カラム）を土台に、業種別おすめと目的（CV/ブランディング）を組み合わせて構築されます。業者の体感として、モバイル時代では業者目線で縦長スクロール＋ハンバーガーメニューが標準、実装ではCSS Grid（外枠）＋Flexbox（内側）が業者間の主流です。業界相場のNGパターン（複雑すぎ・余白なし・階層不明・CTA不明・スマホ無視）を避けるだけで業者のCVは大幅改善します。費用は業者目線でテンプレ¥0〜¥50,000、標準¥80,000〜¥200,000、完全オリジナル¥300,000〜¥800,000がす。最も伝えたい業者の本音は、業界の体感として「レイアウトよりのコンテンツが重要」という現実です。業者目線で凝ったレイアウトに予算を使うより、文章・写真・サービス情報に予算を投じる方がROIが高い、というのが業者の体感の本音です。当社では業者として業者目線で無料相談で「レイアウトとコンテンツのバランス」をご提案しています。お気軽にお問い合わせください。

関連記事

• ホームページデザインの基礎｜業者が教える7原則と2026年トレンド
• おしゃれ・モダンなホームページデザイン｜業者がトレンドを本音解説
• コーポレートサイト制作ガイド｜業者目線の構成と費用
• ECサイト制作ガイド｜業者目線のレイアウトと運用
• ホームページ制作の流れ｜業者が教える標準工程
• Web制作の費用相場｜業界の中の人が公開