ウェブアプリ ／ スクラッチ型オンラインくじ
スクラッチアップ
レモン色の紙をめくるように、
指でくじを読み進める。
架空の運営会社を題材にした、スクラッチ型のオンラインくじです。ナビゲーションを1枚ずつの型抜きシールにしたヘッダー、削ると銀箔の下の記号が現れるAudioWorkletの削りエンジン、アイドル・アニメ・YouTuber・モンスター収集ゲーム・ゆるかわの5題材11箱、題材ごとに見開きで紹介するラインナップまでを一つのデモにまとめました。
作品を開く架空の運営会社を題材にした自主制作です。コイン購入と景品の発送は模擬で、実際の課金や配送は行いません。
引く前に、
賞と確率をすべて見せる。
箱ごとに総本数と残り口数、賞ごとの当初本数・残り本数・当選確率を「賞のはしご」に並べ、最下位の賞まで景品が当たる構成にしています。抽選結果は購入を確定した時点でサーバー側が決め、削り方や速さでは変わりません。
景品はすべて自社企画の架空キャラクター作品のグッズで、引く動機は箱の中身だけでなく作品への愛着に左右されます。「オリジナルIP紹介」だったページを「ラインナップ」に改め、5題材11作品を見開きのZINEで紹介するページを設けました。
レモン紙にリソ印刷の、
手作りZINEの手ざわりで。
地の色をレモン色の紙にし、蛍光ピンクとリソ印刷の青を差し色にしました。見出しは手書き風のYusei Magic、本文はM PLUS Rounded 1c、数字はDM Monoで組んでいます。傾きはナビやシールなど記号的な要素だけに付け、本文・数字・表・フォームは水平のまま読みやすくしています。
くじ詳細は縦長の「くじ帳」です。表紙に絵柄と作品名を置き、続く中のページに残り口数の目盛りと賞のはしごを並べます。口数は1・3・5・10の丸いシールを枠に貼って選びます。
なぞった速さと向きで、
削れる音まで変わる。
削りはPointer EventsとgetCoalescedEventsで指の速い動きも取りこぼさず、速さと筆圧で線の太さを変えます。被覆率はWorker上で縮小したマスクを数え、削った割合がしきい値を超えると残りの銀箔を自動で剥がします。
AudioWorkletで、削る速度と向きに追従する摩擦音を鳴らし、箱ごとに音色を変えました。等級に応じたファンファーレと振動（iOSなど振動できない端末では画面を小さく揺らして代えます）も備え、まとめて開く操作と演出のスキップも用意しています。
一段のヘッダーのまま、
横にスクロールする。
スマートフォンでもヘッダーは一段のまま、シール状のナビゲーションを横スクロールにして右端をぼかしました。見本のくじは上下に帯を残し、そこに指を置けばページを縦にスクロールできます。
制作情報
- 種別
- 自主制作・架空サービス
- 制作範囲
- 企画・設計・デザイン・実装
- 使用技術
- HTML / CSS / JavaScript
Vite / Node.js / SQLite
AudioWorklet / Web Worker - 対応画面
- PC・タブレット・スマートフォン
