最近よく見かけるレスポンシブ対応のUIコンポーネントやレイアウトがよく分かるHTML, PSD, Sketchの素材 -Now UI Kit
Post on:2017年6月13日
最近のWebサイトやスマホアプリでよく見かける、Bootstrap 4をベースにした180種類以上のUIエレメントやコンポーネント、50種類以上のレイアウト、それらがPSDとSketchファイル、そしてHTMLも揃った無料利用できるNow UI Kitを紹介します。
サイトやラインディングページにそのままHTMLを使用してもよし、PSDやSketchファイルはデザインの勉強、アイデアにも利用できると思います。
![Now UI Kit](http://coliss.com/wp-content/uploads-201702/2017061301.png)
Web用とスマホ用のレイアウトを見てみましょう。
まずは、Web用から。
![PSD素材のキャプチャ](http://coliss.com/wp-content/uploads-201702/2017061302-01.png)
Web用のコンポーネント
Web用とは別に、スマホ用、タブレット用も揃っており、同じコンポーネントの変化したレイアウトが用意されています。
![PSD素材のキャプチャ](http://coliss.com/wp-content/uploads-201702/2017061302-02.png)
スマホ用のコンポーネント
Web用・スマホ用・タブレット用ともに、PSDとSketchファイルが揃っています。
![Photoshopで開いたところ](http://coliss.com/wp-content/uploads-201702/2017061304-01.png)
Web用のコンポーネントをPhotoshopで開いたところ
各コンポーネントや要素はベクターで作成されているので、編集も自在です。
![Sketchで開いたところ](http://coliss.com/wp-content/uploads-201702/2017061303-01.png)
Web用のコンポーネントをSketchで開いたところ
基本要素も豊富で、デザインを始める時にも利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017061301-02.png)
基本要素: ボタン、リンク、フォーム
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017061301-03.png)
基本要素: ナビゲーション
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017061301-04.png)
基本要素: タブ
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017061301-05.png)
基本要素: プログレスバー、ページネーション、ラベル、通知パネル
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017061301-06.png)
基本要素: 画像、JavaScriptのコンポーネント
素材のダウンロードは、下記ページから。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017061301-07.png)
ページの上部のメニュー「Download」をクリックすると、最下部のダウンロードが表示されます。
ダウンロードは、2種類。
- Download HTML: HTML一式がダウンロードできます。
- Download PSD/Sketch: 画像一式がダウンロードできます。
ダウンロードするにはサイトへの登録(無料)、もしくはGitHub, Google+, Facebookのアカウントが必要です。HTMLはページからそのままダウンロードでき、画像はダウンロードURLがメールで送られてきました。
sponsors