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

関連記事

美容室トップスタイル様WEBサイト制作

富士宮市にあるトータルビューティーサロン『美容室トップスタイル』様のWEBサイトを制作いたしました。南国ムードあふれる癒し系美容サロンをテーマにスタッフの笑顔で出迎えることができるデザインにいたしました。 クライアント美容室トップスタイル様 U...続きを読む

2015.04.08WEBサイト制作美容室

【HTML】Font Awesome 5 をWEBサイトに組み込む方法

Font AwesomeはWEBサイトにも組み込むことができるアイコンフォントです。現行の最新バージョン(Version 5.8.1)では、無料版で1,513種類、有料版で5,097種類ものアイコンが利用することができます。アイコンは矢印やインターフェースで利用でいる記号、SNS...続きを読む

2019.04.24HTMLコーディング

【デザイン】フォトグラファーポートフォリオサイト

今回は、フォトグラファーのポートフォリオサイトを集めてみました。サイトごと写真の見せ方に工夫がありますね。 http://www.vivienneballa.com/ Link:http://www.vivienneballa.com/ http://w...続きを読む

2015.02.15インスピレーション

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

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

2019.01.01

【CSS】Googleマップの埋め込み用HTMLコードをレスポンシブに対応させる

Googleマップで、埋め込み用HTMLコードを発行して、ブログやサイトに貼り付けて使うことがよくあると思います。 サイトがレスポンシブ対応の場合、本文中のGoogleマップが、要素からはみ出して見栄えが崩れたり、案内したい所在地のポインタが表示されないということがあります...続きを読む

2015.02.08HTMLコーディング