Advertisement

tools2x

 

ウェブサイトやモバイルアプリ向けのUIデザイン作成に、Photoshop や Illustrator を利用している人も少なくないでしょう。ただし機能が多すぎ、もっとシンプルにデザインできたらと思うこと。

 

世界中のデザイナーが使いだし人気となっている Sketch App。日本ではまだあまりなじみがありませんが、利用ユーザーが爆発的に増えています。今回は、そんな Sketch の魅力を探りながら、デザインが捗るフリー素材をまとめています。

 

 

Sketch App とは?

hero-screenshot2x-1

 

Sketch App は、オランダの Bohemian Coding 社が開発しているベクター・グラフィック描画ツールです。ユーザーインターフェース・デザイン、プロトタイプの作成にフォーカスし、必要な機能に絞り込むことで、より直感的に作業を進めることができます。

 

 

Sketch App を利用するメリットは?

Sketch App は、Photoshop や Illustrator のいいとこ取りのようなツール、乗り換えてしまいたくなるいくつかのメリットは以下の通り。

1. すぐに覚えられる。

UIデザインにフォーカスした機能のみで覚えやすく、直感的に操作できます。ただし写真加工やPhotoshopのようなエフェクト効果は不向き。

export2x

2. 完全ベクター対応

解像度に関係なく利用できるベクターファイルなので、どんな用途にも使いやすい。

precision2x

複数のファイルう形式や解像度に一度で書き出しや、ドラッグ&ドロップによる書き出しも可能。

3. CSSによる書き出し

全てのパーツをCSSで表示できるので、コーディング作業に追加するのも簡単。

4. ファイルサイズが小さい

Photoshop や Illustrator に比べ、比較的ファイルサイズも小さく、サクサクと動く点も魅力。

5. アートボード機能

デザインバリエーションや画面遷移など、一つの画面でまとめて確認できる。

6. フリー素材、プラグインが豊富

世界中のユーザーから新しい素材が每日アップされている。Sketch公式サイト Sketch App Resources は必見。

sketch-app-resources

7. エフェクト追加が簡単

タブ、ボタンクリックのみでよく利用するスタイルを適用できるお手軽さ。

inspector2x

8. iPhoneでリアルタイム確認

iosアプリ Sketch Mirror を利用すれば、作業中のデザインをリアルタイムで確認することができます。

mirror2x

9. お手頃価格

月額払いのサブスクリプション制の Photoshop や Illustrator と比べ、$99(およそ11,000円)の買い切りタイプで、値段もお手頃。1ヶ月フリートライアルもあるので、使い心地を試してから購入できます。

10. 起動が早い。

機能が制限されている分、他のデザインアプリに比べて格段に起動スピードが早く、サクサクとした動きで作業が進みます。

 

 

無料ダウンロードできる Sketch 用フリー素材まとめ

Sketch によるデザイン制作をより手軽にしてくれる、無料ダウンロード可能な素材をまとめています。すぐにプロジェクトを開始できる、使い勝手の良いアイテムが揃います。

 

 

Flowchart Kit for Sketch

フローチャートやサイト全体のサイトマップ作成に便利な、フローチャート用コンポーネント集。3スタイル対応で、美しい配色を利用できます。

flowchart

 

 

User Flow Assets

ページ遷移をうまく伝えるフローチャートのセット。点線などスタイル別に揃っている点もポイント。

beautiful-user-flow-assets

 

 

Web Wireframe Kit

100種類のあらゆるウェブレイアウトが揃い、150個のUIコンポーネントを組み合わせることで、自由なワイヤーフレーム、プロトタイプを作成できます。

web-wireframe-kit

 

 

iOS 10 GUI for Sketch

最新iOSのインターフェースをそのまま完全再現したGUIキットで、100スクリーン以上が収録されています。

ios_10_gui_dribbble_131016_800

 

 

Golden Spiral Grid Template Sketch

デザインに黄金比を取り入れることができるひな形テンプレート。

golden_spiral_grid_template_sketch

 

 

Gradients Sketch Freebie

鮮やかで発色の良いカラーリングが特長の24色のグラデーションカラーをセットに。

gradients

 

 

Nudged Sketch Plugin

nudged-plugin

 

 

Flexible Grid Ruler

Bootstrapのグリッドシステムを、Sketchデザインに反映できるファイル。

grid_ruler

 

 

Favicon / iOS Icon Template

異なるファイルサイズのファビコンとアイコンをまとめて書き出しできます。

favicon-ios-icon-template

 

 

iOS 10 Icons

iOS 10でサポートされるアイコンサイズを自動生成してくれるツール。

icons_dribbble

 

 

Guide to Google Ads Sizes

Google アドセンスの広告バナーサイズをひとまとめにしたセット。

google-ads-sizes-sketch

 

 

Facebook Business Page Template
facebook-business-page-layout

 

 

Apple Icons Set

apple-icons-set

 

 

iPhone 7 Mock-Ups

正面とななめから見た様子を再現できるモックアップ。完成したページデザインの仕上げにどうぞ。

iphone7-mock-preview

 

 

MacBook Pro – Sketch Mockup

2016年版の最新MacBook Pro を忠実に再現したモックアップ用テンプレート。

macbook-pro-sketch-mockup

 

 

Sublet Devices

Appleガジェットをシンプルなフラットスタイルで描いた、広い用途に活用できるモックアップ。

subtle-devices

 

 

Apple Devices White Mockups

apple-devices-white-mockups-for-sketch-and-photoshop

 

 

Infographic Elements

infographic-elements

 

 

130 Icons Free Download for Sketch

ウェブ、モバイルアプリ制作に必要なアイコン130個を揃えた万能アイテム。

130-icons-free-download-for-sketch

 

 

FlagKit

世界267カ国の国旗を集めたコレクションで、まとめてあるのでいつでも使いやすい素材。

flags-icons

 

 

50 Colorful City Icons

colorful-city-icons-freepik

 

 

Free Space Ui Kit – Walkthrough

free-space-ui-kit-walkthrough

 

 

Ease UI Component Free Sample

ease-ui-component-free-sample-prev02

 

 

Edd: Landing Page Design for Showcasing Apps

edd_landing_page_sketch_freebies

 

 

Landing Page Mockup

landing-page-mockup-freebie-sketch

 

 

Agency Website

グリッドラインが印象的なミニマルスタイルのウェブページ用テンプレート。

sketch-freebie-agency-website

 

 

Interstellar Home Page UI Theme

宇宙をコンセプトにしたランディングページ用テンプレート。

interstellar-home-ui-kit

 

 

Minimax – Free Magento UI Kit
minimax-light-theme

 

 

Oxygen Strter UI Kit
oxygen-strter-ui-kit

 

 

Bold Blog Homepage Template

be-bold

 

 

 
SilveHype Free Fashion Sketch Template

silveHype - Free Fashion Sketch Template

 

 

Nippy – Free Sketch Landing Page

nippy-free-sketch-landing-page

 

 

Design Studio Mockup Template – Free SKetch

Design Studio Mockup Template - Free SKetch

 

 

Free Personal Landing Page

free-personal-landing-page

 

 

MeshApp – Flat Mobile App Landing Page

meshapp-presentation

 

 

 

Concept Detailepage Freebie

concept-detailpage-freebie

 

 

YOLO Black UI Kit

yolo-black-ui-kit

 

 

Avocode UI Kit

70種類以上のUIデザインを揃えた超太っ腹なフリー素材。Photoshop や XD にも対応しています。

avocode-guacamole-ui-kit

 

 

Hello UI Kit Free Sample

hello-ui-kit

 

 

Fashion App Freebie

fashion-app-preview

 

 

Creastore UI Kit Sample

ショッピングサイト、アプリ向けUIコンポーネントをスクリーン別に収録しています。

creastore-ui-kit-sample

 

 

Grace UI Kit Free Sample

illia-nesterov_grace-ui-free-sample_110217_prev01

 

 

Social App Freebie 2

social-app-freebie-2

 

 

Move Mobile UI Kit

move-mobile-ui-kit

 

 

Minimal UI Kit

minimal-ui-kit

 

 

Scentixxx – Perfume Shop iOS App

scentixx-ios-ecommerce-app-design-ui-ux-dribbble-freebie-download

 

 

Free Mobile UI Kit for Muisc Apps

free-mobile-ui-kit-for-music-apps

 

 

Slides Design Resources

90種類以上、15個のテンプレートを収録し、Sketch用とPhotoshop用ファイルが両方公開されています。

designmodo-slides

 

 

Conversational UI Free Kit

チャット機能を再現したUIキットで、そのままアプリにできるほど高品質。

conversational-ui-free-kit

 

 

Colorful Data Charts

charts-by-paulhershey

 

 

Exchanger Dashboard

国際両替をコンセプトにしたダッシュボード用UIコンポーネント。

exchanger_2x

 

 

Facebook Analytics UI Pack

Faceobook のアナリティクス画面をそのまま完全再現しています。

facebook-analytics-ui-pack

 

 

Sketch Charts and Graphs

charts-freebie-dribbble-800x600

 

 

Windows 10 Project NEON Groove Music UI

windows_10_project_neon_groove_music_ui

 

 

Fresh Market App Design

farmers_app_checkout

 

 

Order Status Page

order_status_dribble

 

adobe-xd
ウェブサイトやアプリのつくり方が多様化するいま、素早くデザインを作成し、ページ遷移など実際の動きまで確認できることが大切になってきていきます。先日、日本語版もリリースされたUXデザ

 

参照元リンク : Best of 2016 : 100 Free Resources for Sketch – Noupe