Interactive & Playableインタラクティブ & プレイアブル · Designer & builder
Overview概要
A hybrid Werewolf party game — 25 hand-illustrated dark gothic role cards dealt to each phone, dual-layer compositing, sub-pixel position editor, and one table on the big screen.デジタル版の対面スマホ人狼ゲーム。多層レイヤー構造で描かれた 25 種の G ペン木版画調役職カード、専用 GUI 調律エディタ、大画面による進行。
My part担当
- Designed a digital Werewolf party game for one shared table screen and private handsets
- Hand-illustrated 25 dark gothic etching role cards and atmospheric environments
- Built dual-layer runtime compositing and dedicated Card Position Editor GUI
- Implemented spring-physics 3D tilt and gyro-linked mobile parallax
- Engineered Snap Pair-based multi-device dealing and authoritative game engine on Firebase
Werewolf: The Making of Dark Gothic Etching Cards 人狼（Werewolf）: 試行錯誤とこだわりが産んだダークゴシック・アートの極致
A hybrid digital parlor game dealing 25 original hand-etched gothic role cards directly to players' smartphone screens. Built on a breakthrough dual-layer compositing architecture, custom sub-pixel calibration GUI, and spring-physics 3D parallax that transforms generative AI art into a cohesive, tactile masterpiece. その場のスマホに直接配られる25種類の描き下ろし役職カード。AIによるスタイル破綻を克服した「多層レイヤー合成構造」、数ピクセル・数ミリ秒の干渉をミリ単位で調律する専用GUIエディタ、そしてスマホの傾きに連動するスプリング物理3D視差。妥協なき試行錯誤が産んだデジタルカードゲームの金字塔。
- 25
- Illustrated Roles 描き下ろし役職数 Unique roles with custom calibrated scales, translations, and color offsets 1枚ずつ位置・スケール・色彩を調律した全 25 種の独自役職カード
- 2-Layer
- Dual-Layer Canvas 多層分離構造 Hybrid architecture separating transparent characters from atmospheric backgrounds キャラ透過層と細密背景を分離合成する多層レイヤー構造
- 0.01x
- Sub-Pixel Precision 精密調律エディタ Sub-pixel precision enabled by a bespoke browser-based Position Editor 専用 GUI エディタによる 0.01 倍・数ピクセル単位の精密調律
- 100%
- Handset Privacy 手元の役職秘匿性 Nocturnal role privacy — tactile long-press reveal on personal handsets 長押し開示による手元端末での完全な役職秘匿性保証
The Interactive Card Deck: Experience the Handcrafted Tactility ライブ・カードデッキ: 手作業で調律された手触りを体感する
Interact with the 25 cards directly in your browser. Move your cursor or tilt your device to feel the 3D spring-physics perspective. Switch between bilingual Japanese (with ruby furigana) and English typography, or toggle the background layer to observe the dual-layer compositing. 全25役職のカードをブラウザ上で直接操作できます。マウスカーソルを動かす（またはスマホを傾ける）と、スプリング物理演算による立体チルトが作動します。日本語（ルビ付き）と英語タイポグラフィの切り替えや、背景レイヤーのON/OFFによる多層合成の仕組みをお確かめください。
CITIZEN TEAM
Phase 1: Style Cohesion & The Bold Decision of "Dual-Layer Compositing" Phase 1: 絵柄の同一化と「多層レイヤー構造」の英断
In the dawn of generative AI, the single greatest bottleneck was environmental collapse: generating a character alongside an elaborate gothic background inevitably destroyed character line weights, distorted facial anatomy, or randomized the art style. Our solution was an architected separation: completely isolating hand-drawn character etchings onto transparent alpha channels, while independently rendering richly atmospheric gothic backgrounds, compositing them dynamically at runtime in HTML and CSS. 本プロジェクトの最初の大きな壁は、「生成のたびに背景のテイストやキャラクターの顔立ちが変わってしまう」という生成AI固有の制約でした。Gペンによる細密な木版画調イラストの背後に背景を描き込ませようとすると、線の太さが崩壊し、ダークファンタジーとしての一貫性が失われてしまう現象に直面したのです。そこで下した英断が、「キャラクターの完全切り抜き透明化 × 細密背景の独立生成 × HTML上での多層レイヤー（重ね合わせ）合成」というハイブリッド構造でした。
Interactive Layer Deconstruction (Role: Ghost Wolf) レイヤー分解エクスプローラー（サンプル: 狼の亡霊）
✦ Multi-Layer Integration (完全統合ビュー)
Character artwork retains 100% of its original G-pen hatch lines, while the dark moonlit graveyard background creates deep environmental mood without interfering with the subject. Typography is dynamically superimposed with SVG drop-shadows. キャラクター原画のクオリティを100%維持したまま、背後の細密な月夜の墓地背景を重ね合わせることで、圧倒的な世界観と視認性を両立。この完全分離こそが、後の「ジャイロ連動3D立体視差」を可能にする技術的礎となりました。
Phase 2: Sub-Pixel Precision & The "Card Position Editor" Phase 2: 「数ピクセル・数ミリ秒」のこだわりと専用エディタの開発
Consistency in a card game cannot be automated by code alone. When 25 illustrated characters possess differing eye heights, weapon silhouettes, and shoulder widths, mechanical placement creates jarring visual dissonance. To eliminate tedious code-recompile feedback loops, we built a dedicated in-browser GUI tool: Card Position Editor, enabling sub-pixel scaling, X/Y translation, and photometric calibration stored directly into deterministic JSON configurations. カードゲームのプレミアム感は、「全体のルール」ではなく「数ピクセルの構図の一貫性」によって決まります。武器の突き出し方、頭の位置、肩幅が異なる25体のキャラクターを機械的に中央配置すると、カードをめくるたびに視線が乱高下してしまいます。そこで私たちは、コードの再ビルドをゼロにし、ブラウザ上で全カードを0.01倍・数ピクセル単位で直感的に調整できる専用ツール「Card Position Editor」を自作しました。
🛡️ Bodyguard: Head Clearance
The top of the Bodyguard's helm collided with the English typography. By applying a 0.92x scale and lowering the Y-axis by +3.82%, we achieved crisp typographic readability without sacrificing stature. ボディガードの兜の頂点が英語タイトルと干渉。画像を0.92倍にスケール調整した上で、縦位置を+3.82%下げることで、頭部の威厳と英字の視認性を完全両立。
⚔️ Knights: Underglow Emulation
A trio of three knights (Greatsword, Sword & Shield, Crossbow) unified by reverse-engineering the distinctive orange underglow from the feet, scaling to 1.42x to balance three figures. 大剣・盾剣・ボウガンを持つ3人衆。足元から照り返すオレンジの逆光（アンダーグロウ）をプロンプト模倣し、3人の重厚感を1.42倍スケールで調律。
✨ God: Chroma Key De-fringing
Extracted blonde hair and golden robes suffered from cyan edge fringes. Developed a pixel-by-pixel color-range removal script to isolate flawless golden edges. 金髪と黄金ローブの輪郭に生じた青緑（シアン）のクロマキーフチを、ピクセル単位の色域判定アルゴリズムで完全消去。濁りのない神聖な輝きを抽出。
🔮 Counselor & Necromancer
Deepened washed-out blue backgrounds into rich midnight tones, preventing white Japanese kanji from blending while ensuring English names avoid awkward line breaks. 白っぽく飛んでいた背景の青を深みのある濃紺へと色彩強化。白い漢字タイトルのコントラストを高め、ネクロマンサーの長い英語名の改行余白を調律。
Explore the Full Calibration Tool: Card Position Editor 実際の位置調律ツール: Card Position Editor を試す
Try the actual tool used during development. Adjust scale, translation, and tint in real time, inspect lock states, and copy serialized JSON. 開発現場で実際に使用されたWebベースの調律ツールです。全25枚のロック解除、ドラッグ移動、スライダー調整、JSON出力をブラウザでそのまま操作できます。
The Full Roster: All 25 Character Roles 全 25 役職カードギャラリー（市民・人狼・第三陣営）
Filter through the 25 illustrated roles across the Citizen Team, Werewolf Team, and Neutral Third Parties. Click any thumbnail below to instantly load and examine the role in the interactive 3D viewer above. 村を守る市民陣営、夜の闇に潜む人狼陣営、独自の狂気と勝利条件を持つ第三陣営。以下のサムネイルをクリックすると、上部のインタラクティブ 3D ビューアに瞬時にセットされます。
Phase 4: Medieval Crest Shields & Heraldic Logo Exploration Phase 4: 中世紋章盾（Crest Shield）とロゴデザインの探求
The visual anchor of the game required an insignia that carried the tactile weight of physical antiquities. We conceptualized 8 distinctive directions grounded in medieval ironwork, silver filigree, and gothic stone relief, centering on the heraldic crest shield and the howling wolf. ゲームの象徴となるロゴマークにも妥協はありませんでした。中世の古風な雰囲気に合わせ、銀細工と金細工で立体的に彫刻されたゴシック調の紋章盾（Crest Shield）を中心に据え、吠える狼をあしらった「Direction 01」をはじめ、8つの多角的なコンセプトを考案・検証しました。
Direction 01: Silver Crest
立体彫刻された銀の紋章盾と咆哮する狼。正統派ゴシックファンタジーの象徴。
Direction 02: Golden Sigil
黄金の装飾と繊細なエッチングが織りなす、貴族の館に伝わる秘密結社の刻印。
Direction 03: Blood Moon Beast
真紅の夜空と鋭い鉤爪。人狼の狂気と血の宿命を前面に押し出したデザイン。
Direction 04: Dark Iron Bastion
重厚な黒鉄の砦と盾。村人たちが身を寄せ合う夜の恐怖と防壁を表現。
Phase 5: Spring Physics & Gyro-Linked Parallax Tactility Phase 5: スマホでの手触りと「スプリング物理3D視差」の極致
A digital card that merely loops an easing animation feels artificial and disposable. To breathe authentic tactile weight into the phone screen, we implemented asynchronous organic micro-drifts ("breathing float") coupled with interactive spring physics. When dragged, the card tilts dynamically in 3D; upon release, it snaps back with an elastic bounce calculated from physical spring constants. 単にイージングで拡大縮小を繰り返すだけのアニメーションは、機械的でチープな印象を与えます。そこで私たちは、微小な回転と平行移動を非同期でブレンドした「呼吸する浮遊感」を実装。さらに、指ドラッグに合わせてカードが3D傾斜し、指を離した瞬間にバネのように「ぷるん」とバウンスして復元するスプリング物理演算（Spring Physics）を組み込みました。
🌿 Breathing Organic Drift (有機的な呼吸)
A combined transform loop blending 0.5-degree rotation and 4px translation with asynchronous sinusoids, preventing the repetitive cadence of robotic loops. 規則的なループを排し、独立した正弦波による微小な回転と浮遊を合成。風にそよぐような自然で有機的な「呼吸感」を再現。
🧲 Spring Physics Drag (バネの弾性復元力)
Calculates mouse velocity and pointer distance, driving angular tilt. Upon release, damped harmonic oscillator equations snap the card home elastically. ポインターの速度と変位からカードの立体角を計算。指を離した瞬間、減衰振動方程式に基づいてカードが弾むように定位置へ帰還。
📱 Gyroscope 3D Depth (スマホジャイロ連動)
Utilizes DeviceOrientationEvent on mobile handsets: tilting the physical phone displaces the foreground character and background at differing speeds, revealing tangible depth. 実機スマートフォンの傾き（ジャイロセンサー）に2つのレイヤーがリアルタイム連動。手前のキャラクターと奥の背景が互い違いにズレ、画面の奥に本物の奥行きが存在するような驚きを提供。
The 20-Screen Mobile Ledger: End-to-End English Interface Flow 全20画面のモバイル台帳: 英語UIで巡る対面人狼のエンドツーエンド設計
Unlike parlor board games that force players to decipher crowded public screens, each player’s smartphone in GEKKA serves as a sealed personal ledger. Engineered for frictionless international play, all 20 screens were meticulously designed with English typography, responsive touch affordances, hold-to-reveal privacy seals, and millisecond-accurate socket synchronizations. Explore the full 20-screen English interface flow below. 大画面を見上げながら各自のスマートフォンを操作する対面人狼において、手元UIの直感性とプライバシー保護はゲーム体験の生命線です。本作では海外プレイヤーとも同一セッションを囲めるよう、全20画面におよぶ英語UIを完全実装。合言葉やQRによる即時入室から、長押しによる秘密の役職開示、夜の秘匿行動、白熱の評議タイマー、そして処刑と終幕の全貌開示まで、一連のゲームサイクルを洗練されたダークゴシックUIで完備しています。
Social Architecture: Private Handsets, One Public Square 対面スマホ人狼（記録網）: 手元の秘密と大画面の劇空間
Physical werewolf suffers from telltale card noises, accidental peeking, and the burden of a human moderator who cannot play. Our architecture pairs everyone in the room via QR code in under 5 seconds with zero app install. Secret nocturnal identities stay strictly locked to individual phone screens (revealed via tactile long-press), while the shared TV display orchestrates debate timers, accusations, and dramatic executions. 紙のカードを使う人狼では、配る際の擦れや夜のフェーズでの物音で役職がバレてしまう問題がありました。本システムでは、QRコードをカメラで読み取るだけで5秒以内に部屋に参加（アプリインストール・登録一切不要）。秘密の役職は手元のスマホでの「長押し確認」に限定され、端末外観から役職が漏れるのを防ぎます。一方、テレビ等の大画面が中立なGM（記録者）として村の広場・タイマー・投票のドラマを進行します。
Server-Authoritative State via Cloud Functions Cloud Functions による完全なサーバー権威型進行
Client handsets receive strictly filtered snapshots: public state for everybody, but nocturnal abilities and role IDs exist only in encrypted private channels. Cheating through client inspection is physically impossible. Firebase Realtime Database のセキュリティルールにより、クライアントは自身の privateView しか受信できません。通信解析を行っても他人の役職が漏洩しない厳格なアーキテクチャを実現。
Zero-Friction QR Onboarding in 5 Seconds Snap PairによるQR一発参加。準備の手間ゼロ。
No downloads or logins at a casual party. A single camera scan instantly pairs the handset to the session room state, automatically assigning private socket channels. 楽しい集まりの場で「まずアプリをダウンロードして」と頼むのは最大の興ざめ。QRコードをスキャンするだけでブラウザが開き即座に部屋へ同期。全員がストレスなく対話に集中できます。
25 Illustrated Roles & Infinite Strategic Depth 25種の多彩な役職と無限の心理戦
From the subtle Double to the unhinged Dictator and elusive Mysterious Fox, the vast pantheon allows hosts to construct customized game dynamics suited for casual 5-player banter or 15-player tactical masterclasses. 影武者、独裁者、狼の子ども、妖狐、神様など、多層的な能力を持つ25役職を自由に編成可能。初心者から熟練者まで飽きることのない奥深い心理戦を演出します。
Conclusion: True Craftsmanship Lives in Sub-Pixels and Milliseconds 結論: クオリティは、数ピクセル・数ミリ秒のディテールへのこだわりの積み重ねによってのみ生まれる
This project proved that in an era where generative AI can output thousands of images in seconds, the soul of a digital artifact is determined entirely by what happens after the generation. By pairing human aesthetic conviction with purpose-built calibration tools and multi-layer rendering engines, digital cards transcend fleeting pixels, becoming living, tactile art. この人狼カードデザイン開発が教えてくれたのは、「AIがどれほど美しい絵を瞬時に出力しようとも、プロダクトの魂は生成の後に注ぎ込まれる手仕事の調律によってしか宿らない」という真理でした。厳しい審美眼とそれを可能にする専用ツールの開発、そして数ピクセル・数ミリ秒の執拗な微調整の積み重ねによって、このカードは触って動かして永遠に眺めていられる「生きたアート」へと昇華したのです。
My Contribution 担当領域
- Art Direction & Prompt Engineering for 25 woodcut etching characters & backgrounds25役職のGペン木版画エッチング調イラストおよび細密背景のプロンプト設計・アートディレクション
- Conceived & built the Dual-Layer Compositing architecture & Card Position Editor GUI tool多層レイヤー分離合成構造の考案、およびブラウザ専用調律ツール「Card Position Editor」の開発
- Engineered 3D Spring-Physics tilt, gyroscope parallax, and bilingual typographyスプリング物理演算3Dチルト、スマホジャイロ連動、ルビ付き日英バイリンガルタイポグラフィの実装
- Designed & built full-stack social deduction game engine on Firebase RTDB & Cloud FunctionsFirebase RTDB + Cloud Functions によるサーバー権威型対面スマホ人狼エンジンの設計・実装
Ecosystem エコシステムにおける位置づけ
- Part of the Playable laboratory exploring social presence and multi-device interaction複数デバイスによる身体的・空間的プレイを探求するPlayableコレクションのフラッグシップ作品
- Demonstrates client-direct state segregation and zero-install parlor gameplay大画面と個人スマホの状態分離制御を実証する最高峰のリファレンス実装