Blog

2015.09.24 / Event

IMG_4530-2

IMG_4544-2

IMG_4549

Yamaguchi Mini Maker Faire 2015にこないだインスタ部で出展してきた。
場所は山口情報芸術センター[YCAM] 。なにげに僕は初YCAM。

僕と森岡さんで一緒に作っていたものは間に合わなかったので当日はライブビルディングということで作る作る・・・。笑
まあ、やってみるとやっぱり色々足りない知識が見えたのでよかったなー。単純に楽しいし。

そしてやっぱ場所必要。広くて、汚しても良くて、作りかけのもの広げておけて、音だしてもいい場所。
試行錯誤するのにいろんなものも必要だし。そゆのをざっくり置いておける場所。
あとはレーザーカッターの威力思い知ったなぁ・・・ほしいなぁ・・・

偶然にも隣のブースが、以前別の機会に存在を知って、わーこれは好きだわ~って思ってたPlotter Drawingの人で。
アイデアがいいなーっておもってたし、アウトプットもいいし。話聞けた。

夜は女将劇場っていう謎のやつを見に行って。色々と雑だけど楽しませようっていうエネルギーすごいし。50年間、子供を産んだ時以外は通常の女将業も、女将劇場も休んでないっていうマジやばいエピソード聞いて。情熱と狂気は紙一重。
そのあとチーム+YMMFで会った人で高知式飲み返杯祭りが開催されて(僕は開始時点で既につぶれててほぼ被弾は避けたけど、、、)。

山口の食をあまり体感できなかった気がするのが心残り。また行こう。

2015.09.11 / Works

Scenery iPhone 6 - 398 - 2015-09-11 0-59

SCRAPさんの脱出ゲーム企画「呪われたオーディション会場からの脱出」の告知サイトを作った。
株式会社闇案件。

コアコンセプトは「脱出ゲームの告知サイトから脱出する面白さ」「謎が解けなくてもホラー体験できる楽しさ」。

まず基本的な謎が4問。それを解けた前提で挑戦する第5の謎があって、さらにもうひとつ最後の大きな謎がある。その謎解きの面では、リアルな脱出ゲームの謎の面白さとはまた別の、ウェブサイトであったりスマホであったりという特性も活かした謎を盛り込めたのもよかったなーと。

一方で、ターゲットとしては謎大好きな既存謎解きユーザー、スクラップさんの既存ファンだけでなく、株式会社闇としてのリーチも生み出したかったので、謎解きが得意じゃない、謎を解けない(僕のような)人間にも楽しんでもらえるようにしようと。謎が解けなくてもひと通りの演出は体験できるように設計されてる。

ヒントを出すかどうか、どのくらいゲームオーバーになりやすいかどうか、とかも、開発チーム内でのレビューも繰り返しつつ、社内だけど案件に関わってない人を数人づつ計画的に使って体験してもらって、調整。あとは拡散目的の、友だちにこのサイトを送りたくなるような機能もつけた。
ホラーサイトだけどどの程度ユーザービリティは意識していて、スクロールジャックしたりで要は自己操作感をどの程度持たせて、どの程度奪うのか。という調整もしてる。

謎作りはスクラップさんが軸となるネタをくれて、Tonkaさんが肉付けしていった感じ。謎解きに詳しいわけじゃない僕から見てだけどなかなか良い気がする。
(そういうえば前にも本人の結婚式で謎解き2次会やっててそんときもおもしろかったんだった。)

ホラー演出案とデザインもいつも通りTonkaさんがハイクオリティなやつを光速で作ってくれた。ほんとホラー好きだなぁ。

構築面では、静的なページのHTMLコーディングはOkudaさんにお願い。
あとは僕も企画段階から入って一緒に考えつつ、全体設計、プロト制作、技術選定、俺も演出考えたり、フィジビリティのジャッジ、テクニカルディレクション、プログラミング、モーションデザインとかはいつも通り担当。

作りながら、あーこういうのもアリだね、今回は使えないけど今度使おう、みたいなのが色々発見されるのは、やっぱり頭のなかだけで考えてるのより、全然出てくるよね。

技術的に言うと、最初はCanvasでやる部分とDomでimgタグ動かす部分とWebGLとハイブリッドでやろうとしてて、WebGLやりたいなーって単純に思って(笑)、pixi.jsとかCreateJSとか検証してたけどWebGLはパフォーマンス求める部分が今回ないのでコストに折り合わないから割愛。
ビルドにはGulpとBrowserifyとつかって、browser-syncとBrowserifyとWatchifyとあとまあUglifyとか定番の諸々という感じ。
バージョン管理はGitでgit-flow。とはいってもルールは厳密じゃなくて都合がいいぶぶんだけ取り入れてる程度だけど。git-flowは結構好き。(とはいえgithub-flowとかやったことないから比較の上ではない)
画像まわりでいうと、SpritesheetつくるのにFlash CC 2015を通すと新機能でいい感じなのだけど、結局CanvasもナシにしてDom操作だけに今回はしたから、Flash通して吐き出すのはあまり相性が良くなく。
TexturePackerとかSpineとかも検証したが、Retina対応が微妙(というか時間内にやりたいことの使い方がわからなかった)・・・SpritesmithはRetina対応できるけどこれまた若干問題が・・・ということで時間もあまりなくて見切りをつけて、画像ファイル自体の最適化とか読み込みタイミング調整して体感上特に問題ない感じになったのでSpritesheetはまた今度ってことに。ここらへんのワークフローは確立しておきたいな。
Canvas使うなら、Flash CC 2015を通して素材吐き出すとSpritesheetの画像とJSを吐いてくれて、今は良さそう。闇サイトのときはその機能Flash CC 2014にはなかったから、あんときあれば・・・という思いはある。
JSは自作のクラス群もdeath.co.jpのときに作ったやつがある程度こなれてきて、その時は入れてなかったBrowserifyで依存関係は管理できてるし、まあそこはしっくりきつつある。
そんな感じでJS的には特になんか特殊なことはしてない。普通。普通のことを柔軟かつ高速にどうイテレートするかっていうことだと思う。

足音撮るためにオフィスに水まいて広報DQに歩いてみてもらったりとか、耳元で囁かれる感のある声を撮るためにこれまた広報DQに耳元でDISってもらったりとか、そんなことしながら音も録音したり。工夫した割に結局使ってないやつもあるけど、面白かった。次も囁いてもらえる企画ぶっこもうと思う。

謎解き自体は自分は慣れてないから、自分が普通に取り組んだら解けないだろうなぁと思いながら公開したら、公開してすぐにもう解いた人何人もTwitterにいて。すごいなーって。すごい。俺全然解けない。

ホラーの恐怖って要は死の恐怖を連想・喚起する行為だと思うから、ホラーサイト作りながら死について考えてみる、、、そんな日々を経て、完成。

ということで!ぜひぜひ。やってみてね。
あとお友達に教える時に楽しい機能もつけたし。それも使ってもらえたら嬉しいなと。

[ Credits ]
Seitaro Tonka : Direction, Art direction, Design
Yusuke Okuda : HTML/CSS Coding
Yoshiko Dokyu : Special Thanks
Kousei Ikeda : Techncal direction, Motion design, Programming

リアル脱出ゲーム「呪われたオーディション会場からの脱出」 http://realdgame.jp/audition2015/