Flash一切なし!HTML / CSS / javascriptでできた、アニメーション満載の「おしい!広島県」

このエントリーをはてなブックマークに追加

今回は、広島県が人気タレント有吉弘行さんを観光大使に起用したことで話題になっているウェブサイト「おしい!広島県」のコードを分解します。

このサイトは、広島の知られざる「おしい!」を紹介し、たくさんの人が実際に広島を訪れて「おいしい!」県になることを目指しています。サイトについた「いいね!」は28,000以上、オフィシャル動画の再生回数は、42万回を超えています。

今回のサイトの特徴はなんといっても、リッチな表現です。

具体的には、以下のようになります。
・FLASHなしのHTMLサイト
・動画再生
・豊富なアニメーション
・「おしいね」ボタン

それぞれの特徴を解説していきます。

・FLASHなしのHTMLサイト
今までは、このような非常に動的要素の多いWebサイトはFLASHをつかって構築されていました。しかし、このサイトはHTML/CSS/javascriptで作られています。このことによってiPhone、iPadでも閲覧することができます。

・動画再生
おしい!広島県THE MOVIEや記者会見の動画などサイト内に動画が埋め込まれています。こちらはYoutubeが提供しているHTMLのiframe形式で埋め込まれているためiPhone/iPad上でも再生が可能です。

・豊富なアニメーション
このサイトを象徴しているのが多様なアニメーションです。これらはjavascriptで制御されています。マウス操作によってスクロールの位置などが変化したときに応じてjavascriptでCSSのパラメータを変化させています。

まず、Aboutのページなどでスクロールすると左右からグラフィックが飛び出していきます。
これはスクロールの位置によってCSSのmargin-leftの値を変化させています。

続いて、このページの下にいくと、手書きの円がやわらかい動きをしているアニメーションがあります。これはjavascriptではなくgifアニメーションを使っています。つまり一枚の画像です。もしこれをjavascriptで行うとすると、非常に大変です。このように画像とプログラミングをうまく使い分けてあります。

こちらはロールオーバー時に上に飛び上がるようになっています。これも先程のように、ロールオーバー時にCSSのmargin-topの値をjavascriptで変化させて制御しています。

・「おしいね」ボタン
広島県の「おしい」事象を紹介し、評価値として「いいね!」ならぬ「おしいね」を採用しています。「おいしいね」が一定以上になるとおしい!認定されるというルールです。

「おしいね」ボタンといっても中身はfacebookのシェアボタンです。デフォルトでシェアボタンのものをオリジナルにカスタマイズしています。この方法に関しては以下の記事で紹介しているのでこちらをご覧ください。
「ソーシャルカタログ」と名付けられたトヨタ・ハチロクのブランドサイト

あえて、自虐的にみせることで愛されるキャラクターを作り上げた「おしい」広島県。ウェブサイトの裏側もよく考えて作り込まれています。

このエントリーをはてなブックマークに追加

This entry was posted in blog. Bookmark the permalink. Both comments and trackbacks are currently closed.

Comments Closed

トップ | tadashiku, Incについて | 製品・サービス | 実績のご紹介 | ニュース | ブログ | パートナーシッププロジェクト | お問い合わせ