#marbble | Explore Tumblr Posts and Blogs

masaa-ma · 7 years

Text

Bootstrapとは！高品質な無料HTMLテンプレート素材35選

from https://ferret-plus.com/8517?utm_campaign=https%3A%2F%2Fferret-plus.com%2F8517&utm_medium=RSS&utm_source=top_rss

皆さんの中で「ホームページやランディングページのデザインが上手くできない……」という経験をしたことはないでしょうか。

そのような時に、ホームページやWebアプリケーション構築の悩みを解決してくれる便利なツールが存在します。その1つが「Bootstrap（ブートストラップ）」です。

Bootstrapは Twitter 社が開発したWeb フレームワークで、ホームページを作るための要素をテンプレートとして用意してあります。あらかじめ設計してあるため、通常よりもスムーズに制作することが可能となります。

今回は、Bootstrapの無料 HTML テンプレート素材をたっぷりと35個まとめてご紹介します。ぜひ参考にしてください。　　 ※各素材ごとに利用条件などが異なります。ご利用の際には必ず配布ページを確認し、ルール厳守の上でご利用ください

参考：初心者でもWeb制作ができる！CSSフレームワーク「Bootstrap」入門編｜ferret 　　

Bootstrapの無料 HTML テンプレートまとめ

1. Avana

http://www.designstub.com/projects/avana-minimal-portfolio-template-build-bootstrap/

無駄のないシンプルなポートフォリオスタイルのテンプレートです。すっきりとしたモダンなデザインと写真を大きく掲載できるレイアウトで、作品を魅力的に演出してくれます。　　

2. Rooky

http://www.designstub.com/projects/rooky-app-landing-page-template/

アプリを紹介するランディングページ向けに設計したテンプレートです。クリーンかつモダンな美しいデザインも目を引きますが、柔軟性・カスタマイズ性にも優れています。　　

3. POLO

http://freemiumdownload.com/downloads/polo-app-landing-page-template-with-bootstrap/

jQueryのアニメーションがインパクト大なテンプレートです。ページを開きスクロールしていくと、次々に個性的なアニメーションを表示します。スタイリッシュな印象を与えてくれるクールなデザインです。　　

4. Focus

https://freehtml5.co/preview/?item=focus-free-html5-bootstrap-template-for-photography

写真をメインに掲載したい時に使えるテンプレートです。小さめのサムネイルで写真をすっきりと美しく表示することができます。　　

5. Pixicon

http://www.designstub.com/projects/pixicon-bootstrap-coming-soon-page/

モノクロカラーでまとめた、オシャレなデザインが素敵なComing Soon ページのテンプレートです。背景の異なる3種類のテンプレートを用意しています。いずれもハイセンスで、特にファッション業界などの使用にオススメです。　　

6. creative

https://startbootstrap.com/template-overviews/creative/

クリエイティブ関係や中小企業のサービス紹介など、多用途に使えるテンプレートです。概要・サービス紹介・作品紹介・問い合わせ先まで、1ページ内にすっきりとまとめています。　　

7. New Age

https://startbootstrap.com/template-overviews/new-age/

カラフルな配色が美しい、オシャレなテンプレートです。アプリを紹介するランディングページを想定しています。　　

8. Paper Kit 2

https://www.creative-tim.com/product/paper-kit-2

美しいパステルカラーを重視してデザインしたテンプレートです。あると便利なたくさんの要素をまとめています。　　

9. Agency

https://startbootstrap.com/template-overviews/agency/

中小企業向けにデザインした、スタイリッシュでかっこいい雰囲気のテンプレートです。シンプルなレイアウトで、使い勝手も良いのではないでしょうか。　　

10. Energy

https://freehtml5.co/preview/?item=energy-free-website-template-using-bootstrap

スライドショー、価格表、ブログ、作品紹介・・・と様々なコンテンツを含むテンプレートです。必要な要素が揃い、デザインもシンプルという点で、あらゆる業種で使いやすいデザインではないでしょうか。　　

11. Startr

http://www.designstub.com/projects/startr-free-startup-landing-page-template/

スタートアップ企業のホームページを短時間で作ることを目的としたテンプレートです。ビデオなども流すことができるようになっています。　　

12. Nantes

https://moozthemes.com/nantes-one-page-multipurpose-template/

様々な用途で多目的に使える、シングルページのテンプレートです。作品紹介、パートナー紹介、特徴紹介などを掲載することができます。　　

13. Cache

https://freehtml5.co/preview/?item=cache-free-html5-bootstrap-template

簡単なサービス、作品紹介に使いやすいテンプレートです。無駄のないデザインですので、シンプルなものを求めている方にぴったりです。　　

14. Mobirise

https://mobirise.com/free-template/

スキル紹介、モバイルアプリ紹介、Coming Soon ページ、写真向けポートフォリオを作成するのに便利なテンプレートです。デザイン済みページ 4個に加え、50個以上の多種多様なブロックを収録しています。　　

15. Marbble

https://freehtml5.co/preview/?item=marble-free-html5-bootstrap-template-for-portfolio-or-multi-purpose-websites

横からスライドしてコンテンツが現れるアニメーションが美しいテンプレートです。ゆったりとした動きが落ち着いた印象を与えます。左にメニューを設けたレイアウトとなっています。　　

16. Molly

http://www.graphberry.com/item/molly-free-bootstrap-template

グレーと黄色の配色がオシャレな、シングルページのテンプレートです。サービス紹介、作品紹介を掲載することができますので、デザイン性の高いポートフォリオサイトが欲しい方にオススメです。　　

17. OAK

https://freebiesbug.com/code-stuff/oak-html-portfolio-template/

デザイナー、フォトグラファーといった方が自分の作品を紹介するのにもってこいなテンプレートです。一見シンプルながらも、洗練されたデザインとアニメーションで、作品を魅力的に紹介します。　　

18. Dsign

http://www.designstub.com/projects/dsign-minimal-portfolio-bootstrap-template/

デザイナーのためのミニマルなポートフォリオテンプレートです。モダンでオシャレなデザインで、写真やグラフィックデザインなどを素敵に披露することができます。　　

19. Folio

http://www.designstub.com/projects/folio-personal-portfolio-template/

個人の自己紹介、ポートフォリオにもってこいなテンプレートです。シンプルなモノクロカラーでまとめたデザインですので、誰にでも使いやすいのではないでしょうか。　　

20. Black Template

https://freehtml5.co/preview/?item=black-one-page-free-html5-bootstrap-template-for-landing-pages

その名の通り、黒を基調としたテンプレートです。黒の背景にモノクロの写真と白いテキストがよく映えます。クールなデザインが好みなら使ってみたいテンプレートです。　　

21. Auro

http://www.designstub.com/projects/auro-bootstrap-agency-template/

白を基調とした、シンプルでクリーンなビジネス向けテンプレートです。大きなスライドショー、作品画像が印象的でエレガントな雰囲気があります。　　

22. Adriya

http://www.designstub.com/projects/adriya-minimal-creative-onepage-bootstrap-template/

ミニマルなシングルページのテンプレートで、無駄のないデザインとなっています。簡単に商品紹介、作品紹介をしたい方にオススメです。　　

23. Lesser

https://freehtml5.co/preview/?item=lesser-free-html5-bootstrap-template

白を基調としたデザインに、グラデーションカラーの背景が美しいテンプレートです。企業の紹介ページに適しています。　　

24. Cube

https://freehtml5.co/preview/?item=cube-free-html5-bootstrap-website-template

明るいミントグリーンの差し色が綺麗なテンプレートです。ボタンにマウスを乗せるとぼんやりと動くシャドウなど、細部までこだわったデザインです。　　

25. Traveler

https://freehtml5.co/preview/?item=traveler-free-html5-bootstrap-template-for-travel-and-hotel-websites

旅行をテーマにデザインしたテンプレートで、シンプルな申し込みフォームやカウンターなどが備わっています。　　

26. Lonely

https://bootstraptaste.com/free-html-bootstrap-template-lonely/

個人のポートフォリオなどに使いやすい、シングルページのテンプレートです。概要、写真ギャラリー、問い合わせまでをコンパクトにまとめています。　　

27. Launcher

https://freehtml5.co/preview/?item=launcher-simple-coming-soon-html5-bootstrap-template

サービス、商品のローンチ前に使えるComing Soon ページのテンプレートです。日付カウントとメールフォームが備わっています。　　

28. Justice

https://freehtml5.co/justice-free-html5-bootstrap-template-for-lawyer-websites/

弁護士のホームページ向けにデザインしたテンプレートですが、そのほかの業種にも使えます�� ポップアップビデオやアニメーションが特徴的なデザインです。　　

29. Orly

http://www.designstub.com/projects/orly-bootstrap-coming-soon-template/

Coming Soon Pageとして使えるテンプレートです。シンプルでモダンな日付カウントダウンのデザインがオシャレです。　　

30. Mountain King

https://www.themeinthebox.com/mountain-king-bootstrap-template/

美しいアニメーションの動きとユニークなギャラリーのレイアウトが魅力的なテンプレートです。カスタマイズが簡単にできるものオススメしたいポイントです。　　

31. Beryllium

https://freehtml5.co/beryllium-free-architect-html5-template-built-with-bootstrap/

技術者、建築家向けにデザインしたテンプレートです。スライドショー、メールフォームなど、ホームページに必要な要素は一通り揃っています。　　

32. Now UI Kit

https://www.creative-tim.com/product/now-ui-kit

ホームページのデザインやアイデアに使える、 UI キットテンプレートです。たくさんのアイテムを収録しています。　　

33. Minifolio

http://www.designstub.com/projects/minifolio-bootstrap-resume-personal-portfolio-template/

写真や画像を紹介するのにもってこいな、シンプルなテンプレートです。簡単なプロフィールと作品紹介のページを作りたい方にオススメです。　　

34. AIR

https://freehtml5.co/preview/?item=air-free-html5-bootstrap-template-for-portfolio-and-landing-pages

アクセントに背景色を取り入れた、シンプルながらもオシャレなテンプレートです。ポートフォリオ、ランディングページに適しています。　　

35. iLand

http://www.designstub.com/projects/iland-multipurpose-landing-page-html-template/

様々な商品紹介、アプリのランディングページにぴったりなテンプレートです。商品特徴を詳しく紹介できるレイアウトで、料金表やレビューも備えています。　　

まとめ

以上、Bootstrapの高品質無料 HTML テンプレート素材35選をご紹介しました。いかがでしたでしょうか。

今回ご紹介したテンプレートは全て人気のフレームワーク Bootstrapを利用していますので、 HTML や CSS がわからない初心者、デザインが苦手な方でも簡単に作業が可能です。また、制作作業をスムーズにしてくれる以外の特徴としてデザイン性が高いことも挙げられます。デザインの知識が無くとも、クオリティの高いホームページを持つことができます。

気になる素材がないかチェックし、早速作業に取り入れてみてはいかがでしょうか。　　

https://ferret-a.akamaihd.net/images/59e998077f58a8661800055b/large.jpg?1508481028

#Feedly

0 notes