blog.bouze.me

TDC賞もらいました

Posted on 2014.04.02 by bouze

去年公開した「のらもじ発見プロジェクト」がTokyo TDCのRGB賞を受賞しました。それにともない4/4からギンザ・グラフィック・ギャラリーにて他の受賞作品と並んで展示されます。お近くにお立ち寄りの際はご覧ください。

一応美大のグラフィックデザイン学科の出身なので、TDCやギンザグラフィックギャラリーにはいつかはあそこで…的な憧れを抱いてたのでとても嬉しい。

授賞式では学生の頃から作品を見てたような大先輩や巨匠に挨拶させてもらう機会があり、いろいろお褒めの言葉をもらえたのはとても光栄だった。

2013年よかったランキング – ウェブサイト編

Posted on 2014.01.14 by bouze

超主観で2013年に出会ったものをランキングで振り返ってみるテスト2本目、ウェブサイト編。

その他のよかったランキング:

2013年よかったランキング – 映画編

#8 The Infinite Jukebox
http://labs.echonest.com/Uploader/index.html

アップロードした音楽のフレーズを解析して、似たフレーズから似たフレーズにスキップさせ続けることで永遠に終わらない音楽を作ってくれるサービス。
(例： Around The World / Daft Punk)

#7 Borjomi
http://thedeepestsite.com/

一昨年ぐらいから縦長1ページで見せるサイトが急増してスクロールに連動したアニメーションっていう演出にみんなが飽きだしたところに、だったら死ぬまでスクロールしてみろと言わんばかりに登場したサイト。世界中でマウスホイールを壊したに違いない。

#6 Filmarks
http://filmarks.com/

ソーシャル映画レビューサービス。今やってる映画のキャッチアップは当然のことながら、あの人やこの人が高く評価してる映画とかを発見できる。こんな感じで観終わった映画の管理もできるので、最近のおすすめは？とか聞かれた時にサッと調べられるのも便利。

#5 The Secret Door
http://www.safestyle-windows.co.uk/secret-door/

どこでもドアのアイデアを違和感なくウェブに定着しててうまい。飛び先を屋外でなく室内にすることでドアをくぐった後の風景にバリエーションを感じさせるようにしてるのもうまい。

#4 Do Not Touch
http://donottouch.org/

時間を無視してひとつのコンテンツを大勢で楽しめるニコニコ動画的なライブ体験をマウスを動かす操作だけで成立させていてとても素敵。

#3 Cookie Clicker
http://orteil.dashnet.org/cookieclicker/

ゲームにおけるレベル上げとかメダル落としで得られるスコアアップの快感をこれでもかというぐらい短時間に得られる超インフレゲーム。ゲームの内容同様、一気にバズって一気に収束していく様が感慨深かった。

#2 Money Forward
https://moneyforward.com/

銀行、クレジットカード、携帯電話、Tポイントのオンラインアカウントを登録すると、何もしなくても自動で毎月の収支を完璧に網羅したおこづかい帳をつけてくれるサービス。「n-clickを1-clickにすると商売になる。1-clickを0-clickにすると革命になる」という名言があるけどそれを地でいったウェブサービス。革命。

#1 Pharrell Williams – Happy
http://24hoursofhappy.com/

いうなれば現代版のUNIQLOCK。24時間PVというアイデアも良いし、24 hours of happyっていうドメインも良いし、曲も良いし、出てくる人達のノリも良いし、もう全部良い。技術的にもcanvas、svg、video、pushstateとかモダンな実装で隙がない。

創造の狂気ウォルト・ディズニー

Posted on 2014.01.14 by bouze

以前このブログでも書いた「のめりこませる技術」の中でディズニーランドを取り上げる節があって、それを読んだ時に自分がウォルト・ディズニーについてほとんど知らない事に気づいたので、この際できるだけ詳細に書かれた本を読んで勉強しとこうと思い、探してみたところこの本を見つけた。

この本はウォルト・ディズニーが生まれてから幼少期を経てアニメーターを志し、ディズニースタジオを立ち上げ、ミッキーマウスを生み、白雪姫をヒットさせ、ディズニーランドを成功させ、次のプロジェクトを進めるさなかに亡くなるまでの生涯が600ページにわたって書かれてる。

ウォルト・ディズニーに関する出版物は発売前にディズニー社の検閲があるそうなんだけど、この本はディズニー社の協力を得ながらも検閲を受けず出版されたらしい。そのせいか、ネガティブな話も結構書かれているので、一般的な偉人のイメージではなく、一人間としてのウォルト・ディズニーのイメージが掴めた気がする。

現代に色濃く影響を残す巨人の伝記を読むのは学びが多いのでぜひ。

2013年よかったランキング – 映画編

Posted on 2013.12.03 by bouze

超主観で2013年に出会ったものをランキングで振り返ってみるテスト1本目、映画編。
※ネタバレを少し含むので注意されたし。

その他のよかったランキング:

2013年よかったランキング – ウェブサイト編

#5 クロニクル

ある出来事をきっかけに超能力を身につけた主人公のドキュメンタリー、という設定の作品。
倒すべき敵が登場したり、誰かを救ったりみたいなこの手の作品にありがちな展開じゃなく、超能力に翻弄される人間の生活が淡々と描かれてく。
この手の映画には珍しくリアリティがあって、全体としてあんまり見たことのない作品になってる。

Amazon.co.jp: クロニクル[DVD]

#4 桐島、部活やめるってよ

とある高校の何気ない日常を舞台にした前半部分。ところが桐島が部活を辞めるっていう出来事をきっかけにこれまでの日常が崩壊しはじめる。
ありがちな学園ドラマと思わせときながら、後半からのドミノ倒し的な展開で、学校の中の見えない食物連鎖のようなシステムを露呈させていく手法がすごかった。

Amazon.co.jp: 桐島、部活やめるってよ(DVD2枚組)

#3 板尾創路の脱獄王

ストーリーは長いフリとオチというシンプルな構造。オチに向かって繰り返される脱獄のループ、脱獄のための仕込みを繰り返すループ。シンプルな構造にこの二つのループで厚みを持たせることで、グッと引き込むっていう作りがすごい。

Amazon.co.jp: 板尾創路の脱獄王[DVD]

#2 シュガー・ラッシュ

レトロゲームの抑揚のないモーションを、ディズニー的解釈によって脚色されたアニメーションがものすごく気持ちよくて、ストーリーよりも表現が印象に残る作品だった。

Amazon.co.jp: シュガー・ラッシュ [DVD]

#1 ドッグヴィル

この作品は建物が床に描かれた線のみで表現されてるので、壁がカメラを遮ることがない。だから村で起こる出来事は常に同時進行的に写される。
建物の中でショッキングな事件が起こるシーンでも、背景ではほのぼのと日常をおくる村人の様子が同時に描かれる。この非日常と日常のコントラストのせいで作品の異常性が増長されてる。この特異な表現がちゃんと作品のテーマと結び付いて、すごいインパクトのある作品になってた。

Amazon.co.jp: ドッグヴィルプレミアム・エディション [DVD]

のらもじ発見プロジェクト

Posted on 2013.12.02 by bouze

のらもじ発見プロジェクトというサイトを公開しました。このプロジェクトは学生の頃にネットで知り合ったりんたろうさんと、そのお友達若岡さんという謎の繋がりの3人で今年の2月ごろからひっそり進めていたプロジェクトです。

ざっくりいうと、街で見かけたデザインされてないけど味のあるイケてる文字（のらもじ）をデジタルフォント化してドネーションウェアとして配布し、その利益を文字の持ち主に還元しようというプロジェクトです。（詳細はこのページを参照のこと）個人的にはトップのタイプテスターがいい塩梅に仕上がったので試してもらえればと。

先週末に公開したところ公開数時間でホッテントリ入り、3日で500ブクマ、1200ツイート、7000いいね！と想像していたよりも反響が大きく、時間をかけてやってよかったなぁと思ったりしてます。色々とお手伝いしていただいた方々本当にありがとうございました。
プロジェクトとしては始まったばかりで気が抜けないですが、まずは無事公開できてよかったぁー。

そんな感じ。

Continue reading →

WebWorkerで爆速プリロード

Posted on 2013.10.30 by bouze

HTMLで画像とか動画とかのリソースをページが表示される前にプリロードするパターンあるじゃないですか、あれでちょっと思いついたのがあるんでメモしときます。

以前やったPOOL inc.のトップページ、例のごとく最初にビデオをある程度プリロードしてから再生してるんですが、本数が40本程あって全部の読み込みを待つのさすがにダルいよねってことで2, 3本読み込んだら再生をはじめて、残りのビデオは裏で読みってやってみたんですが、この読み込みの処理がなかなかヘビーでして、再生してるビデオがコマ落ちしてまともに再生されないんです。

どうしよう、どうしようということで読み込み処理をビデオの再生とは別のスレッドにしてみたんです。HTML5のAPI、Web Workerで。すると狙いどおりビデオがコマ落ちすることなくバックグラウンドで読み込みができるようになりました。40本同時に並列でダウンロードしても処理落ちせず爆速です！（Workerが使えない環境の場合は同一スレッドで、しかもビデオの再生を邪魔しないように全部のビデオを読み込むのを待つようにしてるので段違いに遅い）

大量の画像をプリロードしてからはじまるサイトとかでもWorkerを使って分散すればずいぶん高速化できるんじゃないでしょうか。

ソースはこんな感じです。簡略化してるけど。main.coffeeから呼び出したPreload.coffeeまでが最初のスレッドで、Preload.coffeeがload.coffeeを別スレッドで実行してつつ読み込みが終わるのを待ってるという流れ。

※コード内のdefineはrequire.jsを使ってる想定

のめりこませる技術

Posted on 2013.10.15 by bouze

最近移動中に読んでた「のめりこませる技術」が面白かった。

この本はいろいろなメディアやコンテンツが作られた背景を追いながら、人がなぜ物語にのめりこむのかを考察していくという内容。

映画が主流なメディアだった時代の名作から、ソーシャルメディアが台頭し始めた現代の名作を例にあげつつ、どのようにして人がその物語に没入していくのか、そして時代とともにその仕掛けがどのように変化してきているのかを解説している。

400ページを越える本書の中で取り上げられる事例は、スターウォーズやトロン、マトリックス、アバター、ダークナイト、トロン・レガシー、ディズニー、ロスト、スタートレックなどの映画やドラマから、Subservient Chickenやオールドスパイス、AXE、Nike+などの広告、そしてPongやシムピープル、メタルギア・ソリッド、グランド・セフト・オートなどのゲーム、さらにはBloggerやYouTube、Twitterなどのネットメディアまで様々。

マスメディアからソーシャルメディアに主戦場が移った近現代のメディアの変遷を、普段自分の持っている視点とは異なる「物語を作る」という少し大局的な視点から読めておもしろかった。

Amazon.co.jp: のめりこませる技術 ─誰が物語を操るのか: フランク・ローズ, 島内哲朗: 本

色のない世界

Posted on 2013.10.15 by bouze

「ない世界」展にて展示された「色のない世界」という作品を制作しました。ウェブをゆっくりと白黒化させながら巡回する作品です。自動巡回機能をなくしたChromeの拡張機能版はこちらからダウンロードすることができます。

Planning + Art Direction: 阿部洋介
Design + Program: 西村斉輝

POOL inc.

Posted on 2013.10.15 by bouze

お仕事でPOOL inc.のポートフォリオサイトを制作しました。トップページではお馴染み岡崎さんのPOOLのLOOP映像が流れます。クレジット等、詳細はこちらで。

僕パートで言うと制作期間の6, 7割を文字がもじゃもじゃ動くエフェクトを作ってたわけですが、このへんの実装について。

当初は今どきっぽくcanvasで実装しようと思っていたのですが、文字を塗りつぶすほどの量の線をまともなフレームレートでアニメーションさせることができず、リアルタイムに描画することを諦めプリレンダリング路線に切り替えました。

アニメーションをプリレンダリングするために、モノクロの画像をほりこむとアニメーションが1コマづつ縦に並んだスプライト画像（こういうやつ）と、このスプライト画像のアニメーション兼配置用のsassが書きだされるジェネレーターをこしらえました。そしてサイト上ではこのスプライト画像のbackground-positionをjsで操作してアニメーションさせたりマウスオーバーに反応させたりしています。

↓もじゃもじゃジェネレーター