website Archive

最近、UNIQLO CALENDAR というサイトが公開されて、やっぱすげぇなぁユニクロ。違うよね。他とはね。っていう空気が一般化(?)してきた感があるんですが、同時に、サイト立ち上げすぎじゃねーの、とも思ってしまうのです。
だって、たくさんありすぎてよく覚えてないものもあるし。

なんでそんなことを続けるんだろう、と考えました。まぁ新商品が出れば新サイトを立ち上げるのは当然だとしても、とにかく作ること・話題になることが目的なんだろうか？　それとも、今までばらばらにリリースされてたサービスが、実は一つの哲学に基づいていて、どっかのタイミングで俯瞰したときに一つの絵を描いていたりする？
江戸の町は風水的に計算されて作られているとか、そういう視点で。サイトごとに直接はつながりがなくても、鬼門となる地点やサービス名を繋げると星の形になって中心に位置する城を守るとか、そういう意図があるのか？　個人的にはそれが分かるとスッキリするからそうあってほしいとも思いつつ、現時点でのサイトを集めるのも意味があるかなと思ったので、とりあえず集めてみます。

Continue reading

ネスカフェ® ドルチェ グスト® 私のカフェ

ネスカフェのカプセル式ホームバリスタシステム（!?）こと「ネスカフェ ドルチェ グスト」のスペシャルサイトです。
コンテンツの「とびだすドルチェ グスト」では、FLARToolkitを使って（おそらく日本発の商用利用）、この機械を立体的に表示しています。
AR時代の到来を予感させるサイトです...なんつって、優等生的なコメントをしようかと思ってたんですが、やってみると、うまくいかない。

このサイトではARを身近なものにするため、マーカーを印刷させるんじゃなくて、ケータイの画面に表示させるという手法を採用しています。これは挑戦的。これまでARといえば、とにかくマーカをプリントしないと始まらなかったんですが（なので一般的利用というよりは面白年賀状やびっくり名刺でFlasherの間に広まってた感じ？）、二次元バーコードをケータイで読み取ってアクセスするとマーカが表示されるという、誰でも使えることを優先としています。
ちなみにマーカはこんな感じ。マーカのシルエットがドルチェグストの機械の形なんですね。

はてさて、ケータイで試してみたものの、なかなか認識してくれません。角度によっては認識しやすい場合もあるんですが、どうやら画面の写り込みのせいで認識が働かない様子。もしくは、黒い部分も含めてマーカなので、ケータイが黒いと枠を認識しないのかも？　さらに、ブラウザの前にケータイをプラプラさせていると、手とケータイのせいで写ったときに肝心のコンテンツが見えないというアクシデントが。

しょうがないのでマーカを印刷してみると、あら不思議あっという間に認識して立体機械が出てきました。こんなに認識率が高いのか！FLARToolkit！！

まとめ

ARコンテンツには２つのハードルがあって、ひとつは「webカメラがついていること」。もうひとつは「マーカを簡単に入手できること」。だと思うんです。前者は環境の問題なのでしょうがない部分は多々あるとして（なので、ARを使わないでも楽しめるコンテンツが必須で、ARはおまけという位置づけにするしかないのが現状ですよね）、後者はユーザの問題。これは改善できます。印刷用画像を表示して「プリントしてね」は、もっとも正しいんですが、ユーザに対してのハードルがメッチャ高い。
結果、ケータイにマーカを表示させてそれを読み取らせる、という導線は、一手間あるようで、実はユーザからすると最短距離なのかもしれません。これがイベント会場とかだと、最初にカードか何かで配っちゃえばいいんですがね。

サイトとしてはどうなのよ

コンテンツはともかくとして、サイトを開いた次の瞬間にソースをバリデータにかけるような使い方をしてしまう僕ですが、今回は気になるものがちょいちょいありました。

<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">

わーお。マイクロソフトやん！最新型のFLARを使うサイトなのでソースも最新のイケてるコードかと思ったらあんまりコダワリはなさそうです。

そもそもドルチェグストって何なのよ

サイトのあり方にばかり気をとられてはいけません。
この機械は、つまりはエスプレッソメーカーなんですね。小さいカップに入ったコーヒーカプセルをセットして、１分で本格エスプレッソができるとのこと。コーヒーメーカーを買おうかエスプレッソメーカーを買おうか、全部入りを買おうか、いっちゃんいいヤツを買おうかと思っていたところだったので、ちょっとグッと来ました。サイトからはセブンイレブンネットへリンクがあって、通販できます。
いちユーザとしては、これが気に入って買うのはいいんだけど、ドルチェグスト専用機だ、というところが購入のネックなのかな。１年後に販売中止になったら怖いし、コーヒーカプセルが気軽に買えないと気になるなぁ。というところですね。
僕はお金のない庶民なので、こんなケチなことを思いますが、コーヒー好きにはいいと思います。僕も毎日コーヒー飲んでますが、缶コーヒーのローテーションに飽きてるところなので、あったらいいなぁ、とは思います。１杯20円のドリップコーヒーを作るのが面倒なので、ワンタッチはいいなぁ。と思います。
なんてことをブログに書いてたらうっかり本体がプレゼントされないかな。

今更なのでリンクは貼らんけども。
特徴が、紙面のようなレイアウト。ファーストビューには大きめのコマがいくつかあって、下の方にはジーンズとか旬カジュアルとか、それぞれのカテゴリの（ショップへの）リンクがあります。

HTML構造はいたってシンプル。divにタイトル(h2)とテキスト(p)があるだけ、というコマがひたすら順序良く並んでいるだけというもの。コマのクラスはユニクロらしく「L」「M」「S」。で、「&」をエスケープしてないのを除くとValidです。やりますね。

ただ、流石はユニクロ。コマのすべてのリンクにはAnalyticsタグが仕込まれています。つまり、コマごとのクリック数をカウントしているわけですね。

onClick="javascript:urchinTracker('/click?link=L1-L1_z5');"

のような使い方で。
なぜGA.jsじゃなくてurchin.jsなのかは知りませんが、とにかくクリックをカウントしています。参考になるのはカウントの方法です。
「/click」という架空のページを利用して、コマごとのIDをクエリにつけています。こうすれば、あとで /click でソートすれば、どのコマが効果が高かったかが丸分かりです。ユニクロみたいに頻繁にサイト改善をするなら、こういう数字は重要ですよね。これで「服より女の子の写真のクリック率がメッチャ高いことが分かった！来週から全部のコマを女の子の画像にするぞ！」みたいな改善が日々行われているわけです。知らんけど。

象印D-mug スタジオ

象印のタンブラー（まほうびんタンブラー）のサイトなんですが、タンブラーのボトルデザインをサイト上で自由にできる機能があります。ＵＩはFlashで、写真をアップしたり、文字を入力したり（自分のＰＣのフォントが使えるぽい）してオリジナルデザインを作れると。
できたデザインは「印刷する」ボタンがあって、印刷してハサミで切ればそのままタンブラーにくるっと使えるのでいい感じ。季節ごとに違うのが出たからってスタバで買ってたら高くつきますが、これだと気分によって変えられるのでいい感じ。

別に「今更ねぇ…」という感じはあるんです。サービスとしてはそうなんですが、よくあるのは「お手持ちの写真をプリクラ風に加工」だったり、画像を加工だったりで、結局それはPCの中で完結するサービスだよね、という話なんですが、これは違う。違うのは、自分で作ったオリジナルタンブラーを毎日使える、ということ。

ジェネレータって、結局自己満だと思うんです。他のユーザのコメントがもらえたりランキング機能がなければ、自分で満足して終わりです。でも、その世界が自分の話じゃなくって、自分の好きなもの（歌手や芸能人やアニメキャラなど）なのであれば、（自分で楽しむ範囲で）オリジナルのファングッズを作れるのは、すごく有意義なことだと思います。

具体的には、カレンダーとか、タンブラーも勿論そうだし、ストラップ、Ｔシャツ、待ち受けとか…、身の回りに普段から常にあるものをカスタマイズできる、っていうのはユーザにとって満足度が高いんじゃないかなぁ。とっても意味があるサービスです。
実際は、着せ替えができるタンブラーなのでその機能（サービス）は必然だった、としても。

気付くのが遅かったんですが、先月までデザインコンテストやってましたね。

ちなみに、このFlashはバージョン7で作られてる？ぽいです。HTMLソースでFlash表示のバージョン設定が7だった。マジですか。AS2ですか。

そんなやり方があったか！と思ってしまったのでメモメモ。

ねこねこテレビ

ねこねこテレビ（ne.coneco.tv）はYoutubeからねこ動画だけを集めたサイトです。
秀逸なのは、サイトの文章表記が統一されていること。

neconecoTV(ネコネコテレビ)はインターネット上に存在する猫の動画を猫の種類ごとに見ることのできるサービスニャス。
とりあえずneconecoTVにある動画を探してみたら全部で10636件の動画が見つかりニャしたが、多すぎるので1件から20件目までを出してニャス！

とか

ここからコメントを書けるニャ！

とか。ねこ好きの人が参加しやすいように心理的ハードルをこの言い回しでかなり下げているように感じました。僕は犬派なので動じません。

ターゲットを明確にしてサービスを作るっていうことは、こういう文章も「ですます／である」だけじゃなくて「ニャ」だの「ワン」だの「うぃっしゅ」だの「だお」だの、そっちのユーザにズキュン、な言い回しにすることが大事かもしれませんね。

前にページをDAIGO語にするブログパーツを考えましたが、パーツじゃなくて最初からそうする方がいい場合がある、ということですかね。

LOVE DISTANCE

もうキャンペーン終わっちゃったので詳しいことは割愛させていただくとして。

最初にアクセスしたときにユーザが男か女かを選択しますが、そのときに「このPCは男としてセットされました」と表示され、ブラウザを変えても男バージョンのページ(www.aru-otoko.jp/)しか見ることができなくなります。
女バージョン(www.aru-onna.jp)に直接アクセスしても、LOVE DISTANCE のトップページに強制的に戻されてしまうので、マジでどちらかしか見れません。

この手があったか！

前に書いたExSOの仕組みそのまんまだと思うんすよ。
ただ、まったく考えてなかったのが今回の使い方。ユーザの属性を固定することでコンテンツを変化させる、という方法ですよね。

（一度選択する必要はあるけど）属性を決定した後は、その属性に応じたコンテンツしか出さない…。「インターネットの自由を奪います」なんてコピーで始まるこのコンテンツですが、まさにそうですよね。でも、不自由にする必要があった。レコメンドじゃなくて導線固定。ブラウザを変えればどっちも見れる、何度でも試せる、っていう（ある意味の）常識をぶっ壊したケースだと思います。はい。

ケータイで気軽に飲食店を探せる「ねことパソコン」がロンチしました。実際はケータイで使うサービスです。

たくさんお店と食べ物が載っていて、「さぁ、食べたいものを探しなさい。ほら、こんなにたくさんあるんだから選べるでしょ？」っていう今までの探し方とは全く逆の考え方でお店を探す、というサービスです。

たとえば土曜日のお昼、「えー、でも、食べたいものないし。何でもいいや」っていうユーザって、実はすごく多いはず。「じゃあ焼肉は？」と聞くと、「そこまで腹へってないし」と答えたとして、そこでユーザは「俺って焼肉食うほど腹減ってない」ことを認識します。ということは、他の料理なら食べたいかもしれない。「じゃあ中華？」「違う」「あっさり系？」「どっちかというとそうだね」「お酒は…いらないか。そうなると、自然派レストランなんていいんじゃないかな」「確かに。いいかも」という会話の中で答えが醸成されていくことに意味がある、というコンセプトです。難しい。しかもそれは消去法なだけじゃなくて、選択肢によるレコメンデーション機能がそう決めているんです。レコメンドエンジンは、はてブの関連エントリー表示を作り上げたプリファード社。

デザイナの観点で見ても、今までホットペッパーマッシュアップというと、お店をいかに絞り込むか（値段か場所かジャンルか）という、食べたいものが分かっている人向けのサービスばかりだったように思います。別に食べたいものねーし、いつものことだからマックでいいや、味も値段も気にしないぜ、という人向けの選び方というわけですね。

レコメンデーションというわけで、使えば使うほど頭がよくなる仕組みだそうです。
なぜかブログパーツもありますが、ケータイ向けサービスなのにQRコードが表示されるわけでもなく、ただキャラクターが画面をうろうろするだけ、というもの。これもだんだん頭がよくなっていく、はず、です。

Continue reading

100万人のキャンドルナイトイベントマップ

夏至の日から7/7までの20時～22時は電気を消してろうそくの明かりで過ごしましょう、というキャンペーン。それが100万人のキャンドルナイトです。

毎年恒例のようですが、2008のキャンペーンサイトはGoogleMap上にキャンペーンを行うコミュニティごとにピンを立てて、クリックで詳細表示…だけでなく、そのMapの上に半透明レイヤーでセレクトボックスを表示したり、最近の投稿を表示したり、とまぁ内容だけ書いたらよくあることなんですが、この画面が超クール！です。僕こういうの大好きだ。
サイトもエコ関連でクールなデザインのがたくさん出てくるとネット的にも盛り上がると思います。こんだけかっこいいと参加したくなります。キャンドルナイトの実体はNGOなので、自主的な参加がよしとされているんですね。

今年は6/21が夏至です。

「大停電の夜に」のような静かだけどほっとする行動を、リアルにやろうぜ！　っていうことです。照明だけ消して暗い部屋で実況したり外で集まってtwitterしたりしちゃいけません。

THE ECO ZOO | ECODA!DOBUTSUEN

途中の看板(?)には、うらに「Yes」、表にはPlanning、Creative Direction、…、Project Managementなどクレジットが書かれています。でもここにROXIKとか城戸雅行さんとか書いてないです。

はてブでも当然のように大盛り上がりで、関連ブログを見てみると「世のFlasherに希望を与えた」とか「このレベルになるまでがんばるしかない」みたいなエントリもあるんですが、真実はまったく逆です。

ここまで軽く動いて綺麗なFlashが、本体わずか200kb(ecoda.swf　※1.2MBの間違いでした）で構成されてるなんて誰が想像つきますかね？　ありえない。僕はちょっと今日は早退させてもらいます。会社で見てて、もう意欲みたいなものがすべて吹き飛んだ。圧倒的なレベルの前に、何も言えません。

俺もうFlashやめようかな、と思う人は多いと思います。

RedBull FlightLab

RedBull、翼を授ける、のコピーで有名なレッドブルのキャンペーンサイト。紙飛行機をイメージした飛行機を自分でデザインして、それを飛ばして競うというweb向きな手法です。鳥人間もびっくり。

びっくりなのはこの完成度の高さで、
・飛行機作成
・3Dで飛行機を見る
・3Dで飛行機を飛ばす（上下左右キーで操作）
という、PICTAPSみたいな感じなんですが、この技術は未来そのものだ、と感じました。はてブやらこの解説をしてるブログを読んでみても、完成度高いです、くらいしか書いてないんですが、これはちょっと変態のレベルです。ちょっとマジありえないんじゃないの!?　と、びっくらこきまくりです。また歴史が変わる瞬間に立ち会ってしまった、みたいな衝撃でした。

で、
飛行機を飛ばすとか車を走らすとか自転車を漕ぐとか、そういう物理シミュレーションをビジュアル的にスマートに表現できるのがこれからのFlashなのでは、と思います。
そういう演算が超ニガテなので（というか得意なところなんてないじゃん！）気を引き締めていかないとなぁ。
マジでAS3できない（っていうか超レベルのコードを書けない）または衝撃的なアイデアを持ってない人は氏ぬしかない時代がやってきてしまいました。

UT LOOP!

yugop御大がNHK「プロフェッショナルの流儀」で作ってたアレがついにラウンチ。ブログパーツの提供はまだみたいけど、EDITできました。その方法も、リズムに合わせて数字キーを押して自分でLOOPを作るのと、ひとつずつ音（映像）を乗っけていく2通りがあります。

正直、Tシャツに目がいくことはほっとんどないんだけど（映像と音に見とれてしまうから）、ユーザの反応を考えると現時点でこれ以上に「人に教えたくなるサイト」はないかも。「僕はTの人がお気に入り」とか「AHAがいい」とか「カワイイーが可愛い」とか、ネタの要素満載です。

しかも延々と作品がループしていくので（☆5点満点で評価できる）、ついついサイト滞在時間が長くなってしまいます。見ていて面白いウェブってなかなかないよなぁ、と思ってたけど、ナビゲーションも説明もクリックもなく、見ているだけで楽しめる体験（しかも自分でやってみるのもハードル高くない）は、まさにウェブ的。ウェブって面白い、とウェブを知らない人でも思えるサイトです。
発想と表現のケタの違いをまざまざと見せ付けられて、そしてそのままブログに書いてしまいました。全てはUNIQLOの戦略通り…!!

UNIQLO TODAYがリニューアルしたみたいです。
１日１回アクセスするとキーワードをゲットできて、７つ集めるとプレゼントに応募できるとか、お題に沿ったブログを書くと集計され、スタッフがひとことつけてくれるみたいです（ブログコメントじゃなくてトゥデイのサイト上で）。
UIはすべてFlashなんですが、わざわざ全部Flashにする必要ないんじゃねーの、と思ってしまうところもありました。作るのが楽なのか。

で。
なんでいまさらブログと連動したサイトをユニクロがやるんじゃ、と考えたんですけれども、まずユニクロサイトスタッフがユニクロ関連のブログを毎日チェックしまくらなきゃいけないのがかなりの手間です。こんなてまひまかけて更新するのは大変じゃないですか。それをあえてやるのは何故なんだぜ、ということです。
それは、ユーザ（ブロガー）が参加する意欲を高める要因にもなるよね、というのが答えなんじゃないかな。ちゃんと僕の私のブログを見てくれてる！ユニクロの人が！うひゃっほう！　てな感じで、ブロガーはテンションがあがるし、ユニクロとの心の距離が近づきます。まさにここがポイント。ブロガーを一人一人爆撃していくという人海戦術ですが、下からのブランディングというか、ユーザレベルでのブランディングにはブログを使うコミュニケーションが有効だよね、ということですね。

そして、ここにAdobe Edgeとの違いが出てきます。
エッジの場合は、旬なサイトを掲載しまくるブロガーと、掲載されるサイトをランキングしているんですが、ここにサイトを登録しまくるマシーンブロガーが登場することによって、ランキングを操作できてしまうという欠点（裏テク？）があります。マシーンブロガーは、ほかの人からすると「何だそりゃ、今さらそのサイトかよ、誰でも知ってんよ」と思いたくなるようなサイトもどんどんピックアップします。その結果、マシーンのランキングは急上昇、必死に新しいサイトを探して感想文をたくさん書いている努力家ブロガーは涙目という構図が出来上がってしまいます。
まぁこういう図は構想の段階で想定されていたでしょうから、コモディティ化したようなサイトを今さら挙げる奴ってアルファじゃないよね、はは。こりゃいい。馬鹿がみーる、みたいな空気を作り出すシステムも動いているはずです。

とにかく、ブログ連動のサイトを考えた場合、投稿やトラックバックやコメントの数だけじゃなく、本文の内容までチェックするというのは、考えるのは簡単だけど実行するのは難しいよね、という話でした。

Adobe Media Player正式版リリースに伴い、Adobe TVというサイトもできていました。
サイトは全部swfで出来ているんですが、メニュー←→ビデオ画面←→その他画面の遷移が凄くスムーズで驚きました。若者の言葉でいうと「さくさくしてるね」というやつです。これがFlexの威力か！！という感じです。
で、癖になってる「HTMLソースを見る」なんですが、ソースを開くといきなりコメントが書いてありました。

Smart developers always View Source.

This application was built using Adobe Flex, an open source framework

for building rich Internet applications that get delivered via the

Flash Player or to desktops via Adobe AIR.

Learn more about Flex at http://flex.org

どうせソース見られるなら、せっかくだからFlexとAIRの宣伝をしておくぜ！　という意思表示です。なんてこった。
だけど、これは有効な広告方法かもしれません。
HTMLソースを読むのはweb制作/開発に関わる人だけだからです。

ビデオは全部英語なのでついていけませんでした。が、ブログ等で紹介できるembedタグ発行やこのページのURI、さらにAdobe Media Playerで見るボタンなども用意されていて、意気込みが感じられます。すげーなアドビ。

AXE COLLECTION

WEBでのプロモーションをイケイケで展開しているAXEが、3/28にまた新しいコンテンツをローンチしたみたいです。
今回は普通に商品の紹介という感じ。とにかくAXEをスプレーすればモテる、という点だけに絞ったコンテンツでした。製品を選ぶと女の子も変わるんですが、しばらく見てるとムービーになります。キャーキャー言われてます。うーん。。
で、今回はムービーっぽいのにムービーじゃない、画像の切り貼りによる映像が見所です。Flash的にはモーションが細かいなぁ、よくやるわ、程度に思ってたんですが、ラストのムービーがしっかりしているのでそのギャップにグッと来るというわけですね。

via:AXEのキャンペーンサイトが凄すぎ

http://edgenow.jp/

3.25ついに公開です！
あと1時間だけど今日は寝ます！
それとブログパーツが本格公開になってたので貼っておきます！

AXE EFFECT

AXEは、AXERCISE、AXEBUSTERS、WAKE-UP SERVICEとハンパないキャンペーンを打ち出しています。制作はFlash界の白い巨塔、basculeです。たぶん。

AXEBUSTERSはbasculeらしさが100%出ている、面白いユーザ参加型コンテンツなんですが、webで完結しています。自分の写真をアップロードできたり、歩いている女の子はムービーじゃなくてpngだっていう説明が以前の雑誌：webdesigingに出ていました。

そんなことはどうでもよくって、度肝を抜かれたのはWAKE-UP SERVICEです。

WAKE-UP SERVICEでは、時計みたいなデジタル数字の前に女の子が動いたり喋ったりしていて、ボタンを押して時計の数字を進めてもその動きが途切れることがありません。これはどういうこっちゃ？　と考えてみましたが、どうやら数字レイヤーの上にマスクした範囲でアルファを持ったビデオを動作させているように見えます。
画面全体をムービーにするようなサイトは最近じゃ溢れてて、ちょっとやそっとじゃ驚かないんですが、このムービーの作りこみとアルファビデオの使い方がハンパないです。

ムービーや音楽も、「web」を得意としている人が作った程度じゃなくて、テレビで、しかもゴールデンで流せるくらいの超クオリティ。それをwebに落とし込むところがbasculeなんだなぁ、すげぇなぁ、と思って、このことをブログに書くかどうかも1週間くらい迷っていましたが書いてしまいました。

リアルtoウェブの中で、GYREや表参道アカリウムなど、ケータイと連動したサイトやキャンペーンが増えてきました。はてなではこの先50年とかを考えるとPCとケータイだけでしかネットに繋げない時代なんて信じらんなーい、という時代が来ると予言されていたので、今後はデバイスを越えたwebのあり方を考えないといけないみたいです。

面白法人カヤックとCUPPYが恒例のお年賀プロジェクトを公開しています。

その中のひとつ、CHOO CHOO TRAINのブログパーツを貼っておきます。
で、使い方の中にQ&Aがあって、

Q.
CHOO CHOO TRAINに乗れない！

A.
CHOO CHOO TRAINに乗るには、下の環境が必要になるんだ。
　IE6.0以上
　FlashPlayer9,0,115,0以上

とあるんですが、Player9,0,115て！！！　最新！？
もしかしたら「9以上」あるいは「最新の」という意味なのかもしれませんが、H.264ムービーを使ってる部分があったりするのかもしれません。恐るべし、カヤック！！

SoftBank（リンク先はトップページ）

ソフトバンクのサイトは、黒を基調としていて格式高く、綺麗にまとまっています。一言で言うとセンスがいい。とっても。

画像はホワイトプラン（料金紹介）のページですが、ページ左のメニューはFlashで出来ていました。
バージョンは6以上で確認できたので、実質はほぼ全てのブラウザで見ることができる、ということでしょうか。でも、もしブラウザにFlashが入っていなかったら?　…Flash好きとしては、そういうところを考えてしまいます。携帯のキャリアの公式サイトとなると、大人も子供もおねえさんも、誰もが見ることを想定される場です。もしこれで一部のユーザに「ページが見れない」という不満を抱かせたら、ブランドとしてはダメージがあるはず。

それとも、「もしFlashが入ってなかったら」という疑問は、今は持つこと自体古い考えなのでしょうか。2chの某板では、やがて全てのサイトはFlashで構築され、HTMLは事実上消える、みたいな過激な議論がありますが、僕はそれはないと考えます。

プラットフォームとして非常に優れたFlashですが、あくまで「現時点」の最適解なだけで、今後、それ以上にインタラクティブでクリエイティブでユーザフレンドリなプラグイン（あるいはソフト）があれば、Flashの時代も終わることはありえる、と考えています。しかし全力でFlashを勉強し、使おうとするのは、「現時点」ではそれが最強の表現方法だから、というだけのことです。

このSoftBankの例でも分かるように、いまどきは「まずFlashありき」で考えていってもいい時代なのかもしれません。ちょっと予想外でした。

日本郵政グループ

JP(Japan Post Holdings)のサイトは今っぽくてセンスがいい。

↑だけじゃなく、ゆうびんホームページもセンスがいい。小奇麗で、見やすくて、文字も大きい。ゆうびんホームページを見る人は年齢が高めなんだろう。「あたらしい　ふつうをつくる」というキャッチコピーをよく表してるんだと思います。

で、今回はその「ひとりを愛せる日本へ」というコンテンツ。全画面が開いて、ver8で書かれたFlashでコンテンツが展開されて、「涙そうそう」がしっとりと流れていて、田舎か家族かの写真がゆっくりと切り替わっていって、まるで田舎に帰る電車から田んぼを眺めているようなノスタルジックな世界観です。

なぜなら、このサイトで使われているFlashがすごい。

var so = new SWFObject("oneLove.swf", "oneLove", "100%", "100%", "8", "#ffffff");

読み込んでいるFlashのファイル名です。なんとoneLove.swf。わぁ。でも、これは確かにone loveです。かつてGLAYのアルバムに「ONE LOVE」ってのがありました。あれは初めて聴いたときは「あれ？」って感じでした。意外とパンチ弱いな、と。でもこのサイトは意外とパンチ強いです。でもまいったとは言えませんでした。
これはもう好き嫌いの世界の話なんでしょうけど、このサイトは、普通のコンテンツの形式を取る必要はなかった、と思いました。全編ムービーで、ほっといても進行していくようにすればもっとよかったんじゃないかなぁ、と。なぜなら、パソコンがないような、冬は雪の中に埋もれてしまうような、雨が降ったら屋根瓦が飛んでいくような、古い田舎の家でこれを見ようとした場合、コンテンツがたくさんあってどれを押したらいいか分からなくなってしまいそうだな、と思ったのです。

ナビを置いて「メッセージ」「事業会社」「民営化について」をボタンとして、あとはもうムービーで垂れ流せばいいんじゃないかなぁ？　どうなんでしょ。むしろテレビ的に作った方がいいようなサイトもあるんじゃねーの？　と、このサイトを見て思いました。

webだけどwebらしい表現をしなきゃいけない、っていう決まりはないということを思い出せてよかったです。でもこのサイトは心落ち着くので好きです。

あ、あとボリュームボタンがあって、押すと「涙そうそう」のボリュームを変えられるんですけど、これがちゃんとフェードイン/フェードアウトできててグッドでした。押したらいきなりボリュームゼロ、じゃ怖いもんね。

TownMarket

タウンマーケットという、郵便番号を入れてその地域のチラシを検索できるサービスが始まったみたいです。正直、これはありえない。

これは歴史が変わる節目に自分がいるんだな、と再認識せざるをえません。「こんなこっといいな、できたらいいな」の世界の話です。っていうかPRODUCED BY RECRUIT. ってそりゃマジですか。ほんとありえない。でも実際にあるんだからこれを隅々見るしかない。

このサイトの凄さ・恐ろしさを感じた人たちは、さっそくこのサイトをはてブしています。

何が凄いかというと、メタチラシを作っちゃったことです。

テレビでは、「CMのCM」なんつってアホみたいなキャラクターがへにょへにょ言って時間をつぶしたりしてますが、ありゃあ公共広告よりひどくって、つまりはスポンサーがいないってことじゃないですか。CMのためのCM、っていうとメタCMみたいだけどそれは違っていて、スポンサー募集中ですよ、今ならこの時間のこの枠に入れますよ、って言ってるようなものです。それを声高に言えないから変なキャラにへにょへにょ言わせるんです。
しかしTownMarketは違います。言ってみれば、「チラシの世界の支配」。かつて銀王は「経済界の支配」を自分の夢だと言いました。TOYOTAだろうがSONYだろうが自分の支配下に置こう、という野望です。結局それは叶わなかったんですが、RECRUITはこのサイトによってチラシ、つまり一般人の思うところの「広告」を手中に収めたわけです。こうなるとたまらない。たまらないのは「他店より1円でも高い商品があったら遠慮なく言ってください」というビックカメラみたいな姿勢。だって安い他店がぞろぞろ出てきちゃうんだもん。まいったな。

時代が変わりつつあるっていうのは、「続きはWebで」なんつってのんびりしてるテレビ屋と違って、「まずはWebで」を現実のものと変えていこうとしているWeb広告屋のスタンスが、あまりにもアバンギャルドだなぁ、いいなぁ、僕もやりてぇなぁ、って思ってしまうということです。
なんだ、これは結局「こんな凄い面白いモノを作る奴らがいるのに僕がそこに混じれないなんて悔しい！　キー！」という嫉妬か！なんというジェラス。

かなり前のエントリになるんですが、ちょうどグリッドシステムを使った広告表示板なんてのを考えてたことがありました。
コンセプトは「ひとつだけ不自由を与えた自由に使えるシステム」でした。結局、いいネタがまとまらなかったので放置しちゃってたんですが、このUNIQLO_GRIDはそのへんを「多人数参加」「ゲーム」として昇華しちゃいました。はてブによるとこれはyugop御大の最新作ということらしいですが…　あー僕は凡人だ！！

でもこういうアイデアを出せるようになりたいと思ってがんばります。
ユーザ参加型コンテンツにも、ニコニコもあればはてブもあり、ハインツ：ケチャットライブもあり、UNIQLO_GRIDもあり、Olympus Wonderもあり、mixiもある、と。

ユーザにどう使ってもらうか、使ったものがコンテンツとなる…のか、コンテンツを使ってもらう…のか、使ってもらったコンテンツをリミックスしてもらう…のか、は、そのサイトの特性次第ということですね。どれが正解とかではもちろんありません。

京都産業大学3Dキャンパスマップツアー

Flashで3Dをぐーりぐり使ってる。前のポケモンの地球マッピングといい、最近はFlashで3DってのがFlashPlayer9を使う理由になってきてるような空気があります。

雑誌「webcreators」によると制作は(株)進研アド、(株)Qript、(有)メディアラインとのこと。このFlash技術は日本でもかなり上位、というか現状ナンバーワンのコンテンツじゃないでしょうか。

実は僕もFlashで3D地図を作れたらいいなーと思ってアイデアだけは温めてたんですが、Papervision3Dがどうもよく分からない上に、それをカスタマイズしてぐりぐり使えるようにすること、さらに実際の地図、建物をどうやって表示すればいいかな、という部分で頓挫してました。このコンテンツはカーナビのそれを連想させ、実に分かりやすい仕掛けとなっています。ちなみに僕が考えてたのがズバリ、カーナビです。道路を表示するのが地図の役割ですが、このコンテンツのように建物を表示することをメインとしたカーナビ。デモだけでも作れたらいいなー　などと安易に考えて過ごしてたら、世間はその夢想を現実化するレベルで進んでるんですね、ということを思い知らされました。

惜しむらくは、最初の画面で「ハイスペック版」か「ロースペック版」かを選ぶところ。見るだけなら同じじゃないの?　と思ってしまいました。

ポケモンGTS

↑の画面はFlashPlayerが古い場合。僕はFFで9.0.16、IEで9.0.47(2007.10現在最新）を入れてるんですが、プレイヤーが古い人にも対応してるらしいですね。「お父さん、お母さんに聞いてからバージョンアップしてください」とフォローしています。つまりこのサイトはリアルにポケモンを楽しむ子供のためのサイト、ということ。

だとすれば一つ問題があります。子供はゲームをたくさん知ってますから、UIについても厳しい目線を持ってると思うんです。PCのサイトに慣れた大人は、「Flashならこの程度だろう」と思い込んで画面を見ることが多々あると思うんですが、ゲームのUI…たとえばポケモンの、たとえばファイナルファンタジーの、ステータスとかを表示するときのUIは、「迷いを生まない」という優れたインテリジェンスのなすテクニックです。シンプルだけど一目で分かる、という画面デザイン、ひいてはUI、は、web制作者が見習うべき姿のひとつだと思ってます。

さてポケモンのウェブ制作といえばバスキュールですが、このサイトもまたハンパないです。っていうか、バスキュールの自社サイト以来の衝撃でした。プレイヤーが必要とするのが9.0.45ということはCS3で作ってるってことなんでしょうけど、何が凄いって、まずは次の画像を見てください。

画面の真ん中に地球儀があって、左右のキャラクターリストから地図に線が伸びてます。これがぐにょーんと伸びて地図を動かしたりしてます。見てるだけでも面白いっていうのは子供向けだけじゃなくて、Flashが多すぎる現在のWEB事情をよく分かってる作り手だ、ってことだと思います。重いけど。

さらに強烈なのは、この地球儀は眺めてるだけじゃなくてドラッグできる、ホイールできる、ってことです。こんなことFlashでできるかぁあああーーー！！！！というレベルの所業をすんなり実装してしまっているところがFlashの狂戦士バスキュールの技。フラッシャーは一度見ておかないと。死ぬ前に見ておかなければいけないサイトの一つです。

っていうかなんでこの地球儀くるくるにこんなにこだわるかというと、僕が去年、Flash8を使った地球儀球体マッピングを作ってたからです。MX2004の時代にこういう地球儀できないか？　という案件があって、当時は「不可能」という答えしか出せませんでした。時を同じくして僕が最上級にリスペクトするthaのTAKA氏がHondaSweetMissionで地球儀を作ってしまいました。そんな馬鹿な！！　という感じでした。

Flashで球体マッピングやるときはDisplacementMapFilterを使って一枚絵から球体を作るんですが、もしかしたらバスキュールのやり方は違うのかも。Papervision3Dですかね?

で、話を戻してポケモンです。僕はゲームを（最近）全然やらないのでポケモンなんて名前しか知らないんですが（ピカチュウ）、どうやらゲームで使うキャラクターをトレードできるサイトのようです。どういうこっちゃ??　えーと。つまりDSか何かでWiFiアクセスしてこのサイト（に同期しているデータベース）でゲームのキャラを直接やりとりしてるってことでしょうか。ということは、ゲームで使うデータがwebでアクセスできる形式になってる、ってことですよね。もちろんMySQLとかそういうのじゃなくて、…ってここまで書いて思いついた。「キャラクターＡ」の「レベルＢ」で「スキルＣＤＥＦＧ」で…っていうパラメータだけをやりとりすれば、それをキャラクターの絵とかスキル名にするときはサイト上で出来ますよね、ってことです、よね。それこそXMLで十分か。

やっぱバスキュールは凄すぎです。このサイトを見たFlash初心者はもっと勉強したくなるか画面をパーンチしてぶっ壊すかどちらかですね。

トヨタ　チームヴァンガード　消えたダイヤを探せ

トヨタの新車ヴァンガードのサイトがひどい。
なぜかっていうと僕が一番嫌いなパターンだからだ。

//full screen open
function resizeAction(){
		moveTo(0,0);
		resizeTo(screen.availWidth,screen.availHeight);
}
//
//
<body onLoad="resizeAction();">

いまどき、画面開いたらいきなりスクリーン最大にリサイズて。多分コンテンツ制作者は17インチかそこらのモニタしか使ってなかったんでしょう。
強制リサイズされたウィンドウを、1024x768に戻すためにはbookmarkletを使う必要があるんですが、わざわざこんなことさせるサイトは大嫌いです。
コンテンツ中身は１秒も見ません。
ちょうど昨日の夜、トヨタの販売店で「ヴァンガード誕生」かなんかの広告が貼ってあって、おー、今度見てみようかな、なんて思ってたところでした。
ヴァンガードだけじゃなく、トヨタの信頼もなくなってしまいます。

マークアップエンジニアはユーザのことをまったく考えない素人だとして、これでいいと判断したディレクターのクオリティ管理はどないなっとんねん!!!

制作は（株）シェイクらしい。ラクティスやオーリスはよかったのになぁ。残念。

佐藤可士和オフィシャルサイト

制作はtha。っていうか中村勇吾御大。見た感じ、それっぽい。yugopっぽい。好きにしていいですよ的なおまかせ発言があったんでしょうかね?　紹介してるのは可士和さんの仕事内容なのに、中村勇吾の作品を見ている、という感じがします。

yugop最新作にしては「すごい、けど、最後まで見れない」という印象。パッと見は凄いけど、どこに何があるのかがまったく分からない。tha制作のサイト（というか中村勇吾氏や深津taka氏の作品に多い?）によくあるピクセルフォントやポポポ、という効果音。そういえばmonomose:デザイナーズポータル（エキサイト）もtha関連の鎌田貴史氏作で、同じ感じを受けます。僕だけかなあ。

世間をぶっとばすような圧倒的感性、それこそユニクロのサイトのような衝撃は、今回はありませんでした。なぜかな。
tha社の作るサイト大好きなのにな。

今回のKASHIWA SATOのサイトもFlashPlayer9が必要。もう世の中はAS3で書く時代なんですね。
でも最初の画面読み込みでXMLを読み込んでるんだろうけれど（クレジットに北村慧太氏が名を連ねてるからサーバサイドでその都度XMLか画像か何かデータを生成してサイトを表示してる　と予想するのは先入観多すぎ?）2～3秒ブラウザが止まりました。これはまいった。XPATHか何かしてる?　でもAS3はE4XだからXMLの構造さえ知ってれば処理をかませることもないと思ってたんだけれど…そうじゃないのかな。
まぁいいです。

で、HTMLを見てみると、lang="en"でした。さすが世界的人物。もしかしたら海外からのアクセスのほうが多いのかな。

欲を言うと、ポートフォリオにそれぞれ個別URLが欲しかったです。SWFAddressか何かを使うとか、Externalでも出来るのかな。まぁ、何かあったほうが、こうたくさんページがあるサイトは便利だと思います。

日産TIIDA特設サイト

このサイトの中の「艶やかテクニック講座」が、Flasherのクリエイティブをくすぐる作りになっています。特にエピソード6。静止画をゆらしたり拡大したりして「映像」にしているところが小憎い！！
この手法は古くからあり、比較的最近ではDragon Ashの「Few Lights Till Nights(Youtube)」にも見られたりと、いっつも僕の胸のくすぐったい部分を突っついてくれる見せ方です。

これはテレビ的には古いけど、webの映像としては今後、どんどん伸びていくのでは!?

で、何年か後にこの手法を使った映像を目にすると「あー、あれね。一時期流行ったよね」なんつって馬鹿にされるかもしれないんだけどやっぱこの見せ方も好きじゃ！！

制作クレジットはTakashi Kamada（.spfdesign)。また憧れの男だ。
プロデュースのAOI-DCは映像系に強い広告代理店。webのムービーのためにヘリを飛ばすとかなんとか。

tha.ltd.のユニクロアーカイブ

UNIQLOのサイトが、毎月と言ってもいいくらい新しいキャンペーンサイトを立ち上げたり本サイトをリニューアルしてるから（それが「今」を常に感じているユニクロ、という意味なのかもしれないけど）、好きなサイトがいつの間にか消えてしまっていることがあって、それはやっぱり悲しいなと思うのです。

憧れの人たちが作り上げたこのユニクロサイトが、サイトとしてじゃなくて見た目や雰囲気が、大好きだ。

webにタイムカプセルを作る計画があって、今あるサイトを50年後にまた開くよ、ということになったら、真っ先にこのサイトを挙げよう。パソコンのホームページで面白いところ知らない?　と聞かれたら真っ先にこのサイトを挙げよう。
「今」を感じるのがwebの本質であることは承知してるつもりなんだけど、このサイトは消えないで欲しい。他の全てが消えても。ぐらい好きだ。これは愛か！！

ピ。コキコキコキコキコキ。って音がやみつきになります。

http://olympus-wonder.com/

オリンパス「wonder」のキャンペーンサイト。ミスチルの「彩り」（←説明するまでもないけどアルバム「HOME」の代表曲）のミュージックビデオ（PVという表現でいいのかな）を作るサイト。
投稿した画像をフルスクリーンで表示しつつ、曲の１フレーズごとに画像を選んで、自分だけの「彩り」を作ることができる、という内容。

はてブのブックマーク履歴を見るに、少なくとも3月18日には公開されていた模様。
しかし驚くべきは、このサイトで要求されるFlashPlayerのバージョンの高さ。やっぱりか、というか9.0.28。これはFlex2で書き出した場合にこの数字になるようだ。

制作はバスキュール。

Continue reading