HTML5の企業サイト活用

2012/10/18

今「HTML5」というキーワードが、Web業界のトレンドとして大きく取り上げられています。
かく言う私も、クリエイティブ部門のWebディレクターとして日々情報収集を行う身であります。
「HTML5ってなんぞや」ってところから理解の過程を大雑把にまとめてみます。

 


●HTML5って何?:誤解編

最初に「HTML5」を調べる際に見たWebの記事はHTML5のタグについてのリファレンスでした。
10数年Web制作にたずさわる身として、HTMLコーディングがどう変化するのかが気になったからです。

結論から言えば、これは間違いでした。
HTML5で採用された新しいタグを知っても、本当の意味でHTML5を理解する事はできなかったのです・・・

セマンティックなHTMLコード
⇒制作側の話で、ユーザーには関係ない・・・

※セマンティックとは:
コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術

追加されたformタグのinput要素
⇒便利な機能だけどIEはヤバそう・・・
http://www.findmebyip.com/litmus/

audio要素(音声ファイル再生)
video要素(動画ファイル再生)
canvas要素(動的な画像の描画)
⇒FLASHで実現できてた話だから、ユーザーメリットになるのかな・・・

※この時点の結論:FLASHが使えないモバイル(スマホ・タブレット)用?

 

●HTML5って何:やや理解編

2012年に入り、いよいよ「HTML5」への注目も高まる中、関連セミナーへも出席する様になりました。ここで、先の誤解が解けます。

「一般的にHTML5とは、HTML5だけでなくCSS3、JS、SVG、WebGLなども含めた総称を指す」

これで、だいぶ整理されました。
世で高まる「HTML5」の機運とは、昔でいうところの「Ajax」の様なHTMLによるリッチコンテンツの実現にあったのです。

これプラス、すでにHTML5への対応が完了しているスマホ・タブレット向けブラウザでの活用がWeb利用の主要メリットであると。(PCはIE8のシェアが小さくなってから)

※この時点での結論:FLASHの利用が縮小する中、代替としてリッチコンテンツを実現する技術。今は特にモバイル。

 

●HTML5で何か作るなら

○パララックス効果を利用したスクロールサイト

スクロールする際に、重なり合う画像を異なるスピードで動かすことで、
速く動いているものほど手前に、遅く動いているものほど奥に感じさせる視差効果を利用して
擬似的に立体的な演出・アニメーションを施したサイト。

これは分かりやすく流行りましたね。

すでに多くのまとめページを目にしますので、
ここでは参照したまとめページをご紹介しておきます。

縦や横に長いサイト「高級ペライチ」1度は見ておきたいスクロール演出のまとめ32個!
http://design.kayac.com/topics/2012/06/koukyuperaichi.php

最新の国内のパララックス効果を使用したサイトをまとめました
http://webdesignmatome.com/webdesign/parallax_jp

ハイクオリティな最近のパララックスWebデザインまとめ13個
http://w3q.jp/t/2603

 

○canvasとSVGの話し

FLASHを使わずにアニメーションやインタラクティブな画像を実現するために、
この「canvas」「SVG」を利用します。

技術論を語る記事でないので(語れないので)、こちらも活用例まとめページをご紹介。
なんでもできちゃう(かも)!

HTML5のCanvasを活用したページ 19個
http://creatorish.com/weblog/1071

SVGを使ったコンテンツをいろいろ見て、可能性を探ってみる
http://web-utage.com/blog/archives/62

 

まずは、この辺りを使ってイイ感じのコンテンツを考えてみたいですね。

<続く>

photo

ライター:十河 展之


GMO NIKKO株式会社コミュニケーションプランニング部 プランニンググループ所属Webディレクター。
Web制作会社数社でのデザイナー・ディレクター業務を経験後、2009年よりGMO NIKKOへ転職。大規模サイトから広告キャンペーンコンテンツまで、Webコンテンツのプロデュース・ディレクションを幅広く担当。お問い合わせは「コミュニケーションプランニング部」まで!

Contents

ico人気記事