Vibehaus AIに伝わる、デザインの型。
プロンプト指示文作成 技術別 背景素材

サイト内を検索

見た目の参考、実装のコード、背景画像をまとめて探せます。

価格表 · 料金プラン

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

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

保存した一覧を見る 0 →

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

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

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

PUBLISHED — UPDATED — CATEGORY — 価格表 LICENSE — CC0 1.0

プレビュー

画面に合わせる

指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。

vibe.itlibra.com/preview/arcade-coin-pricing/

AIへの指示文

インディーゲームスタジオの料金プランを、アーケード筐体UIで作ってください。

要件:
- 配色: 黒 #0a0a0e ベース、ネオンマゼンタ #ff1493 / シアン #00f0ff / ライム #b4ff39 / 黄 #ffd700 を発光色として。
- 全体をピクセルアート風に（image-rendering: pixelated、ピクセルフォント "Press Start 2P" / "VT323" / モノスペース）。
- 上部にゲームタイトル風の大型ロゴ（点滅アニメ）+ "1986 © STUDIO" 風メタ。
- 中央に "INSERT COIN" の点滅プロンプト（CSS animation）。
- 3つの料金プランをアーケード筐体の "SELECT YOUR FIGHTER" 風カード化。
  - 各プランに ASCII 風キャラクター or アイコン
  - "PLAYER 1 / 2 / 3" のラベル
  - 価格は"X COINS"表記、実価格は下に小さく ¥X,XXX
- 中央プランは "RECOMMENDED" 点滅バッジ
- 下部にハイスコアテーブル風 "TOP USERS" リスト（ランク・名前・コイン数）。
- スキャンライン CRT オーバーレイを薄く。
- フォント: "Press Start 2P" / "Pixelify Sans" / "VT323" / monospace。
- JS不要、フルレスポンシブ。

バリエーション

ファミコン風（青基調）

ベース色を任天堂ファミコン風の青 #2c2cb0 に、アクセントを白・赤に。
ロゴはマリオ風の太字に。

ストリートファイター風

プレイヤーキャラを格闘ゲーム風のキャラクターセレクト風に。
VS 演出も入れる。

このプレビューのコード

HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。価格・ランキングは架空の例です。プランの選択・契約・決済は実装していません。

CC0 · 改変・商用利用自由 · revision 2f451545e924

コードを表示
<!doctype html>
<html lang="ja">
<!-- Vibehaus / CC0。独立した架空の料金表デモ。申込み・決済・外部通信なし。 -->
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex" />
    <title>アーケード筐体UI風の料金プラン — Vibehaus プレビュー</title>
    <style>
      :root {
        --bg: #0a0a0e;
        --bg-2: #14141c;
        --pink: #ff1493;
        --cyan: #00f0ff;
        --lime: #b4ff39;
        --yellow: #ffd700;
        --red: #ff3a3a;
        --fg: #f5f5ff;
        --muted: #8888a0;
      }
      * { box-sizing: border-box; }
      html, body { margin: 0; padding: 0; }
      body {
        font-family: "Press Start 2P", "VT323", "Pixelify Sans",
          "Noto Sans Mono CJK JP", ui-monospace, monospace;
        background: var(--bg);
        color: var(--fg);
        line-height: 1.6;
        font-size: 12px;
        image-rendering: pixelated;
        position: relative;
        overflow-x: hidden;
        min-height: 100dvh;
      }

      /* CRT scanlines */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1000;
        pointer-events: none;
        background: repeating-linear-gradient(
          to bottom,
          transparent 0,
          transparent 2px,
          rgba(0, 240, 255, 0.06) 2px,
          rgba(0, 240, 255, 0.06) 3px
        );
      }
      /* Curved screen vignette */
      body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 999;
        pointer-events: none;
        background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.45) 100%);
      }

      .frame {
        position: relative;
        z-index: 5;
        max-width: 1100px;
        margin: 0 auto;
        padding: clamp(1rem, 4vw, 2.5rem);
      }

      /* Marquee header */
      .marquee {
        text-align: center;
        padding-block: 1rem;
        border: 4px double var(--pink);
        margin-bottom: 1.5rem;
        background: rgba(255, 20, 147, 0.06);
      }
      .game-title {
        font-size: clamp(1.4rem, 3.5vw, 2.6rem);
        line-height: 1.2;
        margin: 0 0 0.5rem;
        background: linear-gradient(90deg, var(--pink), var(--cyan), var(--lime), var(--yellow), var(--pink));
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 0 0 24px rgba(255, 20, 147, 0.5);
        letter-spacing: 0.04em;
        animation: marquee 6s linear infinite;
        font-weight: 800;
      }
      @keyframes marquee {
        0% { background-position: 0% 0%; }
        100% { background-position: 200% 0%; }
      }
      .meta {
        font-size: 9px;
        color: var(--muted);
        letter-spacing: 0.16em;
      }

      /* Insert coin prompt */
      .insert-coin {
        text-align: center;
        font-size: clamp(0.95rem, 1.6vw, 1.3rem);
        color: var(--yellow);
        text-shadow: 0 0 12px var(--yellow);
        animation: blink 1s steps(2) infinite;
        margin-bottom: 2rem;
        letter-spacing: 0.12em;
      }
      @keyframes blink {
        0%, 50% { opacity: 1; }
        50.01%, 100% { opacity: 0.2; }
      }

      .select-label {
        text-align: center;
        font-size: 0.85rem;
        letter-spacing: 0.2em;
        color: var(--cyan);
        text-shadow: 0 0 10px var(--cyan);
        margin-bottom: 1.25rem;
      }

      /* Plans — fighter select */
      .plans {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
      }
      @media (min-width: 720px) { .plans { grid-template-columns: repeat(3, 1fr); } }

      .plan {
        border: 4px solid var(--cyan);
        background: var(--bg-2);
        padding: 1rem;
        position: relative;
        text-align: center;
        transition: transform 0.15s;
      }
      .plan:hover {
        transform: translateY(-4px);
        box-shadow: 0 0 24px rgba(0, 240, 255, 0.4);
      }
      .plan.featured {
        border-color: var(--yellow);
        box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--yellow), 0 0 32px rgba(255, 215, 0, 0.4);
      }
      .plan.featured::before {
        content: "★ RECOMMENDED ★";
        position: absolute;
        top: -22px; left: 50%;
        transform: translateX(-50%);
        background: var(--yellow);
        color: var(--bg);
        padding: 4px 12px;
        font-size: 9px;
        letter-spacing: 0.1em;
        font-weight: 800;
        animation: blink 0.8s steps(2) infinite;
      }
      .player-num {
        font-size: 11px;
        color: var(--pink);
        letter-spacing: 0.16em;
        margin-bottom: 0.85rem;
      }
      .plan.featured .player-num { color: var(--yellow); }

      /* Pixel character box */
      .char {
        width: 100px;
        height: 100px;
        margin: 0 auto 0.75rem;
        background: var(--bg);
        border: 2px solid var(--cyan);
        display: grid;
        place-items: center;
        position: relative;
      }
      .plan.featured .char { border-color: var(--yellow); }
      .char .ascii {
        font-size: 0.6rem;
        line-height: 1.1;
        color: var(--lime);
        white-space: pre;
        letter-spacing: 0;
        text-shadow: 0 0 6px var(--lime);
      }
      .plan.featured .char .ascii { color: var(--yellow); text-shadow: 0 0 6px var(--yellow); }
      .plan:nth-child(3) .char .ascii { color: var(--pink); text-shadow: 0 0 6px var(--pink); }

      .plan-name {
        font-size: 0.95rem;
        margin: 0 0 0.5rem;
        letter-spacing: 0.04em;
        color: var(--fg);
      }
      .plan-tag {
        font-size: 9px;
        color: var(--muted);
        line-height: 1.5;
        margin: 0 0 0.85rem;
        min-height: 24px;
      }
      .plan-coins {
        font-size: 1.1rem;
        color: var(--yellow);
        text-shadow: 0 0 10px var(--yellow);
        margin: 0 0 0.4rem;
        letter-spacing: 0.04em;
      }
      .plan-price {
        font-size: 9px;
        color: var(--muted);
        margin: 0 0 0.85rem;
        letter-spacing: 0.04em;
      }

      .plan-cta {
        display: block;
        background: var(--cyan);
        color: var(--bg);
        text-decoration: none;
        font-size: 10px;
        letter-spacing: 0.16em;
        padding: 12px;
        font-weight: 800;
        cursor: pointer;
        border: 0;
        font-family: inherit;
        transition: background 0.15s, color 0.15s;
        position: relative;
      }
      .plan-cta:hover {
        background: var(--lime);
      }
      .plan.featured .plan-cta { background: var(--yellow); color: var(--bg); }
      .plan.featured .plan-cta:hover { background: var(--pink); color: var(--fg); }

      .plan-features {
        list-style: none;
        margin: 0 0 0.85rem;
        padding: 0;
        font-size: 9px;
        text-align: left;
        line-height: 1.7;
      }
      .plan-features li::before {
        content: "▸ ";
        color: var(--lime);
      }
      .plan-features li.x::before { content: "× "; color: var(--muted); }
      .plan-features li.x { color: var(--muted); }

      /* High score table */
      .scores {
        margin-top: 2rem;
        border: 3px solid var(--pink);
        padding: 1rem;
        background: rgba(255, 20, 147, 0.05);
      }
      .scores h2 {
        margin: 0 0 0.85rem;
        text-align: center;
        font-size: 0.95rem;
        color: var(--pink);
        letter-spacing: 0.16em;
        text-shadow: 0 0 10px var(--pink);
      }
      .scores table {
        width: 100%;
        border-collapse: collapse;
        font-size: 9px;
      }
      .scores th, .scores td {
        text-align: left;
        padding: 6px 8px;
        border-bottom: 1px dashed rgba(255, 20, 147, 0.3);
        letter-spacing: 0.06em;
      }
      .scores th { color: var(--cyan); font-weight: 400; letter-spacing: 0.16em; padding-bottom: 8px; }
      .scores tr:last-child td { border-bottom: 0; }
      .scores .rank { color: var(--yellow); }
      .scores .name { color: var(--fg); }
      .scores .coins { color: var(--lime); text-align: right; }

      /* Bottom credits */
      .credits {
        margin-top: 1.5rem;
        text-align: center;
        font-size: 9px;
        color: var(--muted);
        letter-spacing: 0.14em;
      }

      @media (prefers-reduced-motion: reduce) {
        .insert-coin, .plan.featured::before, .game-title { animation: none; }
      }
      .demo-note { position: relative; z-index: 6; max-width: 1100px; margin: 1rem auto; padding: 0.8rem 1rem; font-size: 13px; line-height: 1.8; letter-spacing: 0; border: 1px solid currentColor; }
      :focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
        .plan:hover, .receipt:hover, .plan-cta:hover, .cta a:hover { transform: none; }
      }
    </style>
  </head>
  <body>
    <p class="demo-note" id="demo-note" tabindex="-1">架空の料金表デモです。価格・条件・実績は例示で、申込み・契約・決済は行いません。Vibehausの素材は完全無料・CC0です。</p>
    <div class="frame">
      <header class="marquee">
        <h1 class="game-title">PIXELFORGE ARCADE</h1>
        <span class="meta">— 1986 © PIXELFORGE STUDIO · INSERT COIN TO START —</span>
      </header>

      <p class="insert-coin">► INSERT COIN — SELECT YOUR PLAN ◄</p>
      <p class="select-label">═ SELECT YOUR FIGHTER ═</p>

      <div class="plans">
        <article class="plan">
          <p class="player-num">— PLAYER 01 —</p>
          <div class="char"><pre class="ascii"> /\_/\
( o.o )
 &gt; ^ &lt;</pre></div>
          <h3 class="plan-name">ROOKIE</h3>
          <p class="plan-tag">FREE TO PLAY · 1 LIFE</p>
          <p class="plan-coins">0 COINS</p>
          <p class="plan-price">¥0 / month</p>
          <ul class="plan-features">
            <li>1 PROJECT</li>
            <li>3 EXPORTS / DAY</li>
            <li class="x">CLOUD SAVE</li>
            <li class="x">PRIORITY SUPPORT</li>
          </ul>
          <a class="plan-cta" href="#">START — 0 COIN</a>
        </article>

        <article class="plan featured">
          <p class="player-num">— PLAYER 02 —</p>
          <div class="char"><pre class="ascii">  /\__/\
 ( ^ . ^ )
 ╰┈➤ ★</pre></div>
          <h3 class="plan-name">CHALLENGER</h3>
          <p class="plan-tag">UNLOCK ALL · 99 LIVES</p>
          <p class="plan-coins">2 COINS</p>
          <p class="plan-price">¥1,980 / month</p>
          <ul class="plan-features">
            <li>UNLIMITED PROJECTS</li>
            <li>UNLIMITED EXPORTS</li>
            <li>CLOUD SAVE × 50GB</li>
            <li>EMAIL SUPPORT 24h</li>
          </ul>
          <a class="plan-cta" href="#">CONTINUE — 2 COINS</a>
        </article>

        <article class="plan">
          <p class="player-num">— PLAYER 03 —</p>
          <div class="char"><pre class="ascii">  /\___/\
 (=◉ ω ◉=)
  ⚡⚡⚡</pre></div>
          <h3 class="plan-name">BOSS MODE</h3>
          <p class="plan-tag">GOD MODE · INFINITE</p>
          <p class="plan-coins">10 COINS</p>
          <p class="plan-price">¥9,800 / month</p>
          <ul class="plan-features">
            <li>EVERYTHING UNLOCKED</li>
            <li>SSO / SAML / SCIM</li>
            <li>DEDICATED SUCCESS</li>
            <li>99.99% UPTIME SLA</li>
          </ul>
          <a class="plan-cta" href="#">UPGRADE — 10 COINS</a>
        </article>
      </div>

      <section class="scores">
        <h2>★ TOP USERS ★ HIGH SCORE</h2>
        <table>
          <thead>
            <tr>
              <th>RANK</th>
              <th>NAME</th>
              <th>PLAN</th>
              <th style="text-align:right;">COINS USED</th>
            </tr>
          </thead>
          <tbody>
            <tr><td class="rank">01</td><td class="name">YUI ★★★</td><td>BOSS</td><td class="coins">9,840,210</td></tr>
            <tr><td class="rank">02</td><td class="name">REN_◇◇</td><td>CHAL</td><td class="coins">7,210,500</td></tr>
            <tr><td class="rank">03</td><td class="name">SAKURA·X</td><td>BOSS</td><td class="coins">6,408,910</td></tr>
            <tr><td class="rank">04</td><td class="name">KENTA_42</td><td>CHAL</td><td class="coins">5,193,000</td></tr>
            <tr><td class="rank">05</td><td class="name">AOI///</td><td>ROOK</td><td class="coins">3,082,500</td></tr>
          </tbody>
        </table>
      </section>

      <p class="credits">© 2026 PIXELFORGE STUDIO · BUILD 26.04 · MADE IN TOKYO</p>
    </div>
  </body>
</html>

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

概要

1980年代のゲームセンター。筐体に硬貨を投入し、「INSERT COIN」の点滅が「PLAYER 1 READY」へ変わる——あの瞬間の高揚を料金プランに移植したのが、この設計です。価格表という、サイトでもっとも離脱されやすいページを、ゲームの入口に変える試みです。

「支払う」を「プレイを始める」に変換する

料金ページで人が立ち止まるのは、お金を失う痛み（損失回避バイアス）を意識するからです。アーケード筐体のメタファは、この痛みの感じ方をずらします。「¥1,480を払う」ではなく「コインを入れて始める」。同じ金額でも、後者は損失ではなく参加の儀式に感じられる。実価格を小さく併記しつつ主表記を「X COINS」にするのは、金額を隠すためではなく、文脈を計算から遊びへ切り替えるためです。

崩れる形¥1,480を払う

金額がそのまま損失として提示されます。読み手は「これだけ失う」と数え始め、比較と保留のモードに入ります。料金ページの離脱はここで起きます。

効く形コインを入れて始める

同じ金額でも、後者は損失ではなく参加の儀式に感じられます。実価格は小さく併記して隠さず、文脈だけを計算から遊びへ切り替えます。

「SELECT YOUR FIGHTER」の力

3つのプランを格闘ゲームのキャラクター選択画面に見立てると、プラン選択は「どれが一番得か」という計算から「どのキャラで遊ぶか」という好みの選択に変わります。中央プランの「RECOMMENDED」点滅バッジは、ゲームが初心者に推奨キャラを教えるのと同じ自然さで、迷う人の背中を押す。下部のハイスコア表は、すでに大勢が遊んでいるという社会的証明として働きます。

仕上げの判断軸

刺さる相手は明確です。インディーゲームスタジオ、レトロゲームコミュニティ、ゲーマー向けSaaS。ターゲットがゲーム文化の外にいるなら、このメタファは通じません。

ピクセルフォントは見出しと装飾に限定し、本文や実価格は通常のサンセリフで可読性を確保。点滅アニメは prefers-reduced-motion で必ず停止できるようにします。

価格表の構成要素

価格表の構成要素 見出しと、期間の切り替え 無料 推しプラン 上位 ¥0 ¥1,480 ¥4,800 推しを1つ決め、視覚的に持ち上げる ── 決められない表は比較されずに閉じられる
並べる数は3つが上限の目安です。列が増えるほど比較の負荷が上がり、決める前に離脱します。項目の順序は全プランで揃えてください。

使いどころ

  • インディーゲームスタジオの公式サイト
  • レトロゲームコミュニティ
  • ゲーミング系SaaS（Twitch・Discord系）
  • 90sノスタルジア狙いのZ世代向け
  • Web3・NFTゲームプロジェクト
カテゴリ
価格表
スタイル
ピクセル / レトロ / 90年代 / ネオン / プレイフル / ボールド

背景と狙いどころ

Context

Category · 料金プラン

価格表

料金プラン・比較表のデザイン。

カテゴリ一覧を見る →

Style · ピクセル

ピクセル

ドット絵UI。

スタイル一覧を見る →

Style · レトロ

レトロ

古さを意匠化した温度。

スタイル一覧を見る →

よくある質問

ピクセルフォントのライセンスは？
「Press Start 2P」は SIL Open Font License で商用利用可。「VT323」も同じく無料。Google Fonts から読み込むのが手軽です。
アクセシビリティは大丈夫？
ピクセルフォントは小サイズで読みづらい。本文は通常の sans を使い、ピクセルフォントは見出しや装飾に限定するのが定石。点滅は prefers-reduced-motion で停止すること。
モバイルで筐体感は出る？
出ます。ただし要素を大きく取るので情報密度は落ちます。アーケード筐体は元々大画面前提なので、モバイル版は構成要素を絞ること。

この画面を実装する

動くサンプルとコピペできるコードを、技術別にまとめています。

Tailwind CSSBootstrapテーブルとデータ表示CSSグラデーション 技術別をすべて見る
Y2Kクロームベベルとオーブの料金プラン

Y2Kクロームベベルとオーブの料金プラン

2000年代初頭の Frutiger Aero / Mac OS X Aqua / 透明クロームを再構築した Y2K 風料金プラン。鏡面ベベル・色付き光沢オーブ・虹色グラデで「ソフトウェアパッケージ」感を演出する。

価格表 90年代グラデーション
POSレシート風の料金プラン

POSレシート風の料金プラン

コンビニや飲食店のサーマルプリントレシートを再構築した料金プラン。破れたエッジ・点線セパレータ・バーコード・赤い「人気」スタンプで「正直で透明な価格」を視覚的に証明する尖った設計。

価格表 モノクロレトロ
新聞風の3段階料金表

新聞風の3段階料金表

新聞の紙面を思わせるセリフ書体と罫線、二重線の枠、スタンプ色のアクセントで組んだ3プランの料金表。SaaSやサブスクのプラン提示で「レガシーなのに現役」なトーンを出したいときに。

価格表 レトロ新聞