トップ >> 2006/12

リンクエフェクト系シャバスクリプトライブラリ

■■Bookmark■javascript■■ヤンプー

http://oitake.jugem.jp/

いろいろ面白いジャバスクリプトをダウンロードできる個人実験ブログです。
このひといろいろ作ってるみたいですが、まずはcsvを表の形を保ったまま画像にするアプリケーションでとか作ってるみたいです。線のいろは文字の色、書き出し形式などいろいろ設定できます。


リンクをオーバーすると1文字ずつばらばらにぶるぶるするエフェクトです。


ページのレイアウトがばらばらに爆発するスクリプトです。
好きなサイトに組み込んで、むしゃくしゃしたときに使うといいようです。


ピンボールです。

2ちゃんねるのスレッド解析ビューアー

■■Bookmark■application■■ヤンプー

Oreyon

2ちゃんねるのスレッドをチャート化するアプリケーションです。
スレッドってようは、BBSですよね。誰が誰に返事したかを線でつなげてチャートにしたり、投稿時間の間隔を計算して、盛り上がっているかどうかなどを自動でビジュアル的に表示するものです。
2ちゃんねるをよくみるひとには便利なツールのようです。

画像編集ウェブアプリケーション

■■ヤンプー

pixer.us online photo editor

ウェブ上で回転・反転・拡大縮小・トリミング・明度・コントラスト・ぼかしなどができてしまいます

フォルダ内のファイル名をcsvに書き出す

■application■■ヤンプー

FileInfoList

フォルダ内にアルファイル名をcsvに書き出すアプレイケーションです。フラッシュで画像を大量に読み込んでサムネイルのリスト化するときなどに便利です。更新日時なども読み込めるため、これがあると、デジカメのファイルを読み込んで、撮影日時も表示するフラッシュもつくることができます。

リネームツール

■application■■ヤンプー

FileNameModify

フォルダ内のファイル名を一発で置き換えしたり数字順の名前いにしたりできるリネームアプリケーションです。いっぱいファイルを複製した後に、ファイル名の綴りが間違ってたりしたときなど、あると便利です。

CM映像制作会社サイト

■■Bookmark■flash■■ヤンプー

LOBO

グラフィック・3Dおりまぜていて、映像素材のクオリティ-も高く、シーンの移り変わりにも遊びが多く含まれているすごい映像・CMを制作している海外の制作会社がありました。映像それぞれ雰囲気違っててストーリー仕立てのもあるし、見てて面白いですよ。

美人双子モデルアンドフォトグラファー?

■■Bookmark■■ヤンプー

Rebekka Guðleifsdóttir

かっこいい…ですねぇー。ただでさえ上手なのに、双子ならではの遊びが入った手法で撮影してある作品もちらほら見られます。写真撮るのが楽しくて生活の一部なかんじがつたわってきますねー。


self-portraitsのコンテンツなんかみてみるとわかるとおもいますが、双子ですね。合成でなければ。きれいな人です(なんか筋肉質ですが)。それからscenery。風景写真の色味やパースの迫力もすごいです。雪の風景が多いので北欧とかなんでしょうか?


ブログのaboutをみたらこの人学生らしいです。有望ですねー。すごー。

My name is Long Nguyen. I am very happy to have been able to make this website for Rebekka Guðleifsdóttir. Since I am only a student, I am very grateful for this opportunity. I have written a post on how this website got to the way it is on my own blog.
I guess this text will be here until Rebekka decides to change it.

私の名前はLong Nguyenです。 Rebekka Guðleifsdóttirのためのこのウェブサイト(leifsdとoacute)をttirに喜んですることができました。 学生であるにすぎないので、私はこの機会に非常に感謝しています。 このウェブサイトが、どうウェブログを作りそれが一人である方法に始めたかに関して私はポストを書きました。
私は、Rebekkaが、それを変えると決めるまで本稿がここにあると推測します。

エヴァンゲリオン + スプー

■■Bookmark■■ヤンプー


YouTubeがはやりだして個人の映像作品をみれる機会がふえました。
この作品は、10年ほど前のSFアニメーションの代表的な作品エヴァンゲリオンとNHK教育のスプー絵描き歌でおねいさんが絵が下手でネットで大盛り上がりして生まれたキャラクターとを混ぜ込んだオリジナルアニメです。このパロディームービーも音とのフィット感や作画、アニメーションの手法の引き出しなど上手です。

いさぎいいらくがき

■■Bookmark■graphical■■ヤンプー


ホワイトボードにイラストを描いては、一部消して別の絵にしていくことを繰り返している工程をムービーにしている作品です。


描いては消し描いては消しいさぎよいですね。


長ーい紙にどんどん書いていったものを戻りながら見たもの。

くろこでデジタル制作したムービーっぽい表現

■■Bookmark■■ヤンプー

EyeballNYC

黒壁の前で、全身黒タイツの人が、白いものをって動す撮影をする。
デジタルで作るときの映像表現をいろいろアナログで撮影してためしている映像などがあるサイトです。
EYE BALL NBCって最初にタイトルが出るムービーがあるんですが、EYE BALL NBCそれぞれをくろこがもってタイトルが次第に出たようにみせています。3単語をもっているくろこはそれぞれ立ち位置が違っているのに、カメラから見て持っている単語の大きさはそろっています。遠近も考慮して手前の人は小さい物を持つようにしたりしてるのが面白いなーとおもいました。

シチュエーション別ドラマコンテンツ

■■Bookmark■flash■■ヤンプー

SUBARU - LEGACY

レガシーに乗るような大人の男性と女性の2つの入り口から展開する、写真と字幕とナレーションとBGMで構成されているスライドショー風シチュエーションドラマコンテンツです。昔やったマツダテレマティックスみたいなかんじですね。
女性が視点を選ぶと
「ようするにばらんすがいいってこと」
「ちょっとした横風でもぶらついたりしないところがいい」
などレガシーのユーザー層からちょっと外れた人を取り込む形のストーリーになってます。


全体的にレガシーの売り出したいポイントをうまくユーザー視点での語りでまとめていて、伝わってきます。

時間軸バーの操作で巻き戻しなどをしたときに(見たい時間のあたりをクリック)スムーズに巻き戻されるのがきもちいい動きです。

描いた線を地面にしてかわいいキャラが滑り出す

■■Bookmark■flash■game■■ヤンプー

Line Rider - beta by fsk on deviantART

線画でラクガキできます。
ラクガキした線が地面になって、ソリに乗ったキャラが滑り降りるフラッシュです。
シンプルなつくりですが、バウンドの物理計算がしっかりしてるし、キャラクターの手、足、マフラーも物理計算されてるデザインになってるのでかわいさとプログラムが同居してるいいバランスのフラッシュだなーと思いました。

アーティスト 加藤彩

■■Bookmark■graphical■■ヤンプー

cheval noir

世界が確立してる人です。
和風っぽい画風で海外で活躍してるみたいですね。


CM、ミュージックビデオ、洋書の挿絵、iPodやTシャツ、ディスプレイなどいろいろな分野に参加しているみたいです。

コミックグロ系イラスト

■■Bookmark■graphical■■ヤンプー

sam weber illustration

質感と立体視が上手ですね。

不思議系アート画

■■Bookmark■graphical■■ヤンプー

Jacek_ok

グリム童話みたいな不思議なアート画がたくさんあります。

フラクタル系グラフィカルモーション クリエイターラボ

■■Bookmark■flash■■ヤンプー

Vincent Vella - Interactive director - Paris, France

フラッシュのスクリプトを使ったグラフィック表現をいろいろやってるひとみたいです。


桃源郷みたいなの。


くるくる回る空間にブラシでらくがき。


ビットマップを3次元に。


オブジェクト同士の精密な物理判定

音の劣化しないCD

■■Bookmark■■ヤンプー

夢のCD:ガラス製「音」劣化しない 1枚9万8700円-話題:MSN毎日インタラクティブ

CDの劣化ってのは、物理的にゆがんだり傷ついたりして光の屈折がずれてデータちゃんと読めなくなる状態だったんですねー。

海外の面白い広告表現作品アーカイブ的ブログ

■■Bookmark■design archive■■ヤンプー

I believe in adv

イタリアなど海外の広告が毎日たくさんアップされる広告アーカイブブログです。
すごい刺激になるものなどたくさんあります。
いいなぁと思ったものを[続き]にまとめてみました。
時間あるときにみてみてください。


服をたたんでるだけですけど、動物に見えます。


髭も服の模様と同じになってます。



靴が液体になって(?)軌跡が見えて動きがある作品ですね。


人が集まってビンの形に。島がビンの形。


目玉焼きがビンの形。プールがビンの形。


スキー場がビンの形。グラフがビンの形に。


あおりアングルで靴が強調されてます。


水掻きが…。



アウディーの広告とCM。人体の一部の形をしたメカニカルなイラスト。


手をつないでいるようにみてる。


ボディーペイントでテキストを描いている。服着てるように見える。


なんか一軒だけ家がでっかい。


目の錯角みたい。


魚・肉に見えるようにもりつけた野菜。


ダイエット水?


いらないものを消す。


カーンのキーパーセーブ姿。


ナチスのロゴがサッカー?


バイクの部品がバラバラに散らかっているように見えて、人に顔にも見えます。


目つき悪い。


そこに停止線があったら事故りそう。


飲酒運転防止の広告?


脂肪搾り。


テトリス。


ブドウのふさが動物にみえる。


ジーンズの切れ端が顔に見える。


手長い。


横断歩道で交通事故とかで棺おけになる。


女性ランナーが毛むくじゃらに。


てがでかい。


フォトショップの進化。


鮫の口めちゃ泳ぐのは速そう。



PS2をプレイしている人の頭の中。


飲んだら豚鼻。


ちぎれる名詞。


誘っている表現?


実際置いてある場所を撮影してる?


ナイキは頑丈ウエア。


ロックをクラシックに変換。なかなか見れない状況を再現。


くまかわいい。


動物にも愛されてる。


寒さよりおいしさ。


自己中なおもしおさ。


意味のあるシンプルさ。


シフトチェンジできない。


飲んだら声変わる。


頑丈なジーンズ。


見惚れるほどきれいな車。


日常生活の違和感に気づくとそれは危機を予告するものだった。


気づくとスピード違反したことに…。


めちゃ重さに耐えれる靴。


iPod nano


商品のレアな使い方。ストレートに表現されてるかなと思います。


コカコーラを作る裏方の人たちのが、わが子のように1本1本丁寧に作っているイメージが伝わってきます。

動く写真重視リッチコンテンツで困ること

■■Bookmark■flash■■ヤンプー

COEDO

写真1枚で勝負するようなビジュアルをウェブで作るとき、しかもナビゲーションを写真の上に文字だけおきたいとき。
しかも、写真が毎回同じものではなくて、スライドショー的に代わっていったりランダムで変化したりする場合は特に、ナビゲーションの文字を黒系にするか白にするか…どっちにしても見えなくなる箇所がでる瞬間があったりしてしまいます。ふちつければいいんですが、リッチ感ゴージャス感シンプル感をだしたい場合は、意図に反した加工になってしまいます。
印刷物や静止画でデザインする場合はというと、背景の色を考慮して1文字ずつ色を白黒変えられるんですが、背景が動的に変化する場合それはをやるのは難しくなります。


このCOEDOでは、白黒の濃淡がはっきりした写真にメニュー文字が乗っかっていてしかも、スライドショー的な動きになっています。でもちゃんと文字が読めるのはなぜか…。
よくみたらわかりますが、PhotoShopにもある機能"差の絶対値"か"除外"(Flash8からの機能)を使って色を透かして反転るすことで、文字の色を、白地のあたりは黒、黒字のあたりは白になるようにしてはっきり読める文字にしているようです。
使えるやり方ですね。

UNIQLO + 中村勇吾 + 佐藤柏可士和 + 片山正通

■■Bookmark■flash■■ヤンプー

Uniqlo.com

最近ユニクロが大掛かりに動いたようで、ウェブの視点から見てみると、サイトリニューアルで面白い仕組みが公開されているので紹介しようとおもいます。
画面右の3つのメニューのうち、右上のUNIQLO EXPLORER!というコンテンツをクリックしていくと…



クリックしたあたりから、しだいに、背景写真がモザイク化して、1モザイクブロックの色に近い商品のサムネイルが埋め込まれていきます。


モザイクひとつずつが商品なので、選択すると、値段が見えたりする詳細画面になります。
そこ画面をクリックすると…



その商品の画像がモザイク化して、またたくさんの商品サムネイルリストになります。
これ永遠に続くわけです。
この仕組みはいままで、アート作品、実験的なインタラクティブ作品などではよくみた手法ですが、ブランディングの向上を目的としたステップアップのタイミングでのリニューアルで、この手法を使うのは大胆だなー、さすが、ネームバリューがあるクリエイターが集まったプロジェクトなんだなーって思います。


ちなみに、当然かもしれませんがちゃんと普通にカテゴリから商品リストを選んで商品にたどり着く導線もよういしてあります。


細かい部分でこってるなと思ったのは、ボタンのマウスオーバーの動き。
マウスオーバーすると、背景色が黒が赤になるのですが、毎回同じ動きではなくて、マウスカーソルが入ってきた方向から赤くなっていく処理が組み込まれてます。




UNIQLO PAPERというコンテンツもあって、ウェブで雑誌を公開するかんじですね。


英語版はこんなかんじ。
ウェブカメラ連動型のどうてきなこのかもしれません。そうだったらけっこうアート的ですね。


日本ドメインサイトはこんなかんじ。
こっちも、けっこう遊び入ってますね。

フリーフォントまとめサイト

■■Bookmark■■ヤンプー

Neat fonts - Discover Free fonts from all over the web

英語フォントたくさんあります。
サイトデザインを始めるときに、自分が持っているフォントの中にある今回使う英語フォントをどれ系にするか考えたりしますが、そのタイミングで、このサイトでフォント選んで使うフォントを決めてダウンロードするほうが、案件ごとのデザインにバリエーションが出るかもしれませんね。
もうひとつ…


Free Fonts by Category - SearchFreeFonts.com

フォントの雰囲気をカテゴリに分けてあるアーカイブサイト。
こんなのもあります。
便利ですね。