レスポンシブ対応の縦長ページ、ランディングページ、プロダクトページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えた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

デモページ

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