これからSketchを勉強したい人に向けて Sketchはじめの一歩

Sketch Advent Calendar 2016の23日目の記事です。
Sketchを勉強する機会を強制的に作ろう!と思い、アドベントカレンダーに登録したSketch初心者です。
まだお仕事ではSketchを使ったことはなく、現在は絶賛お勉強中です。

今回はSketchが気になってる、もしくは勉強しようと思ってる、初心者さん向けの内容で書いてみようと思います。

Sketchとは

sketch
ベクター系のグラフィックツールです。
Fireworksが開発終了になり、IllustratorかPhotoshopに移行するか…となったときに救世主として出現。
以前Fireworksを使ってた人は、Sketch好きですって人が多いように思います。

sketch_view
Macの専用アプリで、インターフェースはKeynoteに近いです。
価格は$99で、日本円にして今だと1万円ちょっとくらい。
ライセンスがちょっと変わって、バージョンごとに買い切りという形になったようです。

特徴

・日本語非対応(でも、なんとかなる。)
・軽い
・ピクセル単位
・必要な機能は自分でプラグインを作ろうという文化

得意なこと

  • ページ数が多い情報サイト
  • レスポンシブサイト
  • CSSで表現できる範囲での装飾
  • 作ったもののコード化
  • ワイヤーフレーム・プロトタイプの作成
  • スライスが楽

苦手なこと

  • 文字詰め
  • バナーデザイン
  • ペライチなどの凝ったページ
  • 写真がたくさんあるもの
  • 印刷物などの作成 (PDF書き出しはあり)

勉強方法

学習コストは低めですが、動画や書籍などもあります。
今はバージョンなしのSketchになってますが、以前までの古いバージョンとしてSketch 3があります。
初心者さんが勉強していくのであれば、3のものから始めても大丈夫だと思うので、古いバージョンのものも含め、いろんな勉強法を紹介します。

動画

udemy

私は以前a-blogの勉強会に参加したときに、udemyを教えてもらったので、まずはそこから勉強しました。

Sketch 3 入門 〜アプリやWebデザインに便利!世界で人気のデザインツール〜

有料で通常は3,600円なのですが、講師のいまいさんのブログから行くと半額の1,800円になります。 
Sketch 3 を動画で学べるコンテンツを公開しました

だいたい3、4時間くらいあれば一通り勉強できます。
実際にSketchを動かしながら進んでいった方が覚えも早いので、事前にトライアル版をインストールしておくか、購入してから見るのがおすすめです。

公式

公式にも動画やチュートリアルサイトがいくつか載ってます。
コースによっては無料のもあるので、お金をかけずにみたい人はそちらをどうぞ。
Learn Sketch

書籍

ベースはIllustratorですが、Sketchの章もあります。
SketchだけでなくIllustratorもお使いの方にはおすすめです。

電子書籍 + 動画

Sketch 3の基本。
『Web制作者のためのIllustrator&ベクターデータの教科書』でSketchについて執筆されている窪木さんが書かれている電子書籍です。
電子書籍のみ、もしくは電子書籍+動画版があります。
最終更新日が2016年11月12日でした。

サイト・ブログ

Sketch App Sources

sketch_app_sourcesSketch App Sources
チュートリアルやチップスに加え、アイコンやテンプレートなどが紹介されてます。
Sketchでのイラストの作成のチュートリアルなどもあって見ていて楽しいです。

Adventar

今年のアドベントカレンダーはSketchと、Sketchのプラグインに関するカレンダーと2つあります。

初心者さんであれば、こちらの記事が一通り要点が書かれていて、とても分かりやすいのでオススメです。
初心者向け:これからSketchを使いたい人や既に使っている人のおさらいに! Sketchの使い方のまとめ | Sketch Advent Calendar 2016

Qiita

エンジニアさん向けなところもあってか、QiitaにもSketch記事はいくつかあります。
Sketchタグや2015年にはアドベントカレンダーがありました。

Facebookグループ

FacebookのグループでSketchを検索するといくつかあるようです。
私も日々の情報収集用に参加しています。

あとは、勉強会などでときどきお話を聞く感じですね。
勉強会の後の懇親会やもくもく会などに参加すると、ピンポイントでいろんなことが聞けるのでおすすめです。

プラグイン

プラグインの管理について

プラグインはGitHubにあがっているので、そこからダウンロードした使うのですが、それだとちょっと手間なので、Sketch Toolboxを使うのがおすすめです。
プラグイン探しやインストールやアンインストールが簡単にできます。
sketch_toolbox

おすすめのプラグイン

プラグインはたくさんあるので、デザイナーさん向けのものをいくつかピックアップしました。

  • Sketch Measure
    オブジェクトのサイズや要素間の距離、座標などの情報を書き出せるプラグイン

  • Sketch Commands
    オブジェクトのサイズや位置を指定して描画できるプラグイン

  • Color Contrast Analyser
    選択しているレイヤーと背景のコントラスト比を計って、判定できるプラグイン

  • Align text baseline
    矩形の真ん中にテキストを置くときに、上下中央に配置してくれるプラグイン

  • Dynamic button plugin
    テキストの大きさに合わせてボタンを作成できるプラグイン

  • sketch-data-parser
    Excelの表などでJSONに変換したものを、テキストレイヤーに生成できるプラグイン

他にもCSSやGitをよくさわる人におすすめのプラグインもありますが、もう少し使い込んでからまた別の機会に書いていきたいです。

他のツールとの連携

Sketchは単体よりも他のツールとうまく連携するのがおすすめです。
Sketchを持ってないエンジニアさんに、Sketchのデザインファイルを共有することもできます。

Craft

craftCraft
ダミーテキストや画像の挿入や、Adobe XDでおなじみのリピートグリッドができます。

Zeplin

zeplinZeplin
エンジニアさんにデザインを共有するときに便利なサービス。
スタイルガイドの作成やコメントの挿入などができます。
1プロジェクトであれば無料で使えます。

Avocode

avocodeAvocode
Zeplinに似ていますが、Windows版やLinux版のアプリがあるのが特徴。
Sketchなしで開き、画像のスライスやSVG、CSSなどのパーツを書き出すことができます。また、無料版ではGitHub的な使い方もできるようです。

プロトタイプ

prottやInVisionなどがあります。
どちらも1プロジェクトであれば無料で使えます。

Prott

prottPrott

InVision

invisionInVision


SketchはアプリなどのUIに特化している分、他の部分は弱いところもあるので、PhotoshopやIllustratorなども併用し、それぞれのツールの良いとこ取りをするのがいいかなと思います。
案件によってうまく使い分けていきたいですね。

Pocket