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

Fade-Mobile-UI-Kit (1)

 

ウェブサイトのデザインが決まらないときは、PhotoshopやSketchで編集できる、UIコンポーネントやPSDテンプレートを活用してみましょう。アイデアを形にしやすくし、写真や文字テキストを編集するだけ手軽にデザインを完成させることができます。

 

 

今回は、2016年のデザイントレンドを盛り込んだ、無料ダウンロードできる UI コンポーネントや PSD テンプレート素材をまとめてご紹介します。本格的にデザインをはじめる前のモックアップやワイヤーフレームとしても活用できるアイテムを中心に揃えています。

 

 

 

詳細は以下から。

 

 

 

Web制作スピードをアップする、無料UIコンポーネント、PSDレイアウト素材まとめ

 

Chat UI Kit

ミニマルなレイアウトに、カラフルな配色を活用したUIコンポーネントは、Photoshop と Sketch 用ファイルがそれぞれ用意されています。

5.app-ui-kit-psd

 

 

 

Carbon Material Wireframe Kit

ワイヤーフレームを手軽に作成できる、ショッピングサイト向けUIモックアップ素材セットは、Google マテリアルデザインを元に作成されたコンプリートキット。PS と Sketch に対応。

carbon-material

 

 

 

iOS UI Kit in Vector Files

iOS 9 のUIデザインをそのまま完全再現したベクター素材セット。

PREVIEWS_01

 

 

 

Google Material UI Design Kit

ショッピングサイトを想定し、Googleのマテリアルデザインのガイドラインに準じたコンポーネント20種類。

preview

 

 

 

Minimal UI PSD

Minimal-UI-Kit-PSD

 

 

 

Max UI Kit

2016年のPantoneトレンドカラーを配色に利用したコンポーネント。

max_freebie

 

 

 

Fade App UI

ダーク系UIコンポーネント作成の参考にしたい、ミニマルな素材のひとつで、ミントグリーンがデザインのアクセントに最適。

faded-ul-kit

 

 

 

Monet UI Kit

アート関連のモバイルアプリを想定した、iOS向けのUIコンポーネントが合計16スクリーン揃います。

Monet-UI-Kitmonet-prev-2

 

 

 

Fair UI Kit

fairfeat-1

 

 

 

Aware Mobile UI Kit – Sketch

すぐにモバイルサイトを仕上げることができる、全12ページのワイヤーフレームキットが揃います。

aware-prev01

 

 

 

Hofmann UI Kit

デスクトップ、タブレット、モバイル用レイアウトを収録した、完全レスポンシブ対応のUIキット。Bootstrapをベースとしたコンポーネントは、実践でもすぐに活用できます。

hofmann-screens

 

 

 

Cook it recipes iOS App Kit

料理のレシピやレビューを掲載することを目的にした、モバイルアプリ向けUIコンポーネント。

perspective-app-screens-mock-up

 

 

 

Hobi UI Kit

ダーク系の背景によく映えるカーキ色をアクセントにした、ミニマルスタイルのモバイルUIキット。

fashion-app-ui-kit-01

 

 

 

Videogram UI Sketch Resource

videogram-ui-peterdrawa

 

 

 

Ustraa iOS Mobile App

カード、モジュール型レイアウトですっきりまとめられた、モバイルアプリ向けレイアウト。

ustra-dailyui

 

 

 

The Mall – Mobile UI Kit

モバイル端末用レイアウト24種類を揃え、12個のカテゴリーに分けられたコンポーネント。

the-mall-prev01-ok

 

 

 

Helium UI

カラフルな配色で統一された、すぐにワイヤーフレームを作成できる、Sketch用プラグイン。

helium-ui-colorful-sketch-ui-kit

 

 

 

Lando UI Kit

ウェブサイトの魅力的なランディングページを作成できるテンプレートを揃えています。

lando-ui-kit-prev-01-ok

 

 

 

Overlap UI Kit

写真と文字テキストを組み合わせ、余白スペースをたっぷり確保し、強めのドロップシャドウが特長。

OVERLAP-UI-Kit-600

 

 

 

Cozy Ui Kit

スッキリとしたエレガントな見た目が特長で、ブログやマガジンサイトを想定したUIコンポーネントが揃い、スタイルガイドとしても利用できる素材。

Cozy-UI-Kit-600

 

 

 

Flowchart

ウェブサイトやモバイルアプリのページ遷移をより分かりやすく、手軽にしたフローチャート素材が揃います。

flow-chart

 

 

 

Pink Donuts: Colorful PSD Layout

ポップな色使いに太字フォントが印象的な、ランディングページやポートフォリオ向けレイアウト。

Freebies-April-09

 

 

 

Yellow Moon Minimal Landing Page

Freebies-April-08

 

 

 

Webby – Multi-Purpose PSD

さまざまなアイデアやプロジェクトに活用できる、3種類のレイアウトが用意されています。

57ae6f30035127.56100f1dc87ce

 

 

 

Tanner Collection

商品紹介用ランディングページで、商品の扱い方を図解した、フレキシブルなレイアウトが魅力的。

Freebies-April-11

 

 

 

Pages UI Kit

70種類以上のランディングページを、Sketchを利用して作成した、作業効率をアップしてくれるアイテム。

artboard_201

 

 

 

Personal Blog PSD Layout

さまざまな投稿タイプを想定した、個人ブログ向けのスタイリッシュなレイアウト。

personal-blog-psd-template

 

 

 

Quotes Websites

すっきりとしたモダンな雰囲気を演出したレイアウトで、レスポンシブデザインも考慮されています。

quotes-versatile-psd-website-template

 

 

 

New Providence

レイアウトと一緒に、HTMLファイルも収録されたカスタマイズ性のよいテンプレート素材。

new-providence-psd-landing-page

 

 

 

Riley’s Cycle

落ち着いた渋い配色で、自転車をコンセプトに作成された、ダーク系ページレイアウト。 Riley’s-Cycles2

 

 

 

Tork-Landing-Page-Template

 

 

 

10 Free PSD Templates

すぐにデザインに取り掛かることができる、合計10種類のページレイアウトを収録した太っ腹なアイテム。

Website-psd-templates

 

 

 

Free Travel Template PSD

旅行をテーマにしたウェブサービスを想定したレイアウト。 dr

 

 

 

FitApp – Landing Page

モバイル・アプリ向けランディングページ用PSDレイアウト。

FitApp-Landing-Page-Template

 

 

参照元リンク : Fade App UI – Behance