404ページ · 404ページ

ピクセルアート調の404ページ

深紫の宇宙を背景に、点滅する星・浮遊するピクセルキャラクター・グリッチするタイトルを組み合わせたレトロゲーム風の404ページ。冷たいエラー画面の代わりに、離脱の瞬間を小さな温度に変える。

PUBLISHED — 2026年4月23日 UPDATED — 2026年4月23日 CATEGORY — 404ページ LICENSE — CC0 1.0

プレビュー

vibe.itlibra.com/preview/404-pixel/

概要

ピクセルアート調の404ページは、「エラーは冷たいもの」という常識への対案です。レトロゲームで初めてゲームオーバー画面を見た世代にとって、ドット絵・宇宙の背景・点滅する星の組み合わせは、即座に「懐かしい」「遊んでいた」という記憶を呼び起こします。エラー画面が、温度を持つ瞬間です。

404は分岐点である

404ページに辿り着いた訪問者は、「ここで離脱するか」「もう一度サイトを試すか」の分岐点に立っています。白地に「404」とだけ書かれた冷たい画面は、訪問者を離脱の側へ押す。逆に、温度のある画面は回遊の側へ引き戻します。ピクセルアートは多くの人の幼少期の記憶に紐づいているため、特別な説明なしにデフォルトで温かく感じられる——だからこの分岐で有利に働きます。

失敗を意匠に変える

このページのもう一つの妙は、「壊れている」状態そのものをデザインの素材にする点です。RGBがズレたグリッチ風のタイトル、エラーコード風の符牒——本来ネガティブな「故障」の記号を、レトロSFの演出として楽しく見せる。失敗を隠すのではなく、ブランドの遊び心として引き受ける姿勢が伝わります。

仕上げの判断軸

深紫の宇宙背景に、アクセント4色を少量ずつ散らして色情報を保ちます。浮遊するピクセルキャラクターにアニメーションを付けると「このページは死んでいない」と伝わる。グリッチはシアン／ピンクの text-shadow で常時の色ズレを出しつつ、数秒に一度だけ短い乱れを差し込むと品よくまとまります。復帰ボタンは緑とピンクで「進む／戻る」を色分けし、行き先を明示。noindex を付け、サイトマップには含めない——遊ぶのは見た目だけで、SEOの作法は守ります。

使いどころ

個人開発者・クリエイターサイトの 404 ページ
ゲーム / Web3 / 開発者ツール系プロダクトで、世界観を壊さずエラーを受け止めたいとき
エラー画面でも離脱率を下げたい、行き先を明示したい場面

カテゴリ: 404ページ
スタイル: ピクセル / レトロ / プレイフル / ダーク / 90年代

背景と狙いどころ

Context

Category · 404ページ

404ページ

存在しないURL用の404ページ。

カテゴリ一覧を見る →

Style · ピクセル

ピクセル

ドット絵UI。

スタイル一覧を見る →

Style · レトロ

レトロ

古さを意匠化した温度。

スタイル一覧を見る →

AIへの指示文

レトロゲーム風の404ページを作ってください。冷たいエラー画面にならず、訪問者が次にどこへ行けばいいかを明確に示す構成で。

キャンバス:
- 深紫〜青紫の宇宙背景 (#1a1235 → #2a1d52)、線形グラデで上下反復。
- アクセント色を4色限定: ピンク (#ff6fa0)、緑 (#7dff9f)、イエロー (#ffd65a)、シアン (#6fe3ff)。
- 本文フォントは VT323 (レトロモノスペース、大きめの 1.35rem で読ませる)。
- 見出し/ボタンは Press Start 2P (ピクセルフォント、小さめの 0.8〜1rem で使う)。
- 全要素に `image-rendering: pixelated` を指定してドットのエッジを保つ。

背景演出:
- 星空: `radial-gradient` で 1px の白いドットを 8 箇所散らし、`@keyframes twinkle` で 3 秒かけて透明度を 0.4↔0.8 で変化させる。
- 控えめな彩色の煌めき (黄/緑/ピンク) も重ねる。

中央ステージ (max-width 720px):
1. ピクセルキャラクター (120x120):
   - インライン SVG で 20x20 グリッドのレトロゴースト/お化けをドット絵で作る。
   - `shape-rendering: crispEdges` で輪郭を保つ。
   - `@keyframes float` で 1.4 秒周期に 8px 上下浮遊。
   - 影は楕円のぼかし (`filter: blur(4px)`) で、浮遊と連動して縮小する別アニメ。
2. 巨大な "404" タイトル:
   - Press Start 2P、font-size clamp(4rem, 16vw, 9rem)、line-height 1。
   - text-shadow でピンクとシアンの色ズレを入れ、RGB ズレ風に。
   - `@keyframes glitch` で 4 秒周期にランダムな短いズレを差し込む (全体の 7% 程度の時間)。
3. リード:
   - "> PAGE NOT FOUND" を Press Start 2P、イエロー、0.95rem。
   - サブコピーを VT323、ミュートの薄紫、1.35rem。2 行程度。
4. アクションボタン 2 つ:
   - プライマリ "▶ GO HOME" (緑背景)、セカンダリ "◀ GO BACK" (ピンク背景)。
   - Press Start 2P、近黒文字、4px オフセットシャドウ (黄色系)。
   - hover で `translate(-2px, -2px)` + シャドウ深め、active で `translate(2px, 2px)` + シャドウ 0。
   - トランジションは `steps(1)` で段階的にして、レトロ感を保つ。
5. 追加ヒント:
   - "try /search or /sitemap next" のような行、各 URL を小さなシアン背景の tag ピルで包む。

最下部:
- 画面下に絶対配置で "ERR 0x0194 · signal lost · 2026" を極小の Press Start 2P、letter-spacing 0.2em、ミュート色。

JS 不要、純粋 HTML/CSS + インライン SVG。

バリエーション

ライト版

背景をクリーム (#fef6e4) に、アクセントカラーは維持。
タイトルのシャドウはピンクとシアンで色ズレを保ったまま、ベースを近黒に。
星空は省略、代わりに薄いドットパターン (background-image の radial-gradient) でレトロ感を出す。

キャラクター差し替え版

SVG 部分だけ差し替え可能に設計されている。
猫・ロボット・宇宙人・ピクセル犬などに変更する場合、20x20 のグリッドで rect を並べ、配色を 3 色以内に抑える (一貫性が保てる)。

よくある質問

Press Start 2P は本当に読めますか？

404 タイトルやボタンラベル程度の短文には十分読めます。長文・本文には絶対に使わず、VT323 などの可読性の高いレトロフォントに切り替えてください。視線の導線として「大見出し = ピクセル」「本文 = モノスペース」の2階層に分けるのが基本。

アクセシビリティ面は？

動きの多いページなので `prefers-reduced-motion` を尊重し、float/twinkle/glitch を停止してください。コントラストは背景(#1a1235)×本文(#ffe9b0)で 9:1 以上あり、色盲のユーザーにも問題なし (色のみで情報伝達していない)。

404 なのにCTA付きでいいの？

むしろ CTA がないと離脱率が最大化します。「ホームに戻る」「前のページに戻る」の 2 本の導線は鉄板で、追加で「検索」「サイトマップ」へのリンクを小さく添えると、目的のページを探していたユーザーを助けられます。

ストリートグラフィティ風の404ページ

コンクリート壁にスプレー塗料で殴り書きされた「404」を主役にしたストリートグラフィティ風 404 ページ。剥がれかけのポスター、タグ、スプラッタ、警告テープ。失敗ページすらブランドの遊び場にする尖った設計。

404ページブルータリストボールド

アーケード筐体UI風の料金プラン

80年代ゲームセンターのアーケード筐体UIを再現した料金プラン。"INSERT COIN"、ピクセルスコアボード、ハイスコア表で「コインを入れて始める」ノスタルジーをCTAに変換する尖った設計。

ピクセルレトロ

Memphis Group調・幾何カオスのCTAセクション

1980年代 Memphis Group の意匠を引用した、原色・波線・幾何形のカオスが踊るCTAセクション。退屈なフラットデザインを破壊して「楽しさ」を直接ぶつける尖った選択。

90年代プレイフル