写真とレイアウトがよければ、決まるな。

■ナッチャンRera - 新たな「船旅」を東日本フェリーから。

残念ながら運行を中止してしまった、青森～函館を結ぶ東日本フェリーの高速船「ナッチャンRera」「ナッチャンWorld」のサイト。

何がいいって、写真がいい。

普通、こういった乗り物は「足」なわけだが、写真の見せ方が「エンターテイメントとしての乗り物」を表現している。

サイトの作り自体はシンプルなものの、写真の使い方・レイアウトについては勉強になるだろう。

レイヤー的に考える／Widgetはこう使う

■FOX: Terminator-The Sarah Connor Chronicles

つい最近全米で始まった、Terminatorのスピンオフ・ＴＶドラマ「The Sarah Connor Chronicles」のサイトより。

最近では over-lay 広告をめっきり見かけなくなってしまったが、サイトのデザインには使えるなと思ったのがこのサイト。正面の女性（サイボーグ）の部分は後ろのメニュー部分に対して前面にある、というレイヤー的なデザイン構造。それがこのシンプルなサイトの表現性を高めている。ただ、こうした構造が成功するには、前面レイヤーにあたる over-lay の部分よりも、その背景にくる部分のデザインがしっかりしてるかどうか、にかかっていそう。

またこのサイトでは widget の配布を行っているが、なるほど、こうゆうのを配ればそりゃいいよね、と。

勉強になります。

数多くあるよ、の空間表現するならここまでやらなきゃ？

■ PS3 Games Universe

Playstation 3 のゲームタイトルを紹介するサイト。

おそらくゲームタイトルは多くなったよ、とかそういう意味合いで作ったのだろう。

空間表現をするなら３Ｄ的な奥行き表現が「量」の表現をしやすいのか。

ひさびさにフルスクリーン化されるサイトを見ましたが、やっぱりブランド世界に引きずり込まれやすい。

テレビ的表現でテレビでできないことをやる

■ La securite integrale de Mercedes-Benz

Mercedesの安全性を説明するブランディングサイト。

オープニングの未来的な映像も秀逸だが、その後のインタラクティブな説明ムービーが秀逸。

サイトの構成はディレクトリ的な構造で考えすぎるきらいがあるが、このようなインラインに展開するものもものによっては可能だし、積極的に使うべき。

いってみれば、テレビ的表現でテレビでできないことをやるってこと。

シンプルなショウ体験

ISSEY MIYAKE BRAND WEBSITE

これは秀逸すぎるムービー。

Branding site はこのぐらいシンプルにイメージを伝えるのもありなのではないか？

やたらと「見せられるもの」が多いよりは。

むやみやたらにクリックさせるインタラクティブよりも、ココロがブランドにインタラクションを起こしてしまう、そんなサイトだ。


おっと、Masahiko Sato のクレジットが。やはりすごいわ。

Chevy が作った、セカンドライフの向こうを張る超イケてる3DCGサイト

■ Chevy Nation
久々にリキの入った３ＤＣＧを使ったサイトの登場。
最近セカンドライフがまるで最先端なように思われているWebの世界だが、一見自由にみえるセカンドライフの世界も正直制約だらけだし、こぞって「出店」しているのがワケわからん。サーバーを買った某代理店の営業攻勢に騙されてるだけとしか正直思えないところ。
もしセカンドライフに「出店」しようとしている企業のマーケティング担当者がいたらぜひこの Chevy のサイトを見て欲しい。Webの世界はこれほど自由だし、リッチな体験を制約無く作ることができる。しかも、セカンドライフの登録ユーザーのみならず、全てのインターネットユーザーが対象なのだ。そして制作者たちにはこのサイトを「Webで何ができるのか？」を見せるための例として使って欲しい。

複数の“地球”を切り替えてみることができるなんて

"Flash Earth"
Google Maps / Microsoft Virtual Earth などなど、複数の地図（しかもサテライト＆航空写真のもの）を切り替えてみることのできる flash で構成されたサイト。これすごいわ。

同じ作者が作った、プラネタリウムも超ヤバイ。

Google Earth とかのAPI利用したサイトって生真面目なのが多いけど、こういうの、もっと増えて欲しいなあ。

縦と横、だけにとらわれないように。

"Texas Chain Saw - Beggining"
『悪魔のいけにえ』のリメイク版『テキサス・チェーンソー』の続編の公式サイト。
それぞれのメニューをクリックしたときのトランジションに注目。
画面の遷移は、縦と横、画面の切り替えだけ、だと思ってると創造力に限界を与えてしまいますよ。
モニターの上下左右のサイズ、ディメンションだけにとらわれなければ表現は拡がるはずです。

血液で地球を救え！ RED DEFFENDER 物語

"BLOODSAVES.com"

正義の味方 RED DEFFENDER が活躍するアメリカン・コミック風のサイト。
でも中を見てみるとこれが、献血促進のためのキャンペーンだったりする。作りも面白いけど、メッセージ性も強い。しかし、コミック風のプランにしたところが、どんな若者でも受け入れられやすい、インターフェースになっている。そう、ここがポイント。Ｗｅｂサイトの面白いところは、「ユーザーに受け入れられやすいインターフェース」に仕上げられること。だからこそ、「どういったテイストが気に入られるのか？」をターゲットごとに練らないといけません。

ところで、１パイントの血液で、３人の命が救えるって知ってました？

登場人物になる、エクスペリエンスなメニュー構造

"Casino Royale 007"

007の新作「カジノロワイヤル」のオフィシャルサイト。
登場人物としてカジノの席に座ったようなインターフェースとなっており、座席上のカードがメニューとなっている。つまりこのサイトに入った時点でサイト来訪者は作品中の登場人物となって参加させられており、カードを引かざるをえない、といったエクスペリエンスサイトになっている。

音を楽しむ＝音楽のインターフェース

"musicovery"
ジャンルを選ぶと一枚のリミックスアルバムのような web radio ができるサイト。flashベースのインターフェースがアナログなのがいい。ambience/dance と、同じジャンルでもどちらか選べるのがいい。曲順の見せ方がいい。など、音を楽しむ＝音楽なのだということをインタラクティブなビジュアルから学べるサイトです。

期待感をゲージに。

"HUCIN' CHICKEN - EXTREME AIR"
毎回話題を振りまいてくれるバーガーキング＋"Crispin Porter + Bogusky"の新しいキャンペーンサイト。今回は「空飛ぶチキン」。エクストリームスポーツの選手にきぐるみ着せて飛ばしてるだけ！なんだけど、このサイトの見せ方で上手いのは左にある高度計＝ゲージ。上に上がっていけばいくほど難易度の高い技が出てくる模様。実際の「高さ」、技術の「難易度」だけでなく、見ている人の「期待感」までこのゲージだけで表現されてるところが上手い。

集合名刺

"GRINGO"
海外クリエイティブブティックのサイト。のっけから「ここどこや～」っていう秀逸な写真とそれを丁寧にいじったエフェクトにやられる。
中を見てみると、メンバー一人ひとりをインタビュー付で紹介している。「会社」という組織、及び「会社名」ははそこに属する人々をもあらわす“集合名詞”だと思うんだが、こうした人を前面に押し出すというのは「この人たちが仕事をします」という会社全体の“集合名刺”として信用とブランドイメージを構築するのに役立つとおもう。

サムネイルはユーザーフレンドリ

　"Tarun Khiwal's Photography"

インドの写真家、Tarun Khiwal の website。写真家の公式サイトらしいギャラリー構造をミニマルかつグリッドを使ったサイトのデザインで実現している。

このサイトで注目したいのは、各写真を見る際に上部に出てくる“数字”をマウスオーバーすることで出てくるサムネイルイメージ。

写真などのイメージはローディングに時間がかかり、ページからページ、写真から写真といった遷移は結構うざったい。一方、そうして出てきた画像が大したものでなかったり、自分が目標とするものでなかったりして興ざめ、なんてことは結構ある。しかしそんなときにこうしたサムネイルを、ユーザーにとってすばやく画像を見せるために使うのは非常に優しいサイトづくりにつながるように思えるのだ。

モードを切り替えてあげること。

"Nuevo Megane"

新しいルノー・メガーヌのサイト。

画面中心部で展開されるトイ・ストーリーばりの 3DCGアニメを起点として、ストーリーがそれぞれ枝分かれしていく構造になっている。

また、その枝分かれしたストーリーに飛ぶと、それぞれにあわせたトーン＆マナーになっているのも抜かりない。

リクルーティングサイトでブランディングをちゃんとする

"e-musubi" - Hakuhodo & Hakuhodo DY media partners　Recruit 2007

リクルートが「リクナビ」を始めて以降、就職活動は１００％インターネットを利用するようになった。そのため、企業のリクルーティングwebsiteも彼らに向けたブランディングを意識するようにしなければならない。博報堂は以前から学生向け会社案内を作るのがうまかったが、ようやく今年、そのレベルに達したwebsiteが登場した。

制作は、博報堂 i-studio 。アートディレクションは、佐野研二郎か平野あたりかな？デザイナーは杉山か？

いや、このサイトはいいサイトだ。学生たちにも評判になるかな。どうするＤ？？？

このサイトで一番秀逸なのは"site map"のところ。なぜこのサイトが"e-musubi"なのか、よくわかります。あと、ScreenSaverがダウンロードコンテンツになってるのもいいね。学生君たちが自分のＰＣに入れてしまうかも。これも stickiness を高めるいいツールです。

※ちなみにデスクトップアプリケーションがもたらすブランディング／プロモーション効果については、僕の書いたこの号の宣伝会議をお読みください。