QOXホームへ

Sketch3を触ってみました

Yuko Hashimoto

Yuko Hashimoto

Skech3というソフトがWEBデザイン界隈では話題らしいです。オランダのBohemian Coding社が開発したベクタードローイングツール、何やらFireworksより使い勝手良いかも?Fireworks開発終了しちゃったし次はこれでしょ、との噂なのですが、

えっ、Fireworks開発終了してたの…そうなの…。

新しいものが少々苦手なのですが、画像の書き出しが便利らしいという一点につられて使ってみました。

sk_page

sketch3のサイト。Mac版オンリーです
Skech3

まずはファイルの準備から

ファイルを新しく作る時やアートボードを挿入する時、用意されたテンプレートから作るとラクです。
どんなものがあるのか見てみました。
sk_webui

テンプレートから新規作成。WebUIを選んでみました。
デバイスごとのサイズでアートボードが用意されます。

sk_iconui

アイコンのUI。
いっぱいあるなあ。

sk_materialui
マテリアルデザインのUIも用意されています。
いっぱいあるなあ…。

iOSのUIテンプレートもありますが、そっちはアートボード一枚に収まってます。

テンプレートは全部でこのくらい

アートボードを作る時に選べるデバイスごとのテンプレート。ちょっと多いのでリンク画像をご覧ください。
sk_artboad
iOS、レスポンシブWeb、マテリアルデザイン、アイコン……

「Paper Sizes」とあるのですが、DTPまでカバーするつもりでしょうか。
プレゼン用資料とかは作りやすいかもしれません。

他にもちょっとしたポイント。

Layout Settings と Grid Settings

View>Canvas>Layout Settingsを使うとグリッドデザインの準備が簡単です。方眼ぽいのはGrid Settings。
sk_layout

使えるリソースたくさん

Sketch App Sourcesのサイトで、ユーザーが作ったSkechファイルをダウンロードしたり、自分で作ったものを公開したりできます。
UIパーツやベクターデータを使わせてもらえるのはありがたい。

プラグイン

Sketchもプラグインが使えるそうです(まだ使ってません)。
紹介している記事はこのあたり。
Sketchを更に便利にパワーアップするプラグインのまとめ
UI制作が捗るSketch 3の便利なプラグインと使い方

自動保存されます

保存を忘れて画面を閉じてもファイルは自動で保存されています。
わー便利!…と思ったのですが、作業途中で気に入らなくなったからと保存せずに終了して再度開いても、元のファイルは戻ってきません。
メニューに別名保存も見当たらないので(複製保存とその場でファイル名変更は可能)、不安な時は複製してから作業することにしました。

UI作ってみました

では早速iPhone6のアートボードを選択してUIっぽいものを作ってみます。

小技が効いててストレスが少ない

sk_all
altキーで中身の要素と同じようにアートボードもどんどん複製できるのは楽しい。
ベクター画像はIllustratorからコピペで持って行けます。Sketch上でもそこそこの編集はできます。
ラスター画像は切り抜くくらいしかできないので別ソフトが必要です。

sk_scale

要素を動かしてる最中にガイドが出るので便利です。
等間隔に配置するのも揃えるのもラックラク。

IllustratorやFireworksと似通った部分が多く、さらにそれらのツールでは歯痒かった所がSketchでは細部までカバーされているように感じました。
Sketch作ってる人たちは相当なアドビユーザーでもあると思う。

そのほかのポイント

ラスター画像を縮小した後で拡大しても綺麗なまま。
シャドウ、インナーシャドウもなめらか。
このへんはFireworksの痒いところがすっきりした感じ。

sk_numberd
地味に便利な機能。テキストをリスト・数字付きリストにできます。
リストのスタイルが多ければ本っ当に助かるんですが。文書量が多いページのカンプとか、パワポ代わりとか。ほんと。
文字周りはFireworksの機能と大体同じ感じです。

Fireworksと比較してしまうのは仕方ない。

期待の画像書き出しタイム

倍率の違う画像が難しい設定なしで一発で書き出しできるぞ!という噂を信じて、やってみます。

要素ごとに書き出し

sk_slice1

選択した要素をスライスとしてそのまま書き出せます。
右下の「Export」パネルで書き出すサイズと形式を設定して…

cat1@1x
cat1@1x.png

cat1@1.5x
cat1@1.5x.png

cat1@2x
cat1@2x.png

3種類書き出せました。
0.5刻みで3倍まで用意されていましたが、自分でサイズを作ることはできるのかな?まだちょっとわかりません。

「Export ○○(レイヤー・書き出しファイル名)」ボタンの左、シェアボタンがついてますね。
メール、メッセージ、Airdrop、フォト、そしてSNSに送信できます。

重なった複数の要素をまとめて選択→書き出ししても、要素ごとにバラバラにしてくれます。背景とアイコンを別に書き出し、とかに使えます。

スライスごとに書き出し

もちろん、範囲を指定してスライスを作ることもできます。
sk_slice2

スライスツールで設定して書き出し。

スライスがグループ化できるのが便利です。

アートボード全体の書き出しも

File>Export Artboads to PDF でアートボードをまとめてPDFに書き出せる(ページ順=レイヤーパネルでの並び順)ので、デザイン提出時に少しラクになります。
アートボードの順序変更もまとめてPDFにするのも、地味に地味に便利です。やっぱスライドや資料作りに良いツールなのでは…。

描画ツールとして

お絵描きツールとしてはどうなの?ということで、ちょっと描いてみました。
おおー、破線も作れるし塗りや線を複数指定できるぞ。
sk_bordertest

Sketch上で描いたPathと外部から読み込んだFill、文字、マスク画像、それぞれ微妙に設定できる項目が違ってちょっととまどったりもしますが、何か用途を考えてこうなってるのかなあ。
テクスチャやフィルタはちょっと少なめでわかり辛いか。

sk_illust
ドロイドくんとミクさんも描けました。
ペンツールが微妙に扱い辛い。

こういう記事も見つけました。製図的なものならアリかも。
はじめてでも出来る!Sketch3でのリアルイラストの作り方を超丁寧に解説してみた

UIのデザインに便利、でも応用範囲は広そう

やはりSketchはUIデザインに特化していて、ページやアートボードの編集から画像(CSSも)書き出しまでサクサク進みます。

そしてこちらのページを見てなるほどと思ったのですが、
Sketch3の使用用途まとめ。こんなことに使えるSketch3!
オフィス系のドキュメントやマニュアル、そしてやはりスライドも作りやすそうです。
エクセル方眼紙とかこれでなんとかできるんじゃないかな!
(ただ、そうした業務範囲でMacを使ってるかですね)

歯車しか描けない僕が Sketch 3 で画面遷移図を描く
こちらも一読。

使える場所は多そうです。

参考サイト

Sketch 3を使う3つの理由と10の魅力
勉強会をきっかけに話題のSketch 3を1週間使ってみた話
Sketch3でこれからデザインする人に使い方のヒントになりそうな操作をまとめてみる
話題のドローイングソフトSketch3の日本語参考サイト、チュートリアルなどのまとめ。
Fireworksの代わりになるか?Sketchでできること、できないこと

Yuko Hashimoto

Yuko Hashimoto デザイナー

デザインって何だろう、と悶々としながら、オシャレさん目指して試行錯誤する日々です。ハト好き。寺社と散歩と時代劇が好きです。気がつくと荷物が多くなるのが悩み。

記事一覧
Go up