Advertisement

webplate

 

海外デザインブログCreative Nerdsで、レスポンシブWebデザインに対応した、無料HTMLテンプレートをまとめたエントリー「50 Best Free HTML Responsive Templates」が公開されていたので、今回はこちらを中心に、おすすめの無料テンプレート素材をあつめてみました。

 

 

モバイルやタブレット端末にも対応するレスポンシブWebデザインなだけでなく、ほとんどの素材がHTML5/CSS3でコーディングされており、デザイン制作の参考にしてみても良いかもしれません。

 

 

 

詳細は以下から。

 

 

 

デザインが良くなる!高品質&無料HTMLテンプレート素材まとめ

 

Twenty

余白スペースを確保したミニマルスタイルに、スライド式ナビメニューやパララックスエフェクト、CSSアニメーションなどを採用したトレンドHTMLテンプレート。

twenty_thumb

[button_square color=”red” url=”http://html5up.net/twenty”] デモページ [/button_square] [button_square color=”green” url=”http://html5up.net/twenty”] ダウンロードページ [/button_square]

 

 

 

Bicycle Flat HTML5 Template

先日ご紹介した無料PSDテンプレートをベースに、Bootstrapフレームワークを使い、HTML5/CSS3でコーディングされています。

yebo_bicycle_html

[button_square color=”red” url=”http://peterfinlan.com/yebo-flat-layout/”] デモページ [/button_square] [button_square color=”green” url=”http://freebiesbug.com/code-stuff/bicycle-flat-html5-css3-template/”] ダウンロードページ [/button_square]

 

 

 

Guri Guri Nyoi

モバイルアプリの販売やプロモーション、ランディングページなどに最適なテンプレートで、右端のメニューでコンテンツを移動します。

guri_guri

[button_square color=”red” url=”https://googledrive.com/host/0Bz_rICHLHzJzZkVndU41QllNWE0/index.html”] デモページ [/button_square] [button_square color=”green” url=”http://www.cssauthor.com/bootstrap-3-single-page-template/”] ダウンロードページ [/button_square]

 

 

 

Blogue

ブログをはじめたいという人にオススメしたいテンプレートで、トップページとシングルページが用意されています。

blogue

[button_square color=”red” url=”http://majuter.us/demo/blogue/”] デモページ1 [/button_square] [button_square color=”red” url=”http://majuter.us/demo/blogue/inner-page.html”] デモページ2 [/button_square] [button_square color=”green” url=”http://majuter.us/blog/html-template/blogue-free-html-template.html”] ダウンロードページ [/button_square]

 

 

 

Piccolo

全部で19ページのHTMLテンプレートを収録した、ブログ運営を想定した、スッキリと見やすいデザインが印象的。

piccolo-slide4

[button_square color=”red” url=”http://wegraphics.net/demo/piccolo/”] デモページ [/button_square] [button_square color=”green” url=”http://wegraphics.net/downloads/piccolo-a-free-bootstrap-html-theme/”] ダウンロードページ [/button_square]

 

 

 

Facebook Template

Bootstrapフレームワークを利用して、facebookのレイアウトを完全再現しています。

facebook_html

[button_square color=”red” url=”http://www.bootply.com/render/96266″] デモページ [/button_square] [button_square color=”green” url=”http://www.bootstrapzero.com/bootstrap-template/facebook”] ダウンロードページ [/button_square]

 

 

 

Google Plus Template

そしてこちらはGoogle +のレイアウトをそのまま再現したテンプレート素材。

google_plus

[button_square color=”red” url=”http://www.bootply.com/render/90113″] デモページ [/button_square] [button_square color=”green” url=”http://www.bootstrapzero.com/bootstrap-template/google-plus”] ダウンロードページ [/button_square]

 

 

 

Pratt Template

Webやモバイルアプリのランディングページを想定したレイアウトで、サービスの特長をうまく伝える工夫がされています。

pratt_bootstrap

[button_square color=”red” url=”http://www.blacktie.co/demo/pratt/”] デモページ [/button_square] [button_square color=”green” url=”http://www.bootstrapzero.com/bootstrap-template/pratt”] ダウンロードページ [/button_square]

 

 

 

ThreeSixty

Bootstrapフレームワークを採用し、6種類のカラースキンを用意した高機能HTMLテンプレート。アニメーション付ヘッダーも魅力的。

flat_ultimate

[button_square color=”red” url=”http://www.fabianbentz.de/demo/threesixty/index.html”] デモページ [/button_square] [button_square color=”green” url=”https://www.behance.net/gallery/13507881/ThreeSixty-Bootstrap-Website-Template-Free-Download”] ダウンロードページ [/button_square]

 

 

 

Start Bootstrap

シンプルなポートフォリオサイトを作成するときの参考にしたい、フラットスタイルのHTMLテンプレート。

freelancer

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

 

 

 

Meilleur

シンプルながらデザイントレンドを取り入れ、使い勝手の良い万能テンプレートが完成しました。Bootsrtap3フレームワークを採用。

meilleur_template

[button_square color=”red” url=”http://www.egrappler.com/meilleur/index.html”] デモページ [/button_square] [button_square color=”green” url=”http://www.egrappler.com/one-page-free-html-css-website-template-bootstrap-3-meilleur/”] ダウンロードページ [/button_square]

 

 

 

AdminLTE

有料テンプレート並みに作りこまれたダッシュボード、管理画面のデザイン制作に使える使えるUIデザイン、HTMLページが揃っています。

adminlte-dashboard

[button_square color=”red” url=”http://almsaeedstudio.com/preview”] デモページ [/button_square] [button_square color=”green” url=”http://www.bootstrapzero.com/bootstrap-template/adminlte”] ダウンロードページ [/button_square]

 

 

 

Elegance

随所にパララックスエフェクトを実装したテンプレートで、背景が切り替わるイメージスライダーがユーザーの注目を集めます。

elegance_template

[button_square color=”red” url=”http://shapebootstrap.net/wp-content/plugins/shapebootstrap/demo.php?id=380″] デモページ [/button_square] [button_square color=”green” url=”http://shapebootstrap.net/item/elegance-responsive-one-page-html-template/”] ダウンロードページ [/button_square]

 

 

 

Mamba

フラットスタイルでデザインされた、シングルページ完結型レイアウトのテンプレート素材。アニメーションを利用した、コンテンツの切り替えエフェクトもポイントです。

mamba_template

[button_square color=”red” url=”http://bootstraptaste.com/theme/mamba/”] デモページ [/button_square] [button_square color=”green” url=”http://www.bootstrapzero.com/bootstrap-template/mamba”] ダウンロードページ [/button_square]

 

 

 

Creative Company Layout

伸縮アニメーションが素敵なナビメニューを実装した、シンプルなポートフォリオ用レイアウト。

creative_company

[button_square color=”red” url=”http://demo.tutorialzine.com/2014/04/creative-company-bootstrap-template/”] デモページ [/button_square] [button_square color=”green” url=”http://tutorialzine.com/2014/04/creative-company-bootstrap-template/”] ダウンロードページ [/button_square]

 

 

 

Magister

ぼんやりと浮かびあがるフェードイン・アニメーションで魅せるコンテンツに、ユニークな動きのナビメニューも素敵なテンプレート。

magister-large

[button_square color=”red” url=”http://www.gettemplate.com/demo/magister/”] デモページ [/button_square] [button_square color=”green” url=”http://www.bootstrapzero.com/bootstrap-template/magister”] ダウンロードページ [/button_square]

 

 

 

Evento

音楽フェス、イベント告知ページを想定したファンキーな色使いに、カウントダウンタイマーやGoogleマップなどがダイナミックにレイアウトされています。

evento-banner

[button_square color=”red” url=”http://shapebootstrap.net/wp-content/plugins/shapebootstrap/demo.php?id=405″] デモページ [/button_square] [button_square color=”green” url=”http://shapebootstrap.net/item/evento-free-music-event-template/”] ダウンロードページ [/button_square]

 

 

 

E-Shopper

ショッピングサイトに特化したつくりで、Bootstrapフレームワークを採用し、商品ページなど11種類の特別テンプレートも収録されています。

eshoper-baner

[button_square color=”red” url=”http://demo.themeum.com/?product=eshopper”] デモページ [/button_square] [button_square color=”green” url=”http://shapebootstrap.net/item/e-shopper-best-free-ecommerce-html-template/”] ダウンロードページ [/button_square]

 

 

 

Responsive Shopping Cart

ごちゃごちゃにしたくないショッピングカート機能を、レスポンシブWebデザイン対応のすっきりレイアウトで表現しています。

shopping_responsive

[button_square color=”red” url=”http://demo.tutorialzine.com/2014/04/responsive-shopping-cart-layout-twitter-bootstrap-3/”] デモページ [/button_square] [button_square color=”green” url=”http://tutorialzine.com/2014/04/responsive-shopping-cart-layout-twitter-bootstrap-3/”] ダウンロードページ [/button_square]

 

 

 

430+個の無料HTMLテンプレートをダウンロードできるサイトW3Layout

 

ここから以下の無料HTMLテンプレート素材は、W3layout.comよりピックアップしたアイテムをまとめています。

 

w3Layout.comでは、当サイトでも定期的にまとめている無料UIデザインキットや、Webサイト用PSDテンプレートを用い、Twitter社謹製フレームワークBootstrapでコーディングされたHMTLテンプレート素材を公開しています。

 

 

ポイントとしては、ひとつのデザインからデスクトップ用レスポンシブテンプレートの他に、スマートフォン(iPhone、Android、Window携帯など)とモバイル(Nokia、Sony Ericsson、LGなど)の合計3種類の最適化されたテンプレートファイルが用意されている点です。

 

 

読み込み速度を考慮したデザインテンプレートは、表示する端末に応じて、PHPスクリプトで自動的に切り替わる仕組みとなっています。より詳しい説明は以下のQ&Aページを参考にどうぞ。

 

なお無料ダウンロードできるテンプレートには、w3Layout.comへのバックリンクが埋め込まれています。バックリンクを削除したい場合は、$10以上の寄付をPayPalよりすることで解除することができます。

 

[list type=”star”] [li]FAQ’s Frequently Asked Question – W3Layout.com[/li] [/list]

[warning_box]各テンプレートは、ローカル環境では表示されません。サーバーへアップロードし、確認して下さい。 [/warning_box]

 

 

Aqual

aqual_template

[button_square color=”red” url=”http://w3layouts.com/preview/?d=smartphone&l=/aqual-singlepage-flat-responsive-web-template”] デモページ [/button_square] [button_square color=”green” url=”http://w3layouts.com/aqual-singlepage-flat-responsive-web-template”] ダウンロードページ [/button_square]

 

 

My Kingdom

my_kingdom

[button_square color=”red” url=”http://w3layouts.com/preview/?d=smartphone&l=/kingdom-minimalistic-flat-corporate-responsive-web-template”] デモページ [/button_square] [button_square color=”green” url=”http://w3layouts.com/kingdom-minimalistic-flat-corporate-responsive-web-template”] ダウンロードページ [/button_square]

 

 

Mission

mission_template

[button_square color=”red” url=”http://w3layouts.com/preview/?d=smartphone&l=/missiona-coporate-flat-responsive-web-template”] デモページ [/button_square] [button_square color=”green” url=”http://w3layouts.com/missiona-coporate-flat-responsive-web-template”] ダウンロードページ [/button_square]

 

 

WildFlat

onlybold

[button_square color=”red” url=”http://w3layouts.com/preview/?d=smartphone&l=/wildflat-corporate-flat-responsive-web-template”] デモページ [/button_square] [button_square color=”green” url=”http://w3layouts.com/wildflat-corporate-flat-responsive-web-template”] ダウンロードページ [/button_square]

 

 

UI Hero

uihero_html

[button_square color=”red” url=”http://w3layouts.com/preview/?d=smartphone&l=/ui-hero-corporate-portfolio-flat-responsive-web-template”] デモページ [/button_square] [button_square color=”green” url=”http://w3layouts.com/ui-hero-corporate-portfolio-flat-responsive-web-template”] ダウンロードページ [/button_square]

 

 

Social Summer UI Kit

socialsummer

[button_square color=”red” url=”http://w3layouts.com/preview/?d=smartphone&l=/social-summer-ui-kit-flat-responsive-web-template”] デモページ [/button_square] [button_square color=”green” url=”http://w3layouts.com/social-summer-ui-kit-flat-responsive-web-template”] ダウンロードページ [/button_square]

 

 

Bloom

bloom_template

[button_square color=”red” url=”http://w3layouts.com/preview/?d=smartphone&l=/bloom-portfolio-single-page-responsive-website-template”] デモページ [/button_square] [button_square color=”green” url=”http://w3layouts.com/bloom-portfolio-single-page-responsive-website-template”] ダウンロードページ [/button_square]

 

 

Resume

resume_template

[button_square color=”red” url=”http://w3layouts.com/preview/?d=smartphone&l=/resume-singlepage-flat-responsive-web-template”] デモページ [/button_square] [button_square color=”green” url=”http://w3layouts.com/resume-singlepage-flat-responsive-web-template”] ダウンロードページ [/button_square]

 

 

Snowboarding

Summit_template

[button_square color=”red” url=”http://w3layouts.com/preview/?d=smartphone&l=/snowboarding-flat-ecommerce-bootstrap-responsive-web-template”] デモページ [/button_square] [button_square color=”green” url=”http://w3layouts.com/snowboarding-flat-ecommerce-bootstrap-responsive-web-template”] ダウンロードページ [/button_square]

 

 

Colorz UI Kit

flatuikit

[button_square color=”red” url=”http://w3layouts.com/preview/?d=smartphone&l=/colorz-ui-kit-flat-responsive-web-template”] デモページ [/button_square] [button_square color=”green” url=”http://w3layouts.com/colorz-ui-kit-flat-responsive-web-template”] ダウンロードページ [/button_square]

 

 

Calm

calm_template

[button_square color=”red” url=”http://w3layouts.com/preview/?d=smartphone&l=/calm-flat-personal-portfolio-blog-responsive-web-template”] デモページ [/button_square] [button_square color=”green” url=”http://w3layouts.com/calm-flat-personal-portfolio-blog-responsive-web-template”] ダウンロードページ [/button_square]

 

 

 

レスポンシブWebデザインに対応!クリエイティブな無料HTMLテンプレート素材まとめ

前回まとめたHTMLテンプレートも一緒に確認しませんか、ご参考までにどうぞ。

レスポンシブWebデザインに対応!クリエイティブな無料HTMLテンプレート素材まとめ

 

 

サムネイル@ : An awesome front-end framework – Get Webplate 

参照元リンク : 50 Best Free HTML Responsive Templates – Creatie Nerds