【永久保存版】デザイン初心者でも美しいサイトが作れる!無料で使えるHTML&CSSテンプレート20選

読了まで約 6

Webサイトをどんなデザインにするかということは、Webデザイナーにとって最も頭を悩ませる問題ではないでしょうか。特に駆け出しのデザイナーや、デザイナーではないけどサイトデザインをする必要に迫られている人にとってはなおさらです。

そんなときはHTML5CSS3がセットになった、既製のテンプレートを使ってみるのがおすすめです。これを使うだけでWebサイトを、最新のトレンドを押さえた美しいUIにすることができますよ。もちろんカスタマイズして使うもよしです。それでは、今すぐ使えるHTML&CSSのテンプレート20セットをご紹介します。

今すぐ最新トレンドのデザインが使える、HTML&CSSテンプレート20選

1:Cardio

CardioCardio

1カラムシングルページ完結型、さらにパララックスと呼ばれるスクロールと連動して展開されるアニメーション効果が魅力的。2015年のUIトレンド「Big UI(大型UI) / Low Density(低密度) / Long Page(長いページ)」の代表例のようなテンプレートです。これだけのエフェクトがありながらも動作が軽いので、とても使いやすいはずです。

2:White

WhiteWhite

1カラムにシングルページ、イメージスライダーやビデオをヘッダーにフルスクリーンサイズで表示でき、さらにゴーストボタンも備えた今年らしいデザインです。デフォルトがモノトーンカラーなので、そのまま使ってもシックで洗練された印象を与えることができます。

3:Halcyon

HalcyonHalcyon

1カラムでシングルページ、スクロール連動型の滑らかで美しいアニメーションが洗練された印象を与えるテンプレートです。シンプルで画像が大きく使えるオーソドックスなデザインなので、ポートフォリオやランディングページにぜひ。

4:Be Material

Be MaterialBe Material

Googleが提唱するマテリアルデザインを取り入れたテンプレート。フラットデザインから立体的なデザインへの回帰は、今後のトレンドになると注目されています。一足早く新鮮なUIを取り入れてみるのもいいですね。

5:Flusk

FluskFlusk

1カラムレイアウトに、フルスクリーン背景やパララックスエフェクト、アニメーションなどの機能が実装されています。シンプルでスタイリッシュなデザインのテンプレートです。

6:Snow

Snow

※2020年8月現在、提供終了
ヘッダーの画像がフルスクリーンサイズで、インパクトのあるデザインのテンプレート。スクロールと連動したアニメーションもあり、美麗なデザインが魅力です。

7:Kasper

KasperKasper

スクロールに合わせて動くアニメーションのパララックスが使われていますが、動作は非常にスムーズ。コンテンツをカード型に並べることができるスペースもあるので、作品のポートフォリオサイトにも使えます。

8:Amaranto

AmarantoAmaranto

固定のサイドバーに、カード状レイアウトが特徴的なテンプレート。トレンドのゴーストボタンも使用されています。コンテンツを大きく、並べて見せることができるので、ECサイトなどの用途にいいですね。

9:Solid State

Solid State2Solid State

コンテンツの切り替えに斜めのスリットライン使用している、デザイン性の高いテンプレート。アートな雰囲気を出したいときにぜひ。

10:Spirit8

SPIRIT8Spirit8

コンテンツごとに背景画像を埋め込むことができ、シンプルながらもデザインに優れたテンプレート。ミニマルデザインで動作が軽いので使いやすいです。

11:Highlights

HighlightsHighlights

背景にフルスクリーン写真を配置し、半透明レイヤーのカラムを用いることで、1枚の写真を印象的に使うことができるテンプレート。そのため、サイトのイメージを作りやすいデザインとなっています。

12:MyPlay

MyPlayMyPlay

動画サイトのようなカード状のレイアウトで、コンテンツを並べることができるテンプレート。このレイアウトは、コンテンツの一覧性に優れているため、動画サイトやWebメディアにぴったりです。

13:Paper UI

Paper UIPaper UI

レトロな雰囲気のあるデザインパーツで構成されたテンプレート。ボタンやバーなどのパーツが温かみのあるデザインなので、ユーザー参加型のレシピサイトやハンドメイドマーケットといったサービスにはうってつけです。

14:Maxima

Maxima2Maxima

ヘッダーの画像がフルスクリーンで配置され、フォントやカラーなども美しく、ラグジュアリーな雰囲気を作ることができるテンプレートです。

15:Page Scroll Effect

Page Scroll EffectPage Scroll Effect

スクロールすることでコンテンツが切り替わるエフェクトが印象的なテンプレート。切り替わりのアニメーションは7種類用意されています。

16:2 Blocks Template

2 Blocks Template2 Blocks Template

コンテンツが画面中央で2つに分けられているユニークなレイアウトのテンプレート。デモでは右にテキスト、左にタイトルとイメージ画像を配置しています。このレイアウトは、論文やWebマガジンなどに合いそうです。

17:The Passion Email Template

The Passion Email TemplateThe Passion Email Template

Eメール用のテンプレート素材。レスポンシブデザインなのでどんなメールソフトにも対応できます。メルマガを始めたい方にぴったりです。

18:Lens

LensLens

写真の表示がメインのギャラリー型テンプレート。右サイドバーのサムネイルをクリックして、メインのギャラリーに表示する写真を選ぶことができます。クリエイターのポートフォリオに最適です。

19:Eventually

EventuallyEventually

サービス開始前などのカミングスーンページ用テンプレート。背景には画像がゆっくりと移り変わるアニメーションの仕掛けが備わっていて、何か新しいことが起こりそうな雰囲気を出すことができます。

20:Draco

DracoDraco

オンライン履歴書のような使い方を想定したテンプレート。変わり種ですが、フリーランスの方のプロフィールページなどにいかがでしょうか。

まずはテンプレートからはじめてみよう!

「Big UI(大型UI) / Low Density(低密度) / Long Page(長いページ)」、そして1カラム・シングルページ、スクロール重視のレイアウトというのが、最新のUIデザインのトレンド。今回は、そんなトレンドを踏まえたテンプレートを中心に紹介してきました。

Webデザイン初心者の方は、いきなりゼロからサイトを構築するよりも、まずはテンプレートを使い、アレンジしていくという方法からはじめてみるのはいかがでしょうか?

※掲載している情報は記事更新時点のものです。

テレワークに便利なツールをお得に揃えるなら

マネーフォワード クラウドStoreではクラウドストレージやオンライン会議ツール、グループウェアなどテレワークを始めるのに必要なビジネスツールを取り扱っています。

Bizpedia編集部

「Money Forward Bizpedia」は株式会社マネーフォワードが運営している公式メディアです。 マネーフォワード クラウドに関係する会計や経理などのバックオフィス業務をはじめとしたビジネスに役立つ情報を更新しています。

「マネーフォワード クラウド」のサービス資料