レスポンシブWebデザインを語る上で欠かせない！コンテンツストラテジストが知っておくべき「HTML5」のポイント

スマホやタブレットなど多種多様なデバイスに対応したWebサイトを作る際に欠かせないレスポンシブWebデザイン。その特長を最大限に活かすにはHTMLの最新版であるHTML5の存在が欠かせない、と『レスポンシブWebデザインマルチデバイス時代のコンセプトとテクニック』著者の菊池崇氏は語ります。そこで今回はレスポンシブWebデザインを構成する重要な要素であるHTML5を中心に伺いました。

もはや習得は必須！？コンテンツストラテジストにとってのHTML5とは

そもそもHTML5とはブラウザベンダーが集まって策定したHTMLの最新版。Webプラットフォームの中核をなす仕様を指します。このHTML5では、以前のバージョン（HTML4）で実現が難しかった機能を簡単かつシンプルに実装できるようになりました。

HTML5以前に使われていたのは、XMLというやや難しい言語。HTML4をXML化したものがXHTML1.0。さらに機能をより細分化したものがXHTML1.1。そして新たに作り直したものがXHTML2.0です。しかし、XMLはルールが難解だったため、実装でエラーが多く発生し、結果的にブラウザ側の負担が増えてしまいがちでした。そこで新たに誕生したのがHTML5です。

これまではどのような内容のコンテンツでも"h1"や"p"、"div"などの要素で、非常にざっくりとマークアップされ、HTMLが構造的に整理されていませんでした。そこでHTML5では要素の「意味付け」（セマンティック）が強化されました。これまでもあった、大見出しには"h1"、小見出しには"h3"といった意味付けに加え、ヘッダーには"header"、フッターには"footer"と要素の追加・見直しが行われ、曖昧で複雑だった処理方法がこれまで以上にシンプルになりました。HTMLの中身が誰でも理解できるよう、構造的にスッキリ書かれるようになったのです。さらに、長年議論され続けてきたレビューや人名、イベントなどの情報も、HTML5の関連技術では明確に整理できます。そのおかげで、ブラウザや検索エンジンにもより明確に文書構造を伝えられるようになりました。

このようにHTML5はこれまでのマークアップ言語と比べ、よりいっそうコンテンツにアプローチした言語といえます。それゆえHTML5の習得はエンジニアだけではなく、Webコンテンツを広める役割を果たすコンテンツストラテジストにとっても “必須科目”といえるでしょう。コンテンツをどうマークアップしてほしいかHTML5を介してエンジニアに伝えたり、あるいは自分自身でもマークアップできるコンテンツストラテジストは今後増えていくのではないでしょうか。

デバイス多様化時代のWebサイトの最重要ポイントにも対応

ここまでは、HTML5に進化することでいかにコンテンツとHTMLが接近してきたかについてお話しました。こんどはこのコンテンツを表示させるデバイスとの関連からHTML5のメリットについて考えてみましょう。一見すると、HTMLは構造を構成するものであり、表示には関係がないと思われるかもしれませんが、そんなことはないのです。

何回かお話してきましたとおり、これまでというのはほとんどのデバイスがパソコンで、しかもその回線スピードは年々速くなるといういわば「特殊な時代」でした。そんな環境で見逃されていたのがサイトの容量。なぜならちょっと重いページでも回線スピードがカバーしてくれたからです。

しかし現在はPCよりもタブレットやスマートフォンがインターネットの中心と言わざるを得ません。そのような環境ではデバイスがどこにあるかで通信速度は大きく変化します。そのためちょっと重いページであることはユーザー体験に大きな影響を与える可能性が高いといえるでしょう。つまりなかなか表示されないストレスから二度とアクセスしてくれない、そんなユーザーが存在することも否定できません。

そんな状況を防ぐ方法はただひとつ。ソースコードの容量を徹底的に軽くして、どんな端末にでも適切かつサクサクと表示できるようにする他ありません。

HTML5では細かい情報を整理するために、マークアップする項目の数は増えます。結果として情報量は増えますが、もちろんそれは意味のない情報があるためではありません。ブレもなく情報を整然とまとめるために必要な、意味のあることです。そして、こうした整理をHTML5でしておくことで、逆にスタイルへ指示するための情報量は少なくなり、CSS自体は軽くなります。これまでのように不要な要素を多用した曖昧なHTMLに対して CSSを書いた場合と比べ、CSSをモジュール化したり、トータルでみるとサイトの表示スピードが速くなるケースが多いのです。また、HTML5にはページの表示を遅くしがちなJavaScriptを非同期化（別で読み込み）する、便利な機能も用意されています。

このようにデバイスが多様化し通信速度が不安定にならざるを得ない現代に非常にマッチしたHTMLなのです。

SEO対策にも効果あり！検索エンジンも喜ぶHTML5

コンテンツマーケティングでは「検索エンジンで問われるユーザーの疑問に答える」ことの重要性が指摘されていますね。いまやブランドワード・ノンブランドワード問わずさまざまな企業が検索結果で上位表示されることを競い合っています。検索結果画面の目につきやすいところにあればその分流入数が増えるのだから当たり前のことですね。

そのコンテンツをHTML5で開発すると検索エンジンとの対話性が上がり、Web上でヒットしやすくなる傾向があることも見逃せません。なぜならGoogleなどの検索エンジンにとって、整理されていない煩雑なHTMLを読み取り、サイトに何が書かれているかを理解することは負荷のかかることだったからです。

HTML5で情報をきちんと整理しておくと、検索エンジンもコンテンツを理解しやすくなるので、結果として上位表示される可能性が高くなります。ソースコードはもはやブラウザに表示させるためだけのものではない、これまで以上にとても重要なものになっているといえるでしょう。