朝を楽しく、わくわく、気持ちよく。 - 朝時間.jp

近年mixiやブログなどいろいろウェブではやっているコミュ二ティーがあっていろいろ仕組みの高機能化のニーズも高くなってきました。「いろいろできるし、ほかにはないサービス機能もついてますよ。なので自由に好きな使い方してくださいねー」という感覚だとおもいます。

朝時間.jpは逆に、何のために使うかというところを絞ったコミュニティーサービスのようです。
朝を清々しく始めるためのコミュニティーです。
会員登録すると、ひとこと朝宣言というユーザー個人のスペースが設けられ、管理画面から、朝、カレンダーに簡単な今日の目標と大まかな目標ジャンルのアイコンを入力することができます。
アイコンは、成長、達成、スポーツ、素直、愛、勇気、夢、友情、美など20種あるようです。
後、前日までの目標に対して達成できたかどうか結果を付け加えられます。
会員ユーザー同士はほかの会員のページに行ってコメントを残すこともっできて、同じ目標を持っている人を見つけたり、応援しあったり、励ましあったりできるようです。

この朝時間の機能は難しい機能じゃないと思います。
ブログなんかよりシンプルなつくりで、カレンダーとコメントだけで構成されてますが、コミュニティーを使用するシチュエーションを絞った上で制作されているんだと思います。何のために作るかしっかり絞った上でちゃんと必要な機能だけを組み込んでいて、上手に作ってあるのかなーと思いました。

ひとこと朝宣言についての解説

朝のお買い物、朝美人、365日の朝のコトバなど、サイトに訪問するユーザーの好みをピンポイントにくすぐるコンテンツもちりばめられてます。

stoav

XMENなど映画のオープニング(？)や、タイトルアニメーションなどの3Dを交えたアニメーション制作や、AEON FLUXのアクティブデスクトップや、I,ROBOTのプロモーションサイトなどの制作、3Dなどのグラフィックを生かした紙モノの制作などをやってるところみたいです。

EURO Styling for AVENSIS

ヨーロッパ生まれのトヨタアベンシスのプロモーションサイト。
コンテンツのあちこちで、ナビゲータモデルのポールさんが英語（たぶん）+日本語字幕でしゃべって解説してくれます。SEやエフェクトなど、とても滑らかで高級感があるつくりになっています。

まずカジュアルとフォーマルで選択するところから。
コンテンツ量が多くいろいろ面白いのはカジュアルです。

ポールさんがいろんなファッションでアベンシスにのって、日本中のいろんなお店や観光スポットに訪れてこだわりを話すという内容。

スポット情報ひとつのボリュームが、画像1枚と解説テキスト、ポールさんのクロマキー抜き映像のワンコメントだけなので、ちょっと物足りないかんじですが、けっこういってみたくなったり、アベンシスライフを想像してしまいます。
モデルさんひとりのわりには、ファッションがずべてちがうので、シーンごとのキャッチにもなるし、じっさいキャッチアイコンとして使われてますね。


カテゴリから選ぶこともできて、キャッチアイコンのファッション別のポールさんが図らって並んでいるナビゲーションから、カテゴリを選ぶことで、関係あるポールさんだけが前面に出てきます。

スポット名から選ぶコンテンツも用意されてます。
選び方によってナビゲーションが別々で飽きないつくりですね。

ファッションから選ぶモードもあります。
ファッションの解説もあっていちお抑えてあるってかんじですね。

キャンペーンとしてヘッドフォンのプレゼント応募がありました。
アンケートの量がすごいあったので、キャプチャーしときました。
↓こんなに…

めちゃ長いのが3ページもあります。
これかいてでもほしくなるすごい音いいヘッドフォンなんですかね－。

Levitated the Exploration of Computation

Flashでつくった、モノトーンでおしゃれな、スクリプトでつくったフラクタル処理やエフェクトなどを公開しているサイトです。しかも、.fla制作データがダウンロードできます。
英語でとくわかりませんが、作り方や概念なんかも解説されてます。たぶん。

立体的なくねくねした筒の空洞みたいなこれとか、マウスを中心に立体的に盛り上がるこれとか、いろいろおもしろいものがあって、「この構造どういうアルゴリズムなんだろ」とか感慨ながらじーとみてると楽しいサイトです。

Carlo Rossi

カナダのワインメーカーの商品紹介サイトです。
ワインの商品紹介、ヒストリー、ワインのビンで作るインテリアの紹介と大きく分けて3つのコンテンツで構成されていますが、どのコンテンツに入っても、グリッドで区切られて整頓されたデザインが崩れないインターフェイスになっています。
滑らかでスムーズで、かっちりしていて、わかりやすいなーっておもいます。

ワインの商品紹介だとこう

ヒストリーだとこう

インテリアだとこう

ワインの商品を詳しく見る（3階層目の）表示になるとこう

インテリアの紹介の3階層目表示だとこう

製作工程を録画したムービーがみれたりコンテンツも充実しているし、巡回しやすいつくりになっています。いーですね－。

PingMag - 東京発 「デザイン＆ものづくり」 マガジン

WEBデザイン制作、システム開発、企画コンサルティング、商品開発などをおこなっているデザイン会社IMG SRC（イメージソース）が運営している、斬新な視点でちゃんと取材されたブログ形式のウェブマガジンサイトです。
点字についてや、映画看板の伝統的なものつくりについてや、お土産ものぱっケーデザインにつて、クリエーターの取材記事、トップクリエイターから近所の商店のオモチャに至るまで、幅広い視点のなかから的を絞ったテーマでちゃんと取材された内容の記事を発信しているウェブマガジンです。
参考になったり、刺激になったりしてとてもためになるサイトだと思います。
すごい時間をかけて取材してそうだなーと思います。
15人ほどのスタッフで運営しているようです。
ボランティアの自社運営的なものなのでしょうか？

これは、映画の告知でたまにみる手書き看板の手法をつかって、大きな壁に通常の広告を描いているという記事。一見無駄ですね。看板屋さんにたのんで大きく印刷して貼ってもらったほうが全然手間がかからないですよねー。そこをあえて手書きで挑む、「大志君が免許MTで挑む」的な意気込みをかんじます。
近くから見て手書きだとわかったときのインパクトは大きいでしょう。
こんな記事がいろいろあります。

これは、点字の話。
プログラマーをしている視覚障害者に実際に取材して、点字についての質問と生の声でまとめられた記事です。駅の手すりにある点字はすごく役に立つようです。PCの使い方なんかのインタビューもあって、いままで想像できなかった環境の声なんかが聴けておもしろいですね。

こんなペーパークラフトのアーティストの紹介の記事のときがあったり

４年という短い期間でイラストの業界でトップアーティスト入りした人のことがあったり

新しいインターフェイスのこと

カミロボの人とかいろいろな記事が深い目線で記事になっています。

最新のWEB技術もどんどん取り入れて、googleMapとの連動や

PodCast配信なんかもやってるすごいウェブマガジンです。

東京海上日動｜安心World

東京海上日動のCSR（企業の社会的責任）コンテンツ。
コンテンツ…とはいわないかもしれません。
下階層ほとんどのページで、コンテンツより右側に4つの輪が現れ、アンケートの入力ツールが現れます。たとえば環境問題。ユーザーの一番問題視している内容のアンケートなどがあって、ユーザーの声を吸い上げるツールとなっているようです。どのページにもさりげなくおいてあるので、投稿してくれる人も多そうな気がします。
※IEのみ推奨機能

青い輪っかをオーバーすると、それまでさりげなかった輪っかが大きくなってアンケートフ結果表示とフォームになります。
普通のHTMLページの上にかぶるように輪っかのフォームが出てきます。
Flashバナーで使われるギミックですね。
これはHTML上でレイヤー分けしてあるつくりのようですが、ブラウザによって表現できる場合とできない場合が出てきます。表示されない状態を回避するため、IE以外の場合（FireFox・Mac Safariの場合）はコンテンツエリアの右にフラッシュをなじませて配置しているだけにして似たような機能に見せているようですが、画面が小さいとスクロールアウトしてしまうので使いづらくなってしまってます。

送信中、送信完了の動作も用意されています。

「このトピックスの詳細」から伝えたいメッセージ等の内容のページへ誘導されているようです。

TYO Interactive Design Inc.

このサイト、制作会社のサイトのようです。
どうやってるのかよくわかりませんが、表示されてるケータイの番号に電話をかけると、弾を撃つインベーターゲームが公開されています。ウェブカメラで受信先のケータイが移っていて、向こうが受信すると、寝てる棒人間がびっくりして起きて走り出してインベータゲームの機体にぶかります。ぶつかった衝撃で弾が発射され、たまに通り過ぎるエイリアンに弾がタイミングよくぶつかれば、このゲームのブログツールというかバナーがもらえます。
ケータイの発信とサーバが連携してるんでしょうか？

エイリアンにうまく弾をヒットとさせたとき、こうなりました。

shinzou.jp シネステージア

shinzouというミュージシャン、DJ、アーティストが終結したチームが運営するウェブサイト。
コンテンツの内容は「コミック」。杉村エンカという作者のコミックが連載されています。
技術はもってるけど空気が読めないので仕事を首になったDJと、色を見ると頭の中で音になって流れ出す体質の小学生が出会って、一緒に曲づくりをはじめるというストーリーです。連載中のためまだ完結してません。10話構成で2週間に１回の連載みたいです。

ちゃんとページめくり処理（マリーズヴィルでやったのと同じ処理）の機能がついてます。

オープニングが終わると目次とキャラクター紹介になります。
コミックをウェブで公開するメリットとして、けっこうインタラクティブ性を付加しているようです。

更新するたびに背景がかわるのも面白いですね。

このウェブコミック。おもしろいのが、スーとーリ上で流れている曲がiTuneStoreでダウンロードできるという点です。ストーリー上のＤＪブースやキャラクターがiPodで聴いている曲、街中で流れている曲など、登場する曲をiTuneで購入できるリンクがコマの中に出てきます。
Appleのプロモーションにもなってるん感はありますが、表立って絡んではないようです。

Las Vegas - Entertainment - Hotel - Resort - Casinos - Vacation MGM Grand Hotel & Casino

ラスベガスのカジノ＆ホテルのサイトのようです。

5つ伝えたい訴求のポイントがあるようで、サイトに入るとまず5つのイメージうちのどれかがランダムで表示されます。「ENTER MAXIMUM VEGAS」のボタンでコンテンツに入ることができます。

すると、ホテルでのゴージャスな生活(？)シーンのムービーが再生されます。シーンとシーンのつながりの編集がシームレスなんですが…すごいです。カットを切ることなくどんどんつながって再生されます。
…ベッド→レストラン→クラブ→プール→カジノ→コンサート→ベッド→…ってずーっとつながってます。
ムービーの右下に白抜きのサークル型ナビゲーションがあり、ムービーの再生時間にあわせて位置がクルクル進むんでいきます。どこからムービーが始まっても永遠にループする切れ目のないシームレスムービーなので、サークル型のナビゲーションなんですねー。ナビゲーションをいじることでムービーを早送り巻き戻しできます。
見てて飽きないですね。
ホテルでの楽しい時間がイメージできていきなくなるユーザも多そうです。

MESSAGE BOARD ｜ 1007.jp ｜ プジョー・ジャポン

プジョー1007のコミュニティーコンテンツです。
ウェブ上で1007の写真の上に落書きをしてポストできます。いろんなひとが写真に描いたらくがきも見ることができます。実験的ならくがきサイトはいろいろありますけど、プロモーションサイトでメインでらくがき機能を使ってあるのはあんまり見ないですよね。

写真に「のりおりが楽」とか描いた人。
変なことを描くひとはあんまりいないようです。

投稿したい場合は、まず背景に敷く写真を選びます。

らくがきよメッセージをかきます。
らくがきは「元に戻す」機能もついてたり、ペンの太さも変えれるようです。
デザインに影響があまりないように、ペンの色は色白１色だけに絞ってあるようですね。

水と生きる サントリー

サントリーの水と生きるというCSR(企業の社会的責任)を公表するためのコンテンツ。
サントリーの水へのこだわりや取り組みをひとつずつをカード状にして紹介しています。
最近こういったブランディングを向上するためにCSRコンテンツを作る企業が増えてきているようです。

カードが沢山波打つ水に浮いていますね。
技術的な話ですが、この波打つ処理、上乗せのエフェクトじゃなく、現在の画面の状態をキャプチャーして　→　波打つ水面の状態を作るため、屈折させて　→　表示…という難しい処理押しているようです。
カード自体はぶつかり合ったりしていろんな動きをするので、ムービー用を意しておいても表現できません。
カードの輪郭・画像、マウスを早く動かしたときの背景などを見ていると屈折処理が行われてることがわかります。

カードがまだ出てきてない最初のうちは、背景画像がマウス移動で発生した波によって、屈折してるのがわかると思います。

実際は、マウス移動で発生する波が影響を与えるのは背景画像だけ。
よくみるとカード自体はずっと一定の動きです。
でもカードの中の画像も屈折しているので、ただのパスアニメーションではなく、
カードはカードで単体ごとに屈折処理を行っているようです。こまかいですね。
カードの処理と背景の処理はの負荷軽減のため処理を分けているんですねー。
っていうのが観察してるとわかってきました。

カードをクリックすると、カードが深く沈み、詳細パネルがでてきます。

画面内のどっかに転がっている青い玉はカテゴリメニューのようです。

青玉メニューからカテゴリひとつを選ぶと、関連するカードを整列させて仕分けます。

操作がわかりにくい人向けに、普通にメニューも存在してますね。

Travelers - In Synch Challenge

アメリカの保険会社の提供サイトです。
日常生活で起こりうる危険を、感覚的に操作できる楽しいゲーム的クイズ形式で回答していく危険予防策体験型クイズゲームコンコンテンツです。
インタラクティブを踏まえた3Dの素材をうまく取り入れて、シームレスに表現ざれています。音声を多用しています（英語なのでよく聴き取れませんが…）映像の面では、エフェクトを矢印やアイコンなどを多用して作ってあるのでとてもわかりやすくなっています。

非常口はどこにつけておけば、非常事態に安全に脱出できるのかという問題。
問題1問分の流れとしては　ムービーシーン　→　インタラクティブ問題　→　回答・解説　の流れになっています。
たとえば上の問題の場合、非常口ひとつ、非常口案内盤ふたつをドラッグできます。
操作して、最適だろうと思う位置においていきます。
おいたときに、ナレーターが声でいろんなリアクションがあるもこまかいことだけどいーなーとおもいます。問題を回答する時、タイムリミットが決まっていました。もうＯＫの場合はそのタイムリミットアイコンをクリックしたらもういいの？見たいなこといわれて終了します。

こんなかんじで回答のムービーがわかりやすいですね。

ほかにも、泥棒が入りにくい照明の配置の問題とか

火事になっちゃいそうなロウソクを置かないほうがいいところの問題とか

これはなんかよくわかりませんでした。家の中でメンテしないと危険な場所の問題でしょうか？

火災警報器の最適な場所の問題。
問題を入力し終えると、キッチンから火災が発生するシミュレーションが起こり、煙が家の中で広がっていきます。自分が配置した火災警報器の近くまでくるとちゃんと警報機が動き出しす流れ。自分のやってみた回答をシミュレーションした上で回答がでます。わかりやすいなーと思いました。

えーとこれはたぶん、泥棒にはいられて紛失したものとかが出たときのために写真とっておくとか…何だと思うんですがこれ、実際にマウス位置がカメラになってカメラディスプレイもリアルに動くし、クリックしたらシャッター押したことになるというインタラクティブ。感覚的にわかりやすくていーなーと思いました。

最終的に、回答率がこんな風に表示されました。
ユーザーには、こんなとこが危険なのとかいろいろ詳しいですよ、アドバイスしますよってイメージが植えつけられて、プロモーションになる企画なのかなーと思います。

BBC - Radio 1- Musicubes - Constructor

アナログ回線時代から無料ストリーミング配信サービスをしているBBCが提供しているブログツール。設定しておけば、オリジナルの「音楽ジャンル好きな割合グラフ」を作ることができます。

作ったツールを操作すれば、ジャンルごとにBBCの番組配信ページへのリンクがあるので、「沢山あるラジオ番組のなかから自分の好きなジャンルの番組を自動的にまとめてくれるリンクツール」ってかんじでしょうか。この仕組み、沢山お人が自分の好きなジャンルを登録していくので、ジャンルの人気に応じて番組のボリュームも変動したりすればマーケティングの要素になる可能性もあるかもしれませんね。

ツールを作るコンテンツに関して。
まずジャンルを選びながら、じぶんのオリジナルのグラフを作るんですが、ジャンルグラフが増えたり減ったりするオブジェクトもきれいに作ってあるし、インタラクティブにあわせて滑らかに動きます。さらにジャンルごとに別々のSEが用意されていて、細いとこも作りこまれてるなー思いました。

オリジナルグラフ作りが終わると、ブログに張るためのタグが表示されます。
自分のブログにタグを貼ったらどんなのが表示されるかすぐわかるように、実物も表示されています。

下のこれが実際作ったツールです。フラッシュ自体の背景が透明設定になっているので、背景色に影響がないしオブジェクトも透過してます。

EQ Trainer イー・キュー・トレーナー｜タカラトミー

IQって、知能を計るための基準がありますね。
それとは別にEQっていうのがあるそうです。

IQは頭の良さですが、EQはココロの頭のよさ（？）で、コミュニケーション能力とかを計るための基準になるそうです。EQの「E」はEmotionalのEらしいです。
今年の夏、JRの案件で電通さん→アフロッグさん→カンドウのなかれで頭を鍛えるゲームを作る案件がありました。その第２弾として、EQをテーマにした案件の依頼があって打ち合わせしてきました。

このEQ。トイザラスのおルービックキューブの横の棚に、EQトレーナーってのがおいてありました。けこうメジャーなんですね。サイト上で実際診断できるみたいです。

スゴイ地図雑誌感覚のローカルサーチ

大志君から教えてもらった、RECRUITが運営する、飲食店・メジャースポットなどをマップ型で検索できるサイトです。
エリア・キーワード・カテゴリ検索ができます。
検索を始めると、ヒットしたスポットにピンが飛んできてマップ上にささります。
結構動きがあるサイトですね。

マップの下にピンと連動したサムネイルが並び、ピンかサムネイルどちらかをマウスオーバーすると、連動しているのがわかると思います。サムネイルが気になってマウスオーバーした場合でも位置がわかるし、場所が気になってマウスオーバーしてもどんな店・スポットなのかがサムネイルでわかるようになっています。

マップをドラッグして表示エリアを変えることもできるし、ズームもできます。googleAPIを使ってるんで膨大なマップデータは管理しなくていい形と思います。
表示エリアが変わった場合に、表示するスポットがへんかするので、リロードされるんですが、その辺の処理の待ち時間や負荷が結構かかるみたいです。ユーザーは情報を探しにきてるので、レスポンスが早くなるともっと委員だろうなと思います。もうちょっとって感じですね。
RECRUITなのでHotPepperとかの沢山もってるデータを二次利用してるとすると、情報量は強いコンテンツっぽいですね。

YouTube - Nissan 4x4 Naturally Capable ad

NISSANのCM。車がいろんな動物に変形して車じゃ通れないところもサクサク進んでいくストーリーです。
変形するときの車の動き、すごく上手に手抜きしてあります。手前に岩が横切ったりとか一瞬フレームアウトしたりとか。変形するシーンをもっとゆっくり出したらもっとインパクトあるんだろーなーとか思いました。

MACってフォルダの色を換れるので、ファイルの整理がしやすいですよね。
ウィンドウズでもフォルダの色を帰ることができるアプリケーションがありました。
ここ
ちょっと汚い色もありますが、2、3色使い分けるだけで効率違うかもしれませんね。

YouTubeって面白いムービーとか沢山上がってますよね。無法地帯です。
著作権持ってる人から削除依頼があったりして、ブックマークしててもみたいときに消えてることもしばしば。FireFoxでダウンロードする方法があったので紹介します。
これ

ダウンロードされたファイルはFlv形式になります。
Flvを再生するアプリケーションはこちら。
これでムービー落とし放題です。

Lavshuca

カネボウの化粧品ブランドLavshucaのプロモーションサイトです。
マウスを動かすと視界が連動して変わる処理を使ってますね。これしたらたいがい使いづらくなるんですが、けっこうストレスなく動かせました。
リッチなコンテンツ感がをだすスパイスになってるかなーと思います。

その他コンテンツの中は…

商品を使っての実演。化粧品を使ってメイクするところをムービーを使って紹介してます。

商品紹介。少々閲覧しにくいですが、商品ファンの人には好奇心くすぐる構成になってるのかもしれないなーと思います。

CMの見せ方。
CMいっぽんだけのコンテンツをゴージャスに見せてますね。
素材を上手にゴージャス化してるなーと思いました。