最近よく見かけるレスポンシブ対応のUIコンポーネントやレイアウトがよく分かるHTML, PSD, Sketchの素材 -Now UI Kit

最近のWebサイトやスマホアプリでよく見かける、Bootstrap 4をベースにした180種類以上のUIエレメントやコンポーネント、50種類以上のレイアウト、それらがPSDとSketchファイル、そしてHTMLも揃った無料利用できるNow UI Kitを紹介します。

サイトやラインディングページにそのままHTMLを使用してもよし、PSDやSketchファイルはデザインの勉強、アイデアにも利用できると思います。

Now UI Kit

Now UI Kit
Now UI Kit -GitHub

Web用とスマホ用のレイアウトを見てみましょう。
まずは、Web用から。

PSD素材のキャプチャ

Web用のコンポーネント

Web用とは別に、スマホ用、タブレット用も揃っており、同じコンポーネントの変化したレイアウトが用意されています。

PSD素材のキャプチャ

スマホ用のコンポーネント

Web用・スマホ用・タブレット用ともに、PSDとSketchファイルが揃っています。

Photoshopで開いたところ

Web用のコンポーネントをPhotoshopで開いたところ

各コンポーネントや要素はベクターで作成されているので、編集も自在です。

Sketchで開いたところ

Web用のコンポーネントをSketchで開いたところ

基本要素も豊富で、デザインを始める時にも利用できます。

サイトのキャプチャ

基本要素: ボタン、リンク、フォーム

サイトのキャプチャ

基本要素: ナビゲーション

サイトのキャプチャ

基本要素: タブ

サイトのキャプチャ

基本要素: プログレスバー、ページネーション、ラベル、通知パネル

サイトのキャプチャ

基本要素: 画像、JavaScriptのコンポーネント

素材のダウンロードは、下記ページから。

サイトのキャプチャ

Now UI Kit

ページの上部のメニュー「Download」をクリックすると、最下部のダウンロードが表示されます。
ダウンロードは、2種類。

  • Download HTML: HTML一式がダウンロードできます。
  • Download PSD/Sketch: 画像一式がダウンロードできます。

ダウンロードするにはサイトへの登録(無料)、もしくはGitHub, Google+, Facebookのアカウントが必要です。HTMLはページからそのままダウンロードでき、画像はダウンロードURLがメールで送られてきました。

top of page

©2017 coliss