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

ferret編集部

2016年9月16日

ニュース

15,151

ferret編集メンバーが不定期で更新します。
Webマーケティング界隈の最新ニュースからすぐ使えるノウハウまで、わかりやすく紹介します！
　　
>> 著者詳細はこちら

「ホームページを制作したいけれども、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以降、サファリ、オペラ、クロームなどに対応しており、対応ブラウザが多くあります。

日本語対応のテンプレート

9.Honoka

http://honokak.osaka/

現在、唯一の日本語対応テンプレートです。
フォント指定・文字サイズをはじめ、日本語のWeb サイトに必要なものは揃っており、色変更なども簡単にできます。

まとめ

「Bootstrap」は、Webの知識はある程度持っているものの、htmlや CSS 等制作に関する専門知識は持ち合わせていないという方に特にオススメです。

無料版でもテンプレートが充実しており、有料版であれば SEO 対策まで網羅されているものもあります。
ホームページを運営していく上で必要最低限な機能はだいたい備わっているでしょう。

なかなかホームページ制作に踏み出せなかった方は、これを機に始めてみてはいかがでしょうか。