Skech3というソフトがWEBデザイン界隈では話題らしいです。オランダのBohemian Coding社が開発したベクタードローイングツール、何やらFireworksより使い勝手良いかも？Fireworks開発終了しちゃったし次はこれでしょ、との噂なのですが、
えっ、Fireworks開発終了してたの…そうなの…。
新しいものが少々苦手なのですが、画像の書き出しが便利らしいという一点につられて使ってみました。
sketch3のサイト。Mac版オンリーです
Skech3
目次
ファイルを新しく作る時やアートボードを挿入する時、用意されたテンプレートから作るとラクです。
どんなものがあるのか見てみました。
テンプレートから新規作成。WebUIを選んでみました。
デバイスごとのサイズでアートボードが用意されます。
アイコンのUI。
いっぱいあるなあ。
マテリアルデザインのUIも用意されています。
いっぱいあるなあ…。
iOSのUIテンプレートもありますが、そっちはアートボード一枚に収まってます。
アートボードを作る時に選べるデバイスごとのテンプレート。ちょっと多いのでリンク画像をご覧ください。
iOS、レスポンシブWeb、マテリアルデザイン、アイコン……
「Paper Sizes」とあるのですが、DTPまでカバーするつもりでしょうか。
プレゼン用資料とかは作りやすいかもしれません。
他にもちょっとしたポイント。
View＞Canvas＞Layout Settingsを使うとグリッドデザインの準備が簡単です。方眼ぽいのはGrid Settings。
Sketch App Sourcesのサイトで、ユーザーが作ったSkechファイルをダウンロードしたり、自分で作ったものを公開したりできます。
UIパーツやベクターデータを使わせてもらえるのはありがたい。
Sketchもプラグインが使えるそうです（まだ使ってません）。
紹介している記事はこのあたり。
Sketchを更に便利にパワーアップするプラグインのまとめ
UI制作が捗るSketch 3の便利なプラグインと使い方
保存を忘れて画面を閉じてもファイルは自動で保存されています。
わー便利！…と思ったのですが、作業途中で気に入らなくなったからと保存せずに終了して再度開いても、元のファイルは戻ってきません。
メニューに別名保存も見当たらないので（複製保存とその場でファイル名変更は可能）、不安な時は複製してから作業することにしました。
では早速iPhone6のアートボードを選択してUIっぽいものを作ってみます。
altキーで中身の要素と同じようにアートボードもどんどん複製できるのは楽しい。
ベクター画像はIllustratorからコピペで持って行けます。Sketch上でもそこそこの編集はできます。
ラスター画像は切り抜くくらいしかできないので別ソフトが必要です。
要素を動かしてる最中にガイドが出るので便利です。
等間隔に配置するのも揃えるのもラックラク。
IllustratorやFireworksと似通った部分が多く、さらにそれらのツールでは歯痒かった所がSketchでは細部までカバーされているように感じました。
Sketch作ってる人たちは相当なアドビユーザーでもあると思う。
ラスター画像を縮小した後で拡大しても綺麗なまま。
シャドウ、インナーシャドウもなめらか。
このへんはFireworksの痒いところがすっきりした感じ。
地味に便利な機能。テキストをリスト・数字付きリストにできます。
リストのスタイルが多ければ本っ当に助かるんですが。文書量が多いページのカンプとか、パワポ代わりとか。ほんと。
文字周りはFireworksの機能と大体同じ感じです。
Fireworksと比較してしまうのは仕方ない。
倍率の違う画像が難しい設定なしで一発で書き出しできるぞ！という噂を信じて、やってみます。
選択した要素をスライスとしてそのまま書き出せます。
右下の「Export」パネルで書き出すサイズと形式を設定して…
cat1@1x.png
cat1@1.5x.png
cat1@2x.png
3種類書き出せました。
0.5刻みで3倍まで用意されていましたが、自分でサイズを作ることはできるのかな？まだちょっとわかりません。
「Export ○○（レイヤー・書き出しファイル名）」ボタンの左、シェアボタンがついてますね。
メール、メッセージ、Airdrop、フォト、そしてSNSに送信できます。
重なった複数の要素をまとめて選択→書き出ししても、要素ごとにバラバラにしてくれます。背景とアイコンを別に書き出し、とかに使えます。
もちろん、範囲を指定してスライスを作ることもできます。
スライスツールで設定して書き出し。
スライスがグループ化できるのが便利です。
File＞Export Artboads to PDF でアートボードをまとめてPDFに書き出せる（ページ順＝レイヤーパネルでの並び順）ので、デザイン提出時に少しラクになります。
アートボードの順序変更もまとめてPDFにするのも、地味に地味に便利です。やっぱスライドや資料作りに良いツールなのでは…。
お絵描きツールとしてはどうなの？ということで、ちょっと描いてみました。
おおー、破線も作れるし塗りや線を複数指定できるぞ。
Sketch上で描いたPathと外部から読み込んだFill、文字、マスク画像、それぞれ微妙に設定できる項目が違ってちょっととまどったりもしますが、何か用途を考えてこうなってるのかなあ。
テクスチャやフィルタはちょっと少なめでわかり辛いか。
ドロイドくんとミクさんも描けました。
ペンツールが微妙に扱い辛い。
こういう記事も見つけました。製図的なものならアリかも。
はじめてでも出来る！Sketch3でのリアルイラストの作り方を超丁寧に解説してみた
やはりSketchはUIデザインに特化していて、ページやアートボードの編集から画像（CSSも）書き出しまでサクサク進みます。
そしてこちらのページを見てなるほどと思ったのですが、
Sketch3の使用用途まとめ。こんなことに使えるSketch3!
オフィス系のドキュメントやマニュアル、そしてやはりスライドも作りやすそうです。
エクセル方眼紙とかこれでなんとかできるんじゃないかな！
（ただ、そうした業務範囲でMacを使ってるかですね）
歯車しか描けない僕が Sketch 3 で画面遷移図を描く
こちらも一読。
使える場所は多そうです。
Sketch 3を使う3つの理由と10の魅力
勉強会をきっかけに話題のSketch 3を1週間使ってみた話
Sketch3でこれからデザインする人に使い方のヒントになりそうな操作をまとめてみる
話題のドローイングソフトSketch3の日本語参考サイト、チュートリアルなどのまとめ。
Fireworksの代わりになるか？Sketchでできること、できないこと
