ウェブアプリ／オンラインオリパ・ガチャ

オリパガチャ

いま誰かが引いた一枚が、
この場に流れてくる。

架空の運営会社を題材にした、トレーディングカードのオンラインオリパです。総口数・残り口数・封入率をすべて公開し、ほかの利用者が引くとトップの掲示板や封入ボードがその場で動きます。引く・開封演出・発送依頼かポイント還元かを選ぶところまでを、ゲストのまま試せるようにしました。

作品を開く

架空の運営会社を題材にした自主制作です。決済と発送は模擬で、実際の課金や商品の発送は行いません。

先に数字を見せてから、
引いてもらう。

何が何枚残っているのかを隠さないことを中心に置いています。オリパ詳細では価格と残り口数、最低保証、レアリティごとの残枚数と封入率を、引くボタンより前に並べました。

トップからゲストではじめれば、登録なしでポイントを持った状態で試せます。運営者に切り替えると、同じデータを管理画面の側から扱えます。

地を冷たい黒にし、光らせる色をシアン一色に絞りました。見出しはMurecho、本文はM PLUS 1p、数字と単位はM PLUS 1 Codeの等幅で組み、価格・残り口数・還元ポイントを大きな数字で先に見せています。

オリパのサムネイルとカードの絵はすべて5:7のパック形にそろえ、レアリティの枠はS=虹・A=金・B=青・C=白の4段で塗り分けました。運営の画面は同じ配色・書体で組みつつ、光の帯やにじみは使いません。

1回・10連・100連から選ぶと確認ダイアログをはさみ、確定すると開封演出へ進みます。WebGLが使える環境ではthree.jsのシェーダーでパックの封が光の帯で焼き切れ、非対応の環境と動きを減らす設定ではCSSだけの2D演出に切り替わります。

結果画面ではレアリティ順にカードを並べ、1枚ずつ発送依頼かポイント還元かを選べます。獲得から30分以内に手続きしなかったカードは自動でポイント還元されます。決済と発送はどちらも模擬で、実際の請求や商品の発送は行いません。

スマートフォンでは電光掲示板の帯とティッカーを2段に分け、帯には必ずサービス名を出します。下部に固定タブは置かず、区分ボタンは帯の下に1行で並べ、幅が足りなければ横にスクロールします。