トップ >> 2007/09

MPV後部座席のここちよさアピールコンテンツ

■■Bookmark■flash■■ヤンプー

【MAZDA】MPV Second Seat Story

MAZDA MPVの後部差席についてのショートムービーコンテンツ。ムービーを3見せるだけのコンテンツですが、映像の作り込み、選択画面の背景イラストの作り込みなんかをみてみると上手に作ってあるナーと思います。ブロードバンドナローバンドをユーザーに選択してもらいつつすんなり見れる部分のきれいに流れが組んであって上手。

イラストアニメーションでVI

■■Bookmark■flash■■ヤンプー

Art Decor - Pentru clipe de neuitat

野外イベント・フェスティバル・ウエディングなどのトータルコーディネートの会社かなんかのサイトっぽいです。花火や氷の彫刻までリソースがあるみたいで、野外イベントなら何でもやっちゃいますというような雰囲気のようです。なので結構ボリュームが多いサイトなんですが、実績や設備の紹介がフラッシュに収まっています。たまにトカゲや蝶が画面を横切ったり、動きとイラストでVIを定着させるのが目的なんでしょうか…。

なめらかインターフェイスフォとポートフォリオ

■■Bookmark■flash■■ヤンプー

STUDIOKOWSKI - ROBIN KIRCHNER & MATHIAS KUTT, ZWEI FOTOGRAFEN, BERLIN

フォトグラファー2人のポートフォリオサイト。
マウスカーソルが、次ぎの写真を見るアイコンになったり、ロードバーになったり…滑らかに変化します。サイトの動き全てがなめらかです。同カテゴリのサムネイルのナビゲーションと、カテゴリのナビゲーションが、下に隠れていて慣れると回遊しやすい作りです。

日本の伝統色をウェブカラーに

■■Bookmark■■ヤンプー

日本の伝統色の由来 - 日本の色の解説

日本の伝統色をウェブカラー表記でまとめてあるサイトです。
なんかでつかえるかも。

静止画を使った3DパノラマとgoogleMap連携

■■Bookmark■flash■■ヤンプー

The World in panoramic - ViewAt.org

施設紹介や不動産物件紹介やスポット紹介などでたまに見かけるドラッグして全ての角度を見渡せる静止画コンテンツ。このサイトでは、さらに、撮影場所をgoogleMapと連携してマップ上に表示しています。


この3Dパノラマの手法、どうやって作っているのか理解できませんでしたが、今回見てたらわかりました('u')きっかけはロード中に空がかけていたこと。上下前後左右6方向同時に撮影し立方体の裏面にイテクスチャーとして貼り付け、ビットマップの透視投影で計算しているようです。いままでJavaScriptで作られてましたが、これはFlashで動作しています。FlashがBitmap処理に強くなってきたからなんでしょう。


6枚の画像の継ぎ目が合わないと違和感が出るので、同時に撮影しないといけません。なので時間が止まった空間になります。それを任意で見渡せるから面白いですね。

ニューモデル紹介のために別コンテンツを建てる

■■Bookmark■flash■■ヤンプー

arflex 2007 new model

インテリアブランドarflexの新商品紹介コンテンツ。
自社ウェブサイトでもニューモデルを紹介をしていますが、それとは別に、ニューモデルをリッチコンテンツで紹介しています。検索エンジンや別マスからの誘導をリッチコンテンツにした方が良い場合もあるでしょうから、うまく使い分けて広報活動してるのかもしれません。
商品の見せ方を変えて、回り道させてる良い事例だと思います。

TOKYO FIBER '07

■■Bookmark■flash■■ヤンプー

TOKYO FIBER ’07 SENSEWARE—JAPAN CREATION応援企画展

繊維業界の大規模なイベントTOKYO FIBER '07。イベントは6月に終了していますが、イベントを記録した書籍が発売されていて、その告知としてサイトも残っているようです。シンプルなサイトですが、動きやエフェクトにこだわることで、強さや凛とした空気感がデザインされているサイトだなーと感じました。


繊維の種類が見れる繊維についてというコンテンツもあり、サムネイルをひとつ選ぶと画面全体にその繊維の接写写真が配置されダイナミックに見ることができます。説明パネルなどは、写真の邪魔をしないように左端にレイアウトされていて、見やすくまとまっていると思います。

理系の勉強が楽しいと思う人が楽しめる体験コンテンツ

■■Bookmark■flash■■ヤンプー

芝浦工業大学/スペシャル学校情報/リクルート進学ネット

芝浦工業大学のリクルート内コンテンツ。
8種類のオブジェクトを配置するシミュレーションゲームです。
配置する順番によってはどんどん連鎖でオブジェクトのレベルが上がっていきます。
最良の配置の順番を割り出すために、何度も試行錯誤して繰り返し試して試すことで、いろいろ条件を理解していく部分が楽しいゲームなので、そこが楽めないとめんどくさいだけのゲームです。モチーフを「分野の相互関係」で表現することで、「将来やってみたいことに関わる分野はひとつじゃない」「やりたい分野が複数あっても、全てに関わる学科も存在するかもしれない」ということを伝えられるようにもなっているのかなと思います。

相互関係の連鎖で起こるストーリーが上手に作りこまれてるなーとおもいます。色々予想外で見てて面白かったです。派手さあり、恋愛ありでマルチストーリー展開的楽しみ方要素もあり、やりこみ要素もあり。
全てのレベルがMaxになる組合せにすればクリアです。


答え:ネジ→ツルハシ→木材→工場→ポート→電池→回路→フラスコ

ワンクリックアワード

■■Bookmark■flash■blog tool■javascript■■ヤンプー

1-click Award

毎年面白いコンテンツを集っている1-click Award。
オフィシャルサイトも、作品に負けないユーモアなサイトになっています。

今年のギミックは、ブログシールと自動でサイトを回遊する仕組み。
お尻を向けているおじさんが立っていて、おじさんのお尻にマウスをさす(クリック)すると、おじさんは痛さで走り出します。ウェブページを飛び出して、別のウェブサイトを何枚か通り過ぎてオフィシャルサイトに戻ってきます。途中通り過ぎたサイトは、ブログシールを貼って参加している別サイトの中からランダムで選ばれるようです。

今までブログシールやポータルの広告で、このような飛び出し系の手法はたまにありましたが、数秒置きに自動で回遊する仕組みと組み合わせているのは始めて見ました。なるほどってかんじです。リアリティーがます方法ですね。

決まったページから訪れた場合にだけ自動ジャンプのスクリプトが動作するスイッチ機能が入っているんだと思いますが、urlのhtmlの後に引数を入れてリンクしていってるみたいです。urlの引数をjsが判断しているってことだと重います。

オフィシャルサイトも最初に訪れた場合と、回遊して戻ってきた場合のおじさんの動きが違うので、そこも引数使ってるみたいです。
戻ってきたときの動き

フラッシュ オン ザ フラッシュ

■■Bookmark■flash■■ヤンプー

【カゴメの通信販売】カゴメ健康直送便

大手飲料品・食品メーカーであるカゴメの通販サイト。今回注目したのは、大手の企業のサイト上でFlashの上にFlashを配置するギミックが使われている部分です。


html上でFlashをレイヤーを分ける感覚で二重に配置すると、Macでちらつき現象が発生します。これは、両方のFlashが「俺が!俺が!」って交互に最善面に来るため。これはバグと言うよりは特性。レイヤー関係なくアニメーション描画があった瞬間そのFlashは最善面に出てきてしまう特性なのでしょうがないわけですが…。この問題を克服して、しかも大手企業の大きなサイトで使っているのに驚きました。

手法について解析というか予想してみました。
今回Flashがかぶっているのは2つポップアップ型のものとメインのビジュアルです。
よく見たらポップアップ型が出たときにはメインビジュアルのフラッシュは真っ白になっています。
ポップアップが立ち上がったときにLocalConnection()でメインビジュアルの描画をやめるように遠隔操作をしているのだと思います。使えそうですね。ポップアップに限らず。

ビットマップキャッシュ化系効果をうまく多様

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

CLAUDIO COLUCCI DESIGN

プロダクトやインテリアのデザインプロダクションの実績紹介サイト。フルフラッシュです。最初の画面では、ハートが軌跡を残しながらふわふわ浮いて漂っています。シンプルでインパクトのあるエフェクトですね。


コンテンツに入ると、カテゴリナビゲーションとサムネールが並んでいます。サムネイルのエフェクトも斬新。水を注ぐような動きのマスクを使っています。マスクは全部同じ動きっぽいのでアニメーションでつくっているんだとおもいます。

profileコンテンツ内容をスクロールしたとき、ブラーがかかります。
縦だけのぼかし機能を、スクロールスピードと連携させているようです。

purevolume™ We're Listening To You

■■Bookmark■■ヤンプー

purevolume™ We're Listening To You

音楽系のサイトのようです。
きになったところは、シンプルなのに質感あってがきれいなところ。
文字が少ないからできるでしょうけど、まとまってますね('u')

イトウタイチさんポートフォリオサイト

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

TARNICA Taichi Ito Portfolio

イラストレーター個人のポートフォリオを紹介するサイト。HTMLのような構成をFLASHでサクサク展開していますね。全体がざらざらしたノイズのエフェクトで覆われています。ビットマップ処理をうまく使ってサイトの雰囲気を作り出していて結構高度なことをしているサイトだとおもいます。
マウスホイールの操作が実装されていないのがちょっと残念ですが、スクロールのドラッグ操作もなめらか。キャラクターがしがみついていたりするのはFLASHならではですね。しがみついているキャラクターをクリックしたら落ちちゃいます。

広告全面禁止の法律

■■ヤンプー

PingMag - 東京発 「デザイン&ものづくり」 マガジン » Archive » ロゴが消えたサンパウロの街

サンパウロでは2007年初旬から野外広告を全面的に禁止する法律が施行されました。
市内のどこをみても広告がない状態になっているようです。建物の概観があらわになり、街がみすぼらしくなった。と言う人もいれば、目を汚すものがなくなって喜ぶ人もいるようです。今は、看板を支えていた鉄骨がむき出しになったり広告に隠れていた部分がむき出しになったりで、汚らしい部分もありますが、今後建築での美観の主張の需要が高まっていって、すごいきれいな街になって行くのかもしれません。

前代未聞の法律で広告がなくなったということで、広告でご飯食べてた人はどうするんでしょうか?思い切りのいい法律ですよね。ウェブは街の美観に影響しないので大丈夫そうでちょっと安心。

大手サイトで写真先行のフルフラッシュ

■■Bookmark■flash■■ヤンプー

Lee Japan

ジーンズメーカーのサイト。最初の画面では、商品をはいているモデルの写真が何秒かで切り替わっていくだけのシンプルでインパクトのある造り。
PRODUCTコンテンツに入ると商品写真を拡大したり色を変えたりとか、そのあたりのギミックが凝ってます。全体的にシンプルながらシームレスなフルシュラッシュ。大手メーカーなだからやってしまえる大胆な造りですね。STYLEBOOKコンテンツも、雑誌風な見せ方でとっつきやすい。

のぞきエンターテイメント

■■Bookmark■flash■■ヤンプー

HBO VOYEUR

アメリカのケーブルテレビの映像制作をメインで行っていた制作会社が自分達の得意な分野を活かし、ウェブコンテンツを作り運営しています。HBO VOYEURというこのサイト。意味としては「のぞき」。マンションの中に住んでいる住人のドラマを壁を取っ払ってのぞくことができます。透明アクリルの中のアリの巣をのぞいているみたい。それぞれの部屋でドラマがあり、かつ、どんどん部屋をまたいで展開していきます。あちこちの部屋を見てまわっていると、いつの間にかすごい展開になってたりするので、じっくりみてもあきません。
ようはマンションがひとつのFLV映像なのですが、映像自体の面白さや綺麗さのクオリティがとてもたかいうえ、テレビでは展開できない複雑な展開が演出されされています。テレビ媒体では表現しきれない企画をウェブを使って完成させた新しい試みだとおもいます。
マンションも複数あり、かなりのコンテンツボリュームで、じっくり楽しめます。

インテリアをドラッグインしてシミュレーション

■■Bookmark■flash■■ヤンプー

DesignMyRoom - Preparing...

ソファー・ラグ・棚・テレビなどいろんな商品を選んで部屋にドラッグしていって自分の好きな組合せをチェックできるサイト。ドラッグした後の削除、移動、回転、反転、スケール変更などができます。さらに遠近方を変えれる3D的な回転までできて、それらすべての操作が感覚的にできるように、インターフェイスバウンディングボックス状に構成されています。

アナログマイペース運営

■■Bookmark■■ヤンプー

エゾアムプリン製造所 プリンの製造・販売

北海道の奥地に小屋を立ててひっそりプリンを作っている人のサイト。

「動物のような暮らしをしたい」というアムさんのライフスタイルを知ってもらうためのサイトのようです。
北海道の奥地でプリンを作って、そのプリンを必要な分のお金と交換して、ハイジのおじいさんみたいな暮らしをしている人みたいです。

基本、スキャニング画像か写真が並んだ構造のサイト。更新頻度は結構高く、コンテンツボリュームが深いです。そのとき家にあった紙やパッケージやダンボールの切れ端なんかを再利用してメッセージや日記や落書きをしたものをスキャニングしてアップ。そんな更新方法も人里はなれたところで暮らしている人らしくて共感できます。
儲けたいと言うわけじゃなくて、自分の生き方を知ってもらいたいということで運営されているサイトっぽいですね。たとえ綺麗なデザインではなくても、その人に合った、その人をより知ってもらえるサイトであるわけですから、とてもマッチした有意義なサイトですよね。

違うとは思いますいますが、もしこれがウェブ制作会社に相談があった上で出来上がったサイトだったら、(FTPとか教えるだけだかも)その制作会社はすごく相手のことを考えれる人が担当したんだろうなとかふと思いました。