最近よく見かけるレスポンシブ対応の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ファイルはデザインの勉強、アイデアにも利用できると思います。

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

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

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

Web用のコンポーネントをPhotoshopで開いたところ
各コンポーネントや要素はベクターで作成されているので、編集も自在です。

Web用のコンポーネントをSketchで開いたところ
基本要素も豊富で、デザインを始める時にも利用できます。

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

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

基本要素: タブ

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

基本要素: 画像、JavaScriptのコンポーネント
素材のダウンロードは、下記ページから。

ページの上部のメニュー「Download」をクリックすると、最下部のダウンロードが表示されます。
ダウンロードは、2種類。
- Download HTML: HTML一式がダウンロードできます。
- Download PSD/Sketch: 画像一式がダウンロードできます。
ダウンロードするにはサイトへの登録(無料)、もしくはGitHub, Google+, Facebookのアカウントが必要です。HTMLはページからそのままダウンロードでき、画像はダウンロードURLがメールで送られてきました。
sponsors