SlideShare a Scribd company logo
1 of 11
Download to read offline
Masaaki Komori at Kokemusaz, 20140513
Sketch 3 Basics
※本スライドは勉強会用のものです。多くは口頭で説明しているものであり、参考になるような情報は含まれておりません
• Sketch fundamentals Sketchの基礎
• Artboards, Pages, Templates アートボード、ページ、テンプレート
• Styles and Symbols スタイルとシンボル
• Using plugins プラグインの利用
• Let's try では、やってみましょう
Agenda
Sketchは、いまどきのグラフィックデザイナーのために作られています。
Sketch is built for modern graphic designers.
Fundamentals
Sketchは無限のキャンバスですので、そこに自分が好きなようにアートボードを作ることができます。
Sketch has infinite canvas.
You can draw any artboards as you like.
Artboards
マルチページをサポートしており、ページ1枚あたりにアートボードがいくつあっても構いません。
Supports multiple pages, and any number of artboards per page.
Pages
テンプレートから新規ファイルが作れるので、仕事は速く効率よくおこなえます。
Create new file from template.
Work better, faster.
Templates
Sketchには、シェアード・スタイルとテキスト・スタイル、そしてシンボルの機能があります。まるでIllustratorのようです。
Sketch has shared styles, text styles and Symbols.
It's like Illustrator.
Style and Symbols
Sketchはプラグインをサポートしています。
Sketch supports plugins.
Plugins
さぁ、実際にさわってみましょう
Let's try
Thank you.
This slide made with Sketch 3.
もちろん、このスライドもSketch 3で作られています。

More Related Content

Similar to Sketch 3 Basics at kkmsz

デザイン作業効率化
デザイン作業効率化デザイン作業効率化
デザイン作業効率化功介 沼
 
タンブラー台紙をつくる
タンブラー台紙をつくるタンブラー台紙をつくる
タンブラー台紙をつくるHaruko Kakiuchi
 
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminarAtushi Sugiyama
 
Sketchのライセンスを更新した男の話
Sketchのライセンスを更新した男の話Sketchのライセンスを更新した男の話
Sketchのライセンスを更新した男の話anysense_ss
 
アプリ・サービスのUI/UXのモックアップ(ワイヤフレーム)の簡単な描き方
アプリ・サービスのUI/UXのモックアップ(ワイヤフレーム)の簡単な描き方アプリ・サービスのUI/UXのモックアップ(ワイヤフレーム)の簡単な描き方
アプリ・サービスのUI/UXのモックアップ(ワイヤフレーム)の簡単な描き方Spath School
 
No006-01-Suc3rum-20091021
No006-01-Suc3rum-20091021No006-01-Suc3rum-20091021
No006-01-Suc3rum-20091021Sukusuku Scrum
 
電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ
電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ
電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶYouji Sakai
 
スライドマスターを使って簡単にプレゼン資料を作ろう
スライドマスターを使って簡単にプレゼン資料を作ろうスライドマスターを使って簡単にプレゼン資料を作ろう
スライドマスターを使って簡単にプレゼン資料を作ろうMichiro Sakamoto
 
ABC 第2回スライド
ABC 第2回スライドABC 第2回スライド
ABC 第2回スライドSawada Makoto
 
Make the 3D Wapuu model and printing by the 3D printer.
Make the 3D Wapuu model and printing by the 3D printer.Make the 3D Wapuu model and printing by the 3D printer.
Make the 3D Wapuu model and printing by the 3D printer.Takeshi Kashihara
 
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成Kazuki Akiyama
 
「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)
「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)
「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)swwwitch inc.
 
Sketchで変わるワークフロー
Sketchで変わるワークフローSketchで変わるワークフロー
Sketchで変わるワークフローAsami Yamamoto
 
MySQL Workbench をモデリングツールとして使ってみた
MySQL Workbench をモデリングツールとして使ってみたMySQL Workbench をモデリングツールとして使ってみた
MySQL Workbench をモデリングツールとして使ってみたNorio Nakamura
 

Similar to Sketch 3 Basics at kkmsz (20)

デザイン作業効率化
デザイン作業効率化デザイン作業効率化
デザイン作業効率化
 
タンブラー台紙をつくる
タンブラー台紙をつくるタンブラー台紙をつくる
タンブラー台紙をつくる
 
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
 
Slides mkmk5
Slides mkmk5Slides mkmk5
Slides mkmk5
 
Sketchのライセンスを更新した男の話
Sketchのライセンスを更新した男の話Sketchのライセンスを更新した男の話
Sketchのライセンスを更新した男の話
 
アプリ・サービスのUI/UXのモックアップ(ワイヤフレーム)の簡単な描き方
アプリ・サービスのUI/UXのモックアップ(ワイヤフレーム)の簡単な描き方アプリ・サービスのUI/UXのモックアップ(ワイヤフレーム)の簡単な描き方
アプリ・サービスのUI/UXのモックアップ(ワイヤフレーム)の簡単な描き方
 
cssについて
cssについてcssについて
cssについて
 
No006-01-Suc3rum-20091021
No006-01-Suc3rum-20091021No006-01-Suc3rum-20091021
No006-01-Suc3rum-20091021
 
Test
TestTest
Test
 
Test
TestTest
Test
 
電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ
電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ
電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ
 
スライドマスターを使って簡単にプレゼン資料を作ろう
スライドマスターを使って簡単にプレゼン資料を作ろうスライドマスターを使って簡単にプレゼン資料を作ろう
スライドマスターを使って簡単にプレゼン資料を作ろう
 
Modeling Workshop
Modeling WorkshopModeling Workshop
Modeling Workshop
 
ABC 第2回スライド
ABC 第2回スライドABC 第2回スライド
ABC 第2回スライド
 
Make the 3D Wapuu model and printing by the 3D printer.
Make the 3D Wapuu model and printing by the 3D printer.Make the 3D Wapuu model and printing by the 3D printer.
Make the 3D Wapuu model and printing by the 3D printer.
 
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
 
「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)
「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)
「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)
 
Start Sketch.app
Start Sketch.appStart Sketch.app
Start Sketch.app
 
Sketchで変わるワークフロー
Sketchで変わるワークフローSketchで変わるワークフロー
Sketchで変わるワークフロー
 
MySQL Workbench をモデリングツールとして使ってみた
MySQL Workbench をモデリングツールとして使ってみたMySQL Workbench をモデリングツールとして使ってみた
MySQL Workbench をモデリングツールとして使ってみた
 

More from masaaki komori

コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3masaaki komori
 
InstaVR使ってみた
InstaVR使ってみたInstaVR使ってみた
InstaVR使ってみたmasaaki komori
 
Framerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディングFramerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディングmasaaki komori
 
Prototyping with Sketch
Prototyping with SketchPrototyping with Sketch
Prototyping with Sketchmasaaki komori
 
プロトタイピングツール戦国時代
プロトタイピングツール戦国時代プロトタイピングツール戦国時代
プロトタイピングツール戦国時代masaaki komori
 
Bootstrapではじめる、
Webサイト設計のモダンアプローチ
Bootstrapではじめる、
Webサイト設計のモダンアプローチBootstrapではじめる、
Webサイト設計のモダンアプローチ
Bootstrapではじめる、
Webサイト設計のモダンアプローチmasaaki komori
 
レスポンシブEメールを作ろう
レスポンシブEメールを作ろうレスポンシブEメールを作ろう
レスポンシブEメールを作ろうmasaaki komori
 
Bootstrapはこう使う
Bootstrapはこう使うBootstrapはこう使う
Bootstrapはこう使うmasaaki komori
 
デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作masaaki komori
 
2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67wsmasaaki komori
 
Webデザインと開発の未来
Webデザインと開発の未来Webデザインと開発の未来
Webデザインと開発の未来masaaki komori
 
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成masaaki komori
 
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futureRe:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futuremasaaki komori
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Futuremasaaki komori
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Futuremasaaki komori
 
groundwork-pasona-tech
groundwork-pasona-techgroundwork-pasona-tech
groundwork-pasona-techmasaaki komori
 
インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1masaaki komori
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化masaaki komori
 
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?masaaki komori
 

More from masaaki komori (20)

コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
 
InstaVR使ってみた
InstaVR使ってみたInstaVR使ってみた
InstaVR使ってみた
 
Framerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディングFramerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディング
 
Prototyping with Sketch
Prototyping with SketchPrototyping with Sketch
Prototyping with Sketch
 
プロトタイピングツール戦国時代
プロトタイピングツール戦国時代プロトタイピングツール戦国時代
プロトタイピングツール戦国時代
 
Bootstrapではじめる、
Webサイト設計のモダンアプローチ
Bootstrapではじめる、
Webサイト設計のモダンアプローチBootstrapではじめる、
Webサイト設計のモダンアプローチ
Bootstrapではじめる、
Webサイト設計のモダンアプローチ
 
レスポンシブEメールを作ろう
レスポンシブEメールを作ろうレスポンシブEメールを作ろう
レスポンシブEメールを作ろう
 
Bootstrapはこう使う
Bootstrapはこう使うBootstrapはこう使う
Bootstrapはこう使う
 
デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作
 
2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws
 
Webデザインと開発の未来
Webデザインと開発の未来Webデザインと開発の未来
Webデザインと開発の未来
 
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
 
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futureRe:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
 
groundwork-pasona-tech
groundwork-pasona-techgroundwork-pasona-tech
groundwork-pasona-tech
 
インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
 
Sublime Text 2 Basics
Sublime Text 2 BasicsSublime Text 2 Basics
Sublime Text 2 Basics
 
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
 

Sketch 3 Basics at kkmsz