404ページ中級

イラスト404（はぐれ宇宙飛行士）

CSSだけで描いた宇宙飛行士が宙を漂うイラスト系404。世界観のあるビジュアルで「迷子」を表現し、ブランドの個性を出します。ポートフォリオやプロダクトサイトに似合います。

#404#error#illustration#css-art

ライブデモ

使用例（お題: アイドルグループ Sakura）

この技法を「アイドルグループ Sakura」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- Sakura：はぐれ宇宙飛行士の404 -->
<section class="nfi">
  <div class="nfi-stars" aria-hidden="true"></div>

  <div class="nfi-inner">
    <div class="nfi-astro" aria-hidden="true">
      <span class="nfi-tether"></span>
      <span class="nfi-helmet"><span class="nfi-visor"></span><span class="nfi-shine"></span></span>
      <span class="nfi-body"></span>
      <span class="nfi-arm nfi-arm--l"></span>
      <span class="nfi-arm nfi-arm--r"></span>
      <span class="nfi-leg nfi-leg--l"></span>
      <span class="nfi-leg nfi-leg--r"></span>
    </div>

    <p class="nfi-404">404</p>
    <h1 class="nfi-title">ページが迷子になりました</h1>
    <p class="nfi-sub">お探しのページは銀河の彼方へ。ホームに戻って続きをどうぞ。</p>
    <button class="nfi-btn" type="button">ホームに戻る</button>
  </div>
</section>

CSS

/* Sakura（アイドル）：はぐれ宇宙飛行士404の再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.nfi { position: relative; width: 100%; min-height: 380px; display: grid; place-content: center; text-align: center; padding: 30px 26px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 10%, #3a1240, #100610 70%); color: #ffe8f3; }
.nfi-stars { position: absolute; inset: 0;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent), radial-gradient(1px 1px at 40% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 60%, #fff, transparent), radial-gradient(1px 1px at 60% 85%, #fff, transparent), radial-gradient(1px 1px at 10% 80%, #fff, transparent);
  opacity: .7; }
.nfi-inner { position: relative; z-index: 2; }

.nfi-astro { position: relative; width: 86px; height: 100px; margin: 0 auto 14px; animation: nfi-float 6s ease-in-out infinite; }
.nfi-helmet { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; border-radius: 50%; background: #fef0f7; box-shadow: inset 0 -6px 0 rgba(0,0,0,.05); z-index: 3; }
.nfi-visor { position: absolute; top: 13px; left: 9px; right: 9px; height: 22px; border-radius: 14px; background: linear-gradient(135deg, #5a2447, #2a0e2e); }
.nfi-shine { position: absolute; top: 16px; left: 14px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.6); }
.nfi-body { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: 46px; height: 46px; border-radius: 16px; background: #fbe1ee; z-index: 2; }
.nfi-arm { position: absolute; top: 44px; width: 13px; height: 30px; border-radius: 8px; background: #f6d3e4; }
.nfi-arm--l { left: 9px; transform: rotate(18deg); }
.nfi-arm--r { right: 9px; transform: rotate(-18deg); }
.nfi-leg { position: absolute; top: 80px; width: 14px; height: 22px; border-radius: 8px; background: #f6d3e4; }
.nfi-leg--l { left: 26px; transform: rotate(8deg); }
.nfi-leg--r { right: 26px; transform: rotate(-8deg); }
.nfi-tether { position: absolute; top: 60px; left: -40px; width: 60px; height: 40px; border: 2px dashed rgba(255,255,255,.3); border-right: none; border-top: none; border-radius: 0 0 0 30px; }
@keyframes nfi-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }

.nfi-404 { margin: 4px 0 0; font-size: 56px; font-weight: 900; letter-spacing: .04em; color: #fff; }
.nfi-title { margin: 4px 0 0; font-size: 21px; font-weight: 800; }
.nfi-sub { margin: 10px 0 22px; font-size: 13px; color: #d8a6c4; line-height: 1.7; }
.nfi-btn { font: inherit; font-size: 13.5px; font-weight: 700; color: #2a0e2e; background: #fff; border: none; padding: 11px 24px; border-radius: 999px; cursor: pointer; transition: transform .15s ease; }
.nfi-btn:hover { transform: translateY(-2px); }

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

実装ガイド

使いどころ

世界観のあるブランド・プロダクト・公式サイトの404に。CSSだけで描いた宇宙飛行士が漂うビジュアルで『迷子』を表現し、個性を出します。

実装時の注意点

宇宙飛行士はヘルメット・バイザー・胴体・手足・命綱を要素で組み、ふわふわ浮遊。背景は radial-gradient の星空。色とパーツでブランドのトーンに寄せられます。

対応ブラウザ

transform アニメーション・グラデーション背景は全モダンブラウザ対応。CSS のみで JS 不要です。

よくある失敗

イラストに凝りすぎて導線が弱くならないよう、404・メッセージ・CTA は明確に。要素数が多いので崩れないか各幅で確認。reduced-motion で浮遊を止める。実画像イラストに差し替える運用も可。

応用例

キャラクターの差し替え、視差で奥行き、マウス追従で少し動く、ローディングや空状態への流用などに展開できます。

コード