---
title: "404ページを自分で用意したいときの考え方"
description: "存在しないURLへのアクセス時に表示される 404 ページを自分でデザインしたい方へ。静的 HTML サイトと本番運用では設定方法が異なります。まず 404 の仕組みを正しく把握してから実装する手順を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/custom-404-page"
markdown: "https://giga-site.com/articles/custom-404-page/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 404ページを自分で用意したいときの考え方

サイトを作っていると、存在しないURLにアクセスされたときの表示をどうするか考えたくなります。404ページは「見つからない」を伝えるための仕組みですが、静的なHTMLか本番運用かで扱いが変わります。まずは404そのものを正しく理解しておきましょう。

> Source HTML: https://giga-site.com/articles/custom-404-page
> Article index: https://giga-site.com/articles/index.md

## 404とは何かを正しく押さえる

404は「Not Found」を意味するHTTPのステータスコードで、サーバーがそのURLに対応するリソースを見つけられなかったことを表します。ブラウザに表示される「ページが見つかりません」という画面は、このステータスに対してサーバーやブラウザが返す内容です。

重要なのは、見た目の404画面とステータスコードとしての404は別物だということです。デザインだけ404風にしても、サーバーが200（正常）を返していれば、検索エンジンやクローラーは「正常なページ」として扱います。本来の404の意味を持たせるには、サーバーがステータス404を返す必要があります。

## カスタム404を用意する目的

標準の404画面は素っ気なく、訪問者がそこで離脱しやすいものです。カスタム404はその体験を改善するためのもので、トップへのリンクや検索、問い合わせ導線を置くことで、迷った訪問者を本来見たかった場所へ案内できます。

目的を整理すると、(1)迷子になった訪問者の救済、(2)サイトのトーンを保つこと、(3)壊れたリンクに気づくきっかけ、の3点が中心です。凝ったデザインより、次に取れる行動が明確であることが大切です。

## 症状別チェック表

404ページを自分で用意したいときの考え方は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

## 静的サイトと本番運用での違い

本番のWebサイトを独自ドメインで運用している場合は、サーバーやホスティングの設定で「404のときに表示するHTML」を指定でき、ステータスコードも正しく404を返せます。継続運用するサイトでは、ここをきちんと設定する価値があります。

一方で、特定のHTMLを一時的に確認・共有したいだけの場面では、サイト全体のルーティングや404処理を作り込む必要は薄くなります。見せたいページそのものが正しく開ければ目的を果たせるからです。用途によって、どこまでやるかを決めるとよいでしょう。

## 考える手順

カスタム404に取り組むときは、次の順で判断すると無駄がありません。

1. そのサイトは継続運用する本番か、一時的な確認・共有かを決める
2. 本番なら、ホスティングの404設定でカスタムHTMLを指定し、ステータス404が返ることを確認する
3. 404ページにはトップへのリンクや検索など、次の行動への導線を必ず置く
4. デザインは凝りすぎず、サイトのトーンを保つ程度にする
5. 一時共有が目的なら、見せたいページが確実に開くことを優先し、404処理は割り切る

## 確認・共有が目的なら割り切る

「作ったHTMLをすぐ見せて確認してもらう」段階では、サイト全体の404設計まで踏み込む必要はないことが多いです。レビューしてほしい当のページが正しく表示されることが何より重要だからです。

ギガサイト便はHTMLやZIPをドロップすると 〇〇.giga-site.com 形式の共有URLを発行し、確認・レビュー・一時共有に向く位置づけのサービスです。独自ドメインでの本番運用や細かな404ルーティングを作り込む用途とは異なるため、本番サイトのカスタム404が必要な段階になったら、ホスティング側の設定で対応すると整理できます。

## よくある質問

### 見た目だけ404っぽいページを置けば十分ですか

目的によります。訪問者に「見つからない」と伝えて案内するだけならデザインで足りますが、検索エンジンに正しく404と認識させたい本番運用では、サーバーがステータスコード404を返す設定が必要です。

### カスタム404には何を載せるべきですか

トップページへのリンク、サイト内検索、主要なナビゲーション、問い合わせ導線などです。訪問者が次に取れる行動を明確にすることが、凝ったデザインより重要です。

### 一時的に共有するだけのHTMLでも404ページは必要ですか

多くの場合は不要です。レビューしてほしいページが正しく開けば目的を果たせるため、サイト全体のルーティングや404処理を作り込む必要は薄いと考えてよいでしょう。

### ギガサイト便でカスタム404を設定できますか

ギガサイト便は確認・レビュー・一時共有に向くサービスで、見せたいHTMLをそのまま共有する用途に強みがあります。本番サイトの細かな404ルーティングが必要な段階では、ホスティング側の設定で対応するのが自然です。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [fetchで相対パスのファイルが404になるときの原因と対処](https://giga-site.com/articles/fetch-relative-path-404/index.md)
- [404エラーとは？ページが見つからない原因と仕組み](https://giga-site.com/articles/what-is-404/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [公開したHTMLのフォームが送信できないときの対処](https://giga-site.com/articles/form-not-submitting/index.md)
- [iframeが表示されないときの原因と対処](https://giga-site.com/articles/iframe-not-showing/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "404ページを自分で用意したいときの考え方",
  "description": "存在しないURLへのアクセス時に表示される 404 ページを自分でデザインしたい方へ。静的 HTML サイトと本番運用では設定方法が異なります。まず 404 の仕組みを正しく把握してから実装する手順を解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/custom-404-page",
  "url": "https://giga-site.com/articles/custom-404-page",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "見た目だけ404っぽいページを置けば十分ですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "目的によります。訪問者に「見つからない」と伝えて案内するだけならデザインで足りますが、検索エンジンに正しく404と認識させたい本番運用では、サーバーがステータスコード404を返す設定が必要です。"
      }
    },
    {
      "@type": "Question",
      "name": "カスタム404には何を載せるべきですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "トップページへのリンク、サイト内検索、主要なナビゲーション、問い合わせ導線などです。訪問者が次に取れる行動を明確にすることが、凝ったデザインより重要です。"
      }
    },
    {
      "@type": "Question",
      "name": "一時的に共有するだけのHTMLでも404ページは必要ですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "多くの場合は不要です。レビューしてほしいページが正しく開けば目的を果たせるため、サイト全体のルーティングや404処理を作り込む必要は薄いと考えてよいでしょう。"
      }
    },
    {
      "@type": "Question",
      "name": "ギガサイト便でカスタム404を設定できますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ギガサイト便は確認・レビュー・一時共有に向くサービスで、見せたいHTMLをそのまま共有する用途に強みがあります。本番サイトの細かな404ルーティングが必要な段階では、ホスティング側の設定で対応するのが自然です。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```