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

Post on:2022年2月2日

sponsorsr

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

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

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

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

テンプレートは8種類

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

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

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

HTMLはこんな感じ。

テンプレートのHTMLの一部

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

テンプレートのCSSの一部

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

Movatterモバイル変換