Advertisement

freehtml2014_top

 

無料でダウンロードできるWordPressテーマを昨日まとめてご紹介しましたが、今回はHTMLテンプレート素材をまとめてみました。

 

海外デザインブログSplashnology.comで、無料ダウンロードできるHTMLテンプレート素材をまとめたエントリー「26 Free HTML Templates」が公開されていたので、今回はこちらをベースにブックマークしておきたいアイテムを一緒にご紹介します。

 

 

BootstrapをベースにしたHTMLファイルや、さまざまなプラグインを実装したり、アニメーションやフルスクリーンイメージ背景などデザイントレンドを採用したりと、高機能なテンプレート素材が揃っています。

 

 

詳細は以下から。

 

 

 

これからはじめる、高品質な無料HTMLテンプレート素材まとめ 2014年2月度

 

GrayScale

スクロールに応じてナビゲーションメニューがアニメーションする、シングルページ型レイアウトが特長のBootstrap製HTML5/CSS3テンプレート。

grayscale

[button_square color=”orange” url=”http://startbootstrap.com/templates/grayscale/”] デモページ [/button_square] [button_square color=”blue” url=”http://startbootstrap.com/grayscale”] ダウンロードページ [/button_square]

 

 

 

Eden

モダンでビンテージなテイストを取り入れたHTML5/CSS3テンプレートで、随所にアニメーションエフェクトが演出されています。

The-freshest-resources-for-website-design-inspiration5

[button_square color=”orange” url=”http://www.websitetemplatesonline.com/free-template/free-html5-theme-for-exterior-design-site.html”] デモページ [/button_square] [button_square color=”blue” url=”http://blog.templatemonster.com/2014/01/27/free-html5-theme-for-exterior-design-website/”] ダウンロードページ [/button_square]

 

 

 

Picku

大小さまざまな正方形を組み合わせることで、コンテンツを展開するユニークなアニメーションとレイアウトが素敵。

Picku

[button_square color=”orange” url=”http://majuter.us/picku/”] デモページ [/button_square] [button_square color=”blue” url=”https://www.behance.net/gallery/Picku-Free-HTML-Template/14451657″] ダウンロードページ [/button_square]

 

 

 

Big Picture

タイトル通りディスプレイいっぱいに表示される表情豊かなイメージ写真が、コンテンツごとに切り替わり、さらにアニメーションが追加されています。

6394126037019311

[button_square color=”orange” url=”http://html5up.net/big-picture/”] デモページ [/button_square] [button_square color=”blue” url=”http://html5up.net/big-picture/”] ダウンロードページ [/button_square]

 

 

 

Tessellate

イメージ写真を強調したコンテンツで、より雑誌などのレイアウトに影響を受けたつくり。モバイル・ファーストなコンセプトも素敵です。

6742121165068310

[button_square color=”orange” url=”http://html5up.net/tessellate/”] デモページ [/button_square] [button_square color=”blue” url=”http://html5up.net/tessellate/”] ダウンロードページ [/button_square]

 

 

 

Simple Landing Page Theme v.1

クリックすると左側から出現するナビゲーションを実装した、ランディングページに活用したいレイアウト。

Techandall_SimpleThemev1_preview2

[button_square color=”orange” url=”http://www.techandall.com/demos/SimpleTheme%20v1/”] デモページ [/button_square] [button_square color=”blue” url=”http://www.techandall.com/simple-landing-page-theme-v-1/”] ダウンロードページ [/button_square]

 

 

 

Landy

モバイルアプリを紹介、販売するのに便利なテンプレート素材で、モバイル型イメージスライダーはレスポンシブデザインにも対応しています。

landy-html5-parallax-website-template

[button_square color=”orange” url=”http://landy.paolotripodi.com/”] デモページ [/button_square] [button_square color=”blue” url=”http://freebiesbug.com/code-stuff/landy-html5-parallax-app-landing-page/”] ダウンロードページ [/button_square]

 

 

 

Treviso

フルスクリーン写真スライダーを実装した、幅広いプロジェクトに活躍するHTMLテンプレート。

Treviso

[button_square color=”orange” url=”http://blog.ninetofive.me/previews/treviso/”] デモページ [/button_square] [button_square color=”blue” url=”http://blog.ninetofive.me/psd-freebies/treviso-a-free-html-template/”] ダウンロードページ [/button_square]

 

 

 

Fore

太字タイポグラフィーにスッキリとしたレイアウトが印象的な、使い勝手の良いHTMLテンプレート素材。

Fore-A-Responsive-Template-from-Papaya1-1024x706

[button_square color=”orange” url=”http://eatapapaya.com/Fore/fore.html”] デモページ [/button_square] [button_square color=”blue” url=”https://github.com/eatamango/Fore”] ダウンロードページ [/button_square]

 

 

 

TimeLog

フルスクリーン写真スライダーを採用した、コンテンツ発表までのカウントダウンにいかがでしょう。

timelog-coming-soon-template

[button_square color=”orange” url=”http://www.ourtuts.com/demo/timelog/”] デモページ [/button_square] [button_square color=”blue” url=”http://www.ourtuts.com/timelog-free-coming-soon-template/”] ダウンロードページ [/button_square]

 

 

 

Hawthorne

無駄を一切省いたミニマルデザインと、目が疲れにくいモノトーン配色にセンスを感じるシンプルHTMLテーマ。

hawthorne-html-website-template

[button_square color=”orange” url=”http://www.jeremiahshoaf.com/”] デモページ [/button_square] [button_square color=”blue” url=”http://freebiesbug.com/code-stuff/hawthorne-mobile-first-html5-template/”] ダウンロードページ [/button_square]

 

 

 

Landing Page Template

サービス内容や商品紹介などに便利な、フルスクリーン型Bootstrap製HTMテンプレート。

landing-page

[button_square color=”orange” url=”http://startbootstrap.com/templates/landing-page/”] デモページ [/button_square] [button_square color=”blue” url=”http://startbootstrap.com/landing-page”] ダウンロードページ [/button_square]

 

 

 

Sngolo

個人用ポートフォリオサイトを作成に活用したいテーマで、会員登録することでダウンロードできる仕組みとなっています。

singolo-css

[button_square color=”blue” url=”http://www.psdchat.com/resources/freebie-singolo-css/”] ダウンロードページ [/button_square]

 

 

 

SeeYa

6種類の配色センスの良いカラーリングを収録した、イベント用カウントダウンタイマー付きHTMLページ。

SeeYa

[button_square color=”orange” url=”http://www.egrappler.com/see-ya/index.html”] デモページ [/button_square] [button_square color=”blue” url=”http://www.egrappler.com/free-coming-soon-responsive-html-website-template-seeya/”] ダウンロードページ [/button_square]

 

 

 

Free Personal vCard One Page Template

ナビゲーションメニューをクリックすると、アニメーション付きでコンテンツが切り替わる、オンライン名刺としていかがでしょう。

Free_Personal_vCard_One_Page_Template

[button_square color=”orange” url=”http://www.gt3themes.com/website-templates/vcard/”] デモページ [/button_square] [button_square color=”blue” url=”http://www.gt3themes.com/free-personal-vcard-one-page-template/”] ダウンロードページ [/button_square]

 

 

 

iPholio

モバイルアプリを紹介、販売するプレゼンテーション用シングルページHTMLテンプレートで、会員登録することでダウンロードできる仕組み。

iPholio

[button_square color=”blue” url=”http://templatesdock.com/template.php?id=ipholio”] ダウンロードページ [/button_square]

 

 

 

Freebix

レトロな配色で作成された、幅広いデザインプロジェクトに活用できるHTMLテンプレート。

Freebix

[button_square color=”orange” url=”http://www.anariel.com/freebix/”] デモページ [/button_square] [button_square color=”blue” url=”http://www.anarieldesign.com/free-responsive-html-template/”] ダウンロードページ [/button_square]

 

 

 

Piccolo

レスポンシブデザイン対応の基本的ボックスレイアウトを実現し、ギャラリーやブログページも一緒に収録しています。

piccolo-html-bootstrap-template

[button_square color=”orange” url=”http://wegraphics.net/demo/piccolo/”] デモページ [/button_square] [button_square color=”blue” url=”http://freebiesbug.com/code-stuff/piccolo-free-bootstrap-html-template/”] ダウンロードページ [/button_square]

 

 

 

Amazing Biz

企業サイトを作成するときに参考にしたい機能がつまった、高機能にたのしむHTML素材。

AmazingBiz

[button_square color=”orange” url=”http://www.egrappler.com/amazingbiz/index.html”] デモページ [/button_square] [button_square color=”blue” url=”http://www.egrappler.com/free-responsive-html5-businessportfolio-template-amazingbiz/”] ダウンロードページ [/button_square]

 

 

 

Overflow

タイムライン状に並べられたコンテンツとフルスクリーンイメージ背景が美しいデザインテーマ。

Overflow

[button_square color=”orange” url=”http://html5up.net/overflow/”] デモページ [/button_square] [button_square color=”blue” url=”http://html5up.net/overflow/”] ダウンロードページ [/button_square]

 

 

 

A Beautiful One Page Free HTML Template

コンテンツ豊富なシングルページを作成する、スタートキット的HTMLテンプレート素材。

Free_One_Page_HTML_Template

[button_square color=”orange” url=”http://www.mrova.com/free-onepage-template/index.html”] デモページ [/button_square] [button_square color=”blue” url=”http://www.mrova.com/free-one-page-html-template/”] ダウンロードページ [/button_square]

 

 

 

Medium-Style Page Transition

新しいブログプラットフォームMediumで使われているページ遷移エフェクトを再現したHTMLテンプレート。

medium-style-page-transitions

[button_square color=”orange” url=”http://tympanus.net/Tutorials/MediumStylePageTransition/#1″] デモページ [/button_square] [button_square color=”blue” url=”http://tympanus.net/codrops/2013/10/30/medium-style-page-transition/”] ダウンロードページ [/button_square]

 

 

 

Split Layout Template

ユーザーアイコンをクリックすることで、左右からコンテンツがアニメーション付きで表示されるテクニックで、無料サンプルHTMLファイルをダウンロードすることができます。

Splitlayout-tutorial

[button_square color=”orange” url=”http://tympanus.net/Blueprints/SplitLayout/”] デモページ [/button_square] [button_square color=”blue” url=”http://freebiesbug.com/code-stuff/split-layout-template/”] ダウンロードページ [/button_square]

 

 

 

Sliding Horizontal layout with CSS3

クリックすることで水平方向にコンテンツがアニメーション付きで移動し、レスポンシブデザインにも対応したインタラクティブなHTMLファイル。

horizontal-sliding-pages

[button_square color=”orange” url=”http://tympanus.net/Development/TripleViewLayout/”] デモページ [/button_square] [button_square color=”blue” url=”http://tympanus.net/codrops/2013/09/05/sliding-horizontal-layout/”] ダウンロードページ [/button_square]

 

 

 

Bootstrap利用、高品質&クリエイティブな無料HTMLテンプレート素材まとめ

2013年末にまとめたエントリーで、ワイヤーフレームBootstrapをつかったHTMLテンプレートのまとめ。

bootstrap_html_top

 

 

 

すべて無料!レスポンシブWebデザイン対応のHTMLテンプレート素材まとめ

こちらはモバイル、タブレット端末にも対応するHTMLファイルをあつめています。

stylish-portfolio

 

 

参照元リンク : 26 Free HTML Templates – Splashnology.com