404ページ初級

ポップな404（浮遊する図形）

大きな「404」と親しみのあるメッセージ、ホームへ戻る導線を、ふわふわ浮かぶ図形とともに見せる陽気なエラーページ。離脱しがちな404を、ブランドの遊び心で和ませて回遊につなげます。

#404#error#playful#friendly

ライブデモ

使用例（お題: カフェ MOON BREW）

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

HTML

<!-- MOON BREW：カフェのポップな404 -->
<section class="nfp">
  <span class="nfp-shape nfp-shape--1" aria-hidden="true"></span>
  <span class="nfp-shape nfp-shape--2" aria-hidden="true"></span>
  <span class="nfp-shape nfp-shape--3" aria-hidden="true"></span>
  <span class="nfp-shape nfp-shape--4" aria-hidden="true"></span>

  <div class="nfp-inner">
    <p class="nfp-404">404</p>
    <h1 class="nfp-title">こぼれてしまったようです</h1>
    <p class="nfp-sub">お探しのページは見つかりませんでした。一杯いかがですか？</p>
    <div class="nfp-actions">
      <button class="nfp-btn nfp-btn--solid" type="button">メニューを見る</button>
      <button class="nfp-btn nfp-btn--ghost" type="button">トップへ戻る</button>
    </div>
  </div>
</section>

CSS

/* MOON BREW（カフェ）：ポップな404の再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.nfp { position: relative; width: 100%; min-height: 380px; display: grid; place-content: center; text-align: center; padding: 40px 26px; overflow: hidden; background: linear-gradient(135deg, #f7f1e7, #f3e3d2); }
.nfp-shape { position: absolute; opacity: .82; animation: nfp-float 7s ease-in-out infinite; }
.nfp-shape--1 { width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, #b07a3f, #e0a458); top: 16%; left: 12%; --r: -12deg; transform: rotate(-12deg); }
.nfp-shape--2 { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #d97742, #c2410c); top: 64%; left: 18%; animation-delay: -2s; }
.nfp-shape--3 { width: 70px; height: 70px; border-radius: 20px; background: linear-gradient(135deg, #8a5a2a, #c9a877); top: 20%; right: 14%; animation-delay: -4s; --r: 14deg; transform: rotate(14deg); }
.nfp-shape--4 { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #e0a458, #f0c987); bottom: 16%; right: 20%; animation-delay: -1s; }
@keyframes nfp-float { 0%,100% { transform: translateY(0) rotate(var(--r,0)); } 50% { transform: translateY(-18px) rotate(var(--r,0)); } }

.nfp-inner { position: relative; z-index: 2; }
.nfp-404 { margin: 0; font-size: 96px; font-weight: 900; line-height: 1; letter-spacing: -.04em; background: linear-gradient(135deg, #b07a3f, #c2410c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.nfp-title { margin: 8px 0 0; font-size: 24px; font-weight: 800; color: #4a3320; font-family: "Hiragino Mincho ProN", serif; }
.nfp-sub { margin: 12px 0 24px; font-size: 14px; color: #8a715a; }
.nfp-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.nfp-btn { font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 12px 24px; border-radius: 999px; transition: transform .15s ease, filter .15s ease; }
.nfp-btn--solid { border: none; color: #fff; background: linear-gradient(135deg, #b07a3f, #7a4f2a); }
.nfp-btn--solid:hover { filter: brightness(1.08); transform: translateY(-2px); }
.nfp-btn--ghost { background: #fffdf8; border: 1px solid #e0cba6; color: #7a4f2a; }
.nfp-btn--ghost:hover { border-color: #b07a3f; }

@media (prefers-reduced-motion: reduce) { .nfp-shape { animation: none; } .nfp-btn { transition: none; } }

実装ガイド

使いどころ

離脱しがちな404を、ブランドの遊び心で和ませて回遊につなげたいときに。大きな「404」と親しみのあるメッセージ、ホームへ戻る導線を、浮かぶ図形とともに見せます。

実装時の注意点

背景の図形は CSS で配置し、ふわふわ浮遊アニメ。404はグラデの background-clip:text で軽快に。CTAは『戻る』だけでなく主要導線（メニュー等）も用意して回遊を促します。

対応ブラウザ

transform アニメーション・background-clip:text（-webkit- 併記）は全モダンブラウザ対応。JS 不要です。

よくある失敗

楽しさ優先でも『何が起きたか』『次にどこへ』は明確に。装飾図形が文字に被らないよう z-index と配置に注意。reduced-motion で浮遊を止める配慮を。実運用では 404 を正しい HTTP ステータスで返すこと。

応用例

人気ページや検索の併設、ブランドキャラクターの配置、季節替わりの装飾、サイトマップへの誘導などに展開できます。

コード