データ入稿フォーム

お気軽にお問い合わせください

お問い合わせ

TEL:048-814-1232
  • お気軽にお問い合わせください
  • TEL:048-814-1232
  • お問い合わせ

Column
お役立ち情報

HTML5で出来る!技術3選

こんにちは!制作のSです。
今回のテーマは「HTML5」。

現在制作されているwebサイトの多くはこのHTML5が使用されていると言われています。
「HTML5ってそもそも何か?」「聴いたことはあるけれど、サイトに対して何が良いのか?」と感じられている方に向けて、3つの特徴をまとめてみました!

1. HTML5とは

HTML(Hyper Text Markup Language)の5回目の大幅な改定版となります。
2014年にHTML5.0がW3Cから勧告され、約30種類の新要素が追加されました。HTML5には3つの特徴があります。

  • 【HTML5の3つの特徴】
  • ①内部SEO対策
  • ②プラグイン不要で動的な動きを再現
  • ③フォーム入力機能の充実
2. HTML5で出来る!技術3選

上記でまとめたHTML5の3つの特徴を詳しくご紹介していきます。

① 内部SEO対策

HTML5に追加された要素によって、検索エンジンがページ構造を理解しやすいようにHTMLがマークアップ可能となりました。これは、安定的に検索結果上位にインデックスされるために重要だと言われています。

内部SEO対策

② プラグイン不要で動的な動きを再現

HTML5で追加された要素によって、プラグイン不要で動的な動きを再現できるようになりました。
今回は、HTML5から追加されたcanvas要素を応用し、紙吹雪が舞うアニメーションのHTML5サンプルを作成いたしましたので、ぜひご覧ください。

※下記ボタンからご覧いただけます。
※PC閲覧時はマウスの左右の動きに合わせて舞う方向が変化します。ぜひ画面上にカーソルを合わせてご覧ください。

例)紙吹雪が舞うアニメーション
紙吹雪が舞うアニメーション

HTML5サンプルはこちら

③ フォーム入力機能の充実

入力フォームは離脱率が高いと言われています。そのため、離脱率を改善するためにはコーディングの段階でも考慮する必要があります。このように、入力フォーム最適化することをEFO対策 (Entry Form Optimization)と呼ばれています。入力項目を見直したり、入力ステップを明確にしたりなど、ユーザーがストレスを感じないように入力フォームを最適化することです。その工夫の一つとして、最適なキーボードの設定が挙げられます。

例)最適なキーボードを設定する(メールアドレス、電話番号)

  • ●メールアドレス
    <input type=”email”>
    メールアドレス
  • ●電話番号
    <input type=”tel”>
    電話番号

以上、今回はHTML5で出来る技術3つをご紹介いたしました。
HTML5の機能を活用して、より良いサイト制作を今後も頑張っていきます。

  • Web制作会社年鑑
  • ベンチャー通信編集部
  • 新聞・メディアに掲載されました
  • 渋沢栄一ビジネス大賞