トップ >> 2008/07

ブックマーク式ニュースサイトに遊びインターフェイス

■■Bookmark■flash■■ヤンプー

Spectra Visual Newsreader msnbc.com

ビジュアルニュースリーダーだそうです。
ニュースデータをフラッシュが参照して、記事見出しを3Dテクスチャー化したり、ウェブカメラをエフェクト化した背景ビジュアルにして、動きがあったところからあふれ見出しがあふれ出てきたりとかわった動きを自動的に作り出しています。斬新さだけではなく、興味がった記事をブックマークしていったりできるようです。

かっこいいグラフィック

■■Bookmark■graphical■■ヤンプー

Decoy is Ryan Rothermel

クリエイターさんのポートフォリオサイト。センスすきです。

グラフィカルなアニメーションコンテポートフォリオ

■■Bookmark■graphical■■ヤンプー

KIMDULANEY.COM

ウェブデザインをしていて、写真ベーススッキリしたものをつくるのも好きなのですが、そうではなくオリジナリティーのあるグラフィックを混ぜ込んだデザインって、印象に残りますよね。デザインには、極力こういう要素もできる限りいれていきたいものです。

3Dテクスチャー地球儀

■■Bookmark■flash■■ヤンプー

Nike ACG - Sweetspots

3Dで掴んでまわせる地球儀。回転軸がひとつだったら、アニメーションを読み込んで作ってあるのかもしれませんが、これはドラッグできるのでテクスチャーちゃんと作ってあるようです。
スポットごとに番号アイコンがあり宇宙にに浮いていています。なので、地球に直に刺さっているよりも、わかりやすいですよね。かっこよくてわかりやすいサイトです。すごい。

あきさせない流動的な動き

■■Bookmark■flash■■ヤンプー

rhizomatiks co.,ltd. - 株式会社 ライゾマティクス

すごくシンプルに□と×の図形だけがフヨフヨ浮いています。シンプルなモチーフですが、動きがすごくいいです。規則正しくないからでしょうか飽きずにみてられます。カフェのスクリーンとかに流れてたらいいなーってかんじです。マウスに反応もしています。水槽に手を入れてかき混ぜた余韻のような演算のようです。

ぎざぎざデバイスフォントを滑らかにするためにフラッシュ

■■Bookmark■■ヤンプー

Mokuji:あなたのブログに目次をつけよう!

ブログを自動で解析して目次を作るサービス。
よく使われているキーワードを分析して、まとめなおしているようです。
結果ページでは、目次っぽさを出すために、見出しのテキスト部分はフラッシュになっていました。文字をだすだけのフラッシュ…。ぎざぎざフォントをぼかしてジャギーを消してアウトラインフォントに近いみためにするためのようです。かなりのこだわりようですね。

手書き文字認識

■■Bookmark■flash■■ヤンプー

BeInteractive! [巴さん - Flashで手書き文字認識]

手書きをでかかれた書き順やベクトルから文字を認識する仕組みをフラッシュで再現したもの。ひらがなオンリーのようでです。オープンソースのマッシュアップのようです。

フラッシュを通しての交流会

■■Bookmark■■ヤンプー

ごはんとFlash ~おいでやす京都~ presented by teraco

KAYAC主催で開催されたごはんとFLASHというイベントが広まり関西でも同じ名前でカフェイベントが開催されたようです。
同じ仕事をしている人達が集まるイベントってたのしいですね。勉強会とかではないようです。仲良くなれれば、教え合いや、仕事の流れも沢山生まれてくるものなのでしょう。
広島でもFLASHの仕事をしている人の交流が深まるようなイベントとかやったりもしますが、もっと盛り上げってやっていきていもんですね。京都ごはんとFLASHの場合、運営スタッフさんの10人でやっとられるんですねー。大きな規模だなぁー。

ダウンロード数をマップでビジュアル化

■■Bookmark■flash■■ヤンプー

Firefox 3 の灯 - 日本灯

FireFox3のダウンロード数をカウントしたデータをビジュアル的にリアルタイムに表示しているサイト。
ダウンロードした地域を割り出して、ダウンロードした瞬間に日本地図に光りが灯るというもの。都道府県別集計もしてあるようです。リアルなデータを自動的にビジュアル化してるのが面白いですね。GoogleAnalyticsのマップみたい。

シンプル+凝る

■■Bookmark■flash■■ヤンプー

OK! JAPAN

世界規模のセレブトレンド紙が日本上陸!…ということらしいです。
iTunesのジャケ選びの画面のようなシンプルでオシャレなフルフラッシュです。
シンプルなだけあってオーサリングは簡単な作りかなと思いきや、かなり凝ってつくってるっぽいです。
擬似的にアニメーションで作っちゃうわず、ちゃんと写真の座標は透視投影してるようです。さらに、カメラに角度がついたとき(時計を押したとき、最初写真が登場するとき)しかわからないんですが、面自体もbitmapData化して3Dテクスチャの表現にしているようです。3Dにしてもあんまり「3Dだー」ってわかる部分がないコンテンツですが、擬似的に済ませちゃわず、しっかり細かいところまでつくりこんでるサイトなんだろーなーと感じました。


PV映像がかなりエフェクトがきれいです。

動画カレンダーやシェイプ状の3Dで祭紹介サイト

■■Bookmark■flash■■ヤンプー

TENJIN MATSURI - A Journey to Osaka's Tradition

祭りに関わった人と日時が表になっていて、動画のサムネイルを並んでいます。
スムーズにスクロールして縦軸横軸の2重オーバーになっています。
マウスを動かすだけで感覚的に操作できてていいですねー。


祭りで動き回る神輿のルートをがみれます。シェイプで描画した3Dがサクサク動いています。カメラも動くし、神輿の三角形も動くし…。平面的に動いているものをカメラで3D状に見せています。でも本殿は立体的です。神輿の三角形はマウスオーバーすると、詳細を見ることができます。すごいサクサクですねー。

スライドショーベースの旅館紹介

■■Bookmark■flash■■ヤンプー

静観荘

光が満ちて切り替わるエフェクトのスライドショーの仕組みをベースに、湯・寝室・料理など全部フルサイズの綺麗な写真で紹介されています。前面に説明パーツなどがあるときは写真はぼやけていたりして、なかなか部屋の写真がみれないなんて状況になることのまりますが、それはそれで、想像が膨らんでいいのかもしれませんね。

フライトシミュレーション3D

■■Bookmark■flash■■ヤンプー

Electric Oyster

操縦はマウス。マウスカーソルを画面端に寄せれば寄せるほど曲がります。
地面と一定の高度を保ち、上下の操縦はできません。
雪山の山脈がでこぼこしてるので、高度は上がったり下がったりするので、操作はシンプルなのにそれっぽく体感できます。太陽の光の演出もきれいです。雪山が延々と続いているので、端と端が繋がってループになってるっぽいです。

しみこむイメージ

■■Bookmark■flash■■ヤンプー

ポカリスエット

青色が満たされていくコピーのエフェクトが新鮮でした。
元からコピーは見えているけど、次第に青くなっていく。
元から文字があるので、動きがあるのに読みやすいところが、なんか新鮮でした。
ハイスピードカメラ撮影もおもしろいですね。

穏やかな気持ちになってしまうなめらかオーサリング

■■Bookmark■flash■■ヤンプー

GRAND LIFE 平屋という選択。 - MyForest - 住友林業の家

子供が独立し夫婦水入らずで暮らすとき、平屋がいいよ!っていう提案がなされています。
ターゲットの年齢層がずいぶんと大人なためでしょうか、クリック可能・不可能の切り替え方や、写真のエフェクトなど、穏やかな気持ちでみれてしまうサイトです。ぜひBGM付きで観てみてください。


順番にふんわりマスクがかかりながらサムネイルが出てきます。なかなかサクサク次ぎへ進められないのですが、エフェクトが綺麗なので、ストレスは感じません。


写真ベースのサイトですが、図やイラストも豊富に使っていて結構情報量があって見ごたえがあるサイトですね。


生活シーンに人が出てこないのは主観目線にしたいからでしょうか。
たしかに、自分の生活に置き換えて想像しやすそうです。


とにかくいろんな写真が出てきますが、出るときも消えるときもしっかりエフェクトとマスクがかかっていて細かくシームレスに動くようになっています。静止画でみると、シンプルすぎに見えますが、実際みるとかなりきれいです。

スポーツウェアのカッコイイプロモーションムービー

■■ヤンプー

Lacoste 75th anniversary - Let's reinvent the game

すごい迫力のムービーです。
サイトタイトルは、75周年祝いにさぁ、ゲームを考案しなおしましょう。ってかんじみたいですが、これは、近未来のテニス?弾道を予測したりスマッシュのバウンドの力を測定したりすごく高く飛んだりしてます。75周年のポロシャツメーカーラコステのサイトのようです。古いイメージになのかどうかわかりませんが、そういったブランドイメージを払拭したい意味で作られてるんでしょうか?


画面のサイズを大・小・フルスクリーンと選べます。

ダウンロードコンテンツでは、壁紙、スクリーンセーバーだけじゃなくて、
iPod、iPone、PSP用の動画まで揃ってるようです。

動きがスムーズ

■■Bookmark■flash■■ヤンプー

Paola Cattaneo

白バックに水着の人が立ってるだけとシンプルなつくりですが、スライドさせる動きや、光に埋もれて消えていく効果など気持ちいい動きになっています。光に埋もれて行く処理はやっぱり同じ画像を重ねて上の画像のブレンド設定を加算にしていくんでしょうか。

ウェブカメラジェスチャー操作

■■Bookmark■flash■graphical■■ヤンプー

Publicis & Hal Riney

澄んだ水中に絵の具をたらしたような綺麗なエフェクトのサイト。
ウェブカメラでジェスチャーするとコンテンツを操作できます。
ウェブカメラの上下左右4点に判定があり、動きを認識する仕組みのようです。

マウス操作モードもちょっと変わった操作のでおこうようです。これはウェブカメラを優先した作りなのでしょう、マウスではちょっと操作しづらい操作感です。エフェクトはムービーの重ね合わせのようで、これがもっと手の動きに合ったエフェクトの変化があるとかなりすごいアート作品になりそうなところですが、そこまでは処理付加的にもむずかしそうですね。

背景パターンタイル自動生成

■■Bookmark■javascript■■ヤンプー

Tiled backgrounds designer

背景連番パターンの画像を最低限の操作で作れ、ダウンロードできるウェブアプリサイト。
色を選んで図形を選んで角度とサイズを選んでApply Backgroundを押したら生成画面の背景が今つくったものに更新されます。自分で図形がアップできたらさらに便利なのに…。

フルスクリーンで映像をリピートする

■■Bookmark■flash■■ヤンプー

資生堂 ANESSA

フルフラッシュサイトで、全面映像。負荷かかりそうですがサクサク動いてます。引き伸ばして汚く見えるはずが、ディスプレイを接写したときのような表現で、黒線のタイルを敷くことで荒い画像を綺麗に見せる手法です。フルサイズで映像を再生するときはやってみたい手法ですね。


オープニングムービーなのかと思ったらいろいろコンテンツを見ているときもずっと背景は映像のまま。メニューから入って細かい内容を見ているときは映像は静止してBGMだけはそのまま流れています。スピード感あるドーピングパンダ('u')

円状サムネイルドラッグポートフォリオ

■■Bookmark■flash■■ヤンプー

DVEIN 2008 - Art Direction · Motion & Interactive

3DCGとインタラクティブ系の制作を行う、大手の実績が沢山あるたぶん有名なクリエイターの方のサイト。
円状に重なるサムネイルを感覚的にドラッグしたり選んだりして、大量のサムネイルからピンポイントで気になる作品の詳細を見ることができます。サクサクで気持ちいいインターフェイス('u')

業務内容をかわいく解説

■■Bookmark■flash■■ヤンプー

RSS・Widget・APIソリューション 株式会社フィードフォース

ピタゴラスイッチみたいに転がるロゴを中心に、フルフラッシュで業務内容を紹介するサイト。
にぎやかでポップで眺めてしまう表現なので、業務も一緒にみてしまいます。
説明に長時間必要でも、疲れさせないこういった配慮があれば診てくれる人も多くなるだろうし、ビジュアルやアニメーションのデザインって重要だなとかんじられるコンテンツです。