HTML5テンプレートの中から、デザインや機能に優れている秀逸テンプレートについてまとめました。Web制作のベースにしても良いですし、デザインの参考にしてもいいでしょう。
※記事でご紹介したテンプレートを利用されるときは、利用規約について確認をするようにしてください。
HTML5とは？
はじめに、HTML5の基礎知識について復習しておきましょう。
HTML5とは、マークアップ言語であるHTMLのバージョン5のことを指しています。バージョン4と比べてHTMLが簡潔に書けるほか、メディアタグなどの新しい機能が追加されています。
HTML5は最新のHTMLですが、大手のモダンブラウザであればほぼ対応を完了しています。ただブラウザ（のバージョン）によってはHTML5に未対応の部分もあるので、注意するようにしましょう。
HTML5についてより詳しくは、下の記事で解説しています。併せて参考にしていただければ幸いです。
HTML5の秀逸テンプレート13選
それでは早速、HTML5の秀逸テンプレートをご紹介していきましょう。カテゴリーごとに分類していますので、興味のあるところから見ていっていただければと思います。
ミニマル系
シンプルにまとめられた、ミニマルなHTML5テンプレートです。カスタマイズを前提にしている場合、作り込まれたテンプレートは逆に使いづらいものです。ミニマルなテンプレートはデザインの下地として最適でしょう。
A Generic HTML5 Template
最小限のHTMLで構成された、ブランクテンプレートです。コードも下記のようにミニマルであることがわかります。
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <!--[if lt IE 9]> <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <link rel="shortcut icon" href=""> </head> <body> <!-- Place your content here --> <a href="http://sixrevisions.com/html5/html5-template/">Read the tutorial</a> <!-- SCRIPTS --> <!-- Example: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> --> </body> </html>
HTML5に対応していて、もちろんクロスプラットフォーム（PCやモバイルなど）で使えます。HTMLコードだけのファイルと、コメント付きのバージョンが提供されています。ライセンスはCC0 1.0となっています。
Bones
» Bones – The HTML5 WordPress Starter Theme
WordPress向けのミニマルなテンプレートです。オリジナルのWordPressテーマを制作する時に最適な構成になっていて、モバイルファーストを念頭に作られているテンプレートです。Sassにも対応しています。WTFPLライセンスで提供されています。
underscores
» Underscores | A Starter Theme for WordPress
こちらもWordPress向けのテンプレートです。前出のBonesと並んで、カスタマイズ前提のミニマルなテンプレートとして人気です。ライセンスはGPLとなっています。
ベーシック系
ベーシックにまとめられた、HTML5テンプレートです。シンプルなデザインでまとめたい場合や、企業サイトなどに利用できるでしょう。
Guardian
» Guardian Free HTML5 Bootstrap Template – FreeHTML5.co
中央にボタンを配置した、よく見かけるデザインのHTML5テンプレートです。公式サイトでも言っているように、ビジネス系のホームページに向いているでしょう。Bootstrapを利用して作られています。レスポンシブ対応です。
Belstorm
» Belstorm Website Template | Free Website Templates | OS Templates
フェミニンな印象でデザインされているテンプレートです。店舗などのビジネスでの利用に向いたデザインになっています。レスポンシブ対応です。
Corlate
» Corlate – Free Responsive Business HTML Template | ShapeBootstrap
画像からわかるように、企業サイトなどのビジネスでの利用を想定されて作られているテンプレートです。中小企業やスタートアップなどのビジネスサイトに最適です。レスポンシブにも対応しています。
フルスクリーン系
トップページがフルスクリーンになっているHTML5テンプレートです。ジャンルを問わず、印象に残るサイトを作りたい場合に向いています。
Big Picture
全画面に写真を配置した、HTML5対応のテンプレートです。スクロールをするとわかるのですが、シンプルな割に要所にエフェクトが盛り込んであります。ポートフォリオなどのサイトに向いているでしょう。
Overflow
全画面に最適化されたトップページを持つ、HTML5テンプレートです。いわゆるシングルページにまとめられたテンプレートなので、コンテンツにストーリーを持たせるなど、見せ方次第でいろいろな活用ができるでしょう。もちろんレスポンシブに対応しています。
ブログ、Webマガジン系
ブログやWebマガジンなどのサイトに最適なHTML5テンプレートです。最近ではPinterestライクなグリッドレイアウトも人気ですね。
Magazine
» Magazine Free HTML5 Bootstrap Template
コンテンツが整然と並べられた、クリーンな印象のマガジン向けHTML5テンプレートです。レスポンシブデザインなので、タブレットやモバイル端末でも綺麗にレイアウトできます。
Obscura
» Obscura – Free Responsive HTML Template
ブログやWebマガジンなどのメディアサイト向けのHTML5テンプレートです。黒を基調としているシックな印象のテンプレートです。レスポンシブデザインなので、スマホにも対応しています。個人利用であれば無料で使うことができます。
その他
ユニークなデザインのテンプレートや、使いどころが限られるテンプレートです。
Counter
カウントダウンが表示できるHTML5テンプレートです。カミングスーンページを作る時に最適です。レスポンシブ対応です。
Ranger
» Ranger — 100% Free Fully Responsive HTML5 Template by FREEHTML5.co
アプリやWebアプリケーションなどのサービスサイトに最適な、HTML5対応テンプレートです。フラットデザインを採用しているので、モダンな印象がいいですね。レスポンシブデザインです。
Parallelism
横スクロールを採用したHTML5テンプレートです。オリジナリティのあるサイトを作ることができますが、ユーザビリティを損なわないように注意も必要です。
あとがき
HTML5の秀逸テンプレートについてまとめました。いまやHTML5は標準的とも言えるほど普及をしてきているので、HTML5に対応しているテンプレートも非常に多くなってきました。本稿で取り上げた以外にも魅力的なテンプレートは数多くあります。ぜひ制作内容に合ったテンプレートを見つけてください。