価格表 · 料金プラン
アーケード筐体UI風の料金プラン
80年代ゲームセンターのアーケード筐体UIを再現した料金プラン。"INSERT COIN"、ピクセルスコアボード、ハイスコア表で「コインを入れて始める」ノスタルジーをCTAに変換する尖った設計。
プレビュー
概要
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 演出も入れる。
よくある質問
ピクセルフォントのライセンスは?
アクセシビリティは大丈夫?
モバイルで筐体感は出る?
関連するデザイン
Y2Kクロームベベルとオーブの料金プラン
2000年代初頭の Frutiger Aero / Mac OS X Aqua / 透明クロームを再構築した Y2K 風料金プラン。鏡面ベベル・色付き光沢オーブ・虹色グラデで「ソフトウェアパッケージ」感を演出する。
POSレシート風の料金プラン
コンビニや飲食店のサーマルプリントレシートを再構築した料金プラン。破れたエッジ・点線セパレータ・バーコード・赤い「人気」スタンプで「正直で透明な価格」を視覚的に証明する尖った設計。
新聞風の3段階料金表
新聞の紙面を思わせるセリフ書体と罫線、二重線の枠、スタンプ色のアクセントで組んだ3プランの料金表。SaaSやサブスクのプラン提示で「レガシーなのに現役」なトーンを出したいときに。