HTML5の可能性とメリット

HTML5とは?

hypertext-markuplanguage-history-index

W3C より2008年1月22日にHTML5のドラフト(草案)が発表、2014年には正式に勧告されるのではないかと言われています。

HTML5は、ウェブページのヘッダ情報を示すhead要素、ナビゲーションのブロック用のnav要素、コピーライトなどのフッタ情報を示すfooter要素など、特別な意味を持つ要素が追加されセクションごとに意味を定義することができるようになりました。

マルチメディアのためのaudio要素やvideo要素、描画するための canvas要素も追加されています。

HTML5の登場でWEBサイトの制作者にとって、Adobe FlashやMicrosoft Silverlightのような外部プラグインの必須性を、軽減した高性能なWebアプリケーションが制作できることが期待されています。

WEBサイトをHTML5で構築するメリットは?

デジタルマーケティング時代のSEOの優位性

前章で挙げられた新しく追加されたタグにより、HTML5では「記事」タグ、「ヘッダー」タグ、「フッター」タグというように、制作者が意図する意味や文脈をWEBサイトに与えることができるようになりました。これは検索エンジンがよりWEBサイトの内容を理解し情報を収集できることに繋がります。

また、デジタルマーケティングにおいてiPhoneやAndroidといった携帯端末のシェアは拡大し大きな市場を形成しています。今後、モバイルへの最適化がよりデジタルマーケティングにおいて重要な存在になることは間違いないと思います。

WEBサイトがモバイル時代を向かえる流れは、1990年代のダイヤルアップモデムでWEBサイトを利用していた時代に共通する要素があります。転送速度が低いモデム接続を介して簡単にページにアクセスするために、制作者は出来る限り画像を小さくし、無駄なコードを省くことを意識して開発をしていました。そしてブロードバンド時代、ページ速度を気にすることなく派手なアニメーション、グラフィックスを用いた演出が多くなってきたところで、原点回帰をするようにモバイル時代を向かえ、制作者はページの読み込み速度を考慮した設計を考える必要性が出てきました。

検索エンジンの最大手のGoogleにおいても、モバイルデバイスからのトラフィックが増え、モバイルデバイスにおけるSEOの要因としてもページの速度があげられています。

モバイルデバイスで検索結果からページをロードする5、10、または20秒かかってしまったら、多くのユーザーは落胆し、前のページの戻ったり、その場で閲覧を終えてしまう可能性が増します。Googleからみてもこれは失客、利益損失につながると容易に推測できます。そのため、サイトの品質を決定する上でページの読み込み速度も考慮する必要性が出てきています。SEOの視点からみてもページの速度は重要な要素になるのではないでしょうか。

HTML5を使用すると、外部のプラグインを使わずにCSSやjavascriptなどのテキストベースで魅力的な広告表現を行うことが出来ます。これは、ファイルサイズのスリム化、つまりページの読み込み速度の向上も期待が出来ます。

さらに、デスクトップやモバイルの異なるプラットフォームの間での共有が容易になり作業効率をあげることも期待されています。

以上のように、HTML5の導入によって、SEO、モバイルデバイスに最適化されたWEBサイトの制作が可能になるというメリットが導かれそうです。

関連記事

画像・動画の素材サイト 「PIXTA」で写真を販売しています

画像・動画の素材サイト 「PIXTA」で写真を販売しています。桜やコスモス、紅葉など自然の花々、風景を中心に公開中です。 また、写真撮影のご依頼も受け付けておりますので、ホームページや各種印刷物にて写真が必要になる場合は、お気軽にご相談ください。 PIXTA 写...続きを読む

2019.04.15

【フォト】鬼岩寺1月28日「厄除け火渡り」

藤枝にある鬼岩寺。弘法大師が当地の人々を苦しめていた鬼を退治した話にその名前の由来があり、鬼が鋭い爪を研いだといわれる「鬼かき岩」が残っています。 毎年1月28日には厄除け火渡りの行事が行われています。 フォトギャラリー ※写真をクリックすると拡大表示します。 [...続きを読む

2017.01.28フォトギャラリー

新年あけましておめでとうございます。

あけましておめでとうございます。 昨年は格別 の御厚情を賜り、厚く御礼を申し上げます。 本年もデザインスタジオ・エフでは、皆様にご満足頂けるサービスを心がけていく所存でございますので、何とぞ昨年同様のご愛顧を賜わりますよう、お願い申し上げます。皆様のご健勝と皆様の...続きを読む

2018.01.04

【JavaScript】ページの読込状況を表示するプログレスバーを実装する『PACE』

WEBサイトのページを読込とき、読込むファイル数が多かったりライブラリを参照することでページの読込が完了するまでに時間がかかる場合があります。 読込時間が長いページを制作する場合は、読込状況を視覚的に表示することができるプログレスバーを設置すると閲覧する方に親切になると...続きを読む

2015.02.10HTMLコーディング

【Bootstrap】の基本「マージン」と「パディング」

『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレートソースを組み合わせて、レスポンシブ対応のサイト制作が可能です。 『Boots...続きを読む

2018.08.09BootstrapHTMLコーディング