レスポンシブ対応の高品質なHTMLのテンプレートのまとめ、商用利用無料で最近のUIデザインが分かる

今時のかっこいいデザイン、素敵なエフェクトを備えたレスポンシブ対応の縦長ページ、ランディングページ、プロダクトページ、ポートフォリオ、ブログなど、HTML5+CSS3の無料のテンプレートを紹介します。

単に使うだけでなく、レスポンシブ時のレイアウトのバリエーション、使い勝手のよいコンポーネント、気持ちいい繊細なアニメーションなど勉強にもなります。

デモのキャプチャ

Editorial
デモページ

文字を見せることに拘ったシンプルなデザインのテンプレート。読むことが邪魔にならない繊細なアニメーションも素敵です。
各UIエレメントのデザインは、ハンバーガーメニューのElementsから。

デモのキャプチャ

Forty
デモページ

Material Designを採用したテンプレートで、落ち着いたパステルカラーは人気が高いです。ランディングページ用のデザインも用意されています。

デモのキャプチャ

Stellar
デモページ

背景の美しいグラデーションに、縦長のパネルを使ってレイアウトされたテンプレート。パネルのナビゲーションはスクロールすると、上部に固定配置されます。

デモのキャプチャ

Megakit
デモページ

Bootstrap v3ベースの多目的用テンプレート。デスクトップでもスマホでもフル表示対応のスライダー、気持ちいいパララックスエフェクト、快適なアニメーションなど、最近トレンドのエフェクトが備わっています。

デモのキャプチャ

AitOnepage
デモページ

写真画像を背景にフル表示する縦長ページ用のテンプレート。フィーチャートピックスのカラムはMasonryレイアウトに対応しています。

デモのキャプチャ

AceCV
デモページ

スクロールに合わせて、数字がカウントされるグラフや拡大表示されるコンテンツなど、さまざまなエフェクトが楽しめる縦長ページ用のテンプレート。

デモのキャプチャ

Asentus
デモページ

コーポレートサイト用に落ち着いたデザインのテンプレート。コンテンツスライダー・カード・プライステーブルなど、使い勝手のよいコンポーネントが用意されています。

デモのキャプチャ

Acidus
デモページ

余白をたっぷり使ったコーポレートサイト用のテンプレート。デザインにぴったりな繊細なアニメーションが随所に使われています。

デモのキャプチャ

Metronic eCommerce
デモページ

Bootstrap v3ベースのEコマース用テンプレート。プロダクトを見せるスライダー、ズーム機能が備わっており、詳細情報はパネルで表示され、さらにズーム機能を備えています。

デモのキャプチャ

Learn
デモページ

スクールや学校などの教育関係コンテンツ用のテンプレート。生徒数やコース数、各コースの説明、スケジュール、動画コンテンツなど、アニメーションをうまく使い表示します。

デモのキャプチャ

Module
デモページ

Bootstrap v3ベースの多目的用テンプレートで、最近のサイトでよく利用されるさまざまなコンポーネントがモジュール形式で配置されており、必要に応じて自由に利用できます。

デモのキャプチャ

Orange
デモページ

スモールビジネス、フリーランスのためのテンプレート。実績やクライアントなどの主要コンテンツを今時のデザインで見せます。

デモのキャプチャ

Minimal
デモページ

ミニマルにデザインされたポートフォリオ用のテンプレート。余白をたっぷり使い、エレメントのデザインも非常にシンプルで、作品やテキストを魅力的に見せることができます。

デモのキャプチャ

Photo
デモページ

フォトグラファーのギャラリー用のテンプレート。写真をレンガ状に配置し、それぞれを拡大表示すると、スライダー表示にも対応しています。

デモのキャプチャ

Story
デモページ

個人ブログ用のテンプレート。記事一覧と記事ページが用意されており、記事ページはゆったりしたレイアウトで、読むことに集中できます。

デモのキャプチャ

Landing
デモページ

スマホアプリのランディングページ用のテンプレート。アプリの特徴や使い方を見せるコンテンツをはじめ、メールマガジン登録なども用意されています。

デモのキャプチャ

Launch
デモページ

サイトやサービスを開始する前のカミングスーン用のテンプレート。カウントダウン、メールマガジン登録と非常にシンプルなつくりになっています。

top of page

©2017 coliss