Advertisement

meghna-onapage-business

 

ウェブサイト制作をよりスムーズに行うことができるHTML5/CSS3テンプレートを利用しませんか。あらかじめデザインはスタイリングされているので、制作作業をスピードアップすることができます。

 

 

今回は無料ダウンロードできる、新作HTMLテンプレート素材をまとめてご紹介します。多くのテンプレートには人気のBootstrapフレームワークが採用されているので、拡張性が高く、柔軟なデザイン制作を行うことができます。

 

 

 

詳細は以下から。

 

 

 

最新デザインが魅力的!すごい無料HTMLテンプレート素材まとめ

 

Photon

美しいグラデーションにパララックスエフェクトに、トレンドのゴーストボタンを採用したシングルページ用HTMLテンプレート。

photon-html5

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

 

 

 

Forkio

Bootstrapフレームワークを採用し、SCSSで作成された拡張性の高いシングルページ用テンプレート。スクロールに応じたアニメーションやレイアウトなどトレンドも意識したデザイン。

Forkio_Featured_Large-html

[button_square color=”red” url=”http://tympanus.net/Freebies/Forkio/”] デモページ [/button_square]  [button_square color=”green” url=”http://tympanus.net/codrops/2015/03/12/freebie-forkio-one-page-website-template/”] ダウンロードページ [/button_square]

 

 

 

Brandy

アウトラインが特徴的なイラストレーションに、余白スペースたっぷりなミニマルスタイルが素敵なHTMLテンプレート。

brandy-html

[button_square color=”red” url=”http://shapebootstrap.net/preview/?id=1345″] デモページ [/button_square]  [button_square color=”green” url=”http://shapebootstrap.net/item/brandy-free-portfolio-template/”] ダウンロードページ [/button_square]

 

 

 

Conical

ブランドロゴを全面に押し出し、余白スペースたっぷりな太字デザインが印象的なテンプレート。

Conical-Creative-Bootstrap-HTML

[button_square color=”red” url=”http://w3layouts.com/preview/?l=/conical-a-corporate-agency-flat-bootstrap-responsive-web-template/”] デモページ [/button_square]  [button_square color=”green” url=”http://creativecrunk.com/conical-simple-creative-bootstrap-html-template/”] ダウンロードページ [/button_square]

 

 

 

White

ヘッダー部分にイメージスライダーまたはビデオ動画をフルスクリーン表示する、クリエイティブなBoostrapのHTMLテンプレート。

white-html

[button_square color=”red” url=”http://evick.ru/market/white/”] デモページ [/button_square]  [button_square color=”green” url=”http://pixelbuddha.net/freebie/freebie-white-one-page-html-template”] ダウンロードページ [/button_square]

 

 

 

BetaCommerce

ショッピングサイトを想定したHTMLテンプレートで、フルスクリーンスライダーはもちろん、各プロダクト用シングルページも制作されています。

beta-commerce-html

[button_square color=”red” url=”http://betacommerce.blogspot.com”] デモページ [/button_square]  [button_square color=”green” url=”http://www.script-tutorials.com/template-betacommerce/”] ダウンロードページ [/button_square]

 

 

 

Kasper

余白スペースを十分に採用したミニマルスタイルで、スクロールに合わせた質感たっぷりなアニメーションが印象的な、ポートフォリオ向けHTMLテンプレート。

kreiser-html5-template

[button_square color=”red” url=”http://www.graphberry.com/products/preview/kasper-one-page-creative-html-theme”] デモページ [/button_square]  [button_square color=”green” url=”http://www.graphberry.com/item/kasper-one-page-creative-html-theme”] ダウンロードページ [/button_square]

 

 

 

Be Material

Googleデザインガイドライン、マテリアルデザインをモチーフにしたレイアウトは、今後ますます人気が出てきそうです。

be-material-html

[button_square color=”red” url=”http://w3layouts.com/preview/?l=/be-material-a-corporate-portfolio-flat-bootstrap-responsive-web-template/”] デモページ [/button_square]  [button_square color=”green” url=”http://creativecrunk.com/be-material-one-page-bootstrap-responsive-html-template/”] ダウンロードページ [/button_square]

 

 

 

AppFun

Bootstrapフレームを採用した、ビビッドな黄色がアクセントになったモバイルアプリなどのプロモーション、ランディングページ向けテンプレート。

AppFun-bootstrap-html

[button_square color=”red” url=”http://w3layouts.com/preview/?l=/app-fun-a-mobile-app-landing-flat-bootstrap-responsive-web-template/”] デモページ [/button_square]  [button_square color=”green” url=”http://creativecrunk.com/appfun-bootstrap-app-landing-html-template/”] ダウンロードページ [/button_square]

 

 

 

Boishakhi

カーテンスクロール状に各コンテンツが遷移するので、プレゼンテーションなどにも活用できるテンプレート。

boishakhi-html

[button_square color=”red” url=”http://shapebootstrap.net/preview/?id=1651″] デモページ [/button_square]  [button_square color=”green” url=”http://shapebootstrap.net/item/boishakhi-responsive-mobile-landing-page/”] ダウンロードページ [/button_square]

 

 

 

Sumo Landing

フルスクリーンイメージを利用したレスポンシブサイトで、簡単なランディングページを作成したいときに便利なテンプレート。

sumolanding700-1

[button_square color=”red” url=”http://www.blacktie.co/demo/sumolanding/”] デモページ [/button_square]  [button_square color=”green” url=”“] ダウンロードページ [/button_square]

 

 

 

AppStation

モバイル・アプリ向けランディングページを想定し、Bootstrapフレームワークを利用したカスタマイズしやすいテンプレート。

appstation-free-bootstrap-html5

[button_square color=”red” url=”http://wpfreeware.com/preview/appstation/#”] デモページ [/button_square]  [button_square color=”green” url=”http://www.wpfreeware.com/appstation-free-bootstrap-html5-app-landing-page-theme/”] ダウンロードページ [/button_square]

 

 

 

Blue App

パララックスエフェクトを効果的に活用した、モバイルアプリを詳しく紹介できるランディングページ向けテンプレート。

html-template-march-14

[button_square color=”red” url=”http://shapebootstrap.net/preview/?id=1608″] デモページ [/button_square]  [button_square color=”green” url=”http://shapebootstrap.net/item/blue-app-free-one-page-responsive-html5-parallax-business-app-landing-page/”] ダウンロードページ [/button_square]

 

 

 

Draco

自分の経歴をまとめたオンライン履歴書のような使い方を想定したテンプレートで、一緒にPSDファイルも収録しています。

resume-template

[button_square color=”red” url=”http://demo.afnizar.com/draco/”] デモページ [/button_square]  [button_square color=”green” url=”https://dribbble.com/shots/1984319-Free-PSD-HTML-Template-Draco”] ダウンロードページ [/button_square]

 

 

 

Modern Portfolio

Bootstrapフレームを採用したポートフォリオ向けテンプレートで、アニメーションを利用したコンテンツやナビメニューの展開が素敵。

moderno-html

[button_square color=”red” url=”http://omahpsd.com/demo/themes/moderno-html/”] デモページ [/button_square]  [button_square color=”green” url=”http://omahpsd.com/2015/01/free-website-template-moderno-html/”] ダウンロードページ [/button_square]

 

 

 

MobApp

モバイル・アプリ用ランディングページで、フラットスタイルを利用したデザインが特徴のHTMLテンプレート。

mobapp-html

[button_square color=”red” url=”http://omahpsd.com/demo/themes/mobapp-html/”] デモページ [/button_square]  [button_square color=”green” url=”http://omahpsd.com/2014/12/free-html-template-mobapp-flat-landing-page/”] ダウンロードページ [/button_square]

 

 

 

Brandi

Bootstrap3.2フレームワークを採用したテンプレートで、アニメーション豊かなイメージスライダーやギャラリー機能などが充実しています。

brandi-bootstrap-template

[button_square color=”red” url=”http://themefisher.com/demos/?theme=Brandi”] デモページ [/button_square]  [button_square color=”green” url=”“] ダウンロードページ [/button_square]

 

 

 

Alpha

清潔感のあるデザインに、基本的な企業サイト向けコンテンツをまとめたHTMLテンプレートで、Bootstrapフレームワークを採用。

html-template-march-09

[button_square color=”green” url=”https://onepagelove.com/alpha”] ダウンロードページ [/button_square]

 

 

 

Grape

スタイルに応じて4種類のデモを収録しており、ページ読み込みローディングやスクロールに応じたユニークなアニメーションなど、機能満載のテンプレート。

html-template-march-12

[button_square color=”red” url=”http://codepassenger.com/html/?product=grape”] デモページ [/button_square]  [button_square color=”green” url=”http://shapebootstrap.net/item/grape-responsive-app-landing-page-template/”] ダウンロードページ [/button_square]

 

 

 

Seven

シングルページにコンテンツをまとめたポートフォリオ向けテンプレートで、スクロールと同時に展開されるスムーズなアニメーションが魅力的。

seven-html5-template

[button_square color=”red” url=”http://www.graphberry.com/products/preview/seven-html-single-page-creative-portfolio-template”] デモページ [/button_square]  [button_square color=”green” url=”http://www.graphberry.com/item/seven-html-single-page-creative-portfolio-template”] ダウンロードページ [/button_square]

 

 

 

KreFolio

最新版Bootstrap3.3フレームワークに、3色のカラースタイルが揃った、ダウンロード後すぐに利用できる充実のHTMLテンプレート。

krefolio-startup-agency-landing-page-template

[button_square color=”red” url=”http://shapebootstrap.net/preview/?id=1394″] デモページ [/button_square]  [button_square color=”green” url=”http://shapebootstrap.net/item/krefolio-startup-agency-landing-page-template/”] ダウンロードページ [/button_square]

 

 

 

CSS Contact Form

レスポンシブに展開することができる、使い勝手の良いお問い合わせフォーム用テンプレート。

responsive-contant-form

[button_square color=”red” url=”http://codyhouse.co/demo/contact-form/index.html”] デモページ [/button_square]  [button_square color=”green” url=”http://codyhouse.co/gem/css-contact-form/”] ダウンロードページ [/button_square]

 

 

 

CSS Menu Animation

モバイル時でのナビメニューの展開を、3種類のユニークなアニメーションで実現しています。

css-menu-animation

[button_square color=”red” url=”http://codepen.io/virgilpana/full/NPzodr/”] デモページ [/button_square]  [button_square color=”green” url=”https://dribbble.com/shots/1954664-CSS-Menu-Animations”] ダウンロードページ [/button_square]

 

 

 

商用可能な無料HTMLテンプレートを公開するサイトTemplated

 

Templated

800種類以上のHTML5/CSS3で作成されたテンプレートを公開しているサイトで、どの素材もクレジット表記することで個人、商用利用できるCreative Commonライセンスが発行されています。

templated

 

 

サムネイル@ : Meghna Onepage Business Template – Themfisher