先生と生徒の会話形式で理解しよう

生徒

「ASP.NET MVCでページごとにHTMLを書いていたら、ヘッダーやフッターを毎回書かないといけなくて大変です…。」

先生

「その悩み、初心者が必ずぶつかります。毎回同じ部分を作るのは時間がかかるし、変更するとき全部修正する必要が出てしまいます。」

生徒

「もっと効率的に作る方法ってありますか？」

先生

「そのために使うのが《レイアウトビュー（Layout View）》です！全ページで共通デザインをまとめて管理できますよ。」

1. レイアウトビューとは？初心者向けに解説

レイアウトビューとは、ASP.NET MVCで全ページに共通するデザインをまとめるファイルのことです。例えば、サイトのヘッダー、フッター、ナビゲーションメニューをひとつのファイルに書いて、各ページは必要なコンテンツだけを書きます。

例えるなら、ノートのテンプレートを作って、毎回タイトルだけ変えて書くイメージです。全部手書きする必要がなくなり、デザイン変更があってもレイアウトファイルだけ修正すれば全ページに反映されます。

ASP.NET MVCのSEO強化や企業サイト、ブログ、ショッピングサイトではレイアウトビューは必須といえるほどよく使われます。

2. レイアウトビューのファイル構成を確認しよう

通常、レイアウトファイルはViews/Sharedフォルダ内にあり、デフォルトでは_Layout.cshtmlという名前になっています。


Views/
 ┗ Shared/
    ┗ _Layout.cshtml

この_Layout.cshtmlが全ページ共通のデザインを持つファイルです。

3. レイアウトビューの基本構造

レイアウトビューには@RenderBody()という特別な命令があり、ここに各ページの内容が差し込まれます。


<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
</head>
<body>
    <header class="p-3 bg-dark text-white">共通ヘッダー</header>

    <main class="container">
        @RenderBody()
    </main>

    <footer class="p-3 bg-light">共通フッター</footer>
</body>
</html>

このファイルを全ページのテンプレートとして使います。

4. 各ビューからレイアウトビューを指定する

各ページ（ビュー）でレイアウトを指定するには、ファイルの先頭に以下を記述します。


@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

これで、そのファイルの内容が@RenderBody()に差し込まれます。

ページ内容例：


@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>ユーザー一覧ページ</h2>
<p>ここにユーザー情報が表示されます。</p>

表示結果（イメージ）：


共通ヘッダー
    ┗ ユーザー一覧ページ
共通フッター

5. レイアウトビューにメニューを追加してサイト構造を整理

レイアウトビューにはナビゲーションメニューもまとめられます。Bootstrapを使った例を紹介します。


<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="/">ホーム</a>
    <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="/Users">ユーザー</a></li>
        <li class="nav-item"><a class="nav-link" href="/Products">商品</a></li>
    </ul>
</nav>

全ページに自動で表示されるため、リンク管理も簡単になります。

6. レイアウトビューで追加領域（RenderSection）を使う

ページごとに特別なスクリプトやCSSが必要な場合は、@RenderSection()を使います。


@RenderSection("Scripts", required: false)

そしてビューでこう記述します：


@section Scripts {
    <script>alert("ページ固有のスクリプト");</script>
}

こうすることで、基本デザイン+ページ独自の機能を両立できます。

まとめ

レイアウトビューで共通デザインを守る考え方

レイアウトビューは、サイト全体の骨組みを一つにまとめる仕組みです。共通ヘッダー、共通フッター、ナビゲーションメニュー、読み込みたいスタイルやスクリプトなどを、ひとつのレイアウトに集めておくことで、各ページは本文に集中できます。その結果、ページごとの見た目がばらつきにくくなり、訪問した人にも「同じサイトの中を自然に移動している」安心感が生まれます。初心者のうちは、ページを増やすたびに同じ部品をコピーペーストしがちですが、レイアウトビューを使うと、最初から正しい整理のしかたで作れます。

また、運用の場面でも強い味方になります。たとえば会社名の表記を変える、メニューの並びを変える、フッターに免責文や問い合わせ導線を追加する、といった変更はよく起こります。レイアウトビューなら、修正は一か所だけで済み、反映漏れや修正ミスを減らせます。小さなサイトでも効果はありますが、ページ数が増えるほど差が大きくなるので、企業サイト、サービス紹介、採用ページ、ブログ、商品一覧、予約ページなど、成長していくサイトほど価値が上がります。

RenderBodyで本文を差し込む流れを整理

レイアウトビューの中心は、本文を差し込む場所を決めることです。ASP.NET MVCでは、レイアウト側に本文の受け皿を用意し、各ビューはその受け皿に載る内容だけを書きます。これにより、共通部品とページ固有の内容がきれいに分かれます。初心者がつまずきやすいのは「どこに何を書けばいいのか」が混ざってしまうことですが、レイアウトを使うと、書く場所の迷いが減ります。

初心者向けの簡単サンプル（レイアウトの骨組みを確認する）


<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
</head>
<body>
    <header class="p-3 bg-dark text-white">共通ヘッダー</header>

    <main class="container">
        @RenderBody()
    </main>

    <footer class="p-3 bg-light">共通フッター</footer>
</body>
</html>

この形を先に押さえると、各ページは「本文だけを書けばいい」と理解できます。たとえば、ユーザー一覧ページや商品詳細ページやお問い合わせページを増やしても、ヘッダーとフッターは自動で付いてきます。つまり、見た目の統一と作業の省力化を同時に叶えるのが、レイアウトビューの一番の目的です。

RenderSectionでページ固有の追加領域を安全に扱う

すべてを共通化しすぎると、逆に困ることもあります。ページによっては、特別なスクリプトや特別なスタイルが必要になるからです。そこで役立つのが追加領域です。追加領域を使うと、レイアウトは基本形を保ちつつ、必要なページだけに追加の処理を差し込めます。初心者がやりがちな「特定ページだけ直したら別のページが崩れた」という事故も減らせます。

初心者向けの簡単サンプル（ページ固有のスクリプトを差し込む）


<!-- レイアウト側（例） -->
@RenderSection("Scripts", required: false)


<!-- ビュー側（例） -->
@section Scripts {
    <script>alert("ページ固有のスクリプト");</script>
}

追加領域は「必要なときだけ差し込める」仕組みなので、基本デザインは崩さずに、ページごとの機能を足せます。たとえば、入力フォームの確認メッセージ、検索ページの簡易動作、一覧ページの並び替えなど、局所的な仕掛けを安全に入れられます。

ファイル配置と指定方法を覚えると迷わない

レイアウトビューは、決まった場所に置くと探しやすくなります。多くのプロジェクトでは共有フォルダにまとめ、名前も分かりやすく揃えます。そうしておくと、どのページがどのレイアウトを使っているかが見通せます。初心者のうちは、ファイルが増えるだけで不安になりますが、「共有」「個別」という分け方ができると安心感が出ます。さらに、各ビューの先頭でレイアウトを指定する書き方を知っておけば、意図しないデザイン崩れを避けられます。特定のページだけ別デザインにしたいときも、同じ仕組みで切り替えられます。

初心者向けの簡単サンプル（レイアウトを指定して統一する）


@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>ページの見出し</h2>
<p>ここにページ固有の本文を書きます。</p>

この指定を書いておけば、ページを開いたときに共通ヘッダーと共通フッターが自動で付きます。本文は必要な分だけ書けばよいので、作業量が減り、読みやすさも保てます。慣れてきたら、レイアウト側に共通のパンくずや共通の検索窓を置くなど、サイト全体の使いやすさを上げる工夫もできます。

統一デザインがあると内容の品質も上げやすい

デザインが統一されると、文章や情報の並べ方も整えやすくなります。見出しの付け方、段落の切り方、箇条書きの使い方が揃うので、読む人は迷いません。たとえば、説明の順番を「概要」「手順」「注意点」「補足」のように揃えるだけでも、内容が伝わりやすくなります。レイアウトビューは見た目だけでなく、ページ作りの型を作る役割も持っています。初心者のうちは、画面を作ることに精一杯になりがちですが、型があると「次に何を書けばいいか」が見えます。結果として、ページの質も自然に上がっていきます。

初心者が覚えておくと安心な運用のコツ

レイアウトビューを使い始めたら、運用のために次の考え方を持っておくと安心です。まず、共通部分はむやみに増やさず、全ページで本当に共通なものだけに絞ります。次に、メニューやフッターの文言は、後から変わる前提で作ります。たとえば「会社情報」「お問い合わせ」「利用規約」など、よく参照される導線は分かりやすい位置に固定しておくと、サイトの回遊性が上がります。また、見出しの階層や本文のまとまりを意識すると、読む人に優しくなります。ページが増えても、同じ形で読みやすさを守れるのがレイアウトの強みです。

そして最後に、変更したら必ず複数ページを見て確認します。共通部品は一か所で直せる反面、影響範囲が広いので、確認を習慣にすると失敗が減ります。とはいえ、確認が怖くて触れない状態になるより、レイアウトで整理して「触れる状態」にしておく方が、長く運用するうえでは大きなメリットになります。

先生と生徒の振り返り会話

生徒

「レイアウトビューを使うと、ページごとにヘッダーやフッターを書かなくてよくなるんですね。コピーペーストが減るのがうれしいです。」

先生

「そうそう。共通部分を一つにまとめると、修正も一回で済むから、運用がすごく楽になります。見た目も統一できるので、サイト全体がしっかりした印象になりますよ。」

生徒

「RenderBodyの場所に本文が入る、という流れが分かりました。本文だけを書けばいいなら、ページを増やすのも怖くなさそうです。」

先生

「その理解で大丈夫。さらに、ページ固有のスクリプトは追加領域で入れれば、必要なページだけに機能を足せます。共通と個別を分けて考えるのが、ASP.NET MVCの基本の一つです。」

生徒

「これなら、ブログや企業サイトみたいにページが多くても管理できそうです。変更があっても慌てずに済みそうです。」