Werewolf人狼
Werewolf for one room: each role arrives on the player’s own phone as an etched gothic card, and the big screen runs the night.対面で遊ぶ人狼。役職は各自のスマホに版画調のゴシック・カードで届き、夜の進行は大画面が受け持つ。
Challenge課題
Played with paper cards, Werewolf leaks: cards rustle when dealt, someone peeks at night, and one person has to sit out as moderator. Digital versions fix that and end up looking like a spreadsheet with avatars. The game needed private roles, a table nobody has to run, and cards with enough dread and craft to be worth turning over.紙のカードで遊ぶ人狼は、情報が漏れる。配るときの擦れる音、夜のうっかりした盗み見。しかも誰か一人が進行役に回り、遊べなくなる。デジタル版はそれを解決する代わりに、アバター付きの表計算のような見た目になりがち。必要だったのは、役職が漏れず、進行役が要らず、めくる価値のある怖さと手仕事を持ったカードだった。
Solution解決
Each phone is a sealed hand: you press and hold to reveal your role, and the database rules let each phone receive only its own private view. The shared screen is the neutral moderator — it runs the night, the discussion timer and the vote. The art stays separate from the pacing, so the cards can be crafted one by one while the table keeps moving.スマホは一人ひとりの伏せ札になる。役職は長押しで開き、データベースのルールで各端末には自分の情報しか届かない。共有の大画面は中立の進行役として、夜、議論のタイマー、投票を回す。絵づくりと進行を切り離したので、カードは 1 枚ずつ作り込み、卓は止めずに回せる。
Impactインパクト
I built Werewolf with sealed phone hands and a shared moderator screen for hidden roles.封印された手札と共有司会画面で、役割隠し Werewolf を実装した。
What I handled担当フェーズ
- Researchリサーチ
- Business / Strategyビジネス／戦略
- Conceptコンセプト
- UX / UIUX／UI
- Design Systemデザインシステム
- Prototypeプロトタイプ
- Build実装
- Launch / Growthローンチ／グロース
A sealed hand for each player 一人に一枚の、伏せ札
Players join by scanning a QR code. From there each phone carries one person through the game — the lobby, the deal, nightfall, the council, the verdict — across 20 screens, while the shared display keeps the whole table in step. 参加は QR を読むだけ。そこから先は、一人一台のスマホがロビー、配役、夜、議論、追放までを 20 の画面で案内し、共有の大画面が卓全体の歩調をそろえる。
Two layers per card カード 1 枚に、2 枚の層
When a character and its setting were made as one image, line weight and faces drifted from card to card. So every card is two layers: the figure on a transparent plate, the gothic background made on its own. That kept the line work consistent across all 25 roles, let each figure be scaled and placed by hand in a Card Position Editor built for the job, and lets the two layers move at different depths when a phone tilts. 人物と背景を 1 枚の絵として作ると、線の太さも顔立ちもカードごとにぶれた。そこで全カードを 2 層に分けた。透明な版に載せた人物と、別に作ったゴシックの背景。これで 25 役すべての線の調子がそろい、専用に作った Card Position Editor で人物を 1 枚ずつ拡大縮小・配置できるようになった。スマホを傾けると、2 つの層が別々の奥行きで動く。
Take a card apart カードを分解してみる
This is the card viewer from the build. Step through all 25 roles, switch the card between Japanese — set vertically, with ruby — and English, and turn the background layer off to leave the figure alone on its transparent plate. 制作に使ったカードビューアを、そのまま置いた。25 の役職を順にめくり、日本語（縦書き・ルビ付き）と英語を切り替えられる。背景の層を消すと、透明な版に載った人物だけが残る。
Open the layer viewerレイヤービューアを開く Open the Position Editor — scale, offset and tint per layerPosition Editor を開く（層ごとの拡大・位置・色調）
Placed by hand, one figure at a time 1 体ずつ、手で置く
No two figures share an eye line, a shoulder width or a weapon’s reach, so centring them by rule made the eye jump every time a card turned. Each one was placed by hand in the Card Position Editor, in steps of 0.01×: the Bodyguard shrank to 0.92× and dropped 3.82% so his head clears the English title; the three Knights share one card at 1.42×. Cutting the figures out left a cyan fringe along the God’s gold edges, removed pixel by pixel with a colour-range script. 目の高さも肩幅も、武器の張り出し方も、1 体ずつ違う。機械的に中央へ置くと、カードをめくるたびに視線が上下に揺れた。そこで全員を Card Position Editor で 0.01 倍刻みに手で置いた。ボディガードは 0.92 倍に縮めて 3.82% 下げ、頭が英語のタイトルに当たらないようにした。騎士団は 3 人を 1 枚に収めるため 1.42 倍。人物を切り抜くと、神様の金色の輪郭に青緑のフチが残った。これは色域で判定するスクリプトで、1 ピクセルずつ取り除いた。
25
Illustrated roles絵のついた役職
14 · 7 · 4
Citizen · Werewolf · Neutral市民陣営・人狼陣営・第三陣営
20
Phone screens, lobby to verdictロビーから追放までのスマホ画面