170を越えるテンプレートからお気に入りを見つけて参考に - Free HTML5 Templates

Free HTML5 Templatesにおいて、HTML5/CSS3を駆使したデザインテンプレートが数多く公開されている。このWebサイトは今年の2月11日(米国時間)に掲載されたテンプレートをはじめ、執筆時点で176のテンプレートが公開されている。掲載されている全テンプレートをサムネイルとして確認できる「Template Portfolio」はまさに圧巻だ。

Template Portfolioで登録されているデザインテンプレートを一望できる。画像クリックで拡大、more infoリンクをクリックしてテンプレート詳細画面に移動する

これらのテンプレートはGoogle Chrome 5.0以上とFirefox 3.6以上に最適化されており、Creative Commons Attribution 3.0 United States Licenseのもとで公開されている。ページデザインやHTML5/CSS3に対応したコードの書き方など、参考にできるものが多い。

各デザインには簡単な説明とオンラインデモのリンク、ファイルセットのダウンロード、そしてタグが紐づけられている。Template Portfolioで見た目からのほか、3カラムドロップダウンメニューミニマリストといった機能/デザインテーマから決めることが可能だ。

各デザインにはタグが紐づけられている。Tag Cloudから機能・デザインテーマ別にお気に入りのデザインを探すことが可能だ

本稿ではFree HTML5 Templatesで公開されているテンプレートのうち、いくつかをピックアップして紹介しよう。

Simple HTML 5 Template

1カラムのデザインテンプレート。紐づけられているタグは1-column, HTML5。掲載されている中でおそらくもっともシンプルなテンプレートだ。作者はJakub Knytl氏。

"Simple HTML5 Template - 1カラムの大変シンプルなデザイン。余談だが筆者が一番気に入ったデザインはコレだ

使用されているHTML5タグ、CSS3プロパティは次のとおり。

  • HTML5タグ: header, section, footer
  • CSS3プロパティ: text-shadow

ちょっとした文書や印刷用のドキュメントなどに適用できそうだ。使用されているHTML5/CSS3の新要素も少ないため、これらをはじめてさわるデベロッパには良い教材になり得る。

To The Point

2カラムのデザインテンプレート。紐づけられているタグは2-column, business, CSS3, dropdown menu, HTML5。強調色とラインを効果的に用い、ビジネス用途向けのデザインとなっている。作者はHTML5fan氏。

To The Point。2カラムで強調色とラインを効果的に用い、ビジネス用途向けのデザインとなっている

使用されているHTML5タグ、CSS3プロパティは次のとおり。

  • HTML5タグ: header, nav, article, aside, section, footer
  • CSS3プロパティ: box-shadow

画面上部のメニューはドロップダウンメニューとなっている。またCSS3プロパティもbox-shadowしか使用していないため、対応していないWebブラウザで表示しても見栄えがほとんど変わらない。

FaLaLaLaLa

3カラムのデザインテンプレート。紐づけられているタグは3-column, CSS3, HTML5。背景画像、配色ともに見事なクリスマス一色となっているテンプレート。作者はHTML5fan氏。

FaLaLaLaLa - 3カラムで構成される、クリスマス一色のお遊び感あるテンプレート

使用されているHTML5タグ、CSS3プロパティは次のとおり。

  • HTML5タグ: header, nav, section, aside, article, footer
  • CSS3プロパティ: border-radius, text-shadow, box-shadow

そろそろクリスマスシーズンに突入するが、良いネタが思いついていないデザイナは参考にしてみるのも一考……かもしれない。

その他、有用なツールなど

同Webサイトではテンプレートのほか、HTML5習得用のPDFと、CSS3グラデーションジェネレータが公開されている。

2種類のジェネレータはWebブラウザ上で簡単に使用できる。デザインテンプレートを改変してみたい場合に活用しよう。

CSS3 Gradient Generatorでは色を指定するだけで簡単にグラデーションに対応したCSS3コードを作成することが可能

色も直感的に指定できる

ややお遊び感あふれるものから、ビジネス用途にそのまま転用できるような出来映えのテンプレートまで、実に幅広いデザインテンプレートが用意されている。オンラインで簡単にデザインやコードを確認できる点も嬉しいところ。まだHTML5/CSS3に触ったことのないデベロッパやデザイナも、これを機にいろいろ試行錯誤してみてはいかがだろうか。

なおHTML5/CSS3対応Webサイトを構築するにあたり、コードの書き方や機能確認などマイコミジャーナルで紹介されたものを下記のリンクにまとめた。こちらもあわせて参考にしてほしい。