インタビュー | デザインってオモシロイ -MdN Design Interactive-
CASE3_logo

Tumblr上で繰り広げられるエクストリームなコンテンツ

「SSTV HAPPY NEW YEAR!」
「ときめきshowerメモリーズ」「STREET CYPHER2」



INTERVIEW
●文 編集部
「Tumblr 」をハックした事例で度肝を抜かれたいなら、大月 壮さんが手掛けたサイトがお勧めだ。ここでは、制作に携わった3人に裏話をうかがった。

─まず、なぜTumblrなんでしょうか。

大月 僕にとっては、フリーサーバーとしての意味合いが8割。それと、Tumblr ってクリエイターからの支持があるサービスなので、「ハック」す るニュアンスがちょっと含まれるのが楽しくて、というのもあります。

hnnhn サーバーの維持費を気にせずにできるのもメリットですよね。特設サイトの場合、継続的な予算が取りにくいことが多いですし。あとは、「これをアップロードしてください」みたいなやりとりがなくて、「こっちで直しちゃいますんで」で済むんで、お互い手間が少ないのもいいですね。最近は、「Tumblrでいいですか」って僕から提案することが多くなってきてます。

大月 マイナス点は、Tumblrが急になくなったら困るってことかな(笑)。

hnnhn ホント困ります。

「SSTV HAPPY NEW YEAR!」

─「SSTV HAPPY NEW YEAR! 」制作の経緯は?

大月 僕がスペースシャワーTVの担当の方とお正月の「STATION ID」の企画をどうするか話してたときに、ドットのゲーム風の映像でどうですかと。映像だけじゃなくてWebサイトも作ってほしいって話だったんで、それならサイトでもクリエイティブなことをって考えました。

─コーディングはどのあたりが大変でしたか?

hnnhn 特にYouTubeのタイムラインから再生時間を取得してイベントを実行するという部分は時間がかかりました。

大月 途中で大きなトラブルがあって。hnnhnくんに、「ここ映像と背景のアクションのタイミングがずれてるから直して」ってオーダーしても直ってこなくて、なんでなんだろうと。そのやりとりが納期ギリギリまで続いていて、結局会いに行ったんですよね。そしたら、彼は古めのMacBook Airで、コマ落ちしてる映像見ながら一生懸命やってた(笑)。

hnnhn たぶんグラフィックの処理能力ですね。2010年の11インチモデルで、ちょっとチープだったんです。

大月 すぐ僕のところに来てもらって、iMacをターゲットにして、1日でブラッシュアップ(笑)。

─Chrome推奨の理由は?

hnnhn YouTubeの動画を埋め込むのに「swfobject.js 」というライブラリを使っていて、再生位置の取得で問題が発生しにくいのがChromeなんです。

─ドット絵も手が込んでますね。

大月 kenjiくんは、ファミコン的なかわいい8ビット感を自分のテイストを持っていて、そこを僕が「いや、16ビットやりたいんだけど」「16ビットのほうがカッコいいと思うんだけど」って崩していったんです(笑)。

m7kenji 僕も8ビット的なもの以外は描けないというのは悔しかったので、「やります!」と。

「ときめきshowerメモリーズ」

─その後「ときめきshowerメモリーズ」でまた同じメンバーが結集するんですね。

大月 夏の「STATION ID」で、また僕がやることになって、ドットの連作にしようよってことになったんです。次はオールドスクールなPCのグラフィック感やりたいなーって話になって、またhnnhnくんとkenjiくんに無茶振りをしてくという(笑)。ちょうど自分が通ってきたものがリバイバルしてきてる時代だったんで、ちょっと1回やっとくかということで、PC-88(80年代に人気を博したパソコン)を引っ張ってきたと。

─当時のグラフィックの特徴と言うと?

大月 当時のパソコンは色数が少ないのに解像度がやたら細かくて、網点のようにドットを使って色数を多く見せているんです。その特徴を作品に盛り込みました。

m7kenji そのへんは、メインドッターのたかくらかずきくんがすごい努力してた部分ですね。

大月 ただ、網点でやって、色数まで忠実に再現したら、出来上がってみんなで見たときに「これチープすぎるな」ってことに気付いて。それで、色数のリミッターは外しました。

─前作との違いは?

大月 前作がギミカルなのに対して、この作品はアニメーションにドット絵をプラスするという方向です。ただ、Webを作るに当たって、何かしら欲しくなって、hnnhnくんに「何かアイデアない」って相談を。最初から考えてたのは、マルチエンディングにしたかったので、5つのムービーをランダムに読み込めるように作ってほしいってことです。

hnnhn ちょうど声を掛けていただいた前日ぐらいに、voodoo.jsの紹介サイトを見つけて、それを見ていたら、そこに3Dのヤシの木があったんで、すぐ提案しました。

大月 そう、「これ夏じゃん」ってことになって。早速フリーソフトでヤシを作って納品して。

─グラフィックについては?

m7kenji 僕はこの作品はバトルのグラフィックとかタイトルロゴとかをやらせてもらいました。細かい部分の作業が好きなんで、アンドロイドみたいなメカ部分も。


「STREET CYPHER2」

─その後「STREET CYPHER2 」を制作するんですよね。

大月 スペースシャワーTVに「BLACK FILE」というヒップホップのプログラムがあるんですが、そこで「何か番組作ってみないか」と言われて。スト2の世界でMCバトルをやってみたいということで、番組を作ったんです。で、そこから派生してMCバトル“イベント”をやろうってことになって。その告知サイトがこれですね。グラフィックとかゲームは番組の時点でもうすでにあって、その素材をWebに流用した形ですね。

─グラフィックはkenjiさんが?

m7kenji たかくらくんと僕が作りました。ステージの数と出てくる観客の多さ、物量がとにかく多くて(笑)。ひとつひとつドット絵にして、キャラクターごとに2コマのアニメーションをつけてて、動くタイミングはそれぞれずらすという仕事でした。

─前2作のあとではシンプルなサイトに見えますね(笑)。

大月 そうかも(笑)。実際、過去2作に比べたら特に技術的なトピックはなくて、サイトの機能としてナビゲーションとか入れて、きれいにまとめた感じですね。GIFアニメはもっとあったんですが、見にくいし処理も重いので減らしました。

hnnhn これは僕は関わってないんですが、素材が画面上で重なるところ、CSSのz-indexプロパティをうまく使ってるなと。仕様的には0から21億ぐらいまで使えるみたいなんですけど。

大月 究極21億レイヤー作れるってことだ。覚えておこう(笑)。

hnnhn 悪い予感が(笑)。


PROFILE >>>
大月 壮] 1977年生まれ。映像クリエイター、ディレクター。ぶっ飛んだものからマジメなクライアントワークまで柔軟に。Webやテクノロジーを映像に取り入れるのも好きです。オリジナル作ではニコニコ動画から始まり文化庁メディア芸術祭入選まで果たした「アホな走り集」が有名。
url. 0m2.jp/

hnnhn] 大学卒業後データセンターでの勤務を経て2012年よりフリーのWebコーダー。クラウドファンディングサイト「PICNIC 」のサーバーサイド開発や、「マルチネガールズウェーブ」Web版のコーディングなど、主にインターネットカルチャー関連のサイトコーディングを行っている。 url. hnnhn.com/

m7kenji] 2003年、携帯待受サイトの開設をきっかけに多数のグラフィックやFlash作品を制作。近年はスマートフォン向けアプリ「ロクジョーヒトマ」「Ringo 」「BUGTRONICA」をリリース。他、DOTAMA×USK『通勤ソングに栄光を』のMVを制作。
url. m7kenji.com/



前へ12345|6





本記事は『MdN』2014年2月号(vol.238)からの転載です。

M236_cover

紙版はこちら

amazon.co.jpで買う 楽天で買う

電子版はこちら

Amazon Kindleで買う マガストアで買う
雑誌オンラインで買う


そのほかには下記のような記事が掲載されています。
(▼クリックすると画像が大きく表示されます)

特集のすべての記事は誌面でお読みになれます。
月刊『MdN』掲載記事号の情報はこちら!

■そのほかの月刊『MdN』からの転載記事
印刷の魔法をもう一度信じてみる?」(『MdN』2013年12月号より)
新しいイラストシーンを作ったイラストレーターたち」(『MdN』2013年11月号より)
マンガのタイトルデザインの考え方」(『MdN』2013年10月号より)
マンガとアニメのグラフィックデザイン」(『MdN』2013年9月号より)
フォトディレクションがうまくいく方法」(『MdN』2013年8月号より)
WEBデザイン&電子書籍の新常識」(『MdN』2013年7月号より)


twitter facebook このエントリーをはてなブックマークに追加 RSS

この連載のすべての記事

アクセスランキング

9.14-9.20

MdN BOOKS|デザインの本

Pick upコンテンツ

現在