レイアウトで選ぶWebデザイン・HTMLテンプレート40個総まとめ 2018年版

latesthtml2018october

 

今回は、無料ダウンロードできる高品質HTML5/CSS3テンプレート素材をまとめてご紹介します。どの素材も高品質なだけでなく、テキストエディタで編集しやすい仕様となっており、サイト制作が捗るアイテムが揃っています。

 

ここで紹介するHTMLテンプレートは、どれも無料で、Bootstrap 4フレームワークを中心にした、デザイントレンドもうまく取り込んだ、あらゆるウェブデザイン案件に対応してくれます。2018年のウェブデザイントレンドもうまく取り入れているので、サイト開発のデザインやレイアウトの参考にもいかがでしょう。

 

 

レイアウトで選ぶウェブデザイン・HTMLテンプレート厳選40個総まとめ 2018年版

Argon Design System

Bootstrap 4フレームワークを利用し、100種類を超える独自コンポーネントを揃えたテンプレート。ウェブサイトに必要なパーツはもちろん、サンプルページ4種類も収録しています。

opt_argon_thumbnail-1

 

 

Stream

Bootstrap 4フレームワーク対応のオープンソースUIコンポーネントセットで、カスタマイズ度の高いレイアウトを手軽に実現できます。配色もトレンドカラーを採用し、スッキリと美しい見た目が特長。

stream-ui-kit

 

 

Free Landing Page Template

モダンでスッキリとしたデザインで、編集しやすいコード、あらゆる画面サイズに対応したレスポンシブデザインと、基本アイテムを揃えたランディングページ向けテンプレート。

nils-huber-free-landing-page

 

 

Grace

グリッドレイアウトを無視した、カラフルでポップなイラストをページ全体に利用したテンプレートで、スタートアップ向けのランディングページを想定しています。

grace

 

 

Ava

たっぷりの余白スペースに、SVGをつかったユニークなシェイプを効果的に配置した、トレンドを取り入れたデザインが素敵。

ava

 

 

Rapture

ウェブ制作をよりスムーズに行う、プレミアムフレームワークのデモ用として、2種類のランディングページが用意されています。

BP2016-07-25_165238-1-1

 

 

Paper Kit 2

控えめな配色と美しいタイポグラフィーが特長のBootstrap 4対応で、収録されているコンポーネントはどれもレスポンシブ対応で、あらゆる画面スクリーンサイズでも読みやすいうれしい設定も。

paper-ui-kit

 

 

Now UI Kit

Bootstrap 4のUIコンポーネントに対応したHTMLキットで、ボタンや入力スペース、チェックボックス、ナビメニュー、カルーセルなど基本要素を美しく表現しています。

now-ui-kit-bootstrap

 

 

Froala Design Blocks

170種類を超えるレスポンシブ対応のUIコンポーネントを収録した素材で、ブロックを組み立てる感覚でBootstrapライブラリをベースにしたHTMLテンプレートをお好みで作成できます。

design-blocks-component

 

 

Draco

日本の履歴書とも言える、これまでの経歴やスキルなどをまとめたレジュメ用HTMLテンプレート。セリフ書体が信頼感と高級感を演出できます。

draco

 

 

Shards Dashboard Liteds

Bootstrap 4をベースにした管理画面向けHTMLテンプレートで、大量のカスタムコンポーネントが揃います。SCSSファイルによる収録で、デザイン編集しやすいSketchファイルも一緒にどうぞ。

shards-dashboard-lite-featured

 

 

Holly

立体的な3Dシェイプを配置し、躍動感のあるデザインを実現した、メールアドレスの入力フォームのみが記載されたシンプルデザイン。

holly-html-template

 

 

Ellie

マウスカーソルの動きに合わせて変化する、立体的なシェイプを利用したダーク系のランディングページ向けテンプレート。

ellie

 

 

Florence

ウェブやモバイルアプリ、サービスの紹介に利用でき、超立体的なアニメーション付SVGツールが目を引くHTMLテンプレート。

florence

 

 

Material Kit

新しくアップデートされ、収録コンポーネント素材が大幅に増えた、マテリアル・デザイン&Bootstrap対応の決定版テンプレート。

opt_mk_thumbnail

 

 

Material Design for Bootstrap

Google 公式のデザインガイド「マテリアル・デザイン」をコンセプトに、人気フレームワーク Bootstrap で構築された、レスポンシブ対応のHTMLテンプレート素材。

mdb-jquery-free-1

 

 

Material Dashboard

Bootstrap 4のHTMLフレームワークに、Googleのマテリアルデザインの基本ガイドラインを搭載した、ダッシュボード画面向けテンプレートで、各種コンポーネントがすべて揃います。

material-dashboard

 

 

Wired

Bootstrapをベースに作成された商用可能なHTMLテンプレートで、各種コンポーネントもまとめて収録されているので、カスタマイズしやすい素材。

wired-ui-kit

 

 

Dropcast

ポッドキャストのランディングページやブログなどに最適な、HTML/CSS/Javascriptテンプレートで、一緒にSketchファイルとSCSSファイルが収録されているので、手軽にカスタマイズできます。

dropcast_featured

 

 

Scribber

コーディング向けプロジェクトに利用したい、説明書マニュアルやアップデート情報などをまとめたHTMLテンプレートで、CSS VariableやCSS Gridなど最新テクノロジーを詰め込んだシンプルなデザイン。

scribbler

 

 

Landing

斜めに入った境界線が特長のテンプレート素材で、その他にも画像スライダーや金額表、スムーズなアコーディオンタブなどが揃います。Bootstrap 4フレームワークを利用しています。

landing-free-landing-page-website-template

 

 

Megakit

Bootstrap に対応したHTMLテンプレートで、業種やイベント別に合計7種類のスタイルが用意されています。サクッとウェブサイトを作成したいときに。

megakit_banner

 

 

Ethereal

スクロールすると水平方向にコンテンツが移動するレイアウトで、魅力的なグラデーションカラーや立体感の強いドロップシャドウなど人気トレンドを取り入れ、基本コンポーネントもばっちり揃った太っ腹なテンプレート。

ethereal

 

 

Story

画面を縦半分に分割したヘッダーデザインに、余白スペースをたっぷり利用したミニマルスタイル。モバイル端末表示も問題ないレスポンシブ対応。

story

 

 

Editorial

ナビメニューに工夫を凝らした万能テンプレート。デスクトップでは左に固定、モバイルではスライド式ハンバーガーメニューとして展開します。

editorial

 

 

Snow

スッキリとしたミニマルで洗練された雰囲気のクリエイター向けテンプレート。サンセリフ書体を組み合わせることで、より高級感のあるデザインを演出できます。

snow-free-html-psd-pack

 

 

Apollo

フォトグラファー向けの手軽なウェブサイトを想定したテンプレートで、魅力的で効果的な見せ方にこだわった Sass と Jade で開発されています。

apollo-html-template

 

 

Massively

スムーズで滑らかな動きが心地よいヘッダー用パララックスエフェクトに、ふわりとひょうじされるアニメーションがより高級感を演出するテンプレートで、お問い合わせフォームも実装されています。

massively-featured-image

 

 

Stellar

美しいグラデーションを背景に利用した、シンプルなランディングページ向けテンプレート。固定ナビメニューで各セクションへ移動します。

stellar

 

 

Phantom

カテゴリや項目をまとめて見せたいときに便利な、カード型レイアウトのテンプレートで、滑らかなアニメーションを素敵な要素のひとつ。

phantom

 

 

Forty

複数のコンテンツを色分けし、滑らかなアニメーション付きページ遷移も同時に表現できるマルチページに対応。

forty

 

 

Multiverse

写真イメージをまとめたギャラリー向けテンプレートで、スクリーンサイズに応じてカラム数が変更されるレスポンシブデザイン。

multiverse

 

 

Air.

目を引く鮮やかな配色が特長のテーマで、 きつめのドロップシャドウで立体感を演出するなど、2017年のデザイントレンドをうまく反映しています。

air-html-template

 

 

Homene HTML Template

レスポンシブ完全対応のスッキリとしたシングルページ完結型レイアウトで、スクロールに応じて発動するアニメーションが美しいテンプレート。

homene-html-template

 

 

Gorgo Portfolio

美しいサムネイル画像を前面に打ち出し、ビジュアル面を重視したHTMLテンプレート。今年のトレンドでもある、ミニマルスタイルを見事に表現しています。

gorgo-laptop

 

 

Mountain King

レスポンシブ対応のスッキリとしたレイアウトに、300以上のベクターアイコンやMasonryギャラリー、Off-CanasスライドメニューやCSS3アニメーションなど豊富な機能が充実しています。

mountain-king-bootstrap-free-html-template

 

 

Personal – Free HTML Template

2016年の人気トレンドにもなりつつある、グリッドを意識させないクリエイティブなレイアウトが特長の、ポートフォリオ向けHTMLテンプレート。

personal-600

 

 

Avana

無駄を省いたミニマル系のポートフォリ作成に向いたHTMLテンプレート。

Avana-minimal-portfolio-template

 

 

Floix

こちらもBootstrapフレームをベースに、スクロールに追従するナビメニューなど、よりユーザビリティを考慮したミニマルページ。

Floix-Onepage-Bootstrap-Resume-Template

 

 

Bootstrap 4 Cheat Sheet

ウェブ制作で人気のフレームワーク Bootstrap 4 の各スタイルをまとめたチートシートで、項目をクリックすることでサンプル用スタイリングを手軽に確認することができます。

bootstrap-4-cheat-sheet

 

あまり知られていないBootstrapスタイルテクニック、小技16個まとめ

レベル高っ!商用可能な無料HTMLテンプレート200+種類を配布しているサイト Colorlib

 

サムネイル@: Wired UI Kit: Free Bootstrap 4 UI Kit – Wired Dots