最近HTML5に関するエントリーをよく見かけるようになりました。
そのため無料でダウンロードでき、簡単に編集も可能なテンプレート素材を探している方も多いかと思います。
海外デザインブログSpeckyboy.comで、ダウンロードしてそのまま利用可能なHTML5とCSS3を使ったテンプレート素材15個をまとめたエントリー「15 Free HTML5 and CSS Templates」が公開されていたので、今回はご紹介します。
シンプルで分かりやすい記述で書かれているので、HTML5を理解するために役立てることもできそうですね。
Photoshopで編集できる無料PSDテンプレート素材も一緒にまとめていますので、Webデザイン制作の参考にしてみてはいかがでしょう。
詳細は以下から。
ダウンロードしてすぐ利用できる、HTML5製の無料テンプレート素材まとめ
Elegant Press: Free Website Template
HTML5でデザインされておりそれ以外にもWebフォントやjQueryスライダー、ギャラリーページ、ポートフォリオなども用意された無料テンプレート素材。
[button_square color=”blue” url=”http://files.priteshgupta.com/elegant_press/”] デモページ [/button_square] [button_square color=”red” url=”http://www.priteshgupta.com/templates/elegant-press/”] ダウンロードページ [/button_square]
Free Single-Page Scrolling HTML5 Portfolio Template + PSDs
質感の高いエレガントでレトロテイストのHMTL5テンプレート素材。左側にレイアウトされているメニューよりスルスルとスクロールします。
[button_square color=”blue” url=”http://webdesigneraid.com/html5/site-01/”] デモページ [/button_square] [button_square color=”red” url=”http://speckyboy.com/2011/02/22/free-single-page-scrolling-html5-portfolio-template-psds/”] ダウンロードページ [/button_square]
Vivid Photo: Free Photography Template
フルサイズ画面表示のギャラリー用HTMLテンプレートファイル、ふわっとしたアニメーションを加えたリッチテイスト。
[button_square color=”blue” url=”http://files.priteshgupta.com/vivid-photo/”] デモページ [/button_square] [button_square color=”red” url=”http://www.priteshgupta.com/templates/vivid-photo/”] ダウンロードページ [/button_square]
ブログを想定したダッシュボードの動きをすべて表現したすごすぎたテンプレート素材、このまま利用したいほどのハイクオリティーデザイン。
[button_square color=”blue” url=”http://www.medialoot.com/preview/admin-template/”] デモページ [/button_square] [button_square color=”red” url=”http://medialoot.com/item/html5-admin-template/”] ダウンロードページ [/button_square]
グリッドを利用したすっきりとしたレイアウト、余白スペースの使い方など参考にしたいテンプレート素材。
[button_square color=”blue” url=”http://www.chris-creed.com/free/sanaroo/”] デモページ [/button_square] [button_square color=”red” url=”http://www.chris-creed.com/free/sanaroo-html-template/”] ダウンロードページ [/button_square]
左側にナビゲーションメニューを配置したテンプレート素材、枠組みとして利用したいシンプルなマークアップが特長。
[button_square color=”blue” url=”http://www.html5-templates.co.uk/temps/beadysite/”] デモページ [/button_square] [button_square color=”red” url=”http://sitebee.co.uk/2011/08/hot-html5-free-templates-designed-by-sitebee/”] ダウンロードページ [/button_square]
シンプルなミニマルデザインがお好みの方にオススメしたいブログスタイルのHTML5テンプレート、この他にも10種類ほどダウンロード可能です。
[button_square color=”blue” url=”http://www.html5webtemplates.co.uk/templates/simplestyle_7/index.html”] デモページ [/button_square] [button_square color=”red” url=”http://www.html5webtemplates.co.uk/templates.html”] ダウンロードページ [/button_square]
タイトルの通りiPhoneなどのアプリを販売、紹介するときに便利なレイアウトのHTML5テンプレート素材。
用途に応じてデザインを編集してみてもよいかもしれません。
[button_square color=”blue” url=”http://www.code-pal.com/examples/iphone-application-template/”] デモページ [/button_square] [button_square color=”red” url=”http://www.code-pal.com/iphone-application-template/”] ダウンロードページ [/button_square]
トップ部分のメニューボタンを押すことで、各コンテンツまで自動で移動するシングルページ完結のテンプレート素材。
[button_square color=”blue” url=”http://demo.tutorialzine.com/2010/02/html5-css3-website-template/template.html”] デモページ [/button_square] [button_square color=”red” url=”http://demo.tutorialzine.com/2010/02/html5-css3-website-template/template.html”] ダウンロードページ [/button_square]
Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3
こちらもシングルページでデザインされたHTML5製テンプレート素材のひとつ。
[button_square color=”blue” url=”http://inspectelement.com/html5portfolio/”] デモページ [/button_square] [button_square color=”red” url=”http://inspectelement.com/tutorials/code-a-backwards-compatible-one-page-portfolio-with-html5-and-css3/”] ダウンロードページ [/button_square]
Minimalism HTML5 and CSS3 Template
新聞のレイアウトをモチーフにデザインされたシンプルなテンプレート素材。
[button_square color=”blue” url=”http://freehtml5templates.com/downloads/free/minimalism/”] デモページ [/button_square] [button_square color=”red” url=”http://freehtml5templates.com/minimalism-html5-and-css3-template/”] ダウンロードページ [/button_square]
ピンク色を基調とした レトロスタイルのHTML5テンプレート素材。
[button_square color=”blue” url=”http://www.webdezign.co.uk/html5-examples/2col-slide/”] デモページ [/button_square] [button_square color=”red” url=”http://www.webdezign.co.uk/design/free-html5-template-3/”] ダウンロードページ [/button_square]
Elegant Website HTML5 Template
こまかい部分に気を配ったシンプルで質感の高いデザインテンプレート素材。
[button_square color=”blue” url=”http://www.pvmgarage.com/downloads/portfolio/”] デモページ [/button_square] [button_square color=”red” url=”http://www.pvmgarage.com/downloads/mrhurley_PVMGARAGE.zip”] ダウンロードページ [/button_square]
絶妙なグラデーションを利用したヘッダーデザインが印象的なHTML5テンプレート素材、企業用サイトなどにも応用することができそう。
[button_square color=”blue” url=”http://luiszuno.com/themes/nova/”] デモページ [/button_square] [button_square color=”red” url=”http://luiszuno.com/blog/wp-content/plugins/download-monitor/download.php?id=17″] ダウンロードページ [/button_square]
こちらも企業用サイト用レイアウトにも対応する全5ページと.php製コンタクトフォームがまとめて用意された太っ腹な無料テンプレート素材。
[button_square color=”blue” url=”http://luiszuno.com/themes/shinra/”] デモページ [/button_square] [button_square color=”red” url=”http://luiszuno.com/blog/wp-content/plugins/download-monitor/download.php?id=16″] ダウンロードページ [/button_square]
デザインもまるごと変更？無料PSDテンプレート素材まとめ
上記のファイルでHTML5にふれて、理解することでデザインごと変更してみてはいかがでしょう。
PhotoshopでデザインされたPSDテンプレート素材をまとめていますので、ご参考まで。
ざらざらとしたノイズテクスチャを利用した質感の高いデザインPSDテンプレート素材。
[button_square color=”orange” url=”http://bestuipsd.blogspot.com/2011/07/great-web-gallerise-template-psd.html”] ダウンロードページ [/button_square]
1981 Creative Portfolio Website PSD Download
ノイズテクスチャ、グラデーションなどハイレベルなポートフォリオ用PSDテンプレート素材。こまかくレイヤーごとに分けてデザインされているので編集も楽。
[button_square color=”orange” url=”http://www.suitetuts.com/resources/downloads/dl_1981_template_01.zip”] ダウンロードページ [/button_square]
Viewport – Magazine Site Template
プロフェッショナルな高品質WebデザインPSDテンプレート素材、ノイズテクスチャなどこまかい質感にこだわっています。
[button_square color=”orange” url=”http://www.premiumpixels.com/downloadz/?file=viewport”] ダウンロードページ [/button_square]
ゆったりとした余白スペースを利用してすっきりと分かりやすくレイアウトされたPSDテンプレート、ドロップダウンメニューなどUIデザインもオシャレ。
[button_square color=”orange” url=”http://www.themeskingdom.com/en/post/TK_Freebie_Complete_site_layout_-_Chililight_psd/217″] ダウンロードページ [/button_square]
背景に水彩絵の具の様な淡い色使いを表現したWebサイトデザイン用PSD素材。
[button_square color=”orange” url=”http://luiszuno.com/blog/wp-content/plugins/download-monitor/download.php?id=18″] ダウンロードページ [/button_square]
Cross-COuntry: Free Church PSD Template
まばゆく光り輝くロゴデザインと背景の組み合わせが美しいPSDテンプレート素材。
[button_square color=”orange” url=”http://psdstyle.net/wp-content/uploads/2011/08/crosscountry.zip”] ダウンロードページ [/button_square]
Free PSD Events Template Website
イベント告知、プロモーションを想定してデザインされたPSDテンプレート素材、オシャレな配色とタイポグラフィーがクール。
[button_square color=”orange” url=”http://designmodo.com/free-psd-events-template-website/”] ダウンロードページ [/button_square]
横幅960pxでグリッド分けされたシンプルなPSDレイアウト、どんなデザイン、コンテンツにも合わせやすいのではないでしょうか。
[button_square color=”orange” url=”http://www.themeskingdom.com/en/post/TK_Freebie_Complete_site_layout_-_Vario_psd/215″] ダウンロードページ [/button_square]
シングルページに自己紹介、ギャラリー、コンタクトフォームなどを盛り込んだボリュームのあるPSDテンプレート。
[button_square color=”orange” url=”http://www.graphicsfuel.com/2010/07/sleeko-download-single-page-website-design/”] ダウンロードページ [/button_square]
画面サイズいっぱいでアニメーションするスライダーやドロップダウンメニューなどを装備したPSDテンプレート素材。実践で利用する機会も多いのではないでしょうか。
[button_square color=”orange” url=”http://www.web20donkey.com/downloads/others/0026-RadiKalo-web20-theme%5Bwww.web20donkey.com%5D.zip”] ダウンロードページ [/button_square]
プロ顔負けのHPデザインテンプレート、無料PSD素材70個まとめ
以前こちらのエントリーでも無料PSDテンプレート素材をまとめています。
さくっとデザインを完成させたいときなど部分的に利用してみてはいかがでしょう。
[fancy_box][参照元 : 15 Free HTML5 and CSS Templates – Speckyboy.net]
[参照元 : 20 High Quality, Extrordinary & Free Web PSD Templates – noupe.com][/fancy_box]
