誤解を解きほぐしながら実践を交えて、HTML5について正しく理解を深めていくことを目指している本連載ですが、今回からHTML5の6つの特徴をひとつひとつ紹介していきます。HTML5には以下のような6つの特徴がありますが、1つ目の特徴としては「グラフィック」を取り上げます。

1. グラフィック
2. マルチメディア
3. デバイスアクセス
4. セマンティクス
5. スタイリング
6. コネクティビティ

クライアントとの打ち合わせの中で「このサイト、HTML5で作られているんですね。HTML5で作るとほんとにリッチなサイトが作れるんですね!」という言葉が頻出しますが、「実はHTML4でもできるんだけど……」と思うことが少なくありません。「HTML5＝リッチな表現ができる」という考えは間違いではありませんが、誤解されている部分もあります。

そこで、多くの方が誤解している事例を出しながら、HTML5ならではの「グラフィックとは何か」を解説してみます。

よく誤解される事例(1)Webサイトで使われるリッチなスライドショー

最近は、写真などのスライドショーが導入されているスマホサイトが多くなりました。この背景には、おそらくスマホサイトならではの特徴である「画面サイズが小さいこと」「できる限り遷移させずにより多くの情報を1度に表示させる必要があること」があります。また、スライドショーはどことなくスタイリッシュな雰囲気を演出することができることも、後押ししているのでしょう。

リッチなスライドショーが導入されている映画会社「20世紀フォックス」のサイト

「HTML5＝リッチ」という認識を多くのひとがもっているので、先ほど例に挙げたようなスライドショーを使っているリッチなサイトも「HTML5で作られている」と誤解している人も意外と多いです。しかし実際は、canvasといったHTML5特有の機能を使わなくても、jQueryなどによって、HTML4でもリッチなサイトをつくることができるのです。

よく誤解される事例(2)最近流行しているパララックスのサイト

パララックスとは、人間の視点をずらすことで奥行きを感じさせる表現方法で、3Dを利用していないにもかかわらず、サイトに奥行きを感じさせることができる表現です。これは、何層もレイヤーをつくり、レイヤーを異なるスピードでスライドすることによって実現されます。ナイキなどの有名ブランドのサイトでこの効果を使っているので、実際にアクセスしてもらうとその魅力を感じてもらえると思います。

パララックスが使われているNIKE「NIKE BETTER WORLD」のサイト

パララックスが使われているアディダス「アディダス×サッカー日本代表」のサイト

パララックス効果を利用したサイトはユニークかつ最近注目を集め始めたので、HTML5でないとつくれないと思っている人も少なくありません。しかし実は、HTML4でもパララックスが使われているサイトをつくることができます。具体的には、CSSのbackground-positionのプロパティを各レイヤーで変えることなどによって実現可能です。これもまたHTML5で実現可能になったと誤解されている例の1つだと思います。

よく誤解される事例(3)CSS3アニメーション

CSS3とは、HTML5と同じように、Web上の技術の標準化を目的として設立された団体「W3C(World Wide Web Consortium)」が、現在開発しているCSSの追加の仕様です。CSS3では魅力的な機能が追加され、なかでもCSS3アニメーションという機能が画期的です。この機能は動作が高速で、サイト上の物体がイージングを加えて移動などの簡単なアニメーションが実装可能です。

CSS3アニメーションが使われているLeaVerou「animatable」

この事例のように、CSS3はアニメーションをつくることができるので、多くの人がHTML5とセットと考えていて、CSS3を利用する際、HTMLの形式はHTML5でなければいけないと誤解している人が多いです。しかし実際は、CSS3はHTML4とも組み合わせて使うことが可能です。

以上3つが、私が開発の現場でHTML5のグラフィックに関してクライアントからよく誤解されていると感じる事例です。

次回は、canvasなどを利用したHTML5ならではのグラフィックとは何か、そしてどんなメリットが得られるのかについて解説したいと思います。