こんにちは!最近のWebデザインの主流になっている「フラットデザイン」、そして一ページで完結する縦長(LP、ランディングページ)のHTMLテンプレート。お洒落なデザインはたくさんあるのですが、何十個も何百個も見ていると、特に無料のものはどれも似たような感じだな~と飽きてくることがあります。今回は色々見ていくなかで、「お!?」と興味をひかれたものを一覧にしてみました。記事の最後で無料のHTML5テンプレートがダウンロードできるサイトもご紹介しているのでよかったらそちらからも探してみてくださいね。

sponsored link

一画面に収まったアプリっぽい使い勝手のテンプレート

 

一ページの縦長サイトが結構流行っていますが、こちらは左サイドが固定されていて右側がメニューに合わせてスライドしていく感じです。なので、一画面で完結しているようなアプリっぽい感じの印象になります。縦長のサイトに飽きたらこういうのもいいかもしれませんね。

HTML5 + CSS3 + Bootstrapフレームワークで作成されたレスポンシブ対応のテンプレートです。

デモ

ダウンロード

 

ファーストビューの色使いとレイアウトが大胆なテンプレート

 

なかなか無いカッティングのレイアウトで、ファーストビューのインパクトがすごい一枚モノのテンプレートです。ポートフォリオ向け。色を自分でカスタマイズすれば印象がガラッと変わりそうですね。HTML5 で作られ、レスポンシブ対応。

デモ

ダウンロード

 

 

シンプルだけど色使いがお洒落なテンプレート

 

かなりシンプルなフラットデザインですが、色使いがお洒落だったので載せてみました。

デモ

ダウンロード

 

 

ふわふわっと表示されるのが今風のテンプレート

 

スクロールに合わせて表示されるコンテンツがふわふわっと浮かび上がる感じになっているのが今風のテンプレート。HTML5 + CSS3。

デモ

ダウンロード

 

斜めのカッティングがアクセントになったテンプレート

 

斜めになっていなかったら、何でもないよくある一枚モノのテンプレートですが、斜めにカッティングされているのがアクセントになってお洒落感が増していると思いました。木の質感とフラットデザインの組み合わせもいいですね。

デモ

ダウンロード

 

スクロールとホバー時のエフェクトがいい感じのシンプルなテンプレート

 

テンプレートに含まれるのはトップページだけであとは作りこみが必要になりますが、ホバー時のエフェクトがよかったので載せてみました。ホバー時やスクロール時のアニメーションを取り入れるのも最近流行っているので参考になりそうです。

デモ

ダウンロード

 

スクロールとホバー時のエフェクトがお洒落なテンプレート

 

こちらもスクロールとホバー時のエフェクト(アニメーション)がとてもお洒落だったので載せてみました。

デモ・ダウンロード

 

ナビゲーションメニューの位置が一工夫あるテンプレート

 

ナビゲーションメニューは普通ページの上のほうにありますが、このテンプレートの場合、ファーストビューでは画面下に表示されるようになっています。その後スクロールすると上に固定されるので使い勝手も悪くありませんし、第一印象をパシッと決めたいときに使えそうなレイアウトだなと思いました。

デモ・ダウンロード

 

無料でレスポンシブ対応のHTML5テンプレートがダウンロードできるサイト

この記事に載せたのはほんの一部で、以下のサイトではHTML5の無料テンプレートが多数そろっているので、お気に入りのテンプレートを見つけてみてください。

Templatemo

WebThemez

WebsiteTemplateOnline

ThemeWagon