最近よく見かけるレスポンシブ対応の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 -GitHub

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

Web用のコンポーネント

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

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

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

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

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

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

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

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

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

基本要素: タブ

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

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

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

Now UI Kit

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

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

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