トップ >> 2007/02

知りたいことを音声で解説

■■Bookmark■javascript■■ヤンプー

声ペディア -しゃべるWikipedia-

Wikipediaのテキストを自動音声でしゃべってくれるコンテンツです。男性・女性を選ぶこともできます。漢字もちゃんと音声になってます。あとルー語変換という機能も付いています。ルー大柴のように単語を無意味にカタカナ語にしてしゃべります。

例:
開発及びライセンス販売を行う

イクスプロイテイション及びライセンスセールスをパフォームする

というように自動でワード変換と自動音声を再生しちゃっています。

使われなくなったものをアートとして再利用

■■Bookmark■■ヤンプー

Photo gallery Dust art

使われなくなってフロントに砂埃がたまった車を使って鮮明な絵をかいています。
吹けば消えるようなものに力を注ぐことに美を見い出しているのでしょうか。

PEPSI NEX ツキヌケルブラインドタッチゲーム

■■Bookmark■flash■■ヤンプー

PEPSI

PEPSI NEXのサイト。
「ツキヌケル、オイシサ」というキャッチと連動した爽快感のあるウェブゲームコンテンツがあります。アルファベット付きの氷を殴って蹴って壊していくブラインドタッチゲームです。
これは2作目で1作目はタイミングよく氷の壁を殴って壊していくゲームでした。
1作目のほうがスピード感があって単純に爽快感がありました。
2作目の今回はスピード感が前回より劣りますが、最初に準備として N E X の文字をを打たないと始められないので、商品名を覚えてもらいやすくする意図がありそうです。

目玉のおやじをつまみあげれる

■■ヤンプー

映画「ゲゲゲの鬼太郎」公式サイト

主演ウェンツ実写版ゲゲゲの鬼太郎が4/28から公開になりますが、プロモーションサイトはどんなかなと思ってみてみました。
メインビジュアルの中にリモコン下駄と目玉のおやじが転がっています。
下駄とおやじは無意味にドラッグできるように作ってあります。
 ・目玉のおやじをつまめる
 ・目玉のおやじをほおり投げれる
 ・下駄を投げると天気が変わる
  表 晴れる
  横 曇る
  裏 雨が降る
 ・天気によって目玉のおやじのアクションが変わります。
  たとえば晴れると茶碗の風呂に入ります。
  マウスオーバーすると茶碗をまわせます。
  雨だと葉っぱの傘を差してオーバーで足をかきます。

  

写真を主張するためナビゲーションをシンプルに

■■Bookmark■flash■■ヤンプー

minus - womens clothing

ファッションブランドのサイトみたいです。
・背景写真がリロードのたびランダム 5パターンくらい
・ナビゲーションがシンプル
・コレクションコンテンツの見せ方もシンプル
 サムネイルから写真を選ぶ
   サムネイルの左右スクロールは1枚ずつスクロールするのではなく
   いっきに見えなかった次のサムネイルにごっそり移る。
   こっちのほうがユーザもス取れるる区なくて確かにいいかもと思いおました。
 大きい写真がでる
 さらに拡大されていてマウスで見る箇所を2次元スクロールできるようになっている
 さらにクリックで全画面上でスクロールしながら見れる  
・右下に制作者サイトだとおもわれるリンクあり

超有名な優秀ウェブサイト紹介アーカイブ

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

The FWA Favourite Website Awards - Web awards at the cutting edge

最新の優秀ウェブサイトをチェックするならここ。フラッシュ面・デザイン面の視点から主に収集している有名どころです。閲覧・スクロールが不自由なのが難点ですが、世界の優秀サイトが集まっています。
特徴として、S.O.T.D.と書かれた黄色い帯があります。
この帯はほかのサイトでたまに左上にかかってるのを見ますよね。
ここでの称号(?)を受け取れるのは名誉なことのようです。

ハイクオリティーCMプロダクション

■■Bookmark■flash■■ヤンプー

PSYOPpersuadechangeinfluence

アイデア・シーンの移り変わりをつなぐ手法・グラフィックのクオリティーどれも実績ひとつひとつがすごいです。

チャイナケータイプロモサイト

■■Bookmark■flash■■ヤンプー

Nokia Nseries

中国で販売されているケータイだと思うんですがnokiaシリーズの機能・スタイルとしてムービー・フォト・ミュージック・GPS系機能とサービス・ウェブブラウジングを紹介するプロモーションサイト。

ユーザが使っているシーンを写真やムービーを使って紹介してあったり、実際ケータイで撮影したであろうムービーなんかも3つ並べて微妙にスタート時間をずらして真ん中の以外はちょっとぼかした処理にして上手に見せてます。



なかで面白いなと持ったのは、World 24hという、Flickrと連携してワールドマップと時間軸・カレンダーのインターフェイスから投稿写真(だとおもいますが)を閲覧できるコンテンツがありました。処理落ちするのが難点。

カレンダー機能もあります。
場所と日時から閲覧できる機能。

商品紹介の動きもまっくOSXっぽくてこってます。

数字の神秘

■■Bookmark■■ヤンプー

Kate's Journal The Beauty of Mathematics

足し算や掛け算と答えの式がアートに見えます。

オシャレなサイトを次々と生み出すFICC

■■Bookmark■flash■■ヤンプー

FICC inc [ web design - art direction ]

企画、デザイン、制作を通しウェブサイトをトータル的にプロデュースし、ウェブブランディングをしているFICCのサイトです。たくさんオシャレなサイトが並んで紹介されているので、最初見た時は、フェーバリットサイトを紹介するサイトなのかと勘違いしてしまいました。
最新の制作実績をヘッダエリアに大きく順繰りに紹介する仕組みのフルフラッシュサイトです。さらにジャンル別に3列に分けて小型のサムネイルで紹介しています。トップページでは実績と最新情報しかのせていませんね。ブログでさらに詳しい実績紹介をしています。右カラムは担当デザイナー別のナビゲーションになっています。

職人技な映像を公募してCMを作る

■■Bookmark■flash■■ヤンプー

キメワザ・バトル

体で自分を表現しろ!自分だけの特技・キメワザ・一発芸を見せ付けろ!というキャッチのMSNとNIKEのコラボ企画。
一般人のスポーツの好プレー・すごいプレーを集めて、審査して良い内容だったものを繋げてひとつの映像にするという企画です。サイトでは、採用されたものに限らず良かった映像を見ることができます。

MSNメッセンジャープロモーションサイト

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

ゴールデンメッセ劇場

メッセンジャーツールでよく使われているMSNメッセンジャーの普及を目的としたプロモーションサイト。以下:メッセ
メッセの便利な機能をショートフィルム風に紹介するコンテンツなどがあります。
その中で面白いと思ったブログシール系のコンテンツを紹介します。


わかりにくい場所にあるコンテンツですが、予告編ジェネレーターというのがあります。
映画の予告っぽいムービーを自分で作ることができます。
入力フォームのデザインがクラッパーボードになっているのが面白いと思いました。漢字も入力できるます。しかも、入力するテキストがアウトライン化されているゴシックフォントになっています。フラッシュに新ゴBを埋め込むと3.29MBになりますが、このコンテンツのために全部読み込んだってことみたいです。ロードが長く感じるわけでもなく字もきれいに見えるのでブロードバンドが定着してきて、最近じゃこういうのもありなのかな-とかんじました。

こんなのつくってみました。

フラッシュの表現に近い動きをJavaScriptで再現

■■Bookmark■javascript■■ヤンプー

Gucci

ゆったりとしたコンテンツの切り替わり、写真の動き、メニューの動きなど今までフラッシュを使っての表現でしたが大手ブランドがのサイトでフラッシュなしでここまで表現してます。

制作にかかる手間はフラッシュよりかかるんじゃないかなー?とおもいましたが…。Ajaxの実績が豊富なチームが作ると、この方がつくりやすいのかもしれません。
ソースを見ても、SEOに強そうではなく、斬新・先進的ということで大きく評価されているサイトのようです。

毎日ウェブ上でおむすび番組放送

■■Bookmark■flash■■ヤンプー

クレライフ NEW クレラップとキチントさんシリーズ

NEWクレラップのメーカーKUREHAのサイトです。


月から金まで毎日サイト上で変わった具のおむすびを紹介する番組が放送されています。助手と先生と審査員3人が毎日登場します。番組や先生・助手の紹介も毎日違うこと言って飽きないように作ってあります。テンポも良いです。編集がてきとうな時もありますが…。
ウェブ上で毎日番組作って放送してアーカイブに残っていくという発想は新しいかなと思いました。商品のクレラップを使うと作りやすく、毎日放送できるバライティーにとんだ「おむすび」をピックアップして番組にしているようです。


毎日斬新な具が増えていくのですが、バックナンバーをカレンダーや審査ランキングで探すで探すこともできます。

その他にもラバーメイドコンテナーという別商品のこぼれにくさをPRするミニゲームもあります。

子供服ショップが見せる子供心をくすぐるポップなサイト

■■Bookmark■flash■■ヤンプー

Stomp Stamp

子供服ショップのSTOMPSTAMPのオフィシャルサイトです。
変わった商品の紹介の仕方の演出が施されているサイトです。
丸のドット絵でかかれたグラフィックが変化していきます。
ドットひとつひとつが写真になっていて、クリックすると詳しく見ることができます。

すべてSTOMPSTAMPでコーディネートされた子供たちの遊んでる写真。詳細画面からは同じ子のその他の写真をみれるナビゲーションがついていて閲覧しやすくなっています。

6人いるモデルの子はふちの色でサムネイル上でも区別がつきます。
子供のオモチャ感覚で沢山いろんな写真を見てしまう流れですね。

画像・テキスト・映像・音声をフラットに扱う試み

■■Bookmark■■ヤンプー

moshi-moshi

パッケージデザインを手がける制作会社GRAPHのサイトです。
画像・テキスト・映像・音声の敷居を取っ払った、情報の見せ方ができています。


このサイト、文字検索の機能がコアになっています。
うらかたをみていくととても仕組みがとてもシンプルになっているなと感じます。
ALL / PORTFOLIO / COMPANY INFO / ONLINE SHOPのナビゲーションがあるんですが、クリックすると直接ページリストに飛ぶのではありません。たとえばPORTFOLIOのナビをクリックすると、文字検機能に[PORTFOLIO   ]が自動入力されて自動でサブミットされるのでPORTFOLIOと打って文字検索したのと同じ流れです。仕組みがかなり単純です。
シンプルでページのテンプレートは2タイプだけで構成されています。
・サムネイルだけを表示するページ
・サムネイルとひとつの作品・商品の詳細を表示するエリアを分けているページ
(※その他サムネイル使わないテキストだけのテンプレートもありますが)

検索機能をコアにすることで、類似商品を右側に出すの柄苦になると思います。
広コンの学生検索を作ったときの考え方と一緒です。
見せ方かえるとこんなコンテンツも作れるわけですね。
一度見たものはサムネイルに×の点線が入るのも便利。
文字検索で表示されたページはソースが書いてあるので静的なコンテンツなのかなーと思うのですが、文字検索がコアなので、文字の組合せ分だけリストページが必要になるんじゃないか?どうなのか?そのへんがきになります。



パリで乗車体感

■■Bookmark■flash■■ヤンプー

TOYOTA AURIS Special Website [Virtual Paris Real AURIS]トヨタ・オーリス いまの自分が、最高。

TOYOTA AURISのプロモーションサイト。
パリのマップをナビゲーションにして、AURISに乗ったときの雰囲気が伝わるサイトです。
マップの操作感が抜群。
スクロールする機能に注目してみると、ドラッグ・上下左右キー操作・マウスのホイールスクロールなどのサブ操作もできてとても見やすくなってます。マウスホイールでズームするときに寄った時と離れたときのズームスピードが統一でない部分が残念なところですね。


クリックするマップのスポットによってそれぞれのムービーが流れるんですが、全てのブービーを続けて再生するとシームレスな映像になっていました。
映像はCGだと思いますが、パリの風景から車内の映像にスムーズに流れたり、映像自体きれいに作ってあります。外から車内カメラが入るときに、AURISの窓がウイーンって開く表現のガラスの映り込みとかすごいなと思います。
スポットによってはムービーではなく写真で構成されているところもあります。その場合写真をズームしたりパンスクロールしたりAURISのカラーが変更できたりします。