レスポンシブなHTML5/CSS3/Bootstrapの無料テンプレート20選

html5-template-1

Web開発の黎明期には、優秀な無料テンプレートを見つけるのはとても困難でした。しかし現在では、世界中のWebデザイナーがさまざまなテンプレートを無料で共有してくれています。

今回は、

  • レスポンシブなHTML5テンプレート
  • Bootstrapテンプレート8選
  • CSSテンプレート4選

をご紹介します。すべて無料なので、ぜひ活用してみてください。

それぞれのテンプレートの魅力

HTML5

優秀なWebサイトを構築するのに最適な、最新のマークアップ言語。HTML5の人気と比例して、そのテンプレートの人気も高まっています。

CSS3

スタイリッシュなWebサイトの制作には欠かせない、最新のスタイルシート言語。色の組み合わせやフォントの種類など、さまざまな魅力があります。

Bootstrap

UI開発者に人気のフロントエンドフレームワーク。扱いやすく、開発効率も良いため多くのデベロッパーが使用しています。モバイルへの対応、クリーンで軽量なコード、ブラウザ感の互換性などの機能も革新的です。

レスポンシブなHTML5 無料テンプレート

1. Boxus

html5-template-2

開発技術

HTML5、CSS3、JavaScript、jQuery

特徴

  • クリエイティブエージェンシーテンプレート
  • スティッキーナビゲーションバー
  • Googleマップ
  • ソーシャルメディアアイコン
  • 明るいカラースキーム

ソフトウェア会社やWebデザイン会社のための、クリエイティブでレスポンシブなテンプレート。レイアウトがとくに優秀で、最新のJavaScriptプラグインを提供しているところも大きなポイントです。作業時間を削減し、生産性を大幅に向上させてくれるでしょう。

Boxus

2. AweSplash

html5-template-3

開発技術

HTML5、CSS3、JavaScript、jQuery

特徴

  • スライダー
  • Retinaディスプレイ対応のレスポンシブなメニュー
  • ゴーストボタン
  • SEOフレンドリー
  • レスポンスデバイス
  • jQueryとJavascriptプラグイン
  • YouTubeとVimeo Playerプラグイン

新製品やイベントを発表するための、ウェルカムページやランディングページにおすすめのテンプレート。プレゼンテーションページは4種類あり、ゴーストボタンを新製品へのリンクなどに利用できます。Animate HeadlineというJavaScriptプラグインがこのテンプレートの美しさの秘密。背景には動画や画像スライダーが使用できます。

AweSplash

3. Beverages

html5-template-4

開発技術

HTML5、CSS3、JavaScript、Bootstrap

特徴

  • レスポンシブ
  • カスタマイズのサポート
  • HTML5/CSS3
  • Google Fonts
  • Bootstrap

飲食関係のWebサイトにおすすめの、100%レスポンシブなテンプレート。すべてのデバイスと互換性があり、あらゆる画面サイズに対応しています。Bootstrap、HTML5、CSS3、そしてjQueryで構築されているため、簡単に他業種向きのデザインに変更も可能。

Beverages

4. TravelAir

html5-template-5

開発技術

HTML5、CSS3、JavaScript、jQuery

特徴

  • Bootstrap 4
  • HTML5/CSS3
  • スティッキーヘッダー
  • ブラウザ間の互換性
  • Google Fonts

現代的なレイアウトデザインを採用した、ユニークでクリエイティブなテンプレート。ホームページに配置されているのは、レスポンシブ対応のカルーセルスライダー、OWL Carouselです。jQuery UIのカレンダー型予約フォームも提供しています。ツアーパッケージ、目的地、会社に関するセクションなどがあり、プロフェッショナルらしい洗練された雰囲気です。

TravelAir

5. Jessica

html5-template-6

開発技術

HTML5、CSS3、JavaScript、jQuery

特徴

  • Bootstrap V3+
  • ミニマルデザイン
  • TEML5とCSS3
  • Google Fonts(Montserrat)
  • スタイルガイド(開発者向けの使用法とテンプレートデザインガイド)

美しい配色と食欲をそそる食べ物の画像が印象的な、シンプルなテンプレート。栄養士のWebサイトにぴったりのデザインです。健康、フィットネス、体、食べもの、美容などのトピックが用意されています。

Jessica

6. Wonder Coming Soon

html5-template-7

開発技術

HTML5、CSS3、jQuery

特徴

  • レスポンシブ
  • 現代的でエレガントなデザイン
  • HTML5/CSS3
  • Google Fonts

ローンチ用のWebサイトやスタートアップなどにおすすめのテンプレート。100%レスポンシブかつクロスブラウザで、あらゆるデバイスとスクリーンサイズに対応しています。

Wonder Coming Soon

7. Mariela

html5-template-8

開発技術

HTML5、CSS3

特徴

  • レスポンシブ
  • Retinaディスプレイに対応
  • インタラクション
  • ユーティリティページ(404、パスワードページ)
  • Google Fonts

家具や家庭用品のWebサイトに最適のテンプレート。コーディングなしでスピーディーにWebサイトを構築できます。

Mariela

8. Industrious

html5-template-9

開発技術

HTML5、CSS3

特徴

  • レスポンシブ
  • 動画背景

学校、工場、会社など、さまざまなWebサイトにおすすめのテンプレート。背景に動画を使用できるのも魅力。

Industrious

CSS3 無料テンプレート

9. Garage

html5-template-17

開発技術

HTML5、CSS3、Bootstrap 3、JavaScript、jQuery

特徴

  • パララックス
  • W3Cで検証されたタグ
  • スムーズなトランジションエフェクト
  • クロスブラウザ
  • レスポンシブ
  • 検索エンジンフレンドリー

Webdomusによって開発されたクリエイティブテンプレート。アンティークやクラシックカーを載せるのに最適な雰囲気。マルチページに対応しており、顧客のニーズに対応したさまざまなセクションが用意されています。

Garage

10. Graffiti Artist

html5-template-18

開発技術

HTML5、CSS3

特徴

  • 扱いやすい編集システム
  • 豊富なチュートリアル
  • デザインツール

グラフィティアーティストやストリートカメラマンなど、プロフェッショナルなクリエイターのためのテンプレート。テンプレートの中央に作品を表示するデザインです。モノクロの背景とパララックスが、ユニークなスタイルを引き立てます。

Graffiti Artist

11. Treviso

html5-template-19

開発技術

HTML5、CSS、jQuery

特徴

  • レスポンシブ
  • 現代的でエレガント
  • ホバーエフェクト
  • アニメーション

ポートフォリオやインテリアのためのシングルページテンプレート。4つのセクションに分かれています。モノクロの配色は、シンプルで読みやすくクリーンなデザインです。

Treviso

12. Agency

html5-template-20

開発技術

HTML5、CSS、Bootstrap、jQuery

特徴

  • レスポンシブ
  • 複数の開発言語
  • 固定ナビゲーション
  • 大きい背景画像

名前のとおり、エージェンシーやスタジオなどに適したテンプレート。大きな背景画像はテーマを強調し、可読性を高めます。

Agency

Bootstrap 無料テンプレート

13. Vex

html5-template-10

開発技術

HTML5、CSS3、Bootstrap 4 alpha.5、JavaScript、jQuery

特徴

  • パララックス効果を使った背景
  • メール配信オプション
  • フッターメニュー
  • Bootstrap 4
  • 優れたUI

最近リリースされたBootstrap 4で構築された、レスポンシブなテンプレート。開発者とユーザーの双方に柔軟なインターフェースを提供しています。モバイル用に最適化されており、小さな画面での表示も可能です。

Vex

14. Conceit

html5-template-11

開発技術

HTML5、CSS3、Bootstrap、jQuery

特徴

  • レスポンシブなBootstrapのスライダー
  • Font Awesomeのアイコン
  • HTML5/CSS3
  • Google Fonts
  • Bootstrap
  • トランジションエフェクト

多目的に使える、クロスブラウザのレスポンシブなテンプレート。Bootstrap、HTML5、CSS3、jQueryで構築されています。Aboutページ、問い合わせページ、404ページ、最新のブログなどが含まれており、クリエイティブでユニークなWebサイトの構築が可能です。

Conceit

15. Asentus

html5-template-12

開発技術

HTML5、CSS3、Bootstrap 3、JavaScript、jQuery

特徴

  • スティッキーヘッダー
  • タイトルの画像スライダー
  • ゴーストボタン
  • HTML5/CSS3

軽量で柔軟性があり、簡単にカスタマイズできるテンプレート。個人利用も商用利用も無料で、クリーンかつエレガントなデザインが特徴です。

Asentus

16. Landing

html5-template-13

開発技術

HTML5、CSS3、jQuery

特徴

  • レスポンシブ
  • 魅力的なフォントとアイコン
  • ホバーエフェクト
  • HTML5/CSS3
  • アニメーション

ランディングページデザインに焦点をあてたテンプレート。優れたUIデザインがユーザーガイドに役立ち、UXを向上させます。

Landing

17. Cafe

Cafe

開発技術

HTML5、CSS3、Bootstrap

特徴

  • レスポンシブ
  • 使いやすい
  • 魅力的なフォントとアイコン
  • HTML5/CSS3
  • エレガントでクリーン
  • Bootstrap

レストランにおすすめの、フラットなBootstrapテンプレート。カスタマイズ次第で、ホテルや飲食業のWebサイトにも使用できます。

Cafe

18. New Age

html5-template-14

開発技術

HTML5、CSS3、Bootstrap 4

特徴

  • レスポンシブ
  • HTMLテンプレート
  • CSSのグラデーション
  • 固定ナビゲーション

魅力的なWebサイトやWebサービスが構築できるテンプレート。多様なビジネスにあわせて、レスポンシブなデザインをカスタマイズできます。

New Age

19. Stylish Portfolio

html5-template-15

開発技術

HTML5、Bootstrap 4、jQuery

特徴

  • レスポンシブ
  • HTML
  • 全画面背景画像
  • スムーズなスクロール
  • マテリアルデザインカラー

シングルページのBootstrapポートフォリオテンプレート。オフキャンバスナビゲーションと、コンテンツセクション間のスムーズなスクロールが特徴です。Webサイト全体に、明るく大胆なマテリアルデザインカラーが用いられています。

Stylish Portfolio

20. Creative

html5-template-16

特徴

  • レスポンシブ
  • HTML
  • 固定ナビゲーション
  • ユニークで現代的なデザイン
  • ホバーエフェクト付きのグリッド画像
  • アニメーション

Bootstrap 4で制作されたテンプレート。クリエイティブ系のWebサイトや、中小企業などに最適です。スクロールアニメーションを使用した固定ナビゲーションメニューが、ユーザーに分かりやすいガイドを提供します。

Creative

おわりに

「Webサイトを作りたいけど、開発言語がわからない!」そんな時はMockplusなどのプロトタイピングツールを使用して、Webサイトのテンプレートデザインを作ってみましょう。

MockplusのWebサイトからは、無料のテンプレートをダウンロードすることも可能です。Mockplusソフトウェアでテンプレートを開き、写真やコンポーネントをインポートしてデザインしてみてください。Webサイトのプロトタイプを簡単に作れるはずです。

(原文:Mockplus 翻訳:Asuka Nakajima)

 

合わせて読みたい!▼

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
デザイナー副業案件
Workship