2014年のWebデザインのトレンドがたくさん詰まったHTML5+CSS3の無料のテンプレート -Beetle

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

そのまま使うもよし、スキルアップ用に勉強してもよし、です！

Beetle - Responsive HTML5 Template

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

テンプレートの一部

右端の縦長ページは、オンラインデモが公開されています。

デモページ

例えば、ヘッダ部分のスライダーも一味違ったアニメーションが採用されています。

デモページのスライダー

スライドやフェードなどはよく見かけますが、ここで使用されているのはズームインとクロスフェードを組み合わせたもの。上のアニメーションgifで見るだけでなく実際に体感して楽しんでみてください。

ダウンロードできるテンプレートでは、使いやすいよう画像などはダミーのものになっています。

ダウンロードできるテンプレート

テンプレートには縦長ページ、ランディングページ、ポートフォリオ、ギャラリー、ブログ、コンタクト、検索、Not Foundページなど、さまざまなものが含まれています。

テンプレートの一覧

「Documentation」には、実装方法についての詳しい解説があります。
右サイドは、コンポーネントの一覧。

ヘッダのバリエーションと実装方法

デザイン用のPSD素材も用意されており、ダウンロードファイルにはモックアップ用の各デバイスのPSDが含まれています。またポートフォリオでよく使うレジュームのさまざまなコンポーネントのPSDも別途ダウンロードできます。

PSD素材

スキル一覧、履歴一覧など、そのままでもカスタマイズしてもOK！