WWW.AKIRAFUKUOKA.COM BLOG

無限スクロールでビガビガするイカれた同人特設サイトを作ったぜ!! の話。

2014.12.24 Web

adtrance4_0.jpg

光の速さで作った光サイトです

本当はこの話を光 Advent Calendar 2014に書きたかったんですが間に合わず。毎年恒例になりつつありますが、同人音楽サークルDivese SystemからリリースされるトランスコンピレーションCD「AD: TRANCE4」の特設サイトを制作しました。スケジュール云々の都合により実質4日間くらいでメインの部分は作ったんですけど、大胆なレイアウトとエフェクトを楽しんでいただけるサイトになったんじゃないかと思っています。

テーマは “無限”

このCD、なにがすごいかって4枚組なんです。4枚といっても薄く伸ばされたものでは決してなく、ハイクオリティな楽曲が詰まりに詰まった4枚なのがすごい。ちなみにこのシリーズ前作「3」が3枚組なので一枚ずつ増えている…!! ということはCD1枚の厚みが1.2mmだからこのままシリーズが続けばAD: TRANCE 3146667にはCDを重ねた高さが富士山を超える…かはさておきやはりクオリティを維持しながらボリュームが増えていくというのはすごい話だと思うわけです。そんな無限感を安直に無限スクロールで表現しました。上下左右、どちらに進んでもOK。文字が全体的に斜めっているのは無限スクロールと相性がいいからです。あと無限スクロールはタッチ端末との相性がいいだろうなという読みもあったりします。自分で見つける、ということにコミケしかり同人しかりの醍醐味があると思いますから、この4枚組という無限に広がる広大なアルバムからあなたの好きなアーティストを見つけ出してください!

Web Audio APIとWebGL

fig.1に続き、今回もWeb Audio APIを使って音を鳴らしてます(ほんとSoundCloud貼りゃいいのにね!)。でWeb Audio API経由で波形データを読んでWebGL、というかPixi.jsに突っ込んでキラキラ光彩を背景をアニメーションさせてます。コード的にはシャイニングフォトン【滅】を継承しつつ、動きはだいぶいじってますね。本当はthree.jsを使って3Dでエフェクトを作っていこうとしてたんですが、いただいたジャケットのデザインが玉ボケ満載のきれいなイメージでしたのでエフェクトもそれに合わせました。トランスという音楽のジャンルはアッパーで高揚感のあるものですからそんな音楽性をサイトから感じてもらえたら嬉しいです。

「同人」をどう捉えるべきなのか?

自分の中にはもしこういったシーズンで行われる同人制作物がルーティーン化してしまったとしたら、という漠然とした恐怖感がありました。このCD「AD: TRANCE 4」がリリースされることがどれだけ大ごとなのか、自覚的であって欲しい、という身勝手な思いが、限界を超えてこういうサイトを作ろうという原動力になっていたように思います。Diverse Systemに関係する人たちがいかに特別なことをしているか、自覚的であってほしいし、それこそがDiverse Systemが持つブランドなんだって信じてほしいのです。だってルーティーンになった制作なんて悲しいじゃないですか。私が同人という自由、了承を得ているのに「ヘッダーにビジュアルを置いて、タイトルと値段を書いて、曲リストを置いて…はい完成!」っていうのはもったいないと思うわけですよ!一方で情報を伝える責任もあるわけで、最後まで死ぬほど悩みながら締め切りに追われる辛い思い出ばかりが残っております。もちろん微塵にもアクセシビリティが高いサイトだとは思いませんが、もしまた機会があれば両輪を成立させたようなものが作りたいとは思います。もっと豊かなクリエイティブができるんだということを信じていきたい、2014年末でありました。バカを毎度笑って許してくださっているYsK先生および関係者の皆様にごめんなさいとありがとうの気持ちを記して結びとさせていただきます。コミケ3日目 12/30(火)、東4ホール シ-80Bにみんな集合だかんね!!!!

グラスで乾杯すると始まるプロジェクションマッピングのイベントの中で人類最強の光を見つける

2014.12.19 Text

cafedeparis_0.jpg

この記事は光 Advent Calendar 2014 19日目のエントリーです。

実は書く予定のことが別であったんですが、急遽変更して12/19(金)〜12/21(日)までマルイシティ渋谷で開催されるイベント 「“カフェ・ド・パリでカンパイ”が女子の魔法 Girls! Cheers! Fantasy!」について。FICCが企画を担当した “体感型プロジェクションマッピング” が目玉のイベントです。まさに身体中で光を感じるイベントであります。私はいつもはホームページ手作りおじさんですが、今回は企画のアウトラインや映像のディレクション、音楽、サーバーサイド実装など、一言では言い表せないいろいろなことを担当しました。どれも本業ではない?そういうことが重要ではありません。必要だからやるんです。

何のイベント?

カフェ・ド・パリというスパークリングワインのキャンペーンイベントです。女の子に人気のお酒、ということでクリスマスパーティーや女子会で大活躍な飲み物なのですが、カフェ・ド・パリで乾杯するとこんな楽しいことが起こるよ!というイメージをプロジェクションマッピングを使って体験できるようにしてみようじゃないか!ということで出来上がった企画がこの「“カフェ・ド・パリでカンパイ”が女子の魔法 Girls! Cheers! Fantasy!」です。ちなみに英語タイトルは僕の案が通りました。ガールズ・チアーズ・ファンタジー、意味よりも発音して気持ち良いタイトルを意識しました。

乾杯で始まるプロジェクションマッピングの作り方

時に2014年、ただのプロジェクションマッピングでは面白くない。ということで今回4×4×3mの特設ブースを作成。出来上がった壁面(奥、右、左)と地面の4面に映像を投影し、まるでその世界にいるようなVR体験をしていただきます。VRといえば今ならOculus Riftですが、女の子が友達同士で参加することをイメージしたイベントなので相性が良くありませんでした。Oculusをつけて女の子がワイワイしてる絵ってちょっと想像できないですよね(阿鼻叫喚はありそうですが)。そして女の子は見た目にも気を使うのでHMDよりもプロジェクションマッピングが最適だろうという結論に。イベント的に絵も映えますしね。

さてそれだけじゃまだ足りません。今回のテーマは「乾杯」ですから、乾杯してプロジェクションマッピングが始まらないと面白くありません。今回「乾杯検知システム」を始め現場のシステム周りを切札さんに担当していただきました。そして完成したのが今回のイベントのために特別に制作された「乾杯検知グラス」。グラスにはセンサーが取り付けられていて、参加者はこのグラスに自分のグラスをぶつけ、その際の衝撃を検知しプロジェクションマッピングをスタートさせます。…文字で書くと簡単なんですが、精度や扱いやすさにとにかくこだわっていただきました。とにかく切札さんのご協力なしには成し遂げられなかったです。

そして肝心のプロジェクションマッピングの映像自体ですが、今回は個人的なつながりもありflapper3さんに依頼させていただきました。BOOM BOOM SATELLITESの映像(!)やヱヴァンゲリヲン新劇場版:Qの映像(!!)などなどとにかくクオリティの高い映像を制作している新進気鋭のクリエティブスタジオであります。私のクソディレクションを最高の形に引き上げてくださり、本当に素晴らしい映像を作り上げていただきました。これぞ光!! 種類は全部で5種類、ぜひ現場でハイクオリティな映像を “体感” してみてください!!

cafedeparis_1.jpg

ちなみに4面のプロジェクションマッピングだったので、映像の確認のためにHTML5+CSS3でvideoタグを使った箱を作って、そこでカメラングルとかをテストしたりしていました。簡単にこういうことができるのがHTML5世代ですな

で、お客さんの反応はというと

やはりリアルイベント、お客さんの反応が気になるところです。正直な話、東京の人たちのリアクションはあっさりしてるんじゃないかと思っていたのですが、蓋を開けてみて驚きました。むっちゃ楽しそうにしてるじゃん!! このイベント、プロジェクションマッピングの投影と同時に全自動で静止画・動画の撮影とアップロードが行われるシステムが組み込まれています(制作はこちらも切札さんです。ありがとうございました!!)。アップロードされた静止画・動画はプライベートに楽しんだり共有していただくことができるような仕組みで、許諾を得られた方の動画のいくつかを公式ページにも公開しています。で、その中でも最高なリアクションはこちら。

これだけ盛り上がってくれたら本望です!いいリアクションがまだまだありますのでぜひ公式ページでご確認下さい。

光を表現するには闇が必要である

ここまで光ばかり書き連ねましたが、光の裏には闇があります。正直ベースで申し上げますと上に書いたこと、あらゆる箇所で問題が発生しました。原因は私の至らなさゆえであったりしたため、クライアント、FICCのスタッフ、そしてご協力いただいた関係各社の方々に多大なご迷惑をおかけいたしました。たくさんの苦労を無駄にしてしまうこともありました。それでも、己の闇を照らしていただいたのは映像が表現する光であり、プロジェクターの光であり、ひらめきの光であり、各所の方々からのいただいた光、そしてお客さんの笑顔も光です。闇夜の中でなければイルミネーションが機能しないように、そもそも光単体ではそれを光と認識することはできません。きらめきを表現するには光の周りには闇が必要なのです。自分のやっていることを疑う瞬間もありましたが、光を求めることを諦めず、その闇を切り裂くような光を得られたことが何事にも代えがたい体験であったと思います。ぜひ皆さんも光を体験しにマルイシティ渋谷に遊びに来てください!

以上、ポエムでした。ご静聴ありがとうございました!

…で、人類最強の光は何か?そんなもんに決まってんだろ!! ガハハハ!!!!!! ということで、イベントに来ていただいた女性、またはカップルにはカフェ・ド・パリ(200ml)のプレゼントがあります!お酒 is 光!!ウェーイ!!!!女の子同士で楽しく盛り上がってください!!!!!もちろん未成年はもらえませんのでそこだけはお忘れなく。プロジェクションマッピングにも参加できないのでそこはゴメンなさい。お酒は20歳になってから。

そして明日の光担当はkmhiyoさんです。お楽しみに。

2014年10月 | BLOG TOP | 2015年1月

Archives

2015.06 2015.05 2015.04 2015.03 2015.01 2014.12 2014.10 2014.05 2014.03 2014.01 2013.08 2013.01 2012.12 2012.09 2012.08 2012.07 2012.06 2012.05 2012.03 2012.01 2011.12 2011.10 2011.09 2011.08 2011.07 2011.06 2011.05 2011.04 2011.03 2011.02 2011.01 2010.12 2010.11 2010.10 2010.09 2010.08 2010.07 2010.06 2010.05 2010.04 2010.03 2010.02 2010.01 2009.12 2009.11 2009.10 2009.09 2009.08 2009.07 2009.06 2009.05 2009.04 2009.03 2009.02 2009.01 2008.12 2008.11 2008.10 2008.09 2008.08 2008.07 2008.06 2008.05 2008.04 2008.03 2008.02 2008.01 2007.12 2007.11 2007.10 2007.09 2007.08 2007.07 2007.06 2007.05 2007.04 2007.03 2007.02 2007.01

Feed

Category

Profile

  • akirafukuoka
  • AKIRAFUKUOKA(福岡 陽)
  • FICC inc.所属。Flashコンテンツ開発担当、でもデザインや企画まで手がけることも。
  • WebデザインブックマークサイトAnotherBookmark、Web制作系求人情報サイトMOREWORKSの制作も担当。
  • また趣味的にクラブイベントRaw-Fi 主宰も。当ブログよりモノ系・文化系に特化したRaw-Fi Blogも更新中。
  • ABOUT AKIRAFUKUOKA

Link