ホームページのデザインをスムーズに進めるのに役立つアイテムといえば、PhotoshopやSketchで使えるUIキットです。
そのまま使ったり、参考にしたりすることで思いついたアイデアを形にしやすくしてくれます。

闇雲にデザインを進めると、統一感の無いデザインになってしまいがちですので、UIキットを活用して質の高いデザインを目指しましょう。
今回は、無料で使えるUIキット40個を厳選してご紹介します。

Photoshop、Sketchで編集できる無料UIキット40個

1.FADE APP UI KIT | FREEBIE |(PSD)

FADE APP UI KIT | FREEBIE |
https://www.behance.net/gallery/36367535/APP-UI-KIT-FREEBIE-
ダークなディープブルーに、鮮やかなミントグリーンがアクセントのデザインです。
シンプルでカッコいい要素をたっぷりと詰め込んだUIキットとなっています。

2.Chat(PSD,Sketch)

Chat
https://www.invisionapp.com/chat
ミニマルで美しいレイアウトと、大胆な配色が魅力的なUIキットです。
テンプレート60個、カテゴリー12個、UIエレメント80個をパックにしています。

3.Minimal UI Kit (PSD)

Minimal UI Kit
https://www.designermill.com/free-psd/ui-kits/minimal-ui-kit-psd/
ムダがなく、スッキリとした印象のあるUIキットです。
青、黒、グレーを使った落ち着きある配色で、ビジネスシーンにぴったりのデザインです。
そのまま実用するのはもちろん、配色の参考にもいかがでしょうか。

4.Elton UI Kit(PSD)

Elton UI Kit
https://pixelbuddha.net/freebie/elton-ui-kit
スタイリッシュで美しいアイテムを多数収録した、ネットショップ設計にぴったりのUIキットです。
50個以上のコンポーネント、100個以上のUIエレメント、26個のウィジェット、4個のスライダーを含んでいます。

5.Mini Ui Kit [freebie](Sketch)

Mini Ui Kit [freebie]
https://dribbble.com/shots/2568206-Mini-Ui-Kit-freebie
フレッシュなビタミンカラーがなんとも素敵なUIキットです。
ボタン、タグ、検索窓といったアイテムを収録しています。

6.FREEBIE PSD: Google Material Design UI Kit(PSD)

FREEBIE PSD: Google Material Design UI Kit
https://dribbble.com/shots/2676330-FREEBIE-PSD-Google-Material-Design-UI-Kit
Googleマテリアルデザインに準じて設計したUIキットです。
ボタン、ヒーローイメージ、ナビゲーションをはじめとする20個以上のUIエレメントを収録しています。

7.Free UI Kit Design(Sketch)

Free UI Kit Design
http://freedesignresources.net/free-ui-kit-design/
ダークグレーとビビッドなオレンジの配色がモダンでクールなUIキットです。
ダーク系UIデザインの参考にしたいアイテムです。

8.Bricks - 38 Psd Cards for Flowcharts(PSD)

Bricks - 38 Psd Cards for Flowcharts
https://dribbble.com/shots/2962388-Bricks-38-Psd-Cards-for-Flowcharts
クリーム色と藤色の組み合わせがハイセンスな、フローチャートのための素材です。
多様なアイテム38個を収録しています。

9.Spool: 6 Mobile UI Templates(Sketch)

Spool: 6 Mobile UI Templates
https://pixelbuddha.net/freebie/spool-6-mobile-ui-templates
グラデーションが美しい、モバイルUIテンプレート素材です。
ログイン、プロフィール、プレイリスト、検索、会話、メニューの6画面をセットにしています。

10.Recipes App UI Kit Freebie(Sketch)

Recipes App UI Kit Freebie
https://dribbble.com/shots/2661249-Recipes-App-UI-Kit-Freebie
レシピアプリを想定したUIキットです。
清潔感のある白をベースに美しい赤色を取り入れた、魅力的なデザインです。

11.Helium UI Kit Sketch Resource(Sketch)

Helium UI Kit Sketch Resource
http://www.sketchappsources.com/free-source/1864-helium-ui-kit-sketch-freebie-resource.html
パステルカラーでまとめた、カラフルでポップなUIキットです。
スイッチ、スライダー、ボタン、パンくずリストといった定番のアイテムを収録しています。

12.Avital Mobile UI Kit(PSD,Sketch)

Avital Mobile UI Kit
https://pixelbuddha.net/freebie/avital-mobile-ui-kit-free-download
21個のiOS画面を収録した、便利なモバイル向けUIキットです。
黒をベースに所々明るめの色を取り入れ、オシャレな雰囲気に仕上げています。

13.Freebie: Mega UI style pack(PSD)

Freebie: Mega UI style pack
https://dribbble.com/shots/2888732-Freebie-Mega-UI-style-pack
たくさんのアイテムを収録した、パワフルなUIキットのサンプル素材です。
ネットショップ向けのアイテムを複数収録しています。

14.Cozy UI Kit – Free Sample(PSD)

Cozy UI Kit – Free Sample
http://graphicburger.com/cozy-ui-kit-free-sample/
ブログ、マガジンサイトを想定したUIキットです。
白を基調としたエレガントで洗練された見た目です。
ヘッダ、スライダー、チェックボックス、ボタンといったアイテムが揃います。

15.Lando UI Kit – Free Sample(Sketch)

Lando UI Kit – Free Sample
http://freedesignresources.net/lando-ui-kit-free-sample/
ランディングページ制作に最適なUIキットです。
今トレンドのシングルページのデザインが作りたい方、ぜひ必見です。

16.Max UI Kit(Sketch)

Max UI Kit
https://visualhierarchy.co/shop/product/max-ui-kit-freebie/
2016年のPantoneトレンドカラーに基づいてデザインした、クリーンで爽やかなアプリ画面のUIキットです。
トレンドを手軽に取り入れることができます。

17.Free Mobile UI Kit for an iOS Music app(Sketch)

Free Mobile UI Kit for an iOS Music app
https://www.behance.net/gallery/43632667/Free-Mobile-UI-Kit-for-an-iOS-Music-app
ミュージックアプリを想定した、IOS画面の15個をセットにしているUIキットです。
黒と紫色の組み合わせがクールでオシャレなデザインです。

18.Minimal UI Kit(Sketch)

Minimal UI Kit
https://dribbble.com/shots/2671827-Minimal-UI-Kit
温かみのあるブラウンカラーでまとめた、ミニマルなUIキットです。

19.Phoenix UI: Vol 1 - for iPhone 6(PSD,Sketch)

Phoenix UI: Vol 1 - for iPhone 6 / Free PSD & Sketch
https://dribbble.com/shots/2398307-Phoenix-UI-Vol-1-for-iPhone-6-Free-PSD-Sketch
モダンな配色がオシャレな、iOS画面のセットです。
美しい12個の画面を収録しています。

20.Android M GUI Kit Sketch Resource(Sketch)

Android M GUI Kit Sketch Resource
http://www.sketchappsources.com/free-source/1905-android-m-ui-kit-sketch-app-freebie-resource.html
Android向けアプリ、サービスのデザインに重宝するUIキットです。
アイコン、ボタン、スクリーンとたくさんのアイテムを収録した強力なパックです。

21.Chart Uikit(Sketch)

Chart Uikit
https://dribbble.com/shots/2670411-Chart-UIkit
ビビッドなカラーが素敵な、グラフ作成のためのUIキットです。
棒グラフ、円グラフといった定番のグラフを収録しており、見栄えのいいグラフがデザインできます。
オシャレなグラフをデザインしたい時に重宝する素材です。

22.Monet : iOS Mobile UI kit(PSD)

Monet : iOS Mobile UI kit
http://pivle.com/downloads/monet-mobile-ui-kit/
アート関係のアプリを想定した、モバイルUIキットです。
美しいアートがよく目立つ、シンプルで使いやすいデザインの画面16個を収録しています。

23.StockRobot App Freebie(PSD)

StockRobot App Freebie
https://dribbble.com/shots/2908517-StockRobot-App-Freebie
モバイルアプリデザインのためのUIキットです。
白を基調とした、シンプルでクリーンなデザインです。

24.Spire: A Free UI Kit(PSD)

Spire: A Free UI Kit
http://design.printexpress.co.uk/spire/
アプリ制作に役立つUIキットです。
設定、ログイン、コンタクト、カレンダー他、一般的なアプリ画面を多数収録しています。
ヴィンテージ風な配色も素敵です。

25.Free Banking UI Kit for Sketch(Sketch)

Free Banking UI Kit for Sketch
https://blog.marvelapp.com/free-banking-ui-kit-for-sketch/
デザイン制作に役立つボタン、アイコン、スクリーンを豊富に揃えた、銀行をテーマにしたUIキットです。
ビジネスに向くシンプルなデザインもポイントです。

26.Valley UI Kit(Sketch)

Valley UI Kit
http://uiuxassets.com/assets/valley-ui-kit/
ダーク、ライトバージョン2テーマを収録したUIキットです。
高品質な画面18個を収録しています。

27.Free mini UI kit V2(Sketch)

Free mini UI kit V2
http://awesomed.co/free-mini-ui-kit-v2/
さくら色がなんとも可愛らしいデザインのUIキットです。
女性的なアプリの制作に役立てたいアイテムです。

28.Black Music Free UI KIT(Sketch)

Black Music Free UI KIT
https://dribbble.com/shots/2851273-Black-Music-Free-UI-KIT
サーモンピンクの差し色が目を引く、ブラックミュージックがテーマのUIキットです。
ダークでクールなビジュアルで、カッコいい雰囲気のデザインを作る際の参考にもなるアイテムです。

29.Overlap UI Kit(PSD、AI)

Overlap UI Kit
http://graphicburger.com/overlap-ui-kit/
12カラムのBootstrapをベースに設計したUIキットです。
クリーンなデザインに、綺麗なブルーが美しい見た目です。

30.Fashion App UI Kit PSD(PSD)

Fashion App UI Kit PSD
http://pivle.com/downloads/fashion-app-ui-kit-psd/
ファッションアプリ、ネットショップを想定したUIキットで、一般的なショップで目にする14個の画面を収録しています。
アイテムを引き立たせる、シンプルで落ち着きのある配色です。

31.Windows Phone 8.1 Ui Kit - Free .Sketch Download(Sketch)

Windows Phone 8.1 Ui Kit - Free .Sketch Download
https://dribbble.com/shots/2654480-Windows-Phone-8-1-Ui-Kit-Free-Sketch-Download
Windows Phone用のUIキットで、28個の画面をセットにしています。

32.20 Splash UI Kit Screens(Sketch)

20 Splash UI Kit Screens
https://pixelbuddha.net/freebie/20-splash-ui-kit-screens-free-download
明るいイエローが大胆でオシャレな、クリエイティブなランディングページ制作のためのUIキットです。
洗練された画面20個を収録しています。

33.TETHR – The Most Beautiful iOS Design Kit Ever Made – by InVision(PSD,Sketch)

TETHR – The Most Beautiful iOS Design Kit Ever Made – by InVision
https://www.invisionapp.com/tethr
モダンで美しい見た目が魅力的なUIキットです。
250個以上ものUIコンポーネントを収録しており、これ一つでサクッとUIデザインを進めることができます。

34.Move | Mobile UI Kit. Free iOS screens for Sketch.(Sketch)

Move | Mobile UI Kit. Free iOS screens for Sketch.
https://www.behance.net/gallery/36280235/Move-Mobile-UI-Kit-Free-iOS-screens-for-Sketch
美しいiOS用画面をセットにしたモバイルのためのUIキットで、ログイン、設定、トーク画面といったアイテムを収録しています。
青紫色をメインカラーとした配色が素敵です。

35.Dark and Light Ui Kit Sketch Resource(Sketch)

Dark and Light Ui Kit Sketch Resource
http://www.sketchappsources.com/free-source/751-dark-light-ui-kit-sketch-freebie-resource.html
ベーシックなデザインで使いやすい、UIキットです。
チェックボックス、ボタン、ムービー、ログインといった必要最低限のアイテムが揃っています。

36.Fair UI Kit Freebie(PSD,Sketch)

Fair UI Kit Freebie
https://visualhierarchy.co/shop/product/free-fair-ui-kit/
モダンでオシャレな見た目が素敵なUIキットで、130個以上ものモバイルアプリ向け画面を収録しています。
ハイセンスなデザインを検討しているなら、参考にしたいアイテムです。

37.The Mall – Mobile UI kit(PSD)

The Mall – Mobile UI kit
http://freedesignresources.net/mall-mobile-ui-kit/
24個の画面を収録しているモバイル向けUIキットです。
ブルーとグリーンのグラデーションが爽やかで美しいデザインとなっています。

38.DO(PSD,Sketch)

DO
https://www.invisionapp.com/do
アイテムを豊富に収録した、汎用性の高いUIキットです。130個の画面、10個のテーマ、250個以上のUIエレメントを収録しています。
これだけで一通りの要素が揃ってしまう程、便利なセットです。デザインの美しさもポイントです。

39.CARBON Material Wireframe Kit(PSD,Sketch)

CARBON Material Wireframe Kit
http://bitmap9.github.io/materialmockups/
ネットショップを想定した、ワイヤーフレームのためのUIキットです。
画面設計をスムーズに進めるためのアイテム15個を収録しています。

40.Food & Drink UI Kit(PSD,Sketch)

Food & Drink UI Kit
https://dribbble.com/shots/2177388-Food-Drink-UI-Kit-PSD
飲食店に最適なUIキットです。
写真を上手く活用したレイアウトで、とても参考になります。

まとめ

特にWebデザイン初心者の場合どこからデザインを進めていいかわからず、何となく作業していたら見た目がバラバラに……という状態になりがちです。

UIキットでデザインパーツを揃えれば全体に統一感を出すことができ、手軽に質の高いデザインを完成させることができます。どれも無料でダウンロードできますので、気になる素材はダウンロードしてみてください。きっとデザインワークを、もっと簡単に、もっと楽しくしてくれるはずです!

なお、ご紹介した素材は全て無料ですが利用条件が定められていますので、必ず配布ページでルールをご確認ください。