レスポンシブ対応、縦長ページで見かけるさまざまなUIコンポーネントを備えたHTML/CSSのテンプレート -Shards
Post on:2017年11月15日
最新のBootstrap 4をベースに、ランディングページやスマホアプリのプロモーションページなど、縦長ページでよく見かけるさまざまなUIコンポーネントを備えたHTML/CSSテンプレートで構成された無料のUIキットを紹介します。
もちろんレスポンシブ対応で、非常に軽量に構築されているので、快適に利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017111505.png)
ShardsはMITライセンス、個人でも商用のプロジェクトでも無料で利用できます。
Shardsのデモ
ダウンロードファイルには、すぐに利用できるデモページも含まれています。
まずは、プロダクト・サービス向けの縦長ランディングページ。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017111506-01.png)
洗練されたデザインは美しく、シャドウやアニメーションなどの繊細なエフェクトが気持ちいいページです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017111506-02.png)
もう一つは、スマホアプリ用のプロモーションページ。
App Store, Google Playに対応したデザインです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017111506-03.png)
アプリの特徴、スタッフの紹介、問い合わせのフォームなどのUIコンポーネントが用意されています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017111506-04.png)
ShardsのUIコンポーネント
Shardsには、カスタマイズ可能なさまざまなUIコンポーネントが用意されています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017111507-01.png)
Shards コンポーネントのデモ: カラー
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017111507-02.png)
Shards コンポーネントのデモ: フォーム
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017111507-03.png)
Shards コンポーネントのデモ: フォームのバリデーション
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017111507-04.png)
Shards コンポーネントのデモ: カード
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017111507-05.png)
Shards コンポーネントのデモ: モーダル・バッジ・ツールチップ
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017111507-06.png)
Shards コンポーネントのデモ: ナビゲーション
上記以外にも、さまざまなUIコンポーネントが用意されています。
Shardsの使い方
Shardsの各UIコンポーネントのカスタマイズ方法は、専用のページが用意されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017111508.png)
Docs -Shards: カードのカスタマイズ
ダウンロードファイルにはHTML/CSS/JavaScript一式だけでなく、デザインファイルも含まれています。
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017111509.png)
Shardsのデザイン用ファイル(.sktech)
sponsors