いま,見ておきたいウェブサイト

第79回 Perfume official global website,TheCodePlayer,Project Re: Brief by Google

この記事を読むのに必要な時間:およそ 2 分

次第に強まってくる日差しと,桜の開花予想にワクワクしている今日このごろ,皆様いかがお過ごしでしょうか。今回も個人的に感じた,素晴らしいサイトの特徴をいくつかお話したいと思います。

世界に向けた,ポリゴンダンス

Perfume official global website

今年に入って海外進出を視野に入れた活動をスタートさせた,女性3人組テクノポップユニットPerfumeのグローバルサイト『Perfume official global website』です。

図1 Perfumeのグローバルサイト『Perfume official global website』

図1 Perfumeのグローバルサイト『Perfume official global website』

credit:Rhizomatiks

ウェブサイトでは,画面右上にある2種類(⁠SOUND REACT」⁠MAX POLYGON」⁠のつまみを変化させてモデルの形状を変化させたり,マウスのスクロールホイールを使ったズームイン/ズームアウトを行ったりしながら,オリジナルサウンドに合わせて踊るポリゴンモデルのダンスを楽しめます。

図2 オリジナルサウンドに合わせ,ポリゴンモデルが生々しくダンスする

図2 オリジナルサウンドに合わせ,ポリゴンモデルが生々しくダンスする

データのオープン化は,創作活動を変えるか

この『Perfume official global website』でも使用されている,Perfumeのメンバーのダンスを記録した,約1分間のモーションキャプチャデータとサウンドが,2012年3月30日にダウンロード可能となりました。この試みは『Perfume official global website』のプロジェクト第一弾として行われたもので,モーションキャプチャデータは,Perfume global site project #001を通じて,GitHub経由で配布されます。

図3 モーションキャプチャデータが提供される『Perfume global site project #001』

図3 モーションキャプチャデータが提供される『Perfume global site project #001』

自由に利用できる形で,こうしたデータが提供されることは非常に珍しいことです。数年前,Googleとコラボレーションして,イギリスのロックバンドRadioheadが,PVに使われた3Dのマッピングデータとツールのソースコードを公開した"House of Cards"の事例がありますが,その後,こうしたデータをオープン化する動きは,あまり聞こえてきません。

図4 Twitterでのハッシュタグ(#prfm_global_site)の検索結果

図4 Twitterでのハッシュタグ(#prfm_global_site)の検索結果

今回,非常に人気の高いアーティストのデータであることや,使用制限が緩いこともあり,Twitterのハッシュタグ(#prfm_global_site)検索で多くの作品を閲覧できるなど,この試みが非常に多くの人の"創作意欲を刺激した"ことがよくわかります。こうしたデータのオープン化で,多種多様の創作が繰り返され,より広いコンテンツの拡散を狙う試みが増えていくのかどうか,注目したいと思います。

完成までの流れ,全部見せます

TheCodePlayer

コードが記述される様子を見ながら,HTML5,CSS3,JavaScriptなどの技術が学べるウェブサイト,⁠TheCodePlayer』です。

図5 さまざまなフロントエンド技術が学べる『TheCodePlayer』

図5 さまざまなフロントエンド技術が学べる『TheCodePlayer』

credit:Ruby On Tails

学びたいレッスンを選択後,⁠Play Walkthrough」をクリックすると,画面の左側で自動的にコードの記述が始まります。画面の右側では,実際にどのような結果になるのかが,コードの記述が進行するとともに,変化しながら表示されていきます。

図6 画面を左右に分割して,レッスンが行われる

図6 画面を左右に分割して,レッスンが行われる

コードとその結果が1ページで確認できたり,HTML上のコメントを利用して内容を説明したり,コード完成までの再生スピードを変更できたりと,さまざまな工夫が感じられる,非常に面白いウェブサイトです。

ユーザーを引き込む"人間臭さ"

『TheCodePlayer』のレッスン内では,コードの打ち間違いや修正が発生したり,コードの記述速度がまちまちだったりと,人間がその場で考えながらコードを打っているような表現が,そのまま使われています。

チュートリアルサイトでは,動画などのレッスン内容がきっちり編集されている場合が多いのですが,時としてその間違いのなさが,単調で面白みのない雰囲気を生み出し,学習する者を退屈させる場合もあります。

『TheCodePlayer』では,人間がその場でコードを打ち込んでいるような臨場感と,⁠そういうことも起こるよね」という共感を創り出すために,本来,修正すべき部分を残したレッスン内容の編集を行っています。

こうした"人間臭さ"をさりげなく加え,ユーザーを注目させ,コンテンツの持つ世界観に引き込ませようとするアイデアが秀逸なこのウェブサイト。⁠洗練されたウェブサイトが最善の結果を生む」わけではないことを証明するこうした事例を体験するたびに,改めて,ウェブサイトの奥深さを感じます。

著者プロフィール

Lançamento(ランサメント)

国内外のウェブサイトを日々紹介する Blog『Lançamento』を運営する,自称“フリーランスという名の無職”。目指すは“エクスペリエンスデザイナー”(O'REILLY『Web情報アーキテクチャ』11ページ参照)。2008年の“ジェフの奇跡的な残留”を目の前で見たサッカー好き。

コメント

コメントの記入