Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Start Sketch.app 
Sketch.appをわりとガチで布教する会
Profile 
Shinichi kogiso 
@kgsi 
始まりはデザイナー(?)今は何でも屋・情報屋。 
最近はフロントエンド界隈をウォッチ中。 
いろいろ教えてください。
About Sketch 
http://bohemiancoding.com/sketch/
About Sketch 
次世代のWeb制作ツール 
Fireworksがアップデートしない、と 
通達があった前後から脚光を浴びてきたアプリ 
現在のVerは3.2 
http://bohemiancoding.com/sketch/
採用企業一例
What's difference? 
で、従来のツールとなにが違うの?
・アートボードの複数作成が可能 
・Symbolの作成 
・使いやすいグリッド機能 
・パーツごとに書き出し可能なスライス機能 
・スクリプトによる拡張 
・Sketch Mirrorを使ったプレビュー 
etc…
Sketch Fireworks 
Photoshop 
スライスレイヤーから 
スライススライス 
ページ機能 
ありありなし 
ありなしなし 
あり※1 ありあり※2 
ありなしなし 
なしなしあり 
複数 
アートボード 
シンボル 
C...
Let’s try! 
実際に操作してみます
・アートボードの作成 
・アートボードの複製 
・Symbolの作成 
・グリッド機能 
・各種スタイル 
・スライス機能 
・グループ化 
Let’s try!
Technic 
より使いこなすためのテクニック
Technic - Tool 
Sketch Mirror 
リアルタイムにアートボードを 
iPhoneで確認できるツール 
https://itunes.apple.com/us/app/sketch-mirror/ 
id67729695...
Technic - Plugin 
・sketch-commands 
https://github.com/bomberstudios/sketch-commands 
・Content-generator-sketch-plugin 
ht...
他にも便利なツールや 
技術が沢山!Sketchは盛り上がってる! 
・sketchappsources 
http://www.sketchappsources.com/ 
・Content-generator-sketch-plugin 
...
Drawback 
Sketchの欠点
・バグが多い(最近は多少よくなってきた) 
・日本語のタイポグラフィは弱い 
 (3でだいぶ改善?) 
・大量のコンテンツを配置すると、動作が 
 重たくなる傾向がある 
・ビットマップ処理は不得意。 
 Illustratorのように、画像処...
Sketchは、いわゆる 
オールインワンソフトではない。 
適材適所な使い方をしよう。
Summary 
Sketchの使いどころまとめ
Summary - Web site 
・プレンテキストで作ることを前提にした 
 サイトには最適 
・細部にこだわりが必要で、日本語の多用、 
 ビットマップなデザインには向いていない 
・WFや遷移図を作るのにも向いている
Summary - APP & SMT 
・機能や使い勝手から判断するに、PCサイト 
よりもアプリやスマホサイトに向いている 
・アートボードの複数編集機能は有用。 
 特に、Sketch Mirrorと組み合わせた時の 
 使い勝手は最高 ...
でも、PhotoshopやFIreworksから 
Sketchにする理由って?覚えるの大変だし、 
そもそもそんな普及していないでしょ? 
使えなきゃ駄目?
従来のようなPCサイトのみをターゲットとした 
デザインから、様々なデバイスへの最適化、 
対応を求められている。 
Sketchはそれに対しての 
一つの答え。
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

Start Sketch.app

6,020 views

Published on

e-bird社内勉強会のために制作した、Sketch.app布教用スライドです。

Published in: Design
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/2F4cEJi ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❤❤❤ http://bit.ly/2F4cEJi ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Download or read that Ebooks here ... ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Start Sketch.app

  1. 1. Start Sketch.app Sketch.appをわりとガチで布教する会
  2. 2. Profile Shinichi kogiso @kgsi 始まりはデザイナー(?)今は何でも屋・情報屋。 最近はフロントエンド界隈をウォッチ中。 いろいろ教えてください。
  3. 3. About Sketch http://bohemiancoding.com/sketch/
  4. 4. About Sketch 次世代のWeb制作ツール Fireworksがアップデートしない、と 通達があった前後から脚光を浴びてきたアプリ 現在のVerは3.2 http://bohemiancoding.com/sketch/
  5. 5. 採用企業一例
  6. 6. What's difference? で、従来のツールとなにが違うの?
  7. 7. ・アートボードの複数作成が可能 ・Symbolの作成 ・使いやすいグリッド機能 ・パーツごとに書き出し可能なスライス機能 ・スクリプトによる拡張 ・Sketch Mirrorを使ったプレビュー etc…
  8. 8. Sketch Fireworks Photoshop スライスレイヤーから スライススライス ページ機能 ありありなし ありなしなし あり※1 ありあり※2 ありなしなし なしなしあり 複数 アートボード シンボル CSS出力 CMYK対応 ※1 Fireworksのように、シンボルごとにサイズを変更するなどはできない ※2 スマートオブジェクトが相当
  9. 9. Let’s try! 実際に操作してみます
  10. 10. ・アートボードの作成 ・アートボードの複製 ・Symbolの作成 ・グリッド機能 ・各種スタイル ・スライス機能 ・グループ化 Let’s try!
  11. 11. Technic より使いこなすためのテクニック
  12. 12. Technic - Tool Sketch Mirror リアルタイムにアートボードを iPhoneで確認できるツール https://itunes.apple.com/us/app/sketch-mirror/ id677296955?mt=8 ZEPLIN アートボード上のオブジェクトの値を コーディング用にコピペできるツール https://zeplin.io/
  13. 13. Technic - Plugin ・sketch-commands https://github.com/bomberstudios/sketch-commands ・Content-generator-sketch-plugin https://github.com/timuric/Content-generator-sketch- plugin ・gulp-sketch https://github.com/cognitom/gulp-sketch
  14. 14. 他にも便利なツールや 技術が沢山!Sketchは盛り上がってる! ・sketchappsources http://www.sketchappsources.com/ ・Content-generator-sketch-plugin https://github.com/sketchplugins/plugin-directory ・Installed Sketch Plugins http://www.mkdown.com/ccfa37b1bf412aca28c8
  15. 15. Drawback Sketchの欠点
  16. 16. ・バグが多い(最近は多少よくなってきた) ・日本語のタイポグラフィは弱い  (3でだいぶ改善?) ・大量のコンテンツを配置すると、動作が  重たくなる傾向がある ・ビットマップ処理は不得意。  Illustratorのように、画像処理は  他ソフトに任せる
  17. 17. Sketchは、いわゆる オールインワンソフトではない。 適材適所な使い方をしよう。
  18. 18. Summary Sketchの使いどころまとめ
  19. 19. Summary - Web site ・プレンテキストで作ることを前提にした  サイトには最適 ・細部にこだわりが必要で、日本語の多用、  ビットマップなデザインには向いていない ・WFや遷移図を作るのにも向いている
  20. 20. Summary - APP & SMT ・機能や使い勝手から判断するに、PCサイト よりもアプリやスマホサイトに向いている ・アートボードの複数編集機能は有用。  特に、Sketch Mirrorと組み合わせた時の  使い勝手は最高 ・アプリのアイコンなど、同じデザインで  複数サイズが必要な場合にも力を発揮
  21. 21. でも、PhotoshopやFIreworksから Sketchにする理由って?覚えるの大変だし、 そもそもそんな普及していないでしょ? 使えなきゃ駄目?
  22. 22. 従来のようなPCサイトのみをターゲットとした デザインから、様々なデバイスへの最適化、 対応を求められている。 Sketchはそれに対しての 一つの答え。
  23. 23. ご清聴ありがとうございました。

×