商用でも完全に無料! プレーンなHTMLとCSSで実装された、ランディングページ用のテンプレート -Uisual

JavaScriptはなし、プレーンなHTMLとCSSで実装されたランディングページ用のテンプレートを紹介します。

テンプレートはスマホ・タブレット・デスクトップのレスポンシブ対応。ワイヤーフレームのような白黒のシンプルなデザインなので、カスタマイズも簡単です。

商用でも完全に無料! プレーンなHTMLとCSSで実装された、ランディングページ用のテンプレート -Uisual

Uisual -Free Landing Page Templates
Uisual -GitHub

UisualはプレーンなHTMLとCSSで実装された、ランディングページ用のテンプレートです。他のCSSフレームワークやJavaScriptなどは一切必要ありません。
MITライセンスで、商用プロジェクトでも無料で利用できます。

サイトのキャプチャ

Uisual -Free Landing Page Templates

ダウンロードできるテンプレートは8種類あり、さまざまなプロジェクトですぐに利用できます。デザインが白黒なのは、簡単にカスタマイズできるようにしたためです。画像の変更、フォントやコピー、背景色、グラデーション、ボックスシャドウなどを簡単に変更・追加できます。

サイトのキャプチャ

テンプレートは8種類

すべてレスポンシブ対応で、ブレイクポイントは320px、768px、1024px、1200pxに設定されています。

さっそくテンプレートをダウンロードしてみました。
ファイル構成は、シンプルです。

サイトのキャプチャ

テンプレートのファイル構成

HTMLはこんな感じ。

テンプレートのHTML

テンプレートのHTMLの一部

CSSは最初に目次(TOC)があるので、簡単に把握できると思います。カラーやフォントサイズやマージンなどはCSSの変数(カスタムプロパティ)で定義されているので、カスタマイズも簡単です。

テンプレートのCSS

テンプレートのCSSの一部

ランディングページのデモをいくつか紹介します。
まずは、Alignのデモページ

デモのキャプチャ

Alignのデモページ

続いて、Layerのデモページ

デモのキャプチャ

Layerのデモページ

sponsors

top of page

©2024 coliss