Advertisement

latestbootstrap2015feb-top

 

ウェブサイトはこれまで以上に手軽に制作できるようになってきています。ゼロからすべて作成せずに、完成したデザインテンプレートを活用することで、制作スピードを格段にアップさせることができます。

 

 

流行中のデザイントレンドを取り入れ、モダンで今どきのWebサイトを楽に制作できる、新作HTMLテンプレート素材をまとめています。もちろんどれも無料ダウンロード可能となっています。

 

 

多くのテンプレートでは人気フレームワークBootstrapが採用されており、カスタマイズ性にも優れています。またどのテンプレートもスクロールに応じたアニメーションエフェクトが注目ポイントとなっているので、デモページを確認すると分かりやすいかと思います。

 

 

 

詳細は以下から。

 

 

 

今どきのWebサイト制作が楽になる!すごい無料HTMLテンプレート素材まとめ

 

Strata

左サイドバーにパララックスエフェクトを採用したHTML5テンプレートで、シンプルな個人ブログにも向いています。

strata-01

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

 

 

 

Highlights

イメージ写真をフルスクリーン背景で指定し、半透明のボックスレイアウトが、コンテンツごとにレスポンシブに切り替わります。

highlights

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

 

 

 

Landed

各コンテンツごとに用意されたイメージ写真は、滑らかなアニメーションが素敵なパララックスエフェクトで表現された、ダーク系HTML5/CSS3テンプレート

landed

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

 

 

 

Arcadia

テキストをタイプ入力しているようなユニークなエフェクトがいい感じの、ゴールドをキーカラーに使ったモダンでスタイリッシュなHTMLテンプレート。

arcadia-html

[button_square color=”red” url=”http://themeforces.com/preview/?theme=arcadia-portfolio-template”] デモページ [/button_square]  [button_square color=”green” url=”http://www.graphicsfuel.com/2015/01/arcadia-free-html-web-template/”] ダウンロードページ [/button_square]

 

 

 

Egret

ゴーストボタンやヒーローイメージなどを採用した、今どきのランディングページ用HTMLテンプレート。スクロールでアニメーション展開する、ユニークなカード状イメージスライダー機能もオススメ。

egret-html

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

 

 

 

Boxify

先日紹介した多彩なアニメーションや、フレキシブルなレイアウトが魅力的な高品質Bootstrap製HTMLテンプレート素材。

boxify-top

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

 

 

 

Cyrus Studio

マウスカーソルをホバーすることで多彩なアニメーションを実現した、今っぽいシングルページ完結型のWebデザインを作成したいときに。Bootstrapフレームワーク対応。

cyrus-studio

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

 

 

 

AppPonsive

モバイルアプリ向けランディングページを手軽に作成でき、CSSアニメーションを使った有効的なコンテンツの魅せ方は参考になりそうです。

app-ponsive

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

 

 

 

Awesome Landing Page

5色のスキンカラーが用意された、フルスクリーンいっぱいに展開されたコンテンツは、見やすく要点をまとめやすいレイアウトで、カスタマイズも自由自在。

creative-tim

[button_square color=”red” url=”http://ct-freebies.herokuapp.com/landing-page”] デモページ [/button_square]  [button_square color=”green” url=”http://ct-freebies.herokuapp.com/landing-page”] ダウンロードページ [/button_square]

 

 

 

SmallApp

こちらもモバイルアプリ用紹介、ランディングページを想定したテンプレートで、余白スペースを十分にとったミニマル&フラットスタイルが魅力的。

small-apps

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

 

 

 

App HTML Template

モバイルアプリをよりうまく紹介することができる、スクリーンショット用スライダーやカスタムイメージ背景などカスタマイズ自由なComing Soonページ。

mailchimp-html

[button_square color=”red” url=”http://10c.ca/demos/App-Landr/#”] デモページ [/button_square]  [button_square color=”green” url=”http://10c.ca/Free-App-HTML-Template.html”] ダウンロードページ [/button_square]

 

 

 

Material HTML

Googleのマテリアル・デザインにインスパイアされた、フリーランスやデザイナー向けポートフォリオサイト用HTMLテンプレート素材。

material-html

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

 

 

 

Passion

モバイル端末ユーザーが増えることでますます重要になってきた、Eメール用HTMLテンプレート。もちろんレスポンシブデザインにも対応しています。

passion-html

[button_square color=”red” url=”http://pixelhint.com/demo/passion/x”] デモページ [/button_square]  [button_square color=”green” url=”http://smashfreakz.com/2015/01/passion-free-responsive-html-email-template/”] ダウンロードページ [/button_square]

 

 

 

Design Agency

フルスクリーンのイメージ写真を背景に使用し、ギャラリーやお問い合わせフォーム、Googleマップ埋め込みなど充実した機能を詰め込んだHTMLテンプレート。

mobile-html

[button_square color=”red” url=”http://www.templatemonster.com/demo/52648.html”] デモページ [/button_square]  [button_square color=”green” url=”http://www.templatemonster.com/free-responsive-design-agency-template.html”] ダウンロードページ [/button_square]

 

 

 

Smak

ページ読み込みエフェクトやヒーローイメージ、美しいアニメーションなどデザイントレンドを盛り込んだ、シングルページ完結の無料HTMLテンプレート。

smak

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

 

 

 

Leroy

ページ下に配置されたナビメニューは、スクロールすることで変化し、トップのヒーローイメージにより着目する工夫がされています。Bootstrapフレームワーク採用。

leroy-template

[button_square color=”red” url=”http://wowthemes.net/demo/leroy/index.html”] デモページ [/button_square]  [button_square color=”green” url=”http://www.wowthemes.net/leroy-free-one-page-html-bootstrap-template/”] ダウンロードページ [/button_square]

 

 

 

La Casa

住宅情報などを記載する不動産向けHTMLテンプレートで、人気の高いBootsrtapフレームワークを採用した、カスタマイズ性にも優れたテーマ。

la-casa-real-estate

[button_square color=”red” url=”http://pixelhint.com/demo/la_casa/”] デモページ [/button_square]  [button_square color=”green” url=”http://pixelhint.com/la-casa-free-real-estate-fully-responsive-html5-css3-home-page-template/”] ダウンロードページ [/button_square]

 

 

 

Hiking

ハイキングやスポーツをテーマにしたフレッシュな色使いが素敵で、テキストとヒーローイメージの組み合わせはより効果的にビジュアルを引き立てます。Bootstrapフレームワーク採用。

Hiking

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

 

 

 

Gridzilla

Piterestのようなカード状レイアウトに、グリッドにこだわったレスポンシブ対応のBootstrapフレームワーク採用のテンプレート。

Gridzilla

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

 

 

 

Flat App

モノクロカラーをメインに使った、フラットスタイルでどんなデザインにも合わせやすい万能HTMLテンプレート。Bootstrapフレームワークは、お好みでカスタマイズできる点も人気の理由です。

flat-app

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

 

 

 

Blue Water

サークル状イメージスライダーや、ユニークなホバーエフェクトなどデザインにこだわりを魅せるBootstrapテンプレート素材。

blue-water

[button_square color=”red” url=”http://w3layouts.com/preview/?l=/blue-water-hotel-category-flat-bootstrap-responsive-web-template/”] デモページ [/button_square]  [button_square color=”green” url=”http://w3layouts.com/blue-water-hotel-category-flat-bootstrap-responsive-web-template/”] ダウンロードページ [/button_square]

 

 

 

Agro Plus

農業をモチーフにみどり色をキーカラーに採用し、モダンなアニメーションも実装した合計5ページのHTMLテンプレートを無料ダウンロードできます。

agro-template

[button_square color=”red” url=”http://w3layouts.com/preview/?l=/agro-plus-agriculture-category-flat-bootstrap-responsive-web-template/”] デモページ [/button_square]  [button_square color=”green” url=”http://w3layouts.com/agro-plus-agriculture-category-flat-bootstrap-responsive-web-template/”] ダウンロードページ [/button_square]

 

 

 

Expandable Project Presentation

イメージ写真をタイル状に重ねたレイアウトをクリックすると、各セクションごとにアニメーション付きで展開するテンプレートで、ストーリー性を重視したいときにもオススメ。

expandable-project-presentation

[button_square color=”red” url=”http://codyhouse.co/demo/expandable-project-presentation/index.html#0″] デモページ [/button_square]  [button_square color=”green” url=”http://codyhouse.co/gem/expandable-project-presentation/”] ダウンロードページ [/button_square]

 

 

 

3D Curtain Template

デスクトップで確認するとそれぞれのコンテンツが切り替わるたびに、奥から飛び出してくるようなアニメーションエフェクトが印象的。

curtain-template-featured

[button_square color=”red” url=”3D Curtain Template – CodyHouse”] デモページ [/button_square]  [button_square color=”green” url=”http://codyhouse.co/gem/3d-curtain-template/”] ダウンロードページ [/button_square]

 

 

 

MocKit

そして最後は、HTMLとCSSのみで作成されたフラットスタイルのiPhone 6は、黒と白の2バージョンおよび5種類のテンプレートでフリー配布されています。

mockit

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

 

 

サムネイル@ : ShapeBootstrap – AppPonsive – Portfolio Landing Page