フラットデザイン・ワンページのお洒落な無料HTML5テンプレート8選 0

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

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

Screenshot of www.templatemo.com

 

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

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

デモ

ダウンロード

 

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

Screenshot of www.templatemo.com

 

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

デモ

ダウンロード

 

 

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

Screenshot of templates.websitetemplatesonline.com

 

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

デモ

ダウンロード

 

 

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

Screenshot of pixelhint.com

 

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

デモ

ダウンロード

 

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

Screenshot of www.gt3themes.com

 

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

デモ

ダウンロード

 

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

Screenshot of templates.websitetemplatesonline.com

 

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

デモ

ダウンロード

 

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

Screenshot of webthemez.com

 

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

デモ・ダウンロード

 

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

Screenshot of webthemez.com

 

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

デモ・ダウンロード

 

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

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

Templatemo

WebThemez

WebsiteTemplateOnline

ThemeWagon

 

Thanks for sharing!
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Previous ArticleNext Article

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください