Webサイトをどんなデザインにするかということは、Webデザイナーにとって最も頭を悩ませる問題ではないでしょうか。特に駆け出しのデザイナーや、デザイナーではないけどサイトデザインをする必要に迫られている人にとってはなおさらです。
そんなときはHTML5とCSS3がセットになった、既製のテンプレートを使ってみるのがおすすめです。これを使うだけでWebサイトを、最新のトレンドを押さえた美しいUIにすることができますよ。もちろんカスタマイズして使うもよしです。それでは、今すぐ使えるHTML＆CSSのテンプレート20セットをご紹介します。
目次
今すぐ最新トレンドのデザインが使える、HTML＆CSSテンプレート20選
1：Cardio
1カラムでシングルページ完結型、さらにパララックスと呼ばれるスクロールと連動して展開されるアニメーション効果が魅力的。2015年のUIトレンド「Big UI（大型UI） / Low Density（低密度） / Long Page（長いページ）」の代表例のようなテンプレートです。これだけのエフェクトがありながらも動作が軽いので、とても使いやすいはずです。
2：White
1カラムにシングルページ、イメージスライダーやビデオをヘッダーにフルスクリーンサイズで表示でき、さらにゴーストボタンも備えた今年らしいデザインです。デフォルトがモノトーンカラーなので、そのまま使ってもシックで洗練された印象を与えることができます。
3：Halcyon
1カラムでシングルページ、スクロール連動型の滑らかで美しいアニメーションが洗練された印象を与えるテンプレートです。シンプルで画像が大きく使えるオーソドックスなデザインなので、ポートフォリオやランディングページにぜひ。
4：Be Material
Googleが提唱するマテリアルデザインを取り入れたテンプレート。フラットデザインから立体的なデザインへの回帰は、今後のトレンドになると注目されています。一足早く新鮮なUIを取り入れてみるのもいいですね。
5：Flusk
1カラムレイアウトに、フルスクリーン背景やパララックスエフェクト、アニメーションなどの機能が実装されています。シンプルでスタイリッシュなデザインのテンプレートです。
6：Snow
※2020年8月現在、提供終了
ヘッダーの画像がフルスクリーンサイズで、インパクトのあるデザインのテンプレート。スクロールと連動したアニメーションもあり、美麗なデザインが魅力です。
7：Kasper
スクロールに合わせて動くアニメーションのパララックスが使われていますが、動作は非常にスムーズ。コンテンツをカード型に並べることができるスペースもあるので、作品のポートフォリオサイトにも使えます。
8：Amaranto
固定のサイドバーに、カード状レイアウトが特徴的なテンプレート。トレンドのゴーストボタンも使用されています。コンテンツを大きく、並べて見せることができるので、ECサイトなどの用途にいいですね。
9：Solid State
コンテンツの切り替えに斜めのスリットライン使用している、デザイン性の高いテンプレート。アートな雰囲気を出したいときにぜひ。
10：Spirit8
コンテンツごとに背景画像を埋め込むことができ、シンプルながらもデザインに優れたテンプレート。ミニマルデザインで動作が軽いので使いやすいです。
11：Highlights
背景にフルスクリーン写真を配置し、半透明レイヤーのカラムを用いることで、1枚の写真を印象的に使うことができるテンプレート。そのため、サイトのイメージを作りやすいデザインとなっています。
12：MyPlay
動画サイトのようなカード状のレイアウトで、コンテンツを並べることができるテンプレート。このレイアウトは、コンテンツの一覧性に優れているため、動画サイトやWebメディアにぴったりです。
13：Paper UI
レトロな雰囲気のあるデザインパーツで構成されたテンプレート。ボタンやバーなどのパーツが温かみのあるデザインなので、ユーザー参加型のレシピサイトやハンドメイドマーケットといったサービスにはうってつけです。
14：Maxima
ヘッダーの画像がフルスクリーンで配置され、フォントやカラーなども美しく、ラグジュアリーな雰囲気を作ることができるテンプレートです。
15：Page Scroll Effect
スクロールすることでコンテンツが切り替わるエフェクトが印象的なテンプレート。切り替わりのアニメーションは7種類用意されています。
16：2 Blocks Template
コンテンツが画面中央で2つに分けられているユニークなレイアウトのテンプレート。デモでは右にテキスト、左にタイトルとイメージ画像を配置しています。このレイアウトは、論文やWebマガジンなどに合いそうです。
17：The Passion Email Template
Eメール用のテンプレート素材。レスポンシブデザインなのでどんなメールソフトにも対応できます。メルマガを始めたい方にぴったりです。
18：Lens
写真の表示がメインのギャラリー型テンプレート。右サイドバーのサムネイルをクリックして、メインのギャラリーに表示する写真を選ぶことができます。クリエイターのポートフォリオに最適です。
19：Eventually
サービス開始前などのカミングスーンページ用テンプレート。背景には画像がゆっくりと移り変わるアニメーションの仕掛けが備わっていて、何か新しいことが起こりそうな雰囲気を出すことができます。
20：Draco
オンライン履歴書のような使い方を想定したテンプレート。変わり種ですが、フリーランスの方のプロフィールページなどにいかがでしょうか。
まずはテンプレートからはじめてみよう！
「Big UI（大型UI） / Low Density（低密度） / Long Page（長いページ）」、そして1カラム・シングルページ、スクロール重視のレイアウトというのが、最新のUIデザインのトレンド。今回は、そんなトレンドを踏まえたテンプレートを中心に紹介してきました。
Webデザイン初心者の方は、いきなりゼロからサイトを構築するよりも、まずはテンプレートを使い、アレンジしていくという方法からはじめてみるのはいかがでしょうか？
※掲載している情報は記事更新時点のものです。
※本サイトは、法律的またはその他のアドバイスの提供を目的としたものではありません。当社は本サイトの記載内容（テンプレートを含む）の正確性、妥当性の確保に努めておりますが、ご利用にあたっては、個別の事情を適宜専門家にご相談していただくなど、ご自身の判断でご利用ください。