Advertisement

 

最近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スライダー、ギャラリーページ、ポートフォリオなども用意された無料テンプレート素材。

html5template_05

[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テンプレート素材。左側にレイアウトされているメニューよりスルスルとスクロールします。

html5template_03

[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テンプレートファイル、ふわっとしたアニメーションを加えたリッチテイスト。

html5template_19

[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]

 

 

Free HTML5 Admin Template 

ブログを想定したダッシュボードの動きをすべて表現したすごすぎたテンプレート素材、このまま利用したいほどのハイクオリティーデザイン。

640x440_admin-area-template0_2

[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]

 

 

Sanaroo (HTML Template)

グリッドを利用したすっきりとしたレイアウト、余白スペースの使い方など参考にしたいテンプレート素材。

html5template_12

[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]

 

 

 Hot HTML5 Free Templates

左側にナビゲーションメニューを配置したテンプレート素材、枠組みとして利用したいシンプルなマークアップが特長。

html5template_13

[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 Web Templates

シンプルなミニマルデザインがお好みの方にオススメしたいブログスタイルのHTML5テンプレート、この他にも10種類ほどダウンロード可能です。

html5template_07

[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 Application Template

タイトルの通りiPhoneなどのアプリを販売、紹介するときに便利なレイアウトのHTML5テンプレート素材。

用途に応じてデザインを編集してみてもよいかもしれません。

html5template_15

[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]

 

 

One-Page Website Template

トップ部分のメニューボタンを押すことで、各コンテンツまで自動で移動するシングルページ完結のテンプレート素材。

html5template_14

[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製テンプレート素材のひとつ。

html5template_16

[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

新聞のレイアウトをモチーフにデザインされたシンプルなテンプレート素材。

html5template_02

[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]

 

 

Free HTML5 Template

ピンク色を基調とした レトロスタイルのHTML5テンプレート素材。

html5template_20

[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

こまかい部分に気を配ったシンプルで質感の高いデザインテンプレート素材。

html5template_11

[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]

 

 

Nova

絶妙なグラデーションを利用したヘッダーデザインが印象的なHTML5テンプレート素材、企業用サイトなどにも応用することができそう。

html5template_09

[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]

 

 

Shinra HTML Template

こちらも企業用サイト用レイアウトにも対応する全5ページと.php製コンタクトフォームがまとめて用意された太っ腹な無料テンプレート素材。

html5template_10

[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テンプレート素材をまとめていますので、ご参考まで。

 

 Gallerise

ざらざらとしたノイズテクスチャを利用した質感の高いデザインPSDテンプレート素材。

home4

[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テンプレート素材、ノイズテクスチャなどこまかい質感にこだわっています。

viewport-magazine-site

[button_square color=”orange” url=”http://www.premiumpixels.com/download/?file=viewport”] ダウンロードページ [/button_square]

 

 

Chill Light

ゆったりとした余白スペースを利用してすっきりと分かりやすくレイアウトされたPSDテンプレート、ドロップダウンメニューなどUIデザインもオシャレ。

chililight-psd-template

[button_square color=”orange” url=”http://www.themeskingdom.com/en/post/TK_Freebie_Complete_site_layout_-_Chililight_psd/217″] ダウンロードページ [/button_square]

 

 

Watercolor PSD Files

背景に水彩絵の具の様な淡い色使いを表現した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テンプレート素材。

free-church-psd-template

[button_square color=”orange” url=”http://psdstyle.net/wp-content/uploads/2011/08/crosscountry.zip”] ダウンロードページ [/button_square]

 

 

Free PSD Events Template Website

イベント告知、プロモーションを想定してデザインされたPSDテンプレート素材、オシャレな配色とタイポグラフィーがクール。

Free-PSD-Events-Template-Website

[button_square color=”orange” url=”http://designmodo.com/free-psd-events-template-website/”] ダウンロードページ [/button_square]

 

 

Vario PSD

横幅960pxでグリッド分けされたシンプルなPSDレイアウト、どんなデザイン、コンテンツにも合わせやすいのではないでしょうか。

vario-free-psd-template

[button_square color=”orange” url=”http://www.themeskingdom.com/en/post/TK_Freebie_Complete_site_layout_-_Vario_psd/215″] ダウンロードページ [/button_square]

 

 

Sleeko

シングルページに自己紹介、ギャラリー、コンタクトフォームなどを盛り込んだボリュームのあるPSDテンプレート。

sleeko

[button_square color=”orange” url=”http://www.graphicsfuel.com/2010/07/sleeko-download-single-page-website-design/”] ダウンロードページ [/button_square]

 

 

PSD Web 2.0 Portfolio Layout

画面サイズいっぱいでアニメーションするスライダーやドロップダウンメニューなどを装備したPSDテンプレート素材。実践で利用する機会も多いのではないでしょうか。

psd-portfolio-layout

[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]