個人的に役立ったデザイン素材や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
  • 1
  • 4

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

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

Chromeのタブをクリックするだけで音声を消す方法

Chromeのタブをクリックするだけで音声を消す方法

Google Chromeのタブをクリックするだけで音声を消す方法をご紹介します。 Chromeの

記事を読む

文字をカラフルに!CSSとjQueryでテキストを2〜3色で表現してしまう「HalfStyle」

CSS3やWEBフォントの登場でテキスト回りの装飾がお手軽になってきましたが、1文字をだけを2〜3色

記事を読む

これは便利!背景画像に使えるシームレスパターンを無料でコピー/ダウンロードできる「Transparent Textures」

こりゃ便利!というサービスがあったのでご紹介します。 WEBサイトを制作するときに背景画像などに利

記事を読む

画像を使わずにCSSとWEBフォントを利用してアイコンボタンをつくる方法

アイコンに画像を利用せず、WEBフォントとCSSを使って表現する方法が徐々に増えています。 画像を

記事を読む

HTML,CSS,JSのコードを美しく整形し?部分の指摘もしてくれるDirty Markup

HTML,CSS,JSのコードを美しく整形し?部分の指摘もしてくれるDirty Markup

HTML,CSS,JSのコードを美しく整形し、?部分の指摘もしてくれるDirty Markupをご紹

記事を読む

無料のファイル転送ツールの決定版?容量無制限・件数無制限・ハイスピードの「Infinit」

ファイルを転送するとき、どんなツールを利用していますか? DropBoxやFireStorageな

記事を読む

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

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

記事を読む

これが無料!ハイクオリティーなPhotoshop用WEBデザインテプンレート(psd)60+

海外のデザイナーがPhotoshopで作成したWEBデザイン用のテンプレート(psdファイル)をまと

記事を読む

レスポンシブWEBデザインなら導入したいレスポンシブ対応CSSフレームワーク35(〜2013年9月まで)

レスポンシブWEBデザインにますます注目が集まっているようです。 つい最近では、カラーミーショップ

記事を読む

UIのインスピレーションに最適な「UXPorn」

UIデザインのインスピレーションで溢れてる「UXPorn」

サイトやWEBサービスをつくるときにどのようなUIデザインにするかは悩むところですよね。 UIをつ

記事を読む