Advertisement

dribbble

 

インターネットが進化することで、ウェブデザインの作成方法は変化してきていますが、デザインや配色など基本的な要素で悩んでしまうということも多いのではないでしょうか。

 

あらかじめ利用する素材を揃えたUIコンポーネントを使えば、より手軽にそしてスピーディーにデザインをウェブサイト制作を進めることができます。

 

 

今回は、あらゆるデザインコンセプトやプロジェクト案件に対応でき、無料ダウンロードできるUIコンポーネント素材をまとめてご紹介します。Photoshop で利用できるのはもちろん、最近人気の SketchFigmaIllustrator にも対応する素材が揃います。デザインアイデアが欲しいときなど、今後の参考にしてみてはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

魅力的なウェブデザインを素早く仕上げる、すごい無料UIコンポーネント素材まとめ

 

iOS 10 GUI Kit Sketch / PSD / XD / Macaw

最新版iOS 10を完全再現した素材で、62種類の画面スクリーンを中心に、すべてのUIコンポーネントが揃います。豊富なファイル形式もポイント。

ios-10-ui-kit-open-sourceios-10-gui-2-0

 

 

 

Bootstrap 4 UI Kit for Sketch Sketch

人気 HTML/CSS ワイヤーフレーム Bootstrap 4 をそのままSketch ファイルで完全再現した素材。すべてのUIコンポーネントをすべて収録しています。

monthly-freebies-january-2016-02

 

 

 

Facebook iOS 10 UI Kit Photoshop / Sketch / Figma

SNSアプリ Facebook が公式に公開している iOS 10 のUIコンポーネント集で、ピクセルパーフェクトで作成された素材。

ios10-facebook-full-preview

 

 

 

Creastore UI Kit Sample Sketch

カラフルな配色にGoogle のマテリアルデザインをベースに作成された、ファッション系アプリ用UIコンポーネント。

creastore-ui-kit-sample

 

 

 

Relate UI Kit Sketch / PSD

プロトタイプツールを後悔している InVision 謹製のUIコンポーネントで、100種類を超える素材が揃います。

12relate

 

 

 

YOLO Black UI Kit Sketch

全8色のカラースキンで作成された、ダーク系UIコンポーネントが揃っています。

yolo-black-ui-kit

 

 

 

Chart UI Kit Sketch

円グラフや棒グラフなどチャート図を揃えたUIコンポーネント集。

chart_uikit

 

 

 

Guacamole 3-in-1 UI Kit PSD / Sketch / XD

Retina ディスプレイにも対応する600種類を超えるレイヤーで作成された、70+以上のUIデザイン素材が揃います。

avocode-guacamole-ui-kit

 

 

 

Article UI PSD / Sketch / HTML

ウェブ制作をよりスムーズに進めることができるUIコンポーネントを、Photoshop と Sketchの他、HTMLファイルでも収録したデモ用素材。

article-ui-kit-free-sample-prev01

 

 

 

Chewey iOS UI Kit PSD

カテゴリごとに分別され、カスタマイズしやすいUIコンポーネント素材で、さまざまなサイト制作に活躍します。

chewey-ios-free-ui-kit-prev02

 

 

 

Based UI Kit Sketch

プロトタイプツールとして人気が出ている Sketch に対応した素材で、どんな案件にも使いやすいアイテムが揃います。

13based

 

 

 

Ease UI Free Sample Sketch / PSD

ファッション系ショッピングサイト向けUIコンポーネントを揃えた素材で、使い勝手のよいミニマルスタイルが魅力。

18easeease-ui-component-free-sample-prev02

 

 

 

Free Atelier UI Pack Sketch

パステルカラーの淡い配色が特長のカード型レイアウトで、インテリアデザインをベースとしたUIキット。

atelier-free

 

 

 

Kauf UI Web Kit PSD

7つのカテゴリに分けられた、合計200種類のUIコンポーネント素材を揃えた太っ腹のフリー素材。

kau-ui-kit-1

 

 

 

Material Design Wireframe Kit v_02 Sketch

マテリアルデザインをベースに、合計41種類の画面スクリーンを揃えたデザインキット。

android_material_design

 

 

 

Wireframe Landing Page Free File PSD

ウェブサイトのランディングページを想定したワイヤーフレーム素材で、並び替えるだけで自由なレイアウトを実現できます。

landing-page-wireframe

 

 

 

UX Flow Screens Sketch / SVG

サイトのページ遷移フローを分かりやすく伝える、モバイルスクリーン画面をまとめた、プロトタイプ作成に役立つ素材。

ux-flow

 

 

 

Mobile UI Wireflow Kit Sketch

モバイルサイトのページ遷移フローを表現するときに便利な素材で、合計57種類の画面スクリーンに大量のジェスチャー用アイコンが揃っています。

mobile-ui-wireflow-kit

 

 

 

Free Wireframes for Phones Reviews – Material Design PSD

マテリアルデザインをベースに、モバイル端末のレビューサイト向けプロトタイプの作成に。

wirebase

 

 

 

Bricks – 38 PSD Cards for Flowcharts PSD

こちらもページ遷移フロー作成を想定した、38種類のカード型レイアウトを揃えています。

preview_03

 

 

 

Wirebase Sketch

アイデアをすぐにカタチにできる、プロトタイプ向けUIコンポーネントが揃っているので、いつでもデザインを手軽にはじめることができます。

bluish-wirebase

 

 

 

Landing Shot PSD / Sketch

ランディングページを自由に作成できる、80種類を超えるUIコンポーネントを収録したデザインキット。

landing-free-ui-kit

 

 

 

Magic Stone UI Kit Free Sample PSD / Sketch

サイト制作プロセスをより手軽にするUIコンポーネント集で、ウェブサイトからモバイルまで幅広くデザインを手掛けることができます。

magic-stone-ui-kit-free-sample-prev01

 

 

 

SilveHype Fashion Web Template Sketch

フォントの使い方も参考にしたい、ファッション関連のウェブ用コンポーネントセット。

silvehype-template-mkmiki

 

 

 

Pages UI Web Kit Sketch

もともと有料販売されているHTMLテンプレート素材で、すべてのUIコンポーネントを Sketch ファイルで無料公開しています。レイアウトの参考にもどうぞ。

artboard_201

 

 

 

Google Now – UI Kit Sketch

個別にカスタマイズされた情報をちょうどよいタイミングで提供するサービス Google Now のGUIを完全再現しています

google-now-ui-kit

 

 

 

Free Ui Kit Design Sketch

11個のカテゴリに46画面スクリーンが揃った、使いやすいダーク系UIコンポーネント集。

free-ui-kit-design-prevok

 

 

 

Canvas UI Kit Free Demo Sketch

Google フォントを利用し作成されたモバイル向けUIデザインキットで、iPhone 6 のスクリーン解像度にも対応した素材。

canvas-ui-kit-free-demo-prev01

 

 

 

Mapogo UI Kit Sample Sketch

モバイルアプリ作成で重宝する、合計120画面スクリーンを揃えた素材で、あらゆるアイデアを自由に表現できるUIコンポーネント。

mapogo-ui-kit-free-sample

 

 

 

Sportify: A Small UI Kit Sketch

フィトネス系モバイルアプリを想定した、カラフルな配色でデザインされたUIコンポーネント。

sportify-app-ui-kit

 

 

 

Newsreader iOS App Sketch

モバイル用アプリのRSSフィード用レイアウトを揃えたUIコンポーネント。

news-reader-app-screen

 

 

 

Water Free UI Kit Ai

renol-nguyen_free_ui-kit-water_prev01_191016

 

 

 

参考 デザインに自信がない人も大丈夫!無料UIキットでWeb制作スピードをアップしよう。

前回のまとめから4ヶ月以上が経過していました、以前のアイテムも一緒に確認してみると良いかもしれません。

fade-mobile-ui-kit-1

 

 

サムネイル@ : Hello U Kit Free Sample by Lurii Kondratkov – Gumroad