無料でしかも高品質!レスポンシブ対応の美しいWebページを作るためのHTML5/CSS3のテンプレートのまとめ

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

単に使うだけでなく、デザインやHTML5/CSS3の勉強としてスキルアップにもいいですね。

デモのキャプチャ

Photon
デモページ

背景画像が固定の美しいスクロールエフェクトを採用した縦長ページで、ランディングページやポートフォリオなどに適しています。

デモのキャプチャ

Spectral
デモページ

Photonと同シリーズで、こちらも背景固定のスクロールエフェクトですが、背景をどこで見せるかで印象ががらっと変わります。ロードに合わせたSVGのアニメーションが美しいです。

デモのキャプチャ

Forkio
デモページ

固定ヘッダ、オフキャンバス、スクロールと連動したちょっとしたアニメーション、コンテンツスライダーなど、最近よく見かけるトレンドを巧みに取り入れたレスポンシブ対応の縦長ページ。

デモのキャプチャ

Boxify
デモページ

コンポーネントの随所にanimate.cssを使ったアニメーションを採用した縦長ページ用のテンプレート。

デモのキャプチャ

Grid Item Animation Layout
デモページ

カード状に配置したコンテンツのグリッドをアニメーションで変化させるテンプレート。デモは2種類あり、demo 2の方が好みです。

デモのキャプチャ

Beetle
デモページ

大きい背景画像をつかったヘッダ、カード型のレイアウト、サークルを使ったエレメント、パララックススクロール、スクロールをトリガーにしたエフェクトなど、最近人気のあるさまざまなコンポーネント・エフェクトが用意されています。

デモのキャプチャ

Volcano
デモページ

Foundationをベースにしたミニマルデザインのテンプレートで、各エレメントは遊び心に溢れたかわいいデザインです。

デモのキャプチャ

La Casa
デモページ

不動産関係のランディングページ用のテンプレートで、ゆったりとした上質なデザインです。

デモのキャプチャ

Creativs
デモページ

6ページで構成された中小企業のコーポレートサイトやデザイナーのポートフォリオとしても利用できるテンプレート。ネガティブスペースを使ったグリッドは新鮮です。

デモのキャプチャ

Uno
デモページ

エレガントでモダンなデザインの縦長ページのテンプレート。ポートフォリオや代理店のページによさそうです。

デモのキャプチャ

Resto
デモページ

その名の通り、飲食店・レストラン向けのテンプレートで、メニューやお勧め料理などを備えています。

デモのキャプチャ

White
デモページ

白を基調にした美しいデザインで、画像スライダーと動画スライダーの2つのバージョンが用意されています。使用されているエフェクトも白にあっててとても繊細です。

デモのキャプチャ

3D Curtain Template
デモページ

中央2分割でレイアウトされたコンテンツを3Dのカーテンを開くように次々に表示するテンプレート。

デモのキャプチャ

Icons Filling Effect
デモページ

スクロールすると、表示されているアイコンにカラーがみたされていくエフェクト備えたテンプレート。

デモのキャプチャ

Mobile App Introduction Template
デモページ

スマホアプリの紹介ページ用のテンプレート。アニメーションを使って、アプリの使い方や見所を紹介します。

top of page

©2017 coliss