商用無料でしかも高品質!レスポンシブ対応の美しくデザインされたHTML5/CSS3のテンプレートのまとめ
Post on:2015年9月11日
今時の繊細でかっこいいエフェクトを備え、美しくデザインされたレスポンシブ対応のランディングページ、プロダクトページ、縦長ページ、ポートフォリオ、ブログなど、HTML5/CSS3で作成された商用利用無料のテンプレートを紹介します。
最近のデザインやインタラクションの勉強にもいいですね。
![レスポンシブ対応の美しくデザインされたHTML5/CSS3のテンプレートのまとめ](http://coliss.com/wp-content/uploads-201502/2015091106.png)
画像: 写真 AC
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090701-02.png)
デスクトップ・タブレット・スマホのそれぞれに適した見せ方をするギャラリー用のテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090701-03.png)
フラットなカラーとソリッドなラインでデザインされた縦長ページ用のテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090701-04.png)
動画を背景に使ったカミングスーン用のテンプレート。フォームがぶるっと震える細かいインタラクションもいいですね。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090701-01.png)
フルスクリーン表示1ページ、アニメーションが繊細で美しいテンプレートです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090701-05.png)
アニメーションをたっぷり使った縦長ページ用のテンプレート。
HTML, CSSファイルの他に、デザイン用のSketchファイルもダウンロードできます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090701-06.png)
コンポーネントの随所にanimate.cssを使ったアニメーションを採用した縦長ページ用のテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090701-07.png)
コンテンツの合間に異なる背景を固定表示させるのいいですね。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090701-08.png)
大胆なレイアウトと繊細なアニメーションが気持ちいい縦長ページのテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090701-09.png)
縦長ページに水平スライダーを組み合わせたテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090701-10.png)
マルチカラム対応の縦長ページのテンプレート。
ナビゲーションの「Pages」から各ページが表示されます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090701-11.png)
大胆なトップページとそれにあったコンポーネントの展開が勉強になるテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090701-12.png)
半透明とソリッドなカラーとシャドウを巧みに使い、各エレメントに奥行きをつけたデザインが面白いですね。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090701-13.png)
写真を背景に、さまざまな矩形パネルを使ったデザインのバリエーションが豊富です。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090701-14.png)
写真と空白スペースを使い、情報をうまく整理しています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090701-16.png)
各コンテンツごとにいっぱいの背景写真とマルチカラムを組み合わせたテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090701-17.png)
画像を大胆に配置し、カード型レイアウトを取り入れたテンプレート。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090701-21.png)
矩形パネルを隙間無くグリッドに配置したテンプレート。背景はソリッドなカラーや写真などいろいろ使えます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090701-24.png)
エレメントやアクセント、写真などに使用している落ち着いたパステルブルーが印象的です。
sponsors