Advertisement

ios11-app-store-gui

 

日頃からさまざまなウェブサイトを制作しているデザイナーにとって、新しいクリエイティブなデザインアイデアを考えるのもワークフローのひとつ。

 

今回は、カスタマイズもしやすい無料のUIコンポーネントをまとめてご紹介します。Photoshopだけでなく、IllustratorやSketch、Adobe XDなど幅広いデザインアプリに対応でき、ウェブサイト制作の参考にしたい素材を集めています。また、どの素材も文字テキストや配色、サイズの変更などを自由に行うことができ、iOS 11など最新デザインにもばっちり対応しています。

 

gradients
ウェブサイトやアプリのデザイン制作は、時間のかかる作業のひとつです。今回は、作業ペースを格段にアップする、ブックマークしておきたいUIデザイン素材をまとめてご紹介し
explore-maldivvves
「ウェブサイトを作成したい、でも時間もスキルもない。」そんなときに役立てたいのが、あらかじめデザインされたテンプレート素材です。時間の節約になるだけでなく、デザイン

 

 

使いやすくて、分かりやすい無料UIコンポーネント素材まとめ

 

HomeMade iOS App UI

モバイル向けのショッピングサイトを想定したUIコンポーネント集ですが、落ち着いた控えめなデザインは広い案件に使えるアイテム。

homemade-ios-app-ui-freebie-inside-h54

収録ファイル形式: PSD |

 

 

 

iPhone X Mockup & iOS 11 GUI for Adobe XD

新しくアップデートされたばかりのiOS 11 のあらゆるコンポーネントを完全再現したGUIキット。

iphone-x-mockup-ios-11-gui-t89

収録ファイル形式: XD |

 

 

 

Windows Fluent Design Concept

Microsoft が新しいUIとして開発した Fluent DesignをコンセプトにしたUIデザインキット。

windows-fluent-design-concept-adobe-xd-o42

収録ファイル形式: XD |

 

 

 

Square UI Kit Free Sample

モダンでミニマルスタイルのUIキットで、アイテムごとにグループとして整理されるなど使いやすい素材。

methodform_square-uikit-freesamples_020817_prev01

収録ファイル形式: PSD | Sketch

 

 

 

Enhance Card Grid

カード型とグリッドを組み合わせたレイアウトで、ブログ投稿一覧などにオススメ。

enhanced-card-grid-t54

収録ファイル形式: PSD |

 

 

 

iOS 11 Food UI Kit

iOS 11の新デザインを採用した、フードアプリ向けのダークUIデザインキット。

ios-11-food-ui-kit-free-psd

収録ファイル形式: PSD |

 

 

 

10 User Profiles UI

ユーザープロフィール画面を想定した10種類のデザインが揃います。

10-user-profiles-uis-v30

収録ファイル形式: PSD |

 

 

 

Eshop Mobile Product Pages

モバイルショップを想定したデザインで、商品プロダクトやブランドページなど3スクリーンが用意されています。

eshop-mobile

収録ファイル形式: PSD |

 

 

 

DLEX Ecommerce UI Kit Sample

オンライン Eコマースやショッピングサイトを想定したUIキットで、使いやすさに工夫を凝らしたアイテム。

dlex-ecommerce-ui-kit-sample_mohamed-elgendy_050917_prev01

収録ファイル形式: Sketch |

 

 

 

Vera Block

トレンドデザインを取り入れた、140スクリーンを超えるモバイル用レイアウトやコンポーネントを揃えた、プレミアム素材なみの豊富さがポイント。

vera-block-free-mobile-ui-kit-h98vera-block

収録ファイル形式: PSD | Sketch

 

 

 

Azoera UI Kit

ダーク系UIデザインを制作したいときに便利なコンポーネント集で、配色の参考にもどうぞ。

azoera-ui-kit

収録ファイル形式: Sketch |

 

 

 

Boarding Pass – Daily UI #024

オンライン航空チケットを想定した、ネオンカラーが印象的なUIコンポーネント。

boarding-pass-daily-ui-24

収録ファイル形式: PSD |

 

 

 

Trix Dark UI Kit

水色をテーマカラーに利用したダーク系UIコンポーネント集。

trix-ui-kit-v73

収録ファイル形式: PSD |

 

 

 

Dark Sports UI

ダーク系UIデザインの参考にしたい、スポーツアプリをコンセプトにしたUIコンポーネント集。

dark-sports-ui-r97

収録ファイル形式: PSD |

 

 

 

iOS Design Kit Free Demo

テンプレートを選び、お好みのコンポーネントを並べるだけで自由なレイアウトを作成できるデザインキットで、最新iOS 11を採用しています。

greatsimple_ios-11-template-free-demo_140617_prev03

収録ファイル形式: Sketch | XD

 

 

 

iPhone iOS 11 GUI for Sketch

iOS 11のスクリーン60枚と一緒に、大量のUIコンポーネントをセットにしたUIキット。

ios-11-ui-kit-for-sketch

収録ファイル形式: Sketch |

 

 

 

iOS 11 GUI Sketch Template

こちらもiOS 11のUIをそのまま再現した Sketch用GUIキット。

ios11-gui-sketch-template-m01

収録ファイル形式: Sketch |

 

 

 

Material Design UI Kit

Googleのマテリアルデザインをふまえて作成されたUIキットで、35種類のスクリーン画面に、140種類を超えるコンポーネントが揃います。

material-design-ui-kit-b59

収録ファイル形式: PSD | Sketch | Ai

 

 

 

Travel App

トラベルアプリを想定したUIコンポーネント集ですが、幅広いプロジェクトに利用できるアイテム。

travel-app

収録ファイル形式: PSD |

 

 

 

Sobo Mobile UI Kit

9つのカテゴリー合計100種類のUIコンポーネントが揃っており、カスタマイズのしやすさもポイント。

sobo-mobile-ui-kit-k38

収録ファイル形式: PSD |

 

 

 

E-Commerce / Blog Template

各デザイン要素を重ねた新しいレイアウトを採用した、ブログやオンラインショップ向け商品ページ向けテンプレート。

br-e-commerce-blogg-template

収録ファイル形式: Sketch |

 

 

 

moe-slah_muzk-mobile-ui-demo_050717_prev08

収録ファイル形式: PSD |

 

 

 

Addstract Ui Kit

ダークとホワイトの2カラーで展開するランディングページで、より実用的なUIデザインが揃います。スモールビジネスやスタートアップ関連にどうぞ。

addstract-ui-kit

収録ファイル形式: Sketch |

 

 

 

Home Page Design

各カテゴリやページを大小さまざまなタイル状に展開します。

home_page_1x

収録ファイル形式: Sketch |

 

 

 

Macaw UI Kit

8つのカテゴリに整理された合計82枚のスクリーン画面が揃った、カラフルでスタイリッシュな素材集。

macaw-ui-kit-j57

収録ファイル形式: PSD | Sketch | XD

 

 

 

Avsc Free Sketch UI Kit Design

デザインのワークフローをより手軽にスピードアップしてくれるUIコンポーネント集で、ミニマルでスタイリッシュな役立つアイテム。

avsc-free-ui-kit_10cloud-team_120917_prev01

収録ファイル形式: Sketch |

 

 

 

Flinto – eCommerce Free PSD Template

ショッピングサイトを想定したテンプレート集で、商品カテゴリやプロダクトページなどビジュアルを強調したデザインが素敵。

flinto-woocommerce-psd-template-demo_igor-ten_160817_prev01

収録ファイル形式: PSD |

 

 

 

Travelist UI Kit

ダーク系とホワイト系UIの2種類が揃い、合計22のアプリ用スクリーンを収録しています。

travelisto-ui-kit

収録ファイル形式: Sketch |

 

 

 

Sample Messaging App

メッセージアプリをコンセプトにしたUIスクリーン集。

messagly-ui-kit

収録ファイル形式: Sketch |

 

 

 

NJ Transit App

目的地までの乗り換え情報などを表示するモバイル向けアプリ用UIコンポーネント。

nj-transit-app-sketch-freebie

収録ファイル形式: Sketch |

 

 

 

Wires – Wireframe Kits for Adobe XD

ワイヤーフレーム作成を想定した、無駄を省いたミニマルスタイルのUIコンポーネント集で、どんなデザインにも使いやすい万能さ。

wires-free-wireframe-kits-for-adobe-xd-l95

収録ファイル形式: PSD |

 

 

 

Free Daily UI Kit Set One

ウェブサイトで利用することを想定した、シンプルでモダンな見た目のテンプレートが各種揃います。

robert-mayer_free-daily-ui_080617_prev18-1

収録ファイル形式: PSD |

 

 

 

Easetron Web Header Kit

ウェブサイト制作に使えるユニークなヘッダーデザイン12種類の素材集。

easetron-webb-header

収録ファイル形式: Sketch |

 

 

 

Candy Task Manager UI Kit

ToDoリストを目的としたUIキットで、書体や配色の統一感を合わせやすいミニスタイルガイド付き。

candy-psd-ui-kit_kuldeep-sharma_100817_prev02

収録ファイル形式: Sketch |

 

 

 

Responsive User Interface Kit

プロトタイプ作成などに便利な、シンプルに省略されたユーザーインターフェースが揃います。

responsive-user-interface-kit-t44

収録ファイル形式: PSD |

 

 

 

splash-sketch-ui-kit_marina-dmitruk_260817_prev02

収録ファイル形式: PSD |

 

 

 

Cactaceae UI Kit

商品プロダクトの購入ページをコンセプトにした、ポップアップ型カードレイアウト。

cactaceae-ui-kit

収録ファイル形式: XD |

 

 

 

5 Walkthroughs – Adobe XD Freebie

モバイルアプリを開いたときに表示するウェルカム画面を、デザインに応じて5種類揃えたセット。

5-walkthroughs-xd-freebies-1

収録ファイル形式: PSD |

 

 

 

Articles Grid

ブログやウェブサイトの記事一覧ページを想定し、カードレイアウトを採用したデザイン。

articles-grid

収録ファイル形式: PSD |

 

 

 

MSNL – Pastry Blog Page

ブログ投稿ページを想定したレイアウトで、グリッドに沿って並べられたデザインは参考に。

msnl-800x600

収録ファイル形式: Sketch |

 

 

 

Freebie – Pinboard Web UI

写真と文字テキストのみで表現された、シンプルなウェブコンセプト。

pinboard-web-ui

収録ファイル形式: Sketch |

 

 

 

Sked UI Kit Free Sample

さまざまなモバイルアプリに対応できる、シンプルで使い勝手の良いUIコンポーネント集。

sked-ui-kit-free-sample_komol-kuchkarov_310817_prev01

収録ファイル形式: Sketch | Sketch

 

 

 

CRM Dashboard Ui Kit

美しいグラデーションカラーを採用し、数値や統計などを表示するUIコンポーネントが中心に揃います。

crm-dashboard-ui-kit-s04

収録ファイル形式: Sketch |

 

 

サムネイル@ : iOS11 App Store GUI (Sketch Freebie) by Jakt – Dribbble