見てるだけでかわいい!マウスの動きや選択によって変化する動画を効果的に活用したインタラクティブなサイト3つ

ネット回線の高速化でWebサイトは大きめの動画を扱えるようになってブラウザ全体に動画が流れるサイトも増えてきていますが、ただ動画を流すだけでなく、サイト全体で動画を効果的に使って、なおかつマウスの動きやクリックによって映像が分岐するインタラクティブなサイトを3つ紹介します。Webサイトの技術もですが、見てるだけでもかわいいし、綺麗な女優さん3人にも注目です。

Interactive Film いつも可愛い

i01

http://www.itsumokawaii.jp/

彼女が喜ぶナイスチョイスをしよう!何回彼女を喜ばせたかで、フィルムのラストが変わります。キリンジの楽曲「いつも可愛い」の触って遊べる Interactive Music Film です。

少し古いサイトですが、キリンジ「いつも可愛い」のPVのインタラクティブ版とでもいうのでしょうか?

サイトでは特定のタイミングでボタンが出現して、クリックする内容によって蓮佛美沙子さんの映像が変化していく形になっていて、制作にはプラグインを一切使ってなくHTML5の技術でおこなったようです。

全シーン見ようと思ってかなり見たので自然に曲覚えちゃいました・・。

こういった意味でもこういったInteractive Music Filmってありですね。

YOUTUBEにもPVがアップされてますが、ただ映像を見るだけとこのサイトで見るのとでは全然違う感覚になります。

キリンジ「いつも可愛い」Music Film (short ver.)

PVでは女の子は脇役ですが、サイトでは主役になるので見ている方の感情の違いというか音楽がメインかサブかの違いですかね。

DRIVE-GO-ROUND | TOYOTOWN トヨタウン

http://www.toyotown.jp/drive-go-round/

主演:真木よう子。360°ムービーでつづる、彼女とのドライブの記憶。

こちらもちょっと前に話題になりましたトヨタのSAIのサイトですが、凄いのは動画といっても360度の動画になっていることです。室内だけでなく社外の風景も360度で見れています。

360度の動画ということで多少圧縮が強めなのと、夜景動画なので少し荒れてますが、上下のマウスドラックで社外や室内をぐるぐるみれたり、左右のどラックで中に載っている真木よう子さんが3パターン変化がシームレスに行なわれていて技術的にもすごいなーと思ったサイトです。

また音楽も自然なBGMでずっと流れてても違和感のない感じで終わりのないムービーを見ている不思議な感じになるサイトでおすすめです。

サイトと真木さんの雰囲気がいいので車に全然目がいかないという意味では成功なのかわからないサイトですが仕事中にウインドウ閉じ忘れても邪魔にならない音楽と決してうまくはないですが雰囲気のある真木さんの歌声がよかったです。

Salon de SUNSTAR TONIC

http://salondetonic.jp/

あなたのがんばりがストーリーを変える!あなたのいい汗を、光宗薫さんがサンスタートニックシャンプーでスッキリ洗いながしてくれる、最大7,154通りの応援ムービー!

こちらは最近公開されたサイトで、最近は逆に珍しいFlashで作られたサイトです。

元AKB48の光宗薫さんがモデルさんになっていて7154通りの分岐するというサイトです。

TOPページではなにもアクションを起こさないと画面上でずっとお客さんを待っている状態になっていますが、これも結構長いムービーで画面外にフレームアウトたり掃除を始めたりとアクションを起こさないでも飽きさせないようになっています。

ムービーを作るで選択すると「出身地」と「◯◯をがんばる男」を選択すると条件の組み合わせによって映像がかわります

こういった分岐系のサイトはやっぱりFlashの方が簡単だしバグも少ないしとにかく動画が綺麗ですね。

さいごに

動画を大きく流すだけでなく、マウス操作や選択によって内容がかわるインタラクティブコンテンツはWebならではでこれからたくさんでてくるでしょうね。こういったサイトはPCサイト専用とすることが多いのでその場合は、まだまだFlashで作ったの方がブラウザ間のバグがなかったり、条件分岐面などでは簡単な部分もあるのでしょうね。

結構話題になったサイトばかりですが、まだ見てない人は是非ご覧ください。

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事