310design.tumblr

ネット上での出会い～ゴールインまでを端的に表した画像

slideshow.yugop.com 2007@多摩美術大学

bouze:

●導入

ものを作る時に既存の道具や手法を使うのではなく、
その道具や手法を作るところからはじめる。
例えば絵を描く場合に筆や絵具を考えるところからはじめるようなもの。

中村勇吾のWebデザインにおいて、
その筆や絵具に変わるものがコードやプログラムであり、
そこから組み立ててデザインやディレクションを行う。
そしてコードやプログラムの集積である技法、表現の展開を模索することで、
新しいデザインを生み出している。

●事例紹介

自分の仕事を大きく分けると、
・Reactive Field
・Kinetic Composition
・Co-Existence
・Live Form
・Nonverbal Communication
に大別できる。

□Reactive Field
…反応する場
…空間と作用

インタラクティブを作る場合、
そのユーザーのアクションに対する『反応』をデザインするのではなく、
『反応する場』をデザインしているという。

NERVOUS MATRIX
http://yugop.com/ver2/works/typospace3.html
この作品の場合はグリッド同士の関係が『場』として定義されており、
そこにユーザーの動作が加わることでグリッド同士が干渉しあうインタラクティブを作っている。

VAIONET100-STUDY
http://yugop.com/ver3/index.asp?id=27
宙に浮いている文字同士の関係が『場』として定義されている。
そこにユーザーが干渉することで予測しえない動きが生まれる。

BLACKRIBBON
http://yugop.com/ver3/index.asp?id=32
一見何が行われているのかわからないが、
触っているうちに『場』のルールを理解できるようになっている。
ルールを理解できるまでのタイムラグを生み出しているのは、
2D的に3Dを表現しているためである。

intentionallies
http://www.intentionallies.co.jp/
机の上を思わせるような空間を表現するために、
抽象化された物理的な法則を適用した『場』を作っている。
その法則によりカードを掴む位置によってカードが傾く角度が変わったり、
整列した時にカードがずれたりといった反応が生まれている。

NID GALLERY
http://www.nagaoka-id.ac.jp/gallery/gallery.html
左右の円の関係を設定することで、
片方の円の動作にもう片方の円反応するといった『場』ができている。

KAZE TO DESKTOP
http://scr.sc/products/kazetodesktop/
90°のルールに縛られたデスクトップに風を起こすことで、
『場』のルールに変化を与え新しい『場』を作る。

□Kinetic Composition
…物語/様相

動きによってムードやトーンを語る。

INDUSTRIOUS CLOCK
http://yugop.com/ver3/index.asp?id=3
CLOCKBLOCK1.0
http://yugop.com/ver3/index.asp?id=29
一般的な動きの多いモーショングラフィックスとは違って、
まったり見続けられる映像作品をコンセプトに作った。
Webを見ている状況ではそんなに映像で語らなくても単純な動作を見続けられるのではないかという仮説を実証。

amana :「伝える」から「伝わる」へ
http://amana.jp/company/tsutawaru/
上の2作品のような「なんか見てられる映像」を集積することで長く見続けられるようになった。
さらにバラバラの映像や写真を集積することで一つのトーンを形成している。

UNIQLO Soho NY Site
http://uniqlo.archive.tha.jp/teaser/index.html
一見規則的に整列して動いているように見えるが、
そこに時々バグのような動きを起こす要素を加えることで長く見れるように工夫してある。
製作時間は一週間。

UT
http://ut.uniqlo.com/
※講義ではティザーサイトが紹介されたが今は本サイトに変わっている。
圧倒的な物量感を次々に変化するTシャツの写真で表現。
製作時間は三日間。

□Co-Existence
…時間軸の再編成
…共存空間

TYPO-BEAT
http://yugop.com/ver2/
（上のサイトのSIGNから見れる）
通常の掲示板とうのフォームでは書き終わった結果のみが記録されるだけだが、
書いている過程も記録している。
さらにその過程と結果をセットで保存し共有できるようになっている。
こうすることでまったく違う場所、時間に存在した他者と時間を共有することができる。

ecotonoha[ エコトノハ ]
https://www.ecotonoha.com/index.html
開始してすぐに他者のリプレイを再生することで操作説明を行い、
単一のインターフェイスでhow to useを済ませている。

Honda Sweet Mission
http://sweet.tfm.co.jp/sweet.html
ニコニコ動画のはしり。
声に声でコメントをつけるというリアルなコミュニケーションを実現している。

□Live Form
…自動生成される形態
…データで駆動する表現

仕組みを作って後は成り行き任せにする。

ecotonoha[ エコトノハ ]
https://www.ecotonoha.com/index.html
初めはうまく木らしい形にならずプログラムを調整することで生まれる形をコントロールした。
これは都市計画における法律にあたり、
ルールが緩いと歌舞伎町のような混沌とした街が生まれ、
ルールを厳格にすると田園調布のような整然とした町が生まれる。
ecotonohaは直接形を作るのではなく、ルールで形を生み出している。

amaztype
http://amaztype.tha.jp/
入力されたキーワードの検索結果によってキーワードの文字を生み出すしくみ。
曰く世界初の金を生み出すタイポグラフィ。

Uniqlo.com
http://uniqlo.archive.tha.jp/us/index.html
ユニクロのデータベースにある画像データを利用して画像の集積から画像を作るフォトモザイクを作った。
この物量感でユニクロのもつ豊富なラインナップを表現した。

EYE-PROJECT
http://eye.kddi.com/
ユーザー投稿もので新しいものをという依頼で作った。
大勢の力で巨大なものを作る迫力を表現。

kashiwasato.com
http://kashiwasato.com/
SAMURAIの事務所内にある整然と並んだストレージのイメージ。
佐藤可士和がスライドショーツールとして使えるようなサイトを目指して作った。
プロトタイプの紹介。
グリッドで構成された文字オンリーのバージョン、
経済白書をイメージした文字＋円グラフのバージョン等。
円グラフのバージョンは中村勇吾イチオしだったが可士和の円嫌いが発覚した為ボツ。
さらにCMSの紹介。
アップされたグラフィックの色情報の自動抽出プログラムを採用したが可士和のチェックに敵わずボツ。
しかし個別のエントリー画面のサムネイルではこのプログラムが採用されている。

□Nonverbal Communication
…素朴なコミュニケーション
…言語に拠らない共感

CAMCAMTIME
公開終了
時計をベースにしたコミュニティー。
参加したくなり感を出さすために演出を施してある。
例えばある程度の匿名性を保つために動画の再生時間は1秒だけ。
one of themにならないために同時に再生される動画は一つ。

ecotonoha[ エコトノハ ]
https://www.ecotonoha.com/index.html
「いいことしているなぁ」と思わせると人はイタくなるからエコにまつわるコメントを強制しない。
投稿したメッセージが際立ち過ぎないように表示をギリギリに抑えている。

FFFFOUND!
http://ffffound.com/
ソーシャルブックマークの画像版。
気に入った画像に投票できるシステムによって作品のふるい分けを行っている。
この仕組みがいい画像を汲み取るろ過の作用を担っている。
さらに自分のポストした画像をクリップした人の総数を表示することでちょっとした達成感を与えている。
これらのシステムによって「いい物だけを投稿しろよ」というメッセージを暗に送っている。

□技法の展開

ある技法を多様に展開洗練していく。

ex) Pre Processing on Server
CAMCAMTIME、EYE-PROJECTといった膨大な演算処理を必要とするコンテンツはあらかじめサーバー側で演算を済ませておき、結果だけをユーザー側に表示している。
このPre Processing on Serverの技術はthaが世界でも進んでいて今なお洗練中である。