JWDA通信 10年後のWEB業界でも役立つ情報を届ける

マイノリティ・リポートの世界がやってくる

ページ

マイノリティ・リポートの世界がやってくる

技術の進化にともない、表現の枠も広がっています。クリエイティブを担うクリエイターとして、それらをキャッチアップ、ミックスして新たな可能性を見出すことが必要になっています。今回は、ブラウザの枠を超えたインタラクティブ技術が拡がりをみせるなか、ジェスチャーコントロールの分野に着目し、ハンド・トラッキング機能を用いたメディアアートプロジェクトについてご紹介します。

CASE4. メディアアート
Kinectのハックによるハンド・トラッキング

ポイント

  • 既存メディアの枠組みを乗り越えたインタラクションと芸術的表現の追求。
  • 技術ミックス(技術の枠にもとらわれない。様々な技術を日々追求して追究する)。

それぞれを詳細に解説していきましょう。

  • 手や指の動きに対して操作感を持たせた表現

    「マウス・キーボード」の操作から離れ、映画「マイノリティ・リポート」の世界に登場したインターフェイスのように、手や指の動きに対して操作感を持たせた表現をつくりあげることを「動き」の部分ゴールとし、インターフェイスデザインは、エントランスの雰囲気に合うよう、モノクロ・墨の表現を軸におこしていきました。

    インターフェイスデザインの参考動画
  • 動体検知の採用

    人の動きに合わせたインタラクションを付与するために、Webカメラなどに映る動くものをプログラムで検知する技術、「動体検知」を採用しました。具体的には、指などの細かな部分に対してインタラクションを付与するために、インタラクティブデザインやメディアアート制作のフレームワーク「openFrameworks」で紹介されているものも参考に構築していきました。

    動体検知を実現するための基底となる技術として、「OpenCV」というIntel社で開発された画像解析用のC言語ライブラリが採用されています。今回は社内では初の試みとなるので、比較的さくっと制作できるように、ある程度技術情報やリソースが存在する言語(C++)やフレームワーク(openFrameworks)を選定しました。

    動体検知を利用すれば、ヒゲもじゃでもファンシーな魔法使いに変身。
    http://www.openframeworks.cc/gallery/secret-powers
  • 表現部分はAIR2.0(Flash)に、動体検知部分はopenFrameworksで処理を分岐

    開発の前段階の技術検証の段階で、墨の表現をopenFrameworksで再現したものが予想以上に実行速度が低下してしまったためopenFrameworksで実装することをやめ、表現部分はAIR2.0(Flash)に、動体検知部分をopenFrameworksに、と処理を分けることにしました(openFrameworks側で検知した指や拳の座標データをAIRに送り、受け取った座標データを基にインタラクションを加えるようにして連携を取るようにしています)。

    こうすることのメリットとして、フレームレートを比較的高く保つことが可能になったことがあります。ですが弊害として、1つのWebカメラを2つのアプリケーションから使うことになるため、それを可能にする仲介的なアプリケーションが必要になり工数が増えてしまいました。

    連携部分に関しては、ブログ「blog.alumican.net」の記事を参考にさせていただきました。

  • 完成へ

    開発当時は、上述のように技術的な制約があり段階をいくつも経ていないと目指した表現はできなかったのですが、Microsoft社がXbox 360用に開発した、Kinectが発売されてからはこういったインターフェイスの実装がより簡潔にできつつあります。

    Kinectは、通常のカメラの他に赤外線センサーを持ったXbox 360用のゲームデバイスとして開発されたものです。赤外線センサーを使うことで、カメラから対象までの距離を測ることができ、その距離の差から対象の輪郭を正確に割り出すことが可能になっています。距離と合わせて処理することで様々なインタラクションを付与することができます。

    もとはゲーム機用デバイスのKinectですが、オープンソースのドライバが公開されたことで、世界中のクリエイターが様々なクリエイティブを発表しています。たとえば、Kinectを使ったブラウザインターフェイスや、マイノリティ・レポートに登場するようなインターフェイスへのチャレンジを紹介した動画もありますので、興味のある方はご覧になってみてください。

まとめ:「既存のもの」を超える試みに挑戦しよう!

これまで紹介してきた、PCや既存のメディアを飛び越えたり融合させたりしたインタラクティブな表現というのは、今後どんどん増えていくと思われます。こういった、企業内で先進的な技術やデザインを時代に先んじて研究していくことは企業のブランドを高めていくためにも有効ですし、何より創っていく工程が楽しいのでおすすめです! 現在は次のような作品にも取り組んでいます。

Webカメラを使ったタイポグラフィティ
サウンドビジュアライザー

コミュニケーションデザインの進化に終わりはない!

Webの世界ではこれからも、もっと新しい表現を生みだすチャンスが生まれてくるでしょう。クリエイターとして常に新しい可能性にチャレンジし、何度も何年も試作を重ねつづけることが、10年先に大きな結果の違いを生むことになるのではないでしょうか。

インターフェイスデザインとテクノロジーを融合した新たな付加価値を創造と、既成の枠にとらわれずに、Webに関わるすべてのコミュニケーションをデザインするべく、徹底したモノづくりと研究を行って、ブレイクスルーしていきましょう!

ページ

一般社団法人 日本WEBデザイナーズ協会

一般社団法人 日本WEBデザイナーズ協会
(JWDA=Japan Web Designers Assiciation)

日本WEBデザイナーズ協会(JWDA)は、WEBデザイナー市場価値向上を図り、WEBデザイン産業の育成・振興・発展を推進することを目的とする非営利団体です。JWDAは、「WEB」デザインに従事する団体や個人(リサーチ、マーケティング、企画立案、インターフェースデザイン・設計、広告デザイン、WEBデザイン、動画制作、システムインテグレーション、ビジネススキーム立案等に関わる稼業全てを指す)間の技術的な情報共有、社会的な地位向上、そして日本の産業の活性化に努めていきたいと考えています。

  • 2009-2010 JWDA スローガン
    人と人をつなぐ そして2011年へ
  • Mission(協会使命) インターネットを利用した仕組み、サービスの制作に従事する団体、個人間の技術的な情報共有、社会的な地位向上、そして産業の活性化に努める。
  • Principles(理念)
    優れたWEBデザインは、常に形状の審美性と機能的な操作性の二つの調和によって成り立ちます。私たちは製作者相互の最高の技術の賜物であり結晶であるWEBデザインを通して、日本の産業的・文化的発展に寄与する事を第一と考えます。
  • Vision(展望)
    WEB制作者、業界間の発展と親和に努め、日本のWEB業界における中心的な存在になる。
この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

今日の用語

アンカーテキスト
HTMLでページからページへジャンプする「リンク」に使われるテキスト(文字列 ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]