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

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

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

成果の出る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」入門編

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

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

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

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

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

Bootstrap(ブートストラップ)のメリット・デメリット

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

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

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

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

1. Avana

Bootstrap_-_Avana
Avana

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

2. Rooky

Bootstrap_-_2.jpg
Rooky

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

3. POLO

Bootstrap_-_POLO
POLO

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

4. Focus

Bootstrap_-_Focus
Focus

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

5. Pixicon

Bootstrap_-_Pixicon
Pixicon

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

6. creative

Bootstrap_-_creative
creative

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

7. New Age

Bootstrap_-_New Age
New Age

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

8. Paper Kit 2

Bootstrap_-_Paper Kit 2
Paper Kit 2

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

9. Agency

Bootstrap_-_9.jpg
Agency

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

10. Energy

Bootstrap_-_10.jpg
Energy

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

11. Startr

Bootstrap_-_11.jpg
Startr

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

12. Nantes

Bootstrap_-_Nantes
Nantes

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

13. Cache

Bootstrap_-_Cache
Cache

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

14. Mobirise

Bootstrap_-_14.jpg
Mobirise

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

15. Marbble

Bootstrap_-_15.jpg
Marbble

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

16. Molly

Bootstrap_-_16.jpg
Molly

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

17. OAK

Bootstrap_-_OAK
OAK

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

18. Dsign

Bootstrap_-_Dsign
Dsign

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

19. Folio

Bootstrap_-_19.jpg
Folio

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

20. Black Template

Bootstrap_-_Black Template
Black Template

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

21. Auro

Bootstrap_-_Auro
Auro

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

22. Adriya

Bootstrap_-_Adriya
Adriya

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

23. Lesser

Bootstrap_-_Lesser
Lesser

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

24. Cube

Bootstrap_-_Cube
Cube

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

25. Traveler

Bootstrap_-_Traveler
Traveler

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

26. Lonely

Bootstrap_-_Lonely
Lonely

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

27. Launcher

Bootstrap_-_Launcher
Launcher

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

28. Justice

Bootstrap_-_Justice
Justice

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

29. Orly

Bootstrap_-_Orly
Orly

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

30. Mountain King

Bootstrap_-_30.jpg
Mountain King

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

31. Beryllium

Bootstrap_-_31.jpg
Beryllium

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

32. Now UI Kit

Bootstrap_-_32.jpg
Now UI Kit

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

33. Minifolio

Bootstrap_-_Minifolio
Minifolio

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

34. AIR

Bootstrap_-_AIR
AIR

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

35. iLand

Bootstrap_-_iLand
iLand

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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