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