creatorsnest30

無料でこのクオリティ!美しいデザインのUIキットいろいろ


今回は、サイトを制作する上で重要なパーツの統一性をキープするための便利なUI(ユーザーインターフェース)キットをご紹介します。

カラムレイアウトやグリッドレイアウト、ランディングページやブログ、カレンダーやユーザープロファイル、コメント欄、タブなど、サイトを制作する上で想定されるレイアウトのUIキットは、全体的なデザインが統一されるだけでなく、企画書のクオリティも高められる便利なアイテムです。

Retro Jam Ui Kit Free

レトロ調UIキット
https://dribbble.com/shots/1603894-Retro-Jam-Ui-Kit-Free

レトロな配色のUIキットでよく使うエレメントが揃っています。
メニューやボタンの他にカレンダーもあります。

 

Coffee Web UI Kit – Free Layered PSD File

コーヒーカラーUIキット
http://pelfusion.com/coffee-web-ui-kit-free-layered-psd-file/

コーヒーカラーの配色がおしゃれなUIキット。
カフェやコーヒーショップにピッタリですね。

 

Free PSD: Flat UI kit

パープルUIキット
https://dribbble.com/shots/1629598-Free-PSD-Flat-UI-kit

フラットデザインのUIキットです。
品のいいパープルがアクセントになっていて、クールなサイトにぴったりです。

 

Free PSD: Ui Kit

サーモンピンクUIキット
https://dribbble.com/shots/1624324-Free-PSD-Ui-Kit

サーモンピンクを基調としたUIキット。
チャートやグラフのパーツは、アクセス解析やデータ集計の表示に使えそうです。

 

Moon UI Set

アースカラーUIキット
https://www.behance.net/gallery/Moon-Ui-Set/14223139

動画や音声ファイルの再生に必要なパーツが揃ったUIキット。
エレメントは各色のパターンがそろっているので色数を抑えることも可能です。

 

Bleya UI

レトロカラーUIキット
https://www.behance.net/gallery/Flat-UI-Freebie/11324647

和風テイストのサイトに似合いそうな渋い中間色を使ったUIキットです。
配色がとても参考になります。

 

Free Transparent UI Elements

半透明UIキット
https://www.behance.net/gallery/14245821/Free-Transparent-UI-Elements

どれも渋い色使い背景透過タイプのUIキット。
高級感あふれる雰囲気を出せますね。

 

FOLIA UI Kit

ライトグリーンUIキット http://www.templaza.com/blog/folia-ui-kit/74

ライトグリーンを基調としたデザインのUIキットです。
メールボックスのエレメントも揃っていて、
クールなデザインのサイトにピッタリです。

 

Zan UI Free UI Kit

ダークグレーレッドUIキット
https://www.behance.net/gallery/Zan-UI-Free-UI-Kit/10937801

ダークグレーと落ち着いたレッドのUIキット。
メリハリが付いていてかっこいい渋さがただよいます。

 

Oak Grain UI Kit

ウッディUIキット
https://www.behance.net/gallery/15183663/Oak-Grain-UI-Kit

名前の通りオーク材を思い出すウッディな色使いのUIキット。
明るい背景パターンも同梱されているので使い勝手も良さそうです。

 

Hand Drawn UI Kit

手書きUIキット
https://dribbble.com/shots/1575397-Hand-Drawn-UI-Kit

手書きしたようなおしゃれなデザインのUIキット。
一から手書きするのは大変ですが、こんなかわいいキットがあるなら
ぜひ参考にしたいですね。

 

Data Analysis [Freebie]

ダークブラウンUIキット
https://dribbble.com/shots/1602474-Data-Analysis-Freebie

ダークブラウンを基調としたUIキット。
高級感のある配色とデザインが目を引きます。グラフエレメントが充実しています。

 

Admin Panel Template (Psd)

ブラウンメタルUIキット
http://www.blugraphic.com/2014/06/06/admin-panel-template-psd/

コンパネ用のUIキット。光沢感とメタルチックなツヤが
ゴージャス感を引き出していますね。

 

Free Clean UI Kit

シンプルUIキット
https://dribbble.com/shots/1603261-Free-Clean-UI-Kit

シンプルイズベストのUIキット。ステップごとのタイトルやリボンラベル、
セール用アイコンなどショップ用エレメントも揃っています。

 

Blue Milk UI Kit

ブルーミルクUIキット
http://365psd.com/day/4-157/

ミルク調の白色をベースにライトスカイブルーをアクセントで使用したUIキット。
立体感があるのでボタンのON/OFFも分かりやすいですね。

 

SIMPLE UI Kit

シンプルUIキット
http://www.templaza.com/blog/simple-ui-kit/67

定番の白背景に合うデザインはシーンを選ばない優秀デザインと言えますね。
高彩度のエレメントが揃っているので、明るくポップな印象を与えます。

 

Modern UI Kit

シンプルUIキット
https://dribbble.com/shots/1600558-Modern-UI-Kit

こちらもシンプルで使いやすいUIキット。
スライダーやOSのバージョンパーツ、地図用の位置情報用パーツも揃っています。

 

Free Flat UI dashboard

パステル調UIキット
http://www.prowebdesign.ro/flat-ui-dashboard-free-psd-by-prowebdesign/

全体的に淡い色彩でまとめられたUIキットです。
パステル系なので優しい上品な明るさを印象付けます。

 

BALIO UI Kit

スカイブルーUIキット
http://www.mightydeals.com/deal/balio-ui-kit.html

すっきりとした配色でスカイブルーがアクセントになったUIキット。
輪郭線が分かりやすく、文字もはっきりしているため見やすいですね。

 

UI Kit Beeline app [Freebies]

みつばち配色UIキット
https://dribbble.com/shots/1497501-UI-Kit-Beeline-app-Freebies

その名の通りミツバチのような配色のUIキットです。
かわいらしいだけでなくブラックでしっかりと引き締められるので使いやすいですね。

 

Social Summer UI Kit

SNSエレメントUIキット
https://dribbble.com/shots/1235186-Social-Summer-UI-Kit

Facebookのカバー画像などSNS用のUIキットです。
Summerというタイトルが付いているだけあって夏の爽やかさを
存分に感じるデザインです。

 

Time Zone App UI

タイムゾーン用UIキット
http://graphicburger.com/time-zone-app-ui/

世界各国のタイムゾーンを表示させるためのアプリ用UIキット。
タイムゾーン表示アプリにはもってこいですね。

 

Summer UI Kit

夏をイメージしたUIキット
http://graphicburger.com/summer-ui-kit/

夏をイメージしたデザインのUIキット。
ログイン画面やチャット表示用のエレメントも揃っていて
これだけあれば十分!というくらい充実しています。

 

Responsive Ui Kit

レスポンシブ用UIキット
http://www.uipixels.com/responsive-ui-kitpsd/

ミントブルーを基調としたレスポンシブデザイン用のUIキット。
配色は変更できるので応用の幅が広がります。

 

Ui Kit by Abhimanyu Rana

エコカラーUIキット
https://dribbble.com/shots/962197-Ui-Kit

エコカラーを使った落ち着いた配色のUIキット。
全体的に優しい雰囲気になるので、ナチュラル系のサイトにはぴったりですね。

Flat UI Free

フラットデザインUIキット
http://designmodo.github.io/Flat-UI/

フラットデザインのUIキットです。レッドやネイビーといった
パッと目を引くカラーがアクセントになっています。

 

Elven iPhone App UI Kit

iPhone用UIキット
http://graphicburger.com/elven-iphone-app-ui-kit/

iPhone用のデザインUIキットです。
鍵盤のような立体的ボタンがおしゃれなデザインです。

 

Android L GUI KIT by Ruban Khalid

アンドロイド用UIキット
https://dribbble.com/shots/1683873-Android-L-GUI-KIT?list=searches&offset=9

Android L向けに作成されたGUIキット。
基本的なUI素材が収録されているのでいろいろな組み合わせで
応用することができます。モックアップにも使えますね。

 

Android L Weather App by Baconcream by frebbbies

アンドロイド用UIキット
画像出典:Android L Weather App

Android L向けにデザインされたお天気アプリのUIキット。
シンプルかつ綺麗なデザインなので、いろいろな背景で試してみたくなります。

 

Transparent UI Element

半透明フローチャートUIキット
https://www.behance.net/gallery/Free-Transparent-UI-Elements/14245821

背景が透けて見えるガラスっぽいエフェクトで作成されています。
モックアップや企画書にも使えるのでハイセンスな仕上がりになりそうです。

 

まとめ

モバイルサイト用などいろんなUIキットがありましたね。

サイトのモックアップや企画書にも使えるので、UIキットはクオリティの高い必見の素材といえます。
是非ダウンロードして時間短縮と高品質のドキュメント作成に活用してみてくださいね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article【女子必見!】ガーリーな素材がいっぱいなサイトまとめ