404ページ初級

検索付き404

迷い込んだユーザーを助ける、検索ボックスと人気リンクを備えた実用的な404ページ。「お探しのページは見つかりません」で終わらせず、目的地へ再誘導します。メディアやECに向きます。

#404#error#search#recovery

ライブデモ

使用例（お題: SaaS FlowDesk）

この技法を「SaaS FlowDesk」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- FlowDesk：SaaSの検索付き404 -->
<section class="nfs">
  <div class="nfs-inner">
    <p class="nfs-404">404</p>
    <h1 class="nfs-title">お探しのページは見つかりません</h1>
    <p class="nfs-sub">URLが変更されたか、削除された可能性があります。検索でお探しください。</p>

    <form class="nfs-search" onsubmit="return false">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21 21l-4.3-4.3M11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
      <input type="search" placeholder="ヘルプ・ドキュメントを検索…" aria-label="サイト内検索">
      <button type="submit">検索</button>
    </form>

    <div class="nfs-pop">
      <span class="nfs-pop__lab">人気のページ：</span>
      <a href="#" onclick="return false">はじめ方</a>
      <a href="#" onclick="return false">料金</a>
      <a href="#" onclick="return false">API</a>
      <a href="#" onclick="return false">お問い合わせ</a>
    </div>
  </div>
</section>

CSS

/* FlowDesk（SaaS）：検索付き404の再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.nfs { width: 100%; min-height: 380px; display: grid; place-content: center; text-align: center; padding: 40px 26px; background: #f4f6fc; }
.nfs-inner { width: min(520px, 94vw); }
.nfs-404 { margin: 0; font-size: 72px; font-weight: 900; line-height: 1; letter-spacing: -.03em; color: #1f2547; }
.nfs-title { margin: 6px 0 0; font-size: 22px; font-weight: 800; color: #2a3050; }
.nfs-sub { margin: 10px 0 22px; font-size: 13.5px; color: #6a7090; line-height: 1.7; }
.nfs-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #dfe3f0; border-radius: 12px; padding: 5px 5px 5px 14px; box-shadow: 0 10px 30px rgba(20,30,80,.06); }
.nfs-search svg { width: 18px; height: 18px; color: #9aa1b8; flex: 0 0 auto; }
.nfs-search input { flex: 1; min-width: 0; font: inherit; font-size: 14px; border: none; outline: none; background: none; padding: 10px 0; color: #1f2547; }
.nfs-search input::placeholder { color: #9aa1b8; }
.nfs-search button { font: inherit; font-size: 13.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #4f6bff, #6d28d9); border: none; padding: 10px 18px; border-radius: 9px; cursor: pointer; transition: filter .15s ease; }
.nfs-search button:hover { filter: brightness(1.08); }
.nfs-pop { margin-top: 18px; font-size: 13px; color: #8b91ad; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.nfs-pop__lab { color: #9aa1b8; }
.nfs-pop a { color: #4f46e5; text-decoration: none; font-weight: 600; }
.nfs-pop a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .nfs-search button { transition: none; } }

実装ガイド

使いどころ

メディアやECなど、迷い込んだユーザーを目的地へ再誘導したい404に。検索ボックスと人気リンクを備えた実用的なエラーページです。

実装時の注意点

見出し＋説明＋検索フォーム＋人気リンクのシンプル構成。『見つかりません』で終わらせず、次の行動を即提示するのが要点。検索は実サイトのサイト内検索へ接続します。

対応ブラウザ

flexbox・フォーム要素は全モダンブラウザ対応。

よくある失敗

404 は正しいステータスコードで返す（ソフト404を避ける）。検索が機能する導線を必ず用意。人気リンクは実際に有効なURLに。直前のURLから推測した候補を出すとさらに親切です。

応用例

入力サジェスト、関連ページの自動提案、サイトマップリンク、問い合わせフォーム併設などに展開できます。

コード