個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

無料で使えるフラットデザインUIキット40

フラットデザインのUIキットをご紹介します。
さまざまなサイトで取り入れられているフラットデザイン。
フラットデザインを取り入れてみたい、というときに便利なのがUIキット。
これを使えば、いとも簡単にフラットデザインの要素をそのまま利用できるし、カラーリングなども参考にできます。
今回ご紹介しているUIキットは、どれもクオリティーが高く、そのまま現場で利用できるものばかりです。
ライセンスについては、明示されているものについては明記していますが、不明瞭なものについては明記していません。各ファイルに記載されているライセンスを事前にご確認のうえ、ご利用ください。

Contents

dribbbleのデザイナーが作成したコンパクトなFlat UI Kit

1.free-flat-ui-kit
商用利用可
Flat UI Kit

アイコンや見出しもすべて揃った、微妙な角丸が特長のFlat Rounded Square UI Kit

2.free-flat-ui-kit
商用利用可
Flat Rounded Square UI Kit

明るいブルーが印象的なUI Template

3.free-flat-ui-kit
UI Template

オレンジベースのFlatex UI Kit Pro v1.0

4.free-flat-ui-kit
非商用のみ利用可
Flatex UI Kit Pro v1.0

オレンジをキーカラーに使ったFlatty UI Kit

5.free-flat-ui-kit
Flatty UI Kit

エメラルドグリーンが鮮やかなAvengers Flat UI Kit

6.free-flat-ui-kit
Avengers Flat UI Kit

画像ベースのFree UI Kit

7.free-flat-ui-kit
Free UI Kit

落ち着いたグリーンベースのUI Kit

8.free-flat-ui-kit
商用利用可
UI Kit

パープルが美しいFree Minimal Ui Kit

9.free-flat-ui-kit
Free Minimal Ui Kit

オレンジとシアンを基調にしたOrange/Cyan UI

10.free-flat-ui-kit
Orange/Cyan UI

3色配色でもまとまっているFree UI Kit

11.free-flat-ui-kit
Illustration by @Fil Dunskyの表記が必要
Free UI Kit

多色でもきれいにまとまっているColor UI Kit

12.free-flat-ui-kit
Color UI Kit

ブラウンベースのFlat UI Kit

13.free-flat-ui-kit
Flat UI Kit

ダークな印象のDark UI Kit

14.free-flat-ui-kit
Dark UI Kit

カラフルな印象のEerste – Flat User Interface Kit

15.free-flat-ui-kit
商用利用可
Eerste – Flat User Interface Kit

紺色が基調のMagazine Flat UI Kit

16.free-flat-ui-kit
Magazine Flat UI Kit

落ち着いたトーンを落としたパープルをベースにしたFlat Design UI Components

18.free-flat-ui-kit
Flat Design UI Components

緑と黄色でスッキリした印象のFlat UI Kit

19.free-flat-ui-kit
Flat UI Kit

大人気のFlat UI Proの無料版Flat UI Free v.2.1

20.free-flat-ui-kit
Flat UI Free v.2.1

落ち着いた印象のFlat UI Kit 2

21.free-flat-ui-kit
Flat UI Kit 2

ウェジェット用のFreebie PSD: Flat UI Kit

22.free-flat-ui-kit
Freebie PSD: Flat UI Kit

カラフルなFree UI Kit

23.free-flat-ui-kit
Free UI Kit

濃いグリーンで種類豊富なSquare UI Free

24.free-flat-ui-kit
クリエイティブコモンズ表示CC BY
Square UI Free

マゼンタ系のFlatic UI Kit

25.free-flat-ui-kit
Flatic UI Kit

シックなグリーンのFlat UI Kit

26.free-flat-ui-kit
Flat UI Kit

パステルカラーが印象的なFlat Ui Kit

27.free-flat-ui-kit
Flat Ui Kit

ウェジェット用のUi Kit

28.free-flat-ui-kit
Ui Kit

すべてが揃ったrtboard V3

29.free-flat-ui-kit
Artboard V3

最小限のパーツがあるFlat UI Kit

30.free-flat-ui-kit
Flat UI Kit

960グリッドベースのFlatilicious User Interface

31.free-flat-ui-kit
Flatilicious User Interface

紫ベースのFlat UI Kit

32.free-flat-ui-kit
Flat UI Kit

トーンを落とした多色が印象的なFlat Web Elements

33.free-flat-ui-kit
クリエイティブコモンズ表示—非営利CC BY-NC
Flat Web Elements

キーカラーが3色用意されたUI/UX Flat design – Free PSD

34.free-flat-ui-kit
クリエイティブコモンズ表示—非営利—改変禁止CC BY-NC-ND
UI/UX Flat design – Free PSD

カラフルなSmooth Berry UI

35.free-flat-ui-kit
Smooth Berry UI

落ち着いた印象のFlat Pixet

36.free-flat-ui-kit
クリエイティブコモンズ表示—非営利CC BY-NC
Flat Pixet

ゲームに利用できるGems UI Kit

37.free-flat-ui-kit
クリエイティブコモンズ表示—非営利CC BY-NC
Gems UI Kit

種類が豊富なFlat UI Kit

38.free-flat-ui-kit
クリエイティブコモンズ表示—非営利—改変禁止CC BY-NC-ND
Flat UI Kit

シンプルなFree Flat UI Kit

39.free-flat-ui-kit
商用利用可
Free Flat UI Kit

高い明度が印象的なSimple UI Kit with Flat Colors

40.free-flat-ui-kit
クリエイティブコモンズ表示—非営利CC BY-NC
Simple UI Kit with Flat Colors

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 4

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

レスポンシブ対応のコンテンツスライダー/スライドショーベスト8

以前の記事「レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+」

記事を読む

1歩先へ!HTML/CSS/JSのスゴワザ・テクニック満載「Top Pens of 2014」

CodePenより、2014年注目のスゴワザ・テクニックが紹介されましたので、ご紹介します。 Co

記事を読む

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像サービスを開始

便利すぎる!商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始しました。

記事を読む

WEBデベロッパーのためのおすすめYouTubeチャンネル15選

WEBデベロッパーのためのおすすめYouTubeチャンネルをご紹介します。 対象はHTML、CSS

記事を読む

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくる要素を実装するjQueryプラグイン「Stickyプラグイン」をまとめ

記事を読む

CSSだけで作られた決済代行・クレジット決済サービスアイコン95種「PaymentFont」WEBフォントしても使える!

CSSだけで作られた決済代行・クレジット決済サービスの無料アイコン95種「PaymentFont」WEBフォントしても使える!

CSSだけで作られた決済代行・クレジット決済サービスの無料アイコンセットをご紹介します。 ピュアC

記事を読む

これは魅力的!CSSだけで実装できる画像ホバーエフェクト20

これは魅力的!CSSだけで実装できる無料の画像ホバーエフェクト22

CSSだけで実装できる魅力的な画像用のホバーエフェクトをご紹介します。 種類は全部で22種類です。

記事を読む

息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater

息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater

火星をバーチャル・ツアーできるDiscovering Gale Craterをご紹介します。 Lo

記事を読む

レスポンシブWEBデザイン対応のメニューが作れるチュートリアル17(ソースファイル付き)

レスポンシブWEBデザインを行ううえで重要になってくるのがメニューをどのようにするかということではな

記事を読む

波打つようなクリックエフェクトを実装できる「Waves」

今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹

記事を読む