レスポンシブ対応、縦長ページで見かけるさまざまなUIコンポーネントを備えたHTML/CSSのテンプレート -Shards

最新のBootstrap 4をベースに、ランディングページやスマホアプリのプロモーションページなど、縦長ページでよく見かけるさまざまなUIコンポーネントを備えたHTML/CSSテンプレートで構成された無料のUIキットを紹介します。

もちろんレスポンシブ対応で、非常に軽量に構築されているので、快適に利用できます。

サイトのキャプチャ

Shards
Shards -GitHub

ShardsはMITライセンス、個人でも商用のプロジェクトでも無料で利用できます。

Shardsのデモ

ダウンロードファイルには、すぐに利用できるデモページも含まれています。
まずは、プロダクト・サービス向けの縦長ランディングページ。

デモのキャプチャ

Shards ランディングページのデモ

洗練されたデザインは美しく、シャドウやアニメーションなどの繊細なエフェクトが気持ちいいページです。

デモのキャプチャ

Shards ランディングページのデモ

もう一つは、スマホアプリ用のプロモーションページ。
App Store, Google Playに対応したデザインです。

デモのキャプチャ

Shards アプリのプロモーションページのデモ

アプリの特徴、スタッフの紹介、問い合わせのフォームなどのUIコンポーネントが用意されています。

デモのキャプチャ

Shards アプリのプロモーションページのデモ

ShardsのUIコンポーネント

Shardsには、カスタマイズ可能なさまざまなUIコンポーネントが用意されています。

デモのキャプチャ

Shards コンポーネントのデモ: カラー

デモのキャプチャ

Shards コンポーネントのデモ: フォーム

デモのキャプチャ

Shards コンポーネントのデモ: フォームのバリデーション

デモのキャプチャ

Shards コンポーネントのデモ: カード

デモのキャプチャ

Shards コンポーネントのデモ: モーダル・バッジ・ツールチップ

デモのキャプチャ

Shards コンポーネントのデモ: ナビゲーション

上記以外にも、さまざまなUIコンポーネントが用意されています。

Shardsの使い方

Shardsの各UIコンポーネントのカスタマイズ方法は、専用のページが用意されています。

サイトのキャプチャ

Docs -Shards: カードのカスタマイズ

ダウンロードファイルにはHTML/CSS/JavaScript一式だけでなく、デザインファイルも含まれています。

Sketchのキャプチャ

Shardsのデザイン用ファイル(.sktech)

top of page

©2017 coliss