Webサイトの構成

Webサイトは3つのコンテンツで構成しています。1つは「TV CM」。もう1つは「CPUの歴史」。そしてメインのコンテンツが「アシタロボを作ろう」です。

コアのメッセージは、サイトのイントロ部分に記載しています（今はちょっと落としていますが）

ひとつの「知りたい」というキモチから
いったい幾つの発見や発明が生まれたことだろう。

もしかすると私たちの暮らしのすべては
そういう大小様々な好奇心の結果、なのかもしれない。

そして今の私たちのもつ好奇心は
必ず未来の暮らしにつながっていく。

こういうものです。

このメッセージを端的に表現したストーリーがTV CMであり、そのストーリーがインテルという会社においてどのように結実したかを見ることができるのが「CPUの歴史」。そして、こういった好奇心がいろいろなものを生み出すこと、「発明」といったものを簡単な仕組みで体感できるようにしたコンテンツが「アシタロボを作ろう」です。

アシタロボを作ろう

「アシタロボを作ろう」は、先ほど書いたようにコアメッセージを追体験するための仕組みです。ユーザーはあらかじめ用意してある109個の3Dパーツと6種類のエフェクトを組み合わせて、ほぼ無限のバリエーションがあるロボットを作り、育てることができます。正確には3Dパーツの組合せで1633万のバリエーションがあり、着色などのエフェクトがあるため計測不能なバリエーションが生まれます。 このバリエーションの数はこだわりのポイントで、「アシタロボ」というタイトルの通り、この子たちは好奇心から生まれる未来を表した存在でもあるわけです。その未来が30種類とか50種類とかしかないんじゃ、あまりにがっかり。やる人によってほんとに無限な広がりがあることをちゃんと表現したかったので、このバリエーションの数になりました。大変だったけど。

ちなみに、これは僕の代表ロボの「ミスターブシドー」です。今レベル51で、ドラクエだったら最後のボスをさくっと倒せるレベルですが、まだ70位前後をウロウロしてます。気を抜くと100位ぐらいまで落ちちゃいます。ちなみに、公開してから1カ月でバナーなどの誘導も本格化してませんが、2万体弱のロボットが作られ、50万回以上対戦が行われています。上位10位に入るには1万戦ぐらいやらないといけないという白熱ぶりです。

胸の王将がチャームポイント。パラメーター的には結構強いです

毎日色々なロボットが作られています

アシタロボの作り方はとても簡単です。まず好きなCPUを選びます。アシタロボのパラメーターはパソコンの性能をなぞっていて、選んだCPUが実際に持っている性能により、基本となるパラメーターが決定します。Core i7だとスピードはとても速いが携帯性はほとんどない、といった具合です。

CPUを選択

つぎにロボットの体のパーツを選択していきます。胴体はCPUを選択した時点で決まりますが、頭・手・足・頭につける装飾・胴体につける装飾のパーツを配置し、さまざまなエフェクトをかけられるアクセサリーを配置していきます。 3D部分以外のメインのFlashの実装はShedの石橋さんです。 それぞれのパーツにパラメーターへの加点が組み込まれている他、特殊な組合せでのボーナス点も加算されます。

パーツは3Dモデルですが、PaperVision3Dを使うと現実的に1000ポリゴン程度でアップアップになってしまうので、今回も大学の同窓(?)でもある貝島さんとその一緒に仕事しているパナヨティスに頼んで、新しく3Dのレンダリングエンジンを開発してもらいました。なので、開発中のアシタロボはプレビューにマウスオーバーするとマウスオーバーすると、パーツごとに色々動くし、ぐるっと回転もします。この2人は本来は建築関係の人で、イギリス在住ですが、SVNとかメールとかを駆使してやってもらいました。パーツのデザインは、高岡とタングラムさんで作っています。

そして、他のメカと対戦することで、経験値を積みレベルがあがっていきます。レベルがあがるとパラメーターがちょっとだけ成長します。

対戦画面

対戦で何を競うかというと、パソコンの利用シーンに合わせたシチュエーションに自分のアシタロボが対応できるかといったことを競います。アシタロボがパソコンという存在をアバター化したものという一面があることも、こそっと伝える仕組みです。対戦自体はほとんどオートで進行するシンプルなものですが、モバイルサイトでも同じ方法で対戦するようにしたいと思っていたので、シンプルな仕組みで、面白くできる方法やコピーワークを模索しました。

対戦はモバイルサイトでもできるので、電車のホームとかタクシーの中とか、トイレの間の暇つぶしに最適です。

ぼくのメカ倉庫

自分のメカ倉庫があり、ここで管理ができます。最大5台までロボを作れます。

このコンテンツでのユーザーとのコミュニケーション上で大事な仕組みとして、「代表ロボ」という仕組みを導入しています。今回対戦は、リアルタイムにアクセスしているユーザー同士ではなく登録されているロボの中から選ばれます。このときに対戦相手に選ばれるロボが、「代表ロボ」に指定してあるロボットになります。

この仕組みを導入した理由としては、せっかく丁寧にデザインしたアシタロボが知らないうちに負けだらけになってしまったら悲しいのではないかということが1つ。もう1つは、再来訪の動機につなげるためです。代表にしてあるロボットは自分がサイトにアクセスしてない内に、経験値を積んでレベルが上がったりします。5台のロボットの勝ち負けやレベルを把握するのは難しいですが、1台のロボットのレベルだったら覚えられますし、集中して育てられます。自分がアクセスしていない間にも、ロボットが成長していると思うと、つい見たくなりませんか？

今回は、モバイルサイトでもアシタロボの対戦などができるようにすることが念頭にあったので、こういったユーザーがアクセスしていない間のコミュニケーションデザインも含めて、丁寧に計画していきました。

あと、モバイルサイトでは、他のコンテンツをいっぱいみると、黄金のパーツがもらえるようになっています。このパーツはとても強いです。一時期ランキングの上位が、黄金のパーツのアシタロボだらけになってしまったのですが、黄金パーツを超えることができる組合せの新ルールを先日から導入しています。みんな気づくかな。

あと、毎度のことながら、ブログパーツもあります。

このページの上の方にも別のタイプを張っていますが、セリフ付きで表示できるものなど3種類のブログパーツを提供しています。モバイルサイトでは待ち受け画像も作れますよ。

今回は全体的に、自分の子供がいたときに一緒にこういうのができたら楽しいじゃないかという思いを込めながら作っています。小学生の低学年ぐらいのお子さんとかがいらっしゃる方は是非、一緒にやってみてほしいです。

CPUの歴史

知らない人も多いと思いますが、インテルは、世界で初めてパソコン用のマイクロプロセッサ・CPUを作った会社です。ムーアの法則で有名なゴードン・ムーアと、ロバート・ノイスの好奇心から始まったインテルが、これまでにテクノロジーの進化にどれだけ大きな寄与を果たしているかを表現するものとして、このコンテンツがあります。

タイムラインをドラッグすることで、CPUがどれだけ進化したかが端的に分かるように表現しています。

 

タイムラインをドラッグすると

とくにトランジスターの集積密度などは一目瞭然です

一番左の人のアイコンを自分の生まれた年にドラッグすると、その頃何歳っていうのがすぐわかります。

Credit