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