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

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

今回は、

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

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

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

HTML5

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

CSS3

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

Bootstrap

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

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

1. Boxus

開発技術

HTML5、CSS3、JavaScript、jQuery

特徴

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

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

Boxus

2. AweSplash

開発技術

HTML5、CSS3、JavaScript、jQuery

特徴

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

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

AweSplash

3. Beverages

開発技術

HTML5、CSS3、JavaScript、Bootstrap

特徴

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

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

Beverages

4. TravelAir

開発技術

HTML5、CSS3、JavaScript、jQuery

特徴

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

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

TravelAir

5. Jessica

開発技術

HTML5、CSS3、JavaScript、jQuery

特徴

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

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

Jessica

6. Wonder Coming Soon

開発技術

HTML5、CSS3、jQuery

特徴

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

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

Wonder Coming Soon

7. Mariela

開発技術

HTML5、CSS3

特徴

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

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

Mariela

8. Industrious

開発技術

HTML5、CSS3

特徴

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

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

Industrious

CSS3 無料テンプレート

9. Garage

開発技術

HTML5、CSS3、Bootstrap 3、JavaScript、jQuery

特徴

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

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

Garage

10. Graffiti Artist

開発技術

HTML5、CSS3

特徴

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

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

Graffiti Artist

11. Treviso

開発技術

HTML5、CSS、jQuery

特徴

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

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

Treviso

12. Agency

開発技術

HTML5、CSS、Bootstrap、jQuery

特徴

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

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

Agency

Bootstrap 無料テンプレート

13. Vex

開発技術

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

特徴

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

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

Vex

14. Conceit

開発技術

HTML5、CSS3、Bootstrap、jQuery

特徴

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

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

Conceit

15. Asentus

開発技術

HTML5、CSS3、Bootstrap 3、JavaScript、jQuery

特徴

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

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

Asentus

16. Landing

開発技術

HTML5、CSS3、jQuery

特徴

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

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

Landing

17. Cafe

開発技術

HTML5、CSS3、Bootstrap

特徴

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

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

Cafe

18. New Age

開発技術

HTML5、CSS3、Bootstrap 4

特徴

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

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

New Age

19. Stylish Portfolio

開発技術

HTML5、Bootstrap 4、jQuery

特徴

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

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

Stylish Portfolio

20. Creative

特徴

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

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

Creative

おわりに

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

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

（原文：Mockplus　翻訳：Asuka Nakajima）

 

合わせて読みたい！▼

全て無料！今すぐ使えるBootstrapテーマテンプレート78選

Workship MAGAZINE

【無料】レスポンシブ対応のWordPressテーマ60選【目的別】

Workship MAGAZINE