デザインが秀逸なHTML5テンプレートまとめ13選

Web制作

2016年11月09日

デザインが秀逸なHTML5テンプレートまとめ○選

HTML5テンプレートの中から、デザインや機能に優れている秀逸テンプレートについてまとめました。Web制作のベースにしても良いですし、デザインの参考にしてもいいでしょう。

※記事でご紹介したテンプレートを利用されるときは、利用規約について確認をするようにしてください。

HTML5とは?

はじめに、HTML5の基礎知識について復習しておきましょう。

HTML5とは、マークアップ言語であるHTMLのバージョン5のことを指しています。バージョン4と比べてHTMLが簡潔に書けるほか、メディアタグなどの新しい機能が追加されています。

HTML5は最新のHTMLですが、大手のモダンブラウザであればほぼ対応を完了しています。ただブラウザ(のバージョン)によってはHTML5に未対応の部分もあるので、注意するようにしましょう。

HTML5についてより詳しくは、下の記事で解説しています。併せて参考にしていただければ幸いです。

HTML5の超入門!特徴の解説から基本的な書き方まとめ

HTML5の秀逸テンプレート13選

それでは早速、HTML5の秀逸テンプレートをご紹介していきましょう。カテゴリーごとに分類していますので、興味のあるところから見ていっていただければと思います。

ミニマル系

シンプルにまとめられた、ミニマルなHTML5テンプレートです。カスタマイズを前提にしている場合、作り込まれたテンプレートは逆に使いづらいものです。ミニマルなテンプレートはデザインの下地として最適でしょう。

A Generic HTML5 Template

A Generic HTML5 Template

» 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

» Bones – The HTML5 WordPress Starter Theme

WordPress向けのミニマルなテンプレートです。オリジナルのWordPressテーマを制作する時に最適な構成になっていて、モバイルファーストを念頭に作られているテンプレートです。Sassにも対応しています。WTFPLライセンスで提供されています。

underscores

underscores

» Underscores | A Starter Theme for WordPress

こちらもWordPress向けのテンプレートです。前出のBonesと並んで、カスタマイズ前提のミニマルなテンプレートとして人気です。ライセンスはGPLとなっています。

ベーシック系

ベーシックにまとめられた、HTML5テンプレートです。シンプルなデザインでまとめたい場合や、企業サイトなどに利用できるでしょう。

Guardian

Guardian

» Guardian Free HTML5 Bootstrap Template – FreeHTML5.co

中央にボタンを配置した、よく見かけるデザインのHTML5テンプレートです。公式サイトでも言っているように、ビジネス系のホームページに向いているでしょう。Bootstrapを利用して作られています。レスポンシブ対応です。

Belstorm

Belstorm

» Belstorm Website Template | Free Website Templates | OS Templates

フェミニンな印象でデザインされているテンプレートです。店舗などのビジネスでの利用に向いたデザインになっています。レスポンシブ対応です。

Corlate

Corlate

» Corlate – Free Responsive Business HTML Template | ShapeBootstrap

画像からわかるように、企業サイトなどのビジネスでの利用を想定されて作られているテンプレートです。中小企業やスタートアップなどのビジネスサイトに最適です。レスポンシブにも対応しています。

フルスクリーン系

トップページがフルスクリーンになっているHTML5テンプレートです。ジャンルを問わず、印象に残るサイトを作りたい場合に向いています。

Big Picture

Big Picture

» Big Picture | HTML5 UP

全画面に写真を配置した、HTML5対応のテンプレートです。スクロールをするとわかるのですが、シンプルな割に要所にエフェクトが盛り込んであります。ポートフォリオなどのサイトに向いているでしょう。

Overflow

Overflow

» Overflow | HTML5 UP

全画面に最適化されたトップページを持つ、HTML5テンプレートです。いわゆるシングルページにまとめられたテンプレートなので、コンテンツにストーリーを持たせるなど、見せ方次第でいろいろな活用ができるでしょう。もちろんレスポンシブに対応しています。

ブログ、Webマガジン系

ブログやWebマガジンなどのサイトに最適なHTML5テンプレートです。最近ではPinterestライクなグリッドレイアウトも人気ですね。

Magazine

Magazine

» Magazine Free HTML5 Bootstrap Template

コンテンツが整然と並べられた、クリーンな印象のマガジン向けHTML5テンプレートです。レスポンシブデザインなので、タブレットやモバイル端末でも綺麗にレイアウトできます。

Obscura

Obscura

» Obscura – Free Responsive HTML Template

ブログやWebマガジンなどのメディアサイト向けのHTML5テンプレートです。黒を基調としているシックな印象のテンプレートです。レスポンシブデザインなので、スマホにも対応しています。個人利用であれば無料で使うことができます。

その他

ユニークなデザインのテンプレートや、使いどころが限られるテンプレートです。

Counter

Counter

» Counter – Coming Soon Page

カウントダウンが表示できるHTML5テンプレートです。カミングスーンページを作る時に最適です。レスポンシブ対応です。

Ranger

Ranger

» Ranger — 100% Free Fully Responsive HTML5 Template by FREEHTML5.co

アプリやWebアプリケーションなどのサービスサイトに最適な、HTML5対応テンプレートです。フラットデザインを採用しているので、モダンな印象がいいですね。レスポンシブデザインです。

Parallelism

Parallelism

» Parallelism | HTML5 UP

横スクロールを採用したHTML5テンプレートです。オリジナリティのあるサイトを作ることができますが、ユーザビリティを損なわないように注意も必要です。

あとがき

HTML5の秀逸テンプレートについてまとめました。いまやHTML5は標準的とも言えるほど普及をしてきているので、HTML5に対応しているテンプレートも非常に多くなってきました。本稿で取り上げた以外にも魅力的なテンプレートは数多くあります。ぜひ制作内容に合ったテンプレートを見つけてください。

カテゴリ

最新記事

今すぐ無料でお見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。