Bootstrap（ブートストラップ）を使ったランディングページの無料デザインテンプレート35選

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

そのような時に活用できるフレームワークが「Bootstrap（ブートストラップ）」です。今回は、Bootstrapを利用した無料テンプレートを35個まとめて紹介します。　　
※各素材ごとに利用条件などが異なります。利用する際は必ず配布ページを確認しましょう。

▼成果の出るLPデザインのポイントをまとめた資料はこちら

成果の出るLPデザインのポイント【チェックリスト付き】クリエイティブ例も紹介

目次

1. Webサイトを簡単に構築できるフレームワーク「Bootstrap（ブートストラップ）」
2. Bootstrap（ブートストラップ）のメリット・デメリット
3. ランディングページに使えるBootstrap（ブートストラップ）の無料テンプレート35選
   1. Avana
   2. Rooky
   3. POLO
   4. Focus
   5. Pixicon
   6. creative
   7. New Age
   8. Paper Kit 2
   9. Agency
   10. Energy
   11. Startr
   12. Nantes
   13. Cache
   14. Mobirise
   15. Marbble
   16. Molly
   17. OAK
   18. Dsign
   19. Folio
   20. Black Template
   21. Auro
   22. Adriya
   23. Lesser
   24. Cube
   25. Traveler
   26. Lonely
   27. Launcher
   28. Justice
   29. Orly
   30. Mountain King
   31. Beryllium
   32. Now UI Kit
   33. Minifolio
   34. AIR
   35. iLand

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

Bootstrapは、Twitter社が開発したCSSのフレームワークです。 本来、CSSを書く場合はスタイルをすべて自分で作る必要がありますが、あらかじめ用意されたテンプレートを使うことで、初心者でも簡単にWebページを制作することが可能なBootstrap。今回は、無料のものから有料のものまで種類が豊富なBootstrapのテンプレートをご紹介していきます。

Webサイトを簡単に構築できるフレームワーク「Bootstrap（ブートストラップ）」

Bootstrap（ブートストラップ）とは、Twitter社が開発した、Webサイトやアプリケーションを構築するためのHTML／CSS／JavaScriptのフレームワークのことです。

決められたテンプレートを使って手軽にWebサイトの制作ができるため、開発工数の削減に繋がります。

Bootstrap（ブートストラップ）のメリット・デメリット

Bootstrapのメリットは、デザインやHTMLなどのソースコードがわからなくても、決まったルールの元に機能やWebツールがまとまっているために、簡単に見栄えの良いページを作成できることです。Bootstrapで作成できるWebサイトはPCやスマホ、タブレットにも対応しているレスポンシブデザインであるため、ユーザーにとっても見やすいサイトを制作できます。

ただし、決まったルールで作られるためにCSSの知識などがないとデザインが画一的になってしまうというデメリットもあります。

ランディングページに使えるBootstrap（ブートストラップ）の無料テンプレート35選

今回は、Bootstrapのフレームワークを活用したテンプレートの中でも、無料、かつランディングページに使えるものを35個紹介します。自社のイメージに合うものがないか探してみましょう。

1. Avana

Avana

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

2. Rooky

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

3. eComify

eComify

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

4. Focus

Focus

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

5. Designstab

Designstab

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

6. creative

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

7. New Age

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

8. Paper Kit 2

Paper Kit 2

美しいパステルカラーを重視してデザインしたテンプレートです。コーディングにおいて便利な要素を豊富にまとめています。
　　

9. Agency

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

10. Energy

Energy

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

11. Startr

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

12. Nantes

Nantes

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

13. Cache

Cache

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

14. Mobirise

Mobirise

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

15. Marbble

Marbble

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

16. Molly

Molly

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

17. OAK

OAK

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

18. Dsign

デザイナーのためのミニマルなポートフォリオテンプレートです。モダンでお洒落なデザインで、写真やグラフィックデザインなどをより魅力的に紹介できます。
　

19. Folio

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

20. Black Template

Black Template

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

21. Auro

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

22. Adriya

ミニマルなシングルページで、無駄のないデザインが特徴のテンプレートです。簡単に商品紹介、作品紹介をしたい方におすすめです。
　　

23. Lesser

Lesser

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

24. Cube

Cube

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

25. Traveler

Traveler

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

26. Lonely

Lonely

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

27. Launcher

Launcher

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

28. Justice

Justice

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

29. Orly

Coming Soonページとして使えるテンプレートです。シンプルでモダンな日付カウントダウンのデザインがお洒落です。
　　

30. Mountain King

Mountain King

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

31. Beryllium

Beryllium

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

32. Now UI Kit

Now UI Kit

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

33. Minifolio

写真や画像を紹介するのに適したシンプルなテンプレートです。簡単なプロフィールと作品紹介のページを作りたい方におすすめです。
　　

34. AIR

AIR

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

35. iLand

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

Bootstrap（ブートストラップ）でデザインの仕上がりに差をつけよう

WebフレームワークのBootstrapでは、提供されている多数のテンプレートを利用することで様々なデザインのランディングページやポートフォリオを制作できます。

今回紹介したテンプレートは、HTMLやCSSがわからない方、デザインが苦手な方でも簡単に利用できます。無料なので、編集機能や仕上がりのデザインをいくつか試してみるのもおすすめです。

気になるテンプレートを見つけたら、ぜひ取り入れてみてください。

CSSで見出しをデザインするには

CSSで見出しをデザイン！コピペできるおしゃれな見出しデザインまとめ

ホームページの重要な要素の1つである見出しですが、毎回似たり寄ったりのデザインになったり、作るのに時間がかかりすぎていたりしていませんか。今回は見出しデザインで悩む方に向けて、オシャレな装飾ができるCSSの見出しを紹介した記事をまとめました。

LP作成についてもっと知る

ランディングページ制作の際に意識したいLPOとは？

プロモーションとしてインターネット広告が活況の中、広告の遷移先とされるランディングページ（LP）を効果的に制作したい企業も多いことでしょう。そこで注目したいのがLPOです。 今回はLPOについて解説し、おすすめのツールをご紹介します。 コンバージョンを獲得できる優良なWebサイトづくりにお役立てください。

キャッチコピーは誰にでも書ける！CV3.5倍を実現する「売れるコピー」を書くための5ステップ

コピーライティングにはセンスが必要と思っている方もいるかもしれませんが、実はそうではありません。この記事では、ちょっとした工夫で誰でも売れるコピーを作れるようになるため5ステップを公開しますので、ぜひ参考にしてください。