こんにちは、デザイナー・ブロガーの
ゆっきー(@elcielo_design)です。
今回は、無料のSketch用UIキットや
デザイン素材をまとめた記事になります。
この記事の目次
UIキット・デザイン素材
デザインを0から制作するのも大切ですが、
想像した以上に時間がかかってしまったり、
初心者の場合高い質のデザインを作るのが
なかなか難しかったりすることがあります。
そういう時は、UIキット・デザイン素材を
上手に制作に取り入れ利用することによって、
効率よく更に素晴らしいデザインを作れます。
特に「Sketch」はデザインツールの中でも、
操作が比較的簡単なので、UIキットを使えば
初心者の人でもデザインの制作のハードルが
かなり下がることでしょう。
この記事ではSketchファイルで公開されてる
UIキットの中でおすすめのものを選んで、
3つのカテゴリーで紹介をしようと思います。
全て無料のものなので、利用してみて下さい。
参考 : UIキットとは
画面デザインやレイアウト、またパーツごとの
デザインが集まったデザイン集のようなもの。
Web上でも様々なものが公開されている。
無料で利用できるSketch用
UIキット・デザイン素材まとめ
「UIキット・デザイン素材の3カテゴリー」
- デザイン全般で利用できる素材まとめ
-
スマホ用デザインで利用できる素材まとめ
- アイコン素材まとめ
① デザイン全般で利用できる素材
「デザイン全般で利用できる素材まとめ」
Web UI Kit Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・色々なWebデザインのパーツが揃う UIキットで種類も豊富。 |
その他 |
Web UI Kit Sketch Resource
Basic Form Elements
Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・標準的なフォームの素材が揃うUIキット。 ・シンプルで使い勝手が良い。 |
その他 |
Basic Form Elements Sketch Resource
Basic UI Elements Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・Webサイトで使われている基本的な パーツ素材が揃っているUIキット。 ・フォームで使われるパーツも豊富。 |
その他 |
Basic UI Elements Sketch Resource
Basic Forms UI Kit Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・フォームのパーツが揃うUIキット。 ・ほんわかした感じの可愛いデザイン。 |
その他 |
Basic Forms UI Kit Sketch Resource
NativeBase Sketch Template
Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・NativeBaseというフレームをベースにする 基本的なパーツが多数揃ったUIキット。 |
その他 |
NativeBase Sketch Template
Sketch Resource
Essential Prototyping Template
Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・プロトタイプ作成に使える素材が豊富な UIキット。 |
その他 |
Essential Prototyping Template
Sketch Resource
Wirebase Wireframing Kit
Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・ワイヤーフレームを作成する時に 便利なUIキット。 |
その他 |
Wirebase Wireframing Kit
Sketch Resource
Mini Wireframes Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・様々なレイアウトが揃っている ワイヤーフレーム素材。 ・プレゼンテーション等でも使える感じ。 |
その他 |
Mini Wireframes Sketch Resource
Basic Wireframe Kit
Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・ワイヤーフレーム作成で使えるパーツが 揃っているUIキット。 ・種類も豊富にある。 |
その他 |
Basic Wireframe Kit Sketch Resource
The Next Random UI Kit
Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・フォームやボタン、モーダルウィンドウ等 揃っているUIキット。 ・ページの基本部分のデザインに利用可能。 |
その他 |
The Next Random UI Kit Sketch Resource
Dynamic Buttons Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・ボタン素材が豊富なキット。 ・DynamicButtonというプラグインと 組み合わせることで、更に便利に利用可能。 |
その他 |
Dynamic Buttons Sketch Resource
Dashboard Template Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・ダッシュボードの様々なパーツが 揃っているUIキット。 ・CMSを作成する時などに使える。 |
その他 |
Dashboard Template Sketch Resource
Material Dashboard Concept
Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・マテリアルデザインのダッシュボードが 再現されたUIキット。 |
その他 |
Material Dashboard Concept
Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・サイドバーのデザインプレート。 ・マテリアルデザインのWebサイトに 相応しい感じ。 |
その他 |
Sidebar Navigation Sketch Resource
Data Visualization UI Kit
Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・データの表示に使えるパーツが沢山ある UIキット。 ・ダッシュボード等を作成する時に使える。 |
その他 |
Data Visualization UI Kit Sketch Resource
Colorful Data Charts Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・カラフルで幻想的なグラフデザインが 揃っているUIキット。 |
その他 |
Colorful Data Charts Sketch Resource
Design Blog Layout
Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・ブログのデザインに利用できるUIキット。 ・ベースが整っているので、細かいところを 修正すれば完成できる。 |
その他 |
Design Blog Layout Sketch Resource
Website Starter Kit Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・標準的なWebサイトで使われているような レイアウトが組まれたUIキット。 |
その他 |
Website Starter Kit Sketch Resource
12 Popular Website Layouts
Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・人気のWebサイトのレイアウトが、 12種類入っているUIキット。 |
その他 |
12 Popular Website Layouts
Sketch Resource
Error Pages Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・エラーページに使える可愛いイラストが 揃っているUIキット。 |
その他 |
Error Pages Sketch Resource
Lading Page Template Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・ランディングページに使える素材が揃う UIキット。 |
その他 |
Lading Page Template Sketch Resource
Landing Page Layout
Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・色々なランディングページの レイアウトが揃っているUIキット。 |
その他 |
Landing Page Layout Sketch Resource
Airbnb Landing Page
Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・AirbnbのランディングページをSketch上で 再現したUIキット。 |
その他 |
Airbnb Landing Page Sketch Resource
Credit Card Templates
Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・クレジットカードの素材が、 Sketchファイルで利用できる。 |
その他 |
Credit Card Templates Sketch Resource
Simple Datepicker Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・デイトピッカーのデザイン素材のUIキット ・シンプルで分かり易い素材 |
その他 |
Simple Datepicker Sketch Resource
Google Ads Sizes Artboards
Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・Googleの広告サイズのアートボードが 揃っている。 ・広告バナーを作成する際に役立つ。 |
その他 |
Google Ads Sizes Artboards
Sketch Resource
Adidas Website Redesign Sketch
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・AdidasのホームページをSketch上で 再現したUIキット。 ・スタイリッシュなUIがかっこいい。 |
その他 |
Adidas Website Redesign Sketch
UX Kit by Kit Nolte Sketch Resource
カテゴリー | デザイン全般で利用できる素材 |
特徴 | ・Nolteが提供するUXキット。 ・レスポンシブデザイン作成に役立つ。 |
その他 |
UX Kit by Nolte Sketch Resource
② スマホ用デザインで利用できる素材
「スマホ用デザインで利用できる素材まとめ」
カテゴリー | 素材ページ (13) | |
② スマホ用 素材 |
オール ジャンル |
UIME Massive Kit Sketch Resource |
TODOリスト | Candy – Simple To Do App Sketch Resource |
|
フィットネス | iOS Fitness App Dashboard Sketch Resource |
|
ログイン画面 | Login Screens UI Kit Sketch Resource | |
サインアップ | Mobile Signup Screens Sketch Resource | |
Phone デバイス |
Minimal Phone Device Mockup Sketch Resource |
|
映画予約画面 | Movie Booking App Sketch Resource | |
チャット | Mochi – Chat UI Kit Sketch Resource | |
フード デリバリー |
Food Delivery App Sketch Resource | |
不動産・地図 | Real Estate App UI Kit Sketch Resource | |
Tinder画面 | Tinder iOS UI Kit Sketch Resource | |
SNSアプリ | Design Social Network App Sketch Resource |
|
デバイス ハンド |
Diverse Device Hands Sketch Resource |
スマホアプリや、スマホ用のページの
デザインに使えるUIキット・デザイン素材。
UIME Massive Kit
Sketch Resource
カテゴリー | スマホ用デザインで利用できる素材 |
特徴 | ・スマホ画面のデザイン素材が非常に多く 揃っているUIキット。 |
その他 |
UIME Massive Kit Sketch Resource
Candy – Simple To Do App
Sketch Resource
カテゴリー | スマホ用デザインで利用できる素材 |
特徴 | ・架空のTODOリストアプリの画面が 揃っているUIキット。 ・柔らかい印象が魅力的な素材。 |
その他 |
Candy – Simple To Do App
Sketch Resource
iOS Fitness App Dashboard
Sketch Resource
カテゴリー | スマホ用デザインで利用できる素材 |
特徴 | ・フィットネスアプリの画面が揃っている UIキット。 ・データの表示方法等が参考になる。 |
その他 |
iOS Fitness App Dashboard
Sketch Resource
Login Screens UI Kit
Sketch Resource
カテゴリー | スマホ用デザインで利用できる素材 |
特徴 | ・スマホでのログイン画面のデザインが 揃っているUIキット。 |
その他 |
Login Screens UI Kit Sketch Resource
Mobile Signup Screens
Sketch Resource
カテゴリー | スマホ用デザインで利用できる素材 |
特徴 | ・スマホでのサインアップ画面のUIキット。 ・フラットデザインが基調となっている シンプルなデザイン。 |
その他 |
Mobile Signup Screens Sketch Resource
Minimal Phone Device Mockup
Sketch Resource
カテゴリー | スマホ用デザインで利用できる素材 |
特徴 | ・シンプルなiPhoneのモックアップが 利用できる素材キット。 |
その他 |
Minimal Phone Device Mockup
Sketch Resource
Movie Booking App
Sketch Resource
カテゴリー | スマホ用デザインで利用できる素材 |
特徴 | ・映画予約アプリのモックアップ画像が 揃っているUIキット。 |
その他 |
Movie Booking App Sketch Resource
Mochi – Chat UI Kit Sketch Resource
カテゴリー | スマホ用デザインで利用できる素材 |
特徴 | ・チャットUIを作る際に使えるUIキット。 |
その他 |
Mochi – Chat UI Kit Sketch Resource
Food Delivery App
Sketch Resource
カテゴリー | スマホ用デザインで利用できる素材 |
特徴 | ・フードデリバリーのモックアップ素材が 入っているUIキット。 |
その他 |
Food Delivery App Sketch Resource
Real Estate App UI Kit
Sketch Resource
カテゴリー | スマホ用デザインで利用できる素材 |
特徴 | ・不動産アプリのデザインモックアップ 素材が揃っているUIキット。 ・地図の表示方法も参考になる。 |
その他 |
Real Estate App UI Kit Sketch Resource
Tinder iOS UI Kit
Sketch Resource
カテゴリー | スマホ用デザインで利用できる素材 |
特徴 | ・TinderのiOS画面をSketchで再現してある UIキット。 ・優れたUIデザイン部分が多数。 |
その他 |
Tinder iOS UI Kit Sketch Resource
Design Social Network App
Sketch Resource
カテゴリー | スマホ用デザインで利用できる素材 |
特徴 | ・SNSアプリのデザインのモックアップ。 |
その他 |
Design Social Network App
Sketch Resource
Diverse Device Hands
Sketch Resource
カテゴリー | スマホ用デザインで利用できる素材 |
特徴 | ・手にiPhoneを持っている素材が 揃っているキット。 ・アプリの宣伝用画像に役立ちそう。 |
その他 |
Diverse Device Hands Sketch Resource
③ アイコン素材
「アイコン素材まとめ」
Sketchで利用できるアイコン素材ページ。
Sketch用でなくても使える無料の
アイコン素材サイト・サービスは
次の記事を参考にしてみて下さい。
Mobirise Icons Sketch Resource
カテゴリー | アイコン素材 |
特徴 | ・150種類のアイコン素材が揃うファイル。 ・Webでアイコンフォントとして購入可能 |
その他 |
Mobirise Icons Sketch Resource
100 Useful Icons Sample
Sketch Resource
カテゴリー | アイコン素材 |
特徴 | ・100種類の使いやすいアイコンが使える。 |
その他 |
100 Useful Icons Sample Sketch Resource
Dripicons V2 – 200 Icons
Sketch Resource
カテゴリー | アイコン素材 |
特徴 | ・200種類のアイコン素材が揃うファイル。 ・全体的に可愛い雰囲気のデザイン。 |
その他 |
Dripicons V2 – 200 Icons Sketch Resource
Significa Icon Set Sketch Resource
カテゴリー | アイコン素材 |
特徴 | ・シンプルでポップな感じのアイコン素材の ファイル。 |
その他 |
Significa Icon Set Sketch Resource
UI Icons Pack Sketch Resource
カテゴリー | アイコン素材 |
特徴 | ・少しポップなアイコンが豊富なファイル。 |
その他 |
UI Icons Pack Sketch Resource
Social Media Brand Icons
Sketch Resource
カテゴリー | アイコン素材 |
特徴 | ・ソーシャルメディアのアイコンのみを 揃えている素材ファイル。 ・260種類のアイコン素材が揃う。 |
その他 |
Social Media Brand Icons
Sketch Resource
40 Sports Icons Sketch Resource
カテゴリー | アイコン素材 |
特徴 | ・40種類のスポーツのアイコン素材が 揃っているファイル。 |
その他 |
40 Sports Icons Sketch Resource
25 Design and Graphics Icons
Sketch Resource
カテゴリー | アイコン素材 |
特徴 | ・文房具等の25種類のアイコン素材が 揃っているファイル。 |
その他 |
25 Design and Graphics Icons
Sketch Resource
40 Hand Gesture Icons
Sketch Resource
カテゴリー | アイコン素材 |
特徴 | ・40種類のハンドジェスチャーアイコンが 入っているファイル。 |
その他 |
40 Hand Gesture Icons Sketch Resource
まとめ
以上が無料のSketch用UIキットや
デザイン素材のまとめでした。
無料の素材として公開されているものでも
最近はクオリティが非常に高くなっていて
デザイン初心者の人から上級者の人まで、
制作の効率アップに一役買ってくれます。
特に、最新のモックアップ素材等は、
UI・UXの観点でかなり優れているもので、
それらを色々見てみると学びも多いです。
UIキットやデザイン素材を使いこなし、
是非、良いデザインを制作してみて下さい。
なお、その他のSketchの関連記事は、
こちらからチェックしてみて下さい。