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サイトの制作が可能になるというメリットが導かれそうです。

関連記事

モバイル時代のモバイルフレンドリーによるSEO対策

日本国内のスマートフォン保有率は50%にのぼり、20代になると80%にもなります。消費者のパソコンからスマートフォンへのインターネット活用が大きく変わり、ウェブサイトへのアクセス方法もパソコンからスマートフォンへ移りつつあります。 まだ業種によって差はありますが飲食店、美容...続きを読む

2015.03.16SEO

【デザイン】アイディアに溢れたウェディングポートレート

ユーモア、クリエイティブ、アートさまざまなアイディアに彩られたウェディングポートレートをまとめてみました。 matt shumate Photographer 主にウェディングなどの写真を撮影されているフォトグラファーの「matt shumate」氏のポートレートより...続きを読む

2015.02.15インスピレーション

【HTML】Bootstrap フレームワークを使い作成するレスポンシブサイト

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

2015.02.06BootstrapHTMLコーディング

【WP】WordPressのアーカイブリストの「年月」表示をカスタマイズする

WordPressでは投稿された記事に対して、年別や月別のアーカイブを生成できます。アーカイブのリスト表示は2014年1月というように掲載されますが、年や月の表示を変えて表示したいこともあります。 アーカイブの日付表示 投稿された記事の日付の形式はWordPr...続きを読む

2015.02.19WordPress

モバイルサイトを構築するときに役立つフレームワーク5選

スマートフォンやタブレットなどのモバイル端末の普及に合わせて、モバイル端末によるWEBサイトへのアクセスやモバイルアプリケーションの需要が多くなってきていることを感じます。 今回はモバイル端末に最適化されたWEBサイトやアプリケーションを制作するときに役立つフレームワー...続きを読む

2015.02.08HTMLコーディング