menu

Webディレクターなら正しく理解しておきたい、HTML5の4つの特徴とは?

制作

2014年10月に勧告され、さまざまなWebサイトで使われているHTML5。国内でも無印良品などHTML5で自社のWebサイトを構築している有力企業も少なくありません。現在ではほぼすべてのブラウザがHTML5に対応済みで、問題なく表示させることができます。

日ごろ携わっているクライアントのWebサイトがHTML4以前で構築されたものだったり、WordPressを利用したものだったりして、直接HTML5のコーディングを行う機会は少ないかもしれませんが、やはりWeb制作のプロフェッショナルである以上、デザインのトレンドやソリューション事例とともに最新のコードについても理解しておきたいもの。HTML5の具体的な4つの特徴をご紹介します。

・文章構造がよりシンプルに
HTML5では、記事であることを示す<article>やナビゲーションを示す<nav>や、1つのセクションとして規定する<section>といった新しい要素が追加されています。HTML4までのように、<div id=”content”>といったタグを記述する必要がないので文章構造がよりシンプルになり、必然的にソースのボリュームを抑えることができます。

・動画や音楽を簡単に埋め込める
HTML4以前のバージョンでは、Webサイトに動画や動的なコンテンツを埋め込むための方法はFlashが主流で、利用にはそれなりの知識が必要でした。それに対して、HTML5では<video>や<audio>といった動画・音声を埋め込むための専用タグが追加され、HTMLの知識だけで動画コンテンツなどをカタチにすることが可能です。

・CSS3との併用で手軽にアニメーションを作成
これまでアニメーションやフラットボタンを作成するためにはJavaScriptを用いる必要がありましたが、HTML5ではCSS3とあわせて利用することで、JavaScriptに頼らずに作成することが可能です。

・API追加によってウェブアプリケーションの構築が容易に
HTML4までは実現が難しかったさまざまなAPIが新たに追加されたのもHTML5の特徴です。これによって簡潔なスクリプトの記述だけでWebサイトにドラッグ&ドロップ機能や位置情報の取得機能を取り入れられるようになりました。同様にスマートフォンの加速度センサーの利用や、ローカルのファイル操作、マルチスレッドでのJavaScript実装もできるようになっています。

Web制作に関するご依頼、ご相談、お見積はこちら

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

WordPressの表示速度をアップさせるプラグイン5選

4段階のプッシュ通知で作品世界へ誘い込む。「X-MEN」プロモーション

関連記事

  1. キービジュアル・広告制作に役立てたい、絵画・アート作品のコレクシ…

    Webサイトのキービジュアルや広告のクリエイティブを制作する際は、歴史的な名画やアート作品に目を向け…

  2. 制作メンバーの進捗管理や効果測定をよりスムーズに行える「Goog…

    スケジュールの進捗管理や効果測定はWebディレクターの大切なミッションの1つです。こうした管理業務に…

  3. 「アイコン化」が進むユーザーコミュニケーションとWebサイト

    MMD研究所が2015年に行ったリサーチによれば、日本国内のスマートフォーンユーザーの半数以上が1日…

  4. 有力キュレーションマガジンも導入。スマホの動画視聴にマッチしたタ…

    バーチャルリアリティ(VR)やオーグメンテッドリアリティ(AR)と並び、新しい動画コンテンツのトレン…

  5. 再生回数230万回。参考にしたいブランディング動画Android…

    Webサイトの制作・リニューアルに明確な目的に設定が必要になるのと同じように、動画コンテンツを活用す…

  6. クリック率19倍UPの事例も。Facebookも活用しているパー…

    閲覧履歴や購入履歴をベースとして、1人1人のユーザーにあわせたコンテンツを配信するパーソナライズは動…

  7. ユーザーに声をヒントにWebサイトを改善。手軽に利用できるアンケ…

    Webサイトの効果を示すデータは大きく2つに分けられます。1つはアクセス数やクリック率(CTR)、コ…

  8. 誰でも簡単にインフォグラフィックを作成できる無料ツール

    数値とイラスト、図形、グラフなどを組み合わせビジュアル化することによって、複雑な情報も直感的に伝える…

PICKUP

PAGE TOP