Advertisement

bootstrap_html_top

 

2011年にTwitter社が発表したHTMLフレームワーク、Bootstrapは、世界でもっとも利用されている、人気フレームワークのひとつです。あらかじめCSSスタイリングを施したコンポーネントや、プラグインなどが用意されているので、あたらしいWebプロジェクトを、容易に展開することができるようになります。

 

 

海外デザインブログTemplate Monster Blogで、Bootstrapを利用した、高品質でクリエイティブな、無料HTMLテンプレート素材をまとめたエントリー「Free Bootstrap Templates From Around the Web」が公開されていたので、今回はご紹介します。

 

 

Bootstrapをベースに、2013年トレンドなフラットデザインや、パララックスコンテンツを追加したり、フルスクリーンイメージ写真を活用したりと、有料テンプレートにも負けないクオリティが魅力です。

 

 

 

詳細は以下から。

 

 

 

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

 

Flat Theme

フラットデザインをベースに、アニメーション付スライダーや、ソート機能付ギャラリーなど、合計14種類のHTMLページを収録しています。

flat_theme_banner

[button_square color=”orange” url=”http://shapebootstrap.net/wp-content/plugins/shapebootstrap/demo.php?id=116″] デモページ [/button_square]  [button_square color=”blue” url=”http://shapebootstrap.net/item/flat-theme-best-free-responsive-multipurpose-wordpress-theme/”] ダウンロードページ [/button_square]

 

 

 

Fornax

レイアウトはシンプルなのですが、Flat UIアイコン素材を利用することで、統一感が一気に増しますね。全5ページを収録です。

fornax-banner

[button_square color=”orange” url=”http://shapebootstrap.net/wp-content/plugins/shapebootstrap/demo.php?id=16″] デモページ [/button_square]  [button_square color=”blue” url=”http://shapebootstrap.net/item/fornax-corporate-site-template/”] ダウンロードページ [/button_square]

 

 

 

Slidefolio

フルスクリーンスライダー、アニメーション付ソート機能、パララックスエフェクトなど、トレンドを盛り込んだ仕様が素敵です。

free-bootstrap-theme

[button_square color=”orange” url=”http://surfmandu.com/demo/slidefolio/”] デモページ [/button_square]  [button_square color=”blue” url=”http://bootstrap3themes.quora.com/Slidefolio-%E2%80%93-One-Page-Free-Responsive-Bootstrap-3-Portfolio-Theme”] ダウンロードページ [/button_square]

 

 

 

Onassis

フルスクリーン写真を利用したヘッダーに、ナビゲーションメニューをオフキャンバスで表示します。

onassis

[button_square color=”orange” url=”http://www.blacktie.co/demo/onassis/”] デモページ [/button_square]  [button_square color=”blue” url=”http://www.blacktie.co/2013/10/onassis-agency-one-page-theme/”] ダウンロードページ [/button_square]

 

 

 

Nova

企業サイトなどを想定した、基本的なHTMLレイアウトに加え、サムネイルホバーエフェクトなどにもこだわったつくり。

nova

[button_square color=”orange” url=”http://shapebootstrap.net/wp-content/plugins/shapebootstrap/demo.php?id=1″] デモページ [/button_square]  [button_square color=”blue” url=”http://shapebootstrap.net/item/nova-multipurpose-site-template/”] ダウンロードページ [/button_square]

 

 

 

Link – Agency Theme

レンガ状にコンテンツを並べるレイアウトが印象的で、多彩なアニメーションやレスポンシブなど、ポイントを押さえたつくりとなっています。

link

[button_square color=”orange” url=”http://www.blacktie.co/demo/link/”] デモページ [/button_square]  [button_square color=”blue” url=”http://www.blacktie.co/2013/11/link-bootstrap-3-agency-theme/”] ダウンロードページ [/button_square]

 

 

 

Xeon

フルスクリーンスライダーがすこしだけ、コンテンツに重なるように設計されており、WebアイコンフォントFontAwesomeもインストール済みです。

xeon-banner

[button_square color=”orange” url=”http://shapebootstrap.net/wp-content/plugins/shapebootstrap/demo.php?id=64″] デモページ [/button_square]  [button_square color=”blue” url=”http://shapebootstrap.net/item/xeon-best-onepage-site-template/”] ダウンロードページ [/button_square]

 

 

 

Business Casual

背景にイメージ写真を利用した、半透明コンテンツボックが魅力的なカスタマイズとなっています。

business-casual

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

 

 

 

Stylish Portfolio Template

パララックスエフェクトを活用した、クリエイティブなWebサイト作成に使いたい、高品質フリーHTMLテンプレート。

start-bootstrap

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

 

 

 

Bootbusiness

企業サイト作成に向いた、Q&Aページやお問い合わせページなど、豊富なHTMLテンプレートが収録されています。

bootbusiness

[button_square color=”orange” url=”http://jobpixels.com/bootbusiness/index.html”] デモページ [/button_square]  [button_square color=”blue” url=”http://jobpixels.com/bootbusiness.html”] ダウンロードページ [/button_square]

 

 

 

Revera

フルサイズで展開するイメージスライダーに、3カラムレイアウトを中心とした、HTMLテンプレートページが収録されています。

revera

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

 

 

 

Bolt Theme

フラットデザインを意識した、余計なデザインを省いたミニマルテンプレートは、配色の参考にもいかがでしょう。

bolt-theme

[button_square color=”orange” url=”http://www.blacktie.co/demo/bolt/”] デモページ [/button_square]  [button_square color=”blue” url=”http://www.blacktie.co/2013/11/bolt-flat-one-page-theme/”] ダウンロードページ [/button_square]

 

 

 

Spot – Freelance & Agency Theme

フリーランスで活動するひとの、ポートフォリオギャラリーサイトなどによさそうな、ミニマルHTMLテンプレート。

spot

[button_square color=”orange” url=”http://www.blacktie.co/demo/spot/”] デモページ [/button_square]  [button_square color=”blue” url=”http://www.blacktie.co/2013/10/spot-freelance-agency-theme/”] ダウンロードページ [/button_square]

 

 

 

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

高機能でカスタマイズ自由な、フリー素材をあつめています。

47

 

 

プレミアム 思い通りのレイアウトを実現、高品質プレミアムHTMLテンプレート素材まとめ

プロジェクト予算に都合がつくときは、プレミアム素材を検討してみてはいかがでしょう。

wballs

 

 

参照元リンク : Free Bootstrap Templates from Around the Web – Template Monster Blog