404ページ · 404ページ
ストリートグラフィティ風の404ページ
コンクリート壁にスプレー塗料で殴り書きされた「404」を主役にしたストリートグラフィティ風 404 ページ。剥がれかけのポスター、タグ、スプラッタ、警告テープ。失敗ページすらブランドの遊び場にする尖った設計。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/graffiti-not-found/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
ストリートグラフィティをモチーフにした 404 ページを作ってください。 要件: - 配色: コンクリート灰 #2a2a2a 〜 #4a4a4a のテクスチャ背景に、蛍光ピンク #ff2d97（スプレー塗料）+ 蛍光黄 #fff200（警告テープ）+ 黒 #000 を組み合わせ。 - 中央に巨大な「404」をスプレー塗料風に描く（CSS の text-shadow を多重重ねしてドリップ感、blur フィルタで滲ませる）。 - 周辺に「タグ」風の手書き文字を散らす。SVG paths で、傾けて配置。 - 黄黒の警告テープを画面横に斜めに配置（CSS の linear-gradient のストライプ）。 - 上下に「剥がれかけのポスター」風の長方形（傾き、エッジに穴）。 - メイン見出し・サブ・CTAは中央に整列、コンクリート背景の上に黒矩形で読みやすく分離。 - CTA ボタンはステンシル風書体（Stencil / Big Shoulders）の太字、黒地白抜き。 - 全体に薄いノイズ・グレインオーバーレイ（コンクリート質感）。 - 下部に「タグ」のアーカイブ風 ASCII リスト（"// PRINTED IN OSAKA"）。 - JS不要、フルレスポンシブ。
バリエーション
ネオンスプレー版
404 のスプレー色をシアン #00f0ff にして、夜のストリート感に。 警告テープも維持しつつ、全体の輝度を下げて夜景に。
パステル落書き版
グラフィティの強度を下げ、パステル色（peach, mint, lavender）に。 子供向け・教育プロダクト用のソフトなフォールバック。
このプレビューのコード
HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。架空の404画面です。トップとサイトマップへ実際に移動します。復帰先は公開サイトのルートを基準とするため、保存HTMLでは利用先のURLへ変更してください。外部素材の取得・送信・保存は行いません。
コードを表示
<!doctype html>
<!-- Vibehaus · CC0 · 架空の表示・操作見本。外部素材・送信・永続保存なし。 -->
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>ストリートグラフィティ風の404ページ — Vibehaus プレビュー</title>
<style>
:root {
--concrete-1: #2a2a2a;
--concrete-2: #4a4a4a;
--concrete-3: #1a1a1a;
--paper: #f1f1ec;
--black: #0a0a0a;
--pink: #ff2d97;
--pink-deep: #c41878;
--yellow: #fff200;
--cyan: #00f0ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN",
"Yu Gothic", sans-serif;
background: var(--concrete-1);
color: var(--paper);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
position: relative;
overflow-x: hidden;
min-height: 100dvh;
}
/* Concrete texture: stacked gradients + SVG noise */
body::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.04) 0%, transparent 60%),
radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.3) 0%, transparent 60%),
linear-gradient(180deg, var(--concrete-2) 0%, var(--concrete-1) 50%, var(--concrete-3) 100%);
z-index: 0;
}
body::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
opacity: 0.35;
mix-blend-mode: overlay;
z-index: 1;
pointer-events: none;
}
/* Hazard tape — diagonal bands across top + bottom */
.tape {
position: absolute;
left: -10%;
right: -10%;
height: 36px;
background: repeating-linear-gradient(
135deg,
var(--yellow) 0 24px,
var(--black) 24px 48px
);
z-index: 5;
transform: rotate(-3deg);
box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.tape.top { top: 80px; }
.tape.bottom { bottom: 80px; transform: rotate(2deg); }
/* Torn poster — taped paper rectangle */
.poster {
position: absolute;
background: var(--paper);
color: var(--black);
padding: 0.6rem 1rem;
font-family: "JetBrains Mono", monospace;
font-size: 0.7rem;
letter-spacing: 0.06em;
text-transform: uppercase;
z-index: 4;
box-shadow: 4px 6px 0 rgba(0,0,0,0.45), 0 14px 24px rgba(0,0,0,0.3);
}
.poster::before, .poster::after {
content: "";
position: absolute;
width: 24px; height: 8px;
background: rgba(255, 230, 90, 0.85);
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.poster::before { top: -4px; left: 30%; transform: rotate(-8deg); }
.poster::after { top: -4px; right: 25%; transform: rotate(7deg); }
.poster.tl { top: 14%; left: 6%; transform: rotate(-6deg); max-width: 220px; }
.poster.br { bottom: 18%; right: 8%; transform: rotate(4deg); max-width: 240px; }
/* Spray-paint tags scattered around */
.tag-svg {
position: absolute;
z-index: 3;
opacity: 0.85;
filter: drop-shadow(0 0 6px rgba(255, 45, 151, 0.4));
}
.tag-svg.t1 { top: 8%; right: 10%; transform: rotate(-12deg); width: 130px; }
.tag-svg.t2 { bottom: 12%; left: 8%; transform: rotate(8deg); width: 140px; }
.tag-svg.t3 { top: 30%; left: 4%; transform: rotate(-22deg); width: 90px; }
.tag-svg.t4 { bottom: 32%; right: 6%; transform: rotate(15deg); width: 110px; }
@media (max-width: 720px) {
.tag-svg.t3, .tag-svg.t4 { display: none; }
.poster.tl, .poster.br { max-width: 60vw; }
}
/* Center stage */
.stage {
position: relative;
z-index: 10;
min-height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem clamp(1rem, 4vw, 2.5rem);
text-align: center;
}
/* Giant 404 in spray paint */
.four {
position: relative;
margin: 0;
font-family: "Impact", "Anton", "Bebas Neue", "Arial Black",
"Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 900;
font-size: clamp(8rem, 28vw, 22rem);
line-height: 0.9;
letter-spacing: -0.05em;
color: var(--pink);
text-shadow:
0 0 4px var(--pink),
0 0 20px rgba(255, 45, 151, 0.7),
0 0 50px rgba(255, 45, 151, 0.4),
4px 6px 0 var(--pink-deep),
-2px -2px 0 #ffd0e3;
filter: blur(0.4px);
transform: rotate(-2deg);
font-style: italic;
letter-spacing: -0.03em;
}
/* Drip drops below the 404 */
.drip {
position: relative;
height: 60px;
margin-top: -20px;
margin-bottom: 1rem;
}
.drip span {
position: absolute;
bottom: 0;
width: 8px;
background: var(--pink);
border-radius: 0 0 8px 8px;
box-shadow: 0 0 6px var(--pink), 0 0 16px rgba(255, 45, 151, 0.6);
}
.drip span:nth-child(1) { left: 30%; height: 30px; }
.drip span:nth-child(2) { left: 50%; height: 50px; }
.drip span:nth-child(3) { left: 65%; height: 22px; }
.drip span:nth-child(4) { left: 75%; height: 38px; }
.panel {
background: var(--black);
border: 3px solid var(--paper);
padding: 1.5rem 1.85rem;
max-width: 540px;
position: relative;
box-shadow: 6px 6px 0 var(--pink), 12px 12px 0 var(--yellow);
}
.panel h1 {
margin: 0 0 0.6rem;
font-family: "Impact", "Bebas Neue", "Arial Black", "Hiragino Kaku Gothic ProN",
sans-serif;
font-size: 1.85rem;
line-height: 1.35;
letter-spacing: 0.02em;
text-transform: uppercase;
font-weight: 900;
}
.panel h1 :lang(ja) { letter-spacing: 0; line-height: 1.4; }
.panel p {
margin: 0 0 1.5rem;
font-size: 0.95rem;
line-height: 1.85;
color: rgba(241, 241, 236, 0.78);
}
.ctas {
display: inline-flex;
gap: 0.7rem;
flex-wrap: wrap;
justify-content: center;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 1.5rem;
font-family: "Impact", "Bebas Neue", "Arial Black", sans-serif;
font-size: 1rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 900;
text-decoration: none;
border-radius: 0;
border: 0;
cursor: pointer;
transition: transform 0.15s;
}
.btn-primary {
background: var(--paper);
color: var(--black);
border: 3px solid var(--paper);
}
.btn-primary:hover { background: var(--pink); border-color: var(--pink); color: var(--paper); transform: translateY(-2px); }
.btn-ghost {
background: transparent;
color: var(--paper);
border: 3px solid var(--paper);
}
.btn-ghost:hover { background: var(--paper); color: var(--black); transform: translateY(-2px); }
/* ASCII archive footer */
.archive {
margin-top: 2.5rem;
font-family: "JetBrains Mono", monospace;
font-size: 0.74rem;
letter-spacing: 0.08em;
color: rgba(241, 241, 236, 0.5);
max-width: 540px;
}
.archive ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
justify-content: center;
}
.archive li::before { content: "// "; color: var(--yellow); }
[hidden]{display:none!important}
a,button,input,summary{min-width:44px;min-height:44px}
a{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:default}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid currentColor;outline-offset:4px}
nav a{display:inline-flex;align-items:center;justify-content:center}
nav{flex-wrap:wrap}
header.bar{flex-wrap:wrap;gap:1rem}
input{max-width:100%}
.demo-notes{position:relative;z-index:10;box-sizing:border-box;max-width:1080px;width:calc(100% - 2rem);margin:2rem auto;padding:clamp(1rem,3vw,2rem);background:#191919;color:#f5f3ee;border:1px solid currentColor;text-align:left;font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-size:13px;line-height:1.8;letter-spacing:0;overflow-wrap:anywhere}
.demo-notes h2{font-size:18px;line-height:1.5;margin:0 0 .75rem}
.demo-notes h3{font-size:15px;line-height:1.5;margin:0 0 .4rem}
.demo-notes p{font:inherit;color:inherit;opacity:1;margin:0 0 1rem;max-width:none;letter-spacing:0}
.demo-notes section{margin-top:1.25rem;scroll-margin-top:1rem}
.demo-notes button{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;padding:.4rem .75rem}
.demo-notes a{color:inherit}
.demo-notes .demo-motion{margin-bottom:1rem}
.demo-notes section:focus{outline:3px solid currentColor;outline-offset:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
}
html{overflow-x:clip}
body{overflow-x:clip}
body::after{left:0;right:0}
.demo-decoration{position:absolute;inset:0;overflow:clip;pointer-events:none}
</style>
</head>
<body>
<div class="demo-decoration" aria-hidden="true"><span class="tape top" aria-hidden="true"></span><span class="tape bottom" aria-hidden="true"></span></div>
<span class="poster tl" aria-hidden="true">
LOST DOG · 名前 ROCKY ·<br/>連絡 03-XXXX-XXXX
</span>
<span class="poster br" aria-hidden="true">
MISSING URL · 最終目撃<br/>2026-04-26 17:42 JST
</span>
<svg class="tag-svg t1" viewBox="0 0 130 50" aria-hidden="true">
<text x="0" y="38" fill="#ff2d97" font-family="cursive" font-size="34" font-weight="700" font-style="italic">noise!</text>
</svg>
<svg class="tag-svg t2" viewBox="0 0 140 60" aria-hidden="true">
<text x="0" y="46" fill="#fff200" font-family="cursive" font-size="42" font-weight="800" font-style="italic">RUN.</text>
</svg>
<svg class="tag-svg t3" viewBox="0 0 90 40" aria-hidden="true">
<text x="0" y="32" fill="#00f0ff" font-family="cursive" font-size="28" font-weight="700">★ZINE★</text>
</svg>
<svg class="tag-svg t4" viewBox="0 0 110 50" aria-hidden="true">
<text x="0" y="40" fill="#ff2d97" font-family="cursive" font-size="36" font-weight="700" font-style="italic">404?</text>
</svg>
<main class="stage">
<h2 class="four" aria-hidden="true">404</h2>
<div class="drip" aria-hidden="true">
<span></span><span></span><span></span><span></span>
</div>
<div class="panel">
<h1>ページが見つかりません。<br/>でも、ここで一服どうぞ。</h1>
<p>
お探しの URL は、剥がれて、消されて、もう壁に残っていません。トップやサイトマップへの案内から、次に読むページを選んでください。
</p>
<div class="ctas">
<a class="btn btn-primary" href="/">→ トップへ戻る</a>
<a class="btn btn-ghost" href="/sitemap-index.xml">SITEMAP</a>
</div>
</div>
<div class="archive">
<ul>
<li>PRINTED IN OSAKA</li>
<li>STENCIL № 042</li>
<li>CREW NIGHTSHADE</li>
<li>NO COPS</li>
<li>NO COOKIES</li>
</ul>
</div>
</main>
<aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空の404画面です。トップとサイトマップは、公開先の同じサイト内へ実際に移動します。保存HTMLで使う場合は、利用先のURLへ変更してください。履歴の操作は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<section id="demo-link-0" tabindex="-1">
<h3>→ トップへ戻るの見本</h3>
<p>復帰先を案内するリンク位置の例です。このHTMLにサイトのルートや閲覧履歴は含まれないため、利用先のURLと復帰処理を接続してください。</p>
</section>
<section id="demo-link-1" tabindex="-1">
<h3>SITEMAPの見本</h3>
<p>復帰先を案内するリンク位置の例です。このHTMLにサイトのルートや閲覧履歴は含まれないため、利用先のURLと復帰処理を接続してください。</p>
</section>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
404ページは、サイトの中でもっとも軽視され、もっとも訪問者をがっかりさせる画面です。ほとんどのサイトが「Not Found」の一言とホームへのリンクで済ませる。だからこそ、ここに本気を出せば差がつく。ストリートグラフィティは「公式に与えられた壁ではない場所」に描かれる表現——道に迷った訪問者が立つ、まさに想定外の場所にふさわしい美学です。
失敗の瞬間こそ性格が出る
人は、物事が順調なときの振る舞いより、トラブルのときの振る舞いでその相手を判断します。ブランドも同じです。404という「期待を裏切った瞬間」に、無味乾燥なエラーメッセージを返すか、それとも遊び心で受け止めるか——ここに企業の人格がもっとも露骨に表れる。コンクリート壁にスプレーで殴り書きされた「404」、剥がれかけのポスター、警告テープといった要素は、「失敗すら自分たちのフィールドにしてしまう」余裕を見せる装置です。
崩れる形Not Found とホームへのリンク
情報としては足りていますが、期待を裏切った瞬間に無言で突き放す画面です。ほとんどのサイトがここで済ませているぶん、印象にも残りません。
効く形遊び心で受け止める
失敗すら自分たちのフィールドにしてしまう余裕が伝わります。凝った404はスクリーンショットで拡散されることがあり、失敗ページが獲得チャネルに化けます。
離脱を回遊に変える
エラーページの本当の仕事は謝ることではありません。訪問者を本来の目的地へ導き直すことです。グラフィティの混沌に目を奪われた数秒のあいだに、ホーム・検索・人気ページへの導線をはっきり提示する。凝った404はSNSでスクリーンショットと共に拡散されることもあり、失敗ページが思わぬ獲得チャネルに化けることすらあります。
仕上げの判断軸
主役は 404 の文字そのものです。スプラッタやタグを盛りすぎて数字が埋もれたら、本末転倒になります。
装飾の奥でも、復帰リンクのコントラストと文字サイズは必ず確保すること。noindex を付け、サイトマップには含めない——遊ぶのは見た目だけで、SEOの作法は崩しません。
見本で試せる範囲
架空の404画面です。トップとサイトマップへ実際に移動します。復帰先は公開サイトのルートを基準とするため、保存HTMLでは利用先のURLへ変更してください。外部素材の取得・送信・保存は行いません。 人物や組織は架空の設定です。配布HTMLはCC0・利用料¥0で、素材を追加取得せず表示できます。
404ページの構成要素
使いどころ
- 音楽・クラブ・ファッションブランド
- スケート・サブカル系プロダクト
- 個性を強く出したい個人クリエイター
- 失敗ページもブランド体験として作り込みたい場面
このデザインの分類
背景と狙いどころ
よくある質問
SEO的に 404 を作り込む意味はある？
404 は noindex 必須なので SEO には直接効きません。が、ブランド体験・離脱抑制・回遊促進という UX 価値は大きい。
コンクリートテクスチャは画像？
不要です。CSS の filter（feTurbulence noise）と多重 background-image で十分再現できます。画像0で軽量に保てます。
アクセシビリティの落とし穴は？
巨大 404 が装飾なら `aria-hidden`、本文（説明文）と CTA は通常マークアップで読み上げ可能に。コントラスト比は本文部分で AA を確保すること。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
放送終了のカラーバーで迎える404ページ
テレビの放送が終わった後のカラーバーを背景にした404ページ。画像を使わずグラデーションだけで描いたカラーバーに、チャンネル表示と時刻、「このページの放送は終了しました」の案内、検索窓と番組表（サイトマップ）への導線を重ねる。
ピクセルアート調の404ページ
深紫の宇宙を背景に、点滅する星・浮遊するピクセルキャラクター・グリッチするタイトルを組み合わせたレトロゲーム風の404ページ。冷たいエラー画面の代わりに、離脱の瞬間を小さな温度に変える。
幾何形を組み替える空状態
赤い円・青い四角・黄色い三角の5つの図形だけで空の画面を成立させる空状態。ボタンを押すと同じ図形が配置を変え、待つ時間に小さな手触りを与えます。