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