近頃のWebサイト制作において、以前まではフルスクラッチで制作していた工程もBootstrapなどのフレームワークが登場したことにより、驚くほど簡単にオシャレなデザイン、高クオリティなWebサイトを制作できるようになりました。
要するに、以前に比べてWebサイト制作は、より簡略化できるようになったのです。そういった背景もあってか、最近では高クオリティなHTMLテンプレートをよく目にする機会が増えました。もはや、ある程度のレベルであればHTMLテンプレートで十分なのでは、とすら思ってしまうほど・・・・・・。
こうしたWebサイト制作に必要な素材が一式揃ったHTMLテンプレートを無料で提供しているところも多く、本記事ではその中から海外のHTMLテンプレート配布サイト「HTML5 UP」でダウンロード数が10万を超える人気テンプレートの中から10個に厳選してご紹介します！
※ダウンロード数は執筆時時点になります。
高クオリティHTMLテンプレート10選
1. Prologue
ダウンロード数：450,573
こちらも同様に個人のポートフォリオサイトと相性が良さそうなテンプレート。デモページを見ると、シンプルなサイドカラムに、メインカラムはアバウトやポートフォリオが一体になったフラットなデザイン。もちろんレスポンシブ対応です。初めてHTMLテンプレートを使うという方にも使い勝手のよさそうなテンプレートなのではないでしょうか。
2. Parallelism
https://html5up.net/parallelism
ダウンロード数：450,168
レスポンシブ対応のテンプレートで、ファーストビューの3列スライダーが印象的。それぞれのスライダーをクリックするとモーダルウィンドウで拡大表示されることからも、フォトグラファーやグラフィックデザイナーなどのポートフォリオサイトと相性が良さそうです。
3. Big Picture
https://html5up.net/big-picture
ダウンロード数：391,332
最近のトレンドでもある、背景のフルスクリーン写真やパララックスデザインが採用されたテンプレート。デモページだとポートフォリオとして活用されていますが、Webサービスや製品紹介ページとしても活用できるデザインなので、使い方次第で幅が広がりそう。
4. Zerofour
ダウンロード数：368,256
これまでと比べて比較的、立体的なデザインを取り入れたテンプレートです。質感のあるWebサイトにしたい方はオススメ。
5. Strongly Typed
https://html5up.net/strongly-typed
ダウンロード数：331,773
デモページだけ見ると、モダンなデザインが印象的なテンプレート。こちらもドロップダウンメニューを採用し、サイドバーの有無や調整もできるデザイン。
6. ESCAPE VELOCITY
https://html5up.net/escape-velocity
ダウンロード数：316,504
使い方次第で幅広い目的に使えそうなテンプレートの「ESCAPE VELOCITY」。メニューにはドロップラウンメニューが採用され、サイドカラムは左右どちらか、もしくはサイドカラム無しのワンカラムにすることも可能。
7. Astral
ダウンロード数：279,787
ミニマルなデザインが印象的なテンプレート。それぞれのカテゴリをクリックすると吹き出しのようなデザインでコンテンツが表示されます。
8. Twenty
ダウンロード数：276,798
ファーストビューに設けられた大きめの写真と導線、ビジュアルはもちろん実益にも繋がりそうなデザインのテンプレートです。Webサービスの公式ページといった活用に向いているかもしれません。
9. Dopetrope
ダウンロード数：267,122
ワンカラムに一つひとつの要素を大きめにとった見やすいデザインが特徴。レスポンシブにも対応しているので、汎用性の高いテンプレートなのではないでしょうか。
10. Verti
ダウンロード数：258,898
デモページを見ると、ファーストビューに導線が設けられたデザインで製品ページとしての相性が良さそうなテンプレート。こちらもドロップダウンメニューを採用しています。
まとめ
今回ご紹介したようなHTMLテンプレートは、Webサイトを制作する目的としての利用はもちろんですが、駆け出しWebデザイナーにとってはプロのデザインを手っ取り早く学ぶ教材にもなります。ダウンロードして、実際にどんなコードを書いているか調べる、もしくはそれをベースに作り変えるといった活用もできるでしょう。
ここまでクオリティが高いにもかかわらず、無料で使えるという点は“提供者に感謝”としか言えないところですが、注意点としては使用する際はライセンスについて必ず確認しておきましょう。