価格表 · 料金プラン

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

プレビュー

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

概要

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

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

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

「SELECT YOUR FIGHTER」の力

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

仕上げの判断軸

刺さる相手は明確です——インディーゲームスタジオ、レトロゲームコミュニティ、ゲーマー向けSaaS。ターゲットがゲーム文化の外にいるなら、このメタファは通じません。ピクセルフォントは見出しと装飾に限定し、本文や実価格は通常のサンセリフで可読性を確保。点滅アニメは prefers-reduced-motion で必ず停止できるようにします。

使いどころ

  • インディーゲームスタジオの公式サイト
  • レトロゲームコミュニティ
  • ゲーミング系SaaS(Twitch・Discord系)
  • 90sノスタルジア狙いのZ世代向け
  • Web3・NFTゲームプロジェクト

このデザインの分類

カテゴリ
価格表
スタイル
ピクセル / レトロ / 90年代 / ネオン / プレイフル / ボールド

背景と狙いどころ

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 演出も入れる。

よくある質問

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