404ページ · 404ページ

放送終了のカラーバーで迎える404ページ

テレビの放送が終わった後のカラーバーを背景にした404ページ。画像を使わずグラデーションだけで描いたカラーバーに、チャンネル表示と時刻、「このページの放送は終了しました」の案内、検索窓と番組表（サイトマップ）への導線を重ねる。

保存した一覧を見る 0 →

このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。

印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。

Vibehaus · デザイン資料
https://vibe.itlibra.com/design/test-pattern-404/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由

PUBLISHED — 2026年9月25日 UPDATED — 2026年10月18日 CATEGORY — 404ページ LICENSE — CC0 1.0

プレビュー

AIへの指示文

テレビの放送終了後のカラーバーを背景にした404ページを作ってください。

要件:
- 背景は画面いっぱいのカラーバー。画像は使わず、linear-gradient で同じ位置に2つの色を置く書き方（ハードストップ）だけで描く。
- 上から 67% / 8% / 25% の3段。上段は灰・黄・水色・緑・紫・赤・青の7本（明るさは75%程度に抑えた色）。中段はその並びを入れ替えた細い帯。下段は紺・白・紫・黒の帯。
- 全体に、ごく薄い走査線（1px の黒い線を3px 間隔）を重ねる。動かさない。
- 明滅する砂嵐やちらつきは使わない。光過敏の人に危険なため、とコメントで書く。
- 右上に「CH 404」と現在の時・分を等幅の太字で。秒は出さない。
- 中央に、半透明の黒い面に白い2pxの枠のカードを置く。大きな「404」（真ん中の0だけ黄色）、見出し「このページの放送は終了しました」、案内文。
- カードの中に検索窓（role="search"、見えないラベル付き）と、「トップへ戻る」「番組表（サイトマップ）」の2つのリンク。
- カードの影はぼかさず、右下へ8pxずらす。
- フォント: 見出しと本文は Hiragino Sans / Yu Gothic、数字とチャンネル表示は JetBrains Mono などの等幅。
- ページには noindex を付ける前提で作る。

バリエーション

夜間のメンテナンス版

見出しを「ただいま調整中です」に、案内文を再開予定の時刻に変える。
検索窓を外し、お知らせページへのリンクだけにする。

白黒テレビ版

カラーバーを明るさの違う灰色の7段に置き換え、全体を白黒にする。
「404」の真ん中の0だけを白抜きにして目立たせる。

このプレビューのコード

HTML・CSS・JavaScriptの1ファイルです。外部依存・広告・解析コードはありません。ページ内の案内3件だけを検索する404画面の見本です。0件からの解除を試せます。サイト全体の検索・実際の復帰・履歴操作・外部送信・保存は行いません。

CC0 · 改変・商用利用自由 · revision 4add583d0044

コードを表示

<!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 {
        --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
        --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
      }
      * { box-sizing: border-box; }
      html, body { height: 100%; }
      body {
        margin: 0;
        font-family: var(--font);
        line-height: 1.8;
        letter-spacing: 0;
        color: #fff;
        background: #000;
      }

      /* カラーバー。同じ位置に2つの色を置いて境界をはっきりさせる書き方だけで、
         画像を使わずに描く。上から 67% / 8% / 25% の3段 */
      .bars {
        position: fixed;
        inset: 0;
        display: grid;
        grid-template-rows: 67fr 8fr 25fr;
      }
      .bars div:nth-child(1) {
        background: linear-gradient(90deg,
          #c0c0c0 0 14.28%, #c0c000 0 28.57%, #00c0c0 0 42.85%, #00c000 0 57.14%,
          #c000c0 0 71.42%, #c00000 0 85.71%, #0000c0 0);
      }
      .bars div:nth-child(2) {
        background: linear-gradient(90deg,
          #0000c0 0 14.28%, #131313 0 28.57%, #c000c0 0 42.85%, #131313 0 57.14%,
          #00c0c0 0 71.42%, #131313 0 85.71%, #c0c0c0 0);
      }
      .bars div:nth-child(3) {
        background: linear-gradient(90deg,
          #00214c 0 17.85%, #ffffff 0 35.7%, #32006a 0 53.55%, #131313 0 71.4%,
          #090909 0 76.2%, #131313 0 80.95%, #1d1d1d 0 85.71%, #131313 0);
      }
      /* 走査線。ごく薄く、動かさない。明滅する砂嵐は光過敏の人に危険なので使わない */
      .bars::after {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
        pointer-events: none;
      }

      .osd {
        position: fixed;
        top: clamp(12px, 3vw, 28px);
        right: clamp(12px, 3vw, 32px);
        font-family: var(--mono);
        font-size: clamp(16px, 2.4vw, 26px);
        font-weight: 700;
        line-height: 1.3;
        color: #fff;
        text-shadow: 2px 2px 0 #000;
      }
      .osd small { display: block; font-size: 0.6em; text-align: right; }

      main {
        position: relative;
        display: grid;
        place-items: center;
        min-height: 100%;
        padding: 1.5rem;
      }
      .card {
        width: min(560px, 100%);
        padding: clamp(1.6rem, 4vw, 2.4rem);
        text-align: center;
        background: rgba(10, 10, 12, 0.88);
        border: 2px solid #fff;
        box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.6);
      }
      /* .card p より強くする（同じ p 要素なので、詳細度で負けると 15px になる） */
      .card .code { margin: 0; color: #fff; font-family: var(--mono); font-size: clamp(56px, 12vw, 96px); font-weight: 800; line-height: 1.1; }
      .card .code span { color: #c0c000; }
      h1 { margin: 0.6rem 0 0.4rem; font-size: clamp(20px, 3.4vw, 26px); line-height: 1.5; }
      .card p { margin: 0 0 1.4rem; color: #d4d4d8; font-size: 15px; }

      .search { display: flex; gap: 0.4rem; margin-bottom: 1.1rem; }
      .search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
      .search input {
        flex: 1;
        min-width: 0;
        padding: 0.55rem 0.8rem;
        font: inherit;
        font-size: 15px;
        color: #fff;
        background: #1a1a1d;
        border: 1px solid #52525b;
        outline: 0;
      }
      .search input:focus { border-color: #c0c000; }
      .search button { padding: 0 1rem; font: inherit; font-weight: 700; color: #000; background: #c0c000; border: 0; cursor: pointer; }

      .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
      .links a {
        padding: 0.45rem 1rem;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        text-decoration: none;
        border: 1px solid #fff;
      }
      .links a:first-child { color: #000; background: #fff; }
      .links a:hover { background: #00c0c0; color: #000; border-color: #00c0c0; }
      :focus-visible { outline: 3px solid #c0c000; outline-offset: 3px; }
    [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:#0a0a0c;color:#ffffff;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}
}
main{padding-top:5rem}
.osd{position:absolute;z-index:1}
.card{min-width:0}
.search{flex-wrap:wrap}
.search input{flex-basis:100px}
.demo-search-results{text-align:left;font-size:14px}
.demo-search-results a{color:#fff}
.demo-search-results button{color:#fff;background:#222;border:1px solid #fff;font:inherit;padding:.5rem}
.demo-search-results ul{padding-left:1.3rem}
</style>
  </head>
  <body>
    <div class="bars" aria-hidden="true"><div></div><div></div><div></div></div>
    <div class="osd" aria-hidden="true">CH 404<small id="clock">--:--</small></div>

    <main>
      <div class="card">
        <p class="code">4<span>0</span>4</p>
        <h1>このページの放送は終了しました</h1>
        <p>お探しのページは、移動したか、放送を終えたようです。この見本では、キーワードで3件の案内を検索できます。</p>
        <form class="search" role="search" method="dialog" data-demo-search>
          <label for="q">この見本の案内3件を検索</label>
          <input id="q" maxlength="100" autocomplete="off" type="search" placeholder="キーワードを入力" />
          <button type="button" data-search-confirm data-js-control disabled>検索</button>
        </form><div class="demo-search-results" hidden><p role="status" data-search-status></p><ul><li data-search-item><a href="#demo-home">トップの案内</a></li><li data-search-item><a href="#demo-map">番組表・サイトマップの案内</a></li><li data-search-item><a href="#demo-help">検索と復帰の案内</a></li></ul><button type="button" data-search-reset>検索をクリア</button></div>
        <div class="links">
          <a href="#demo-link-0">トップへ戻る</a>
          <a href="#demo-link-1">番組表（サイトマップ）</a>
        </div>
      </div>
    </main>

    <script>
      // 右上の時刻。秒は出さない（1秒ごとに変わる数字は目を引きすぎる）
      const clock = document.getElementById("clock");
      const tick = () => {
        const d = new Date();
        clock.textContent = `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
      };
      tick();
      setInterval(tick, 30000);
    </script>
  <aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空の404画面です。復帰先のリンクはページ内の案内の見本へ移動します。実際のサイト遷移や履歴操作は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<section id="demo-home" tabindex="-1">
<h3>トップの案内</h3>
<p>ホームへ戻る入口の表示例です。公開時は利用先のトップURLへ接続してください。</p>
</section>
<section id="demo-map" tabindex="-1">
<h3>番組表・サイトマップの案内</h3>
<p>ページ一覧へ戻る入口の例です。この見本ではページ内の案内3件だけを検索します。</p>
</section>
<section id="demo-help" tabindex="-1">
<h3>検索と復帰の案内</h3>
<p>キーワードで案内を絞り込み、検索をクリアすると全3件へ戻ります。サイト全体の検索・外部取得・送信・保存は行いません。</p>
</section>
<section id="demo-link-0" tabindex="-1">
<h3>トップへ戻るの見本</h3>
<p>復帰先を案内するリンク位置の例です。このHTMLにサイトのルートや閲覧履歴は含まれないため、利用先のURLと復帰処理を接続してください。</p>
</section>
<section id="demo-link-1" tabindex="-1">
<h3>番組表（サイトマップ）の見本</h3>
<p>復帰先を案内するリンク位置の例です。このHTMLにサイトのルートや閲覧履歴は含まれないため、利用先のURLと復帰処理を接続してください。</p>
</section>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside><script>
const form=document.querySelector('[data-demo-search]'),input=document.querySelector('#q'),results=document.querySelector('.demo-search-results'),status=document.querySelector('[data-search-status]'),items=[...document.querySelectorAll('[data-search-item]')];let composing=false;function search(){const query=input.value.normalize('NFKC').toLocaleLowerCase().trim();let count=0;items.forEach(item=>{item.hidden=!query.split(/\s+/).every(word=>item.textContent.normalize('NFKC').toLocaleLowerCase().includes(word));if(!item.hidden)count++});results.hidden=false;status.textContent=count+'件の案内が見つかりました。対象はこのページの3件だけです。'+(count===0?'検索をクリアすると全件へ戻ります。':'')}form.addEventListener('submit',e=>e.preventDefault());form.addEventListener('compositionstart',()=>composing=true);form.addEventListener('compositionend',()=>composing=false);input.addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.isComposing&&!composing){e.preventDefault();search()}});document.querySelector('[data-search-confirm]').addEventListener('click',search);document.querySelector('[data-search-reset]').addEventListener('click',()=>{input.value='';search();input.focus()});
document.querySelectorAll('[data-js-control]').forEach(el=>el.disabled=false);
</script>
</body>
</html>

2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。

概要

深夜、放送が終わったテレビに映るカラーバー。多くの人にとって、あの7色の帯は「今日の番組はここまで」という合図でした。存在しないページに来てしまった人に、ここには何も放送されていませんと伝える404ページとして、これほど分かりやすい記号はありません。

エラーを、見慣れた場面に置き換える

404ページで大事なのは、利用者に落ち度が無いと伝えることです。技術的なエラー表示は、自分が何か間違えたように感じさせます。放送終了の画面は、誰の失敗でもなく「今はここに何も無い」という状態を穏やかに伝えます。

崩れる形Not Found とトップへのリンクだけ

何が起きたのか分からず、自分が何か間違えたように感じさせます。来た目的は果たせないまま、戻るボタンで離れていきます。

効く形見慣れた場面で状況を伝え、探す手段を渡す

放送終了という誰でも知っている場面で「今は何も無い」ことを伝え、検索窓と番組表への導線で本来の目的地へ案内し直します。

動かさないことも演出のうち

テレビらしさを足そうとして、明滅する砂嵐を入れたくなるかもしれません。細かく点滅する画面は、光過敏の人に発作を引き起こすおそれがあります。

エラーページは誰が来るか選べない場所です。動かない走査線だけで、ブラウン管の質感は十分に伝わります。

仕上げの判断軸

カラーバーは、同じ位置に2つの色を置くグラデーションの書き方で描けます。画像を読み込まないので表示が速く、どの画面幅でも帯の境目がぼやけません。色は明るさを75%程度に抑えると、上に重ねた案内の文字が読みやすくなります。

67 / 8 / 25カラーバーの3段の高さの比率

75%帯の色の明るさ。上に重ねる文字を読ませるため

2つ案内するリンクの数。トップとサイトマップ

404ページには必ず noindex を付け、サイトマップにも含めません。遊ぶのは見た目だけで、検索エンジンへの作法は崩さないことが前提です。

見本で試せる範囲

ページ内の案内3件だけを検索する404画面の見本です。0件からの解除を試せます。サイト全体の検索・実際の復帰・履歴操作・外部送信・保存は行いません。作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。