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

更新日: 2018年06月01日

CMS・サイト制作

マイページにお気に入り

「ホームページを制作したいけれども、htmlやCSSに関する知識がない。どう勉強すればいいかもわからない」

そのような悩みを抱えている方には、Twitter社が開発したCSSフレームワーク「Bootstrap」がオススメです。
あらかじめ用意されたテンプレートを使うことで、初心者でも簡単にホームページを制作できます。

今回は、Bootstrapのテンプレートを「無料」「有料」「日本語版」に分けてご紹介します。
ぜひ参考にしてみてください。

無料のテンプレート

1.AWESOMESS　PORTFOLIO

http://themeforces.com/item/free-awesomess-portfolio/

こちらは、グラフィックデザイナーやWebデザイナーなど、見た目を重視する仕事をされている方にオススメのポートフォリオ制作に適したテンプレートです。
操作が簡単な点も特徴の一つです。

2.POLO

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

トップページに大きな画像を使うことができる点が特徴で、シンプルかつ見た目も良いテンプレートです。
デフォルトで右側にスライドして表示されるメニューがあり、メニュー内容を変えることで自分好みのWeb ページにすることができます。

3.Agency

https://themewagon.com/themes/free-html5-agency-website-template-download/

シンプルなデザインのテンプレートで、色々なバリエーションを作ることができる汎用性の高いテンプレートです。
トップ画像をいくつか選択しておくことで、スライドショーのようにトップ画像を切り替える見せ方をすることが可能です。

4.MAGAZINE

https://lqd.jp/wp/theme_magazine.html

ブログやWordPressなどに使えるBootstrapテンプレートです。
ウィジェットエリアやプロフィール欄、新着記事など、ブログに使いやすい項目が数多く揃っています。
ブログと同じように項目や記事数を変えることができ、スタイリッシュな画面作りにすることが可能なのも特徴です。

5.CORPORATE

https://lqd.jp/wp/theme_corporate.html

オウンドメディアやブログに適したテンプレートです。
コーポレートサイトのようなカチッとした印象のWeb サイトを作るのに向いており、すでに観光情報サイトやWebマガジンサイトなどに採用されています。

6.Lonely

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

直感的な操作が可能で、オシャレで可愛らしいテンプレートです。
このテンプレートで作ったホームページは、スクロールするだけで次のページへと進むことが可能です。
プロフィールやギャラリーをランディングページのように見せることができます。

有料のテンプレート

7.Paqarriz

https://themeforest.net/item/paqarriz-multipurpose-html5-template/12015068

SEO機能が強みで、スムーズなアニメーションが搭載されているのが特徴のテンプレートです。
ショップなどで重宝されそうな購入画面も作ることが可能です。

8.DataServ

https://themeforest.net/item/dataserv-web-hosting-html-template/12707099

ランディングページに最適なBootstrapテンプレートです。
購入画面などがテンプレートに含まれており、レスポンシブ、ワーキングPHPやAjaxの問い合わせフォーム、注文のスライダーや、スムーズなアニメーションが特徴です。
IE9以降、サファリ、オペラ、クロームなどに対応しており、対応ブラウザが多くあります。