ステキなデザインツール Sketch。

こんにちは、デザイン部の永井です。

フェンリルでは主流になってきているデザインツールアプリケーション「Sketch」。

私自身、数年前から気にはしていいたものの触ってもいなかったのですが、3か月ほど前の入社時からメインで使用してみた新米ユーザーとして、感想・見解を記したいと思います。
Sketch を知ってはいるが使っていない方、また、現ユーザーの皆さま方と共感を得られればと思います。

簡単に言うと惚れましたね。（笑）

Sketch のいいところ。

Sketch自体については、ネット上にある先人の方々の情報が充実しているので割愛させていただくとして、たくさんの評価やコメントは下記のようなもの。

• アプリケーションの軽さ
• 導入・学習コストの低さ
• シンボル＆オーバーライドが便利
• 容易なアセット書き出し
• Plugin カスタマイズで効率化

ネガティブな意見を全く耳にせず、「どうなのかな〜？」と思いつつも実際に使ってみると…
まさにそのとおり(・o・)！！
嘘もジョークもはびこる楽しいネット世界に真理がありました。

アプリ本体の機能がシンプルなためか、軽快に起動し動いてくれるので使っていて気持ちいい。
メモリはそれなりに使っているようですが、不意に落ちても「自動保存」（”Time Machine” ライクなバージョン管理）も備えているため、どこまでやったか分からなくなる手痛い “手戻り” も発生しにくくて安心です。（意図せず保存したくない場合は機能オフに。）
Illustrator を使ったことがあれば習得は簡単だと思いますし、PowerPoint に近いような印象もあります。
ワイヤーを作成するディレクターの方にも最適ですね。

書いていくと長くなりそうなので、お気に入り機能を3つ。

地味だが分かりやすいガイド表示

オブジェクトの相対位置が [option] キーを押すだけで表示できる、これはかなりお気に入りな機能。いぶし銀です。

Illustrattor、Photoshop にも “スマートガイド” という似た機能がありますが、移動時にしか表示されなかったり、時折邪魔…。
選択ツールでサイズを測ったりしてコーディング時には面倒でした。これならお手軽です。
また、煩雑かつ大量になりがちなレイヤーも、オンマウスするだけでオブジェクトとレイヤーが同期してハイライト表示されるので、編集対象を探して迷子にならずストレスがなくていいです。

CSS でコントロールしてるような「シンボル：Resizing」

わりと最近のバージョンから追加された機能のようで、これまた素敵。
下記オフィシャル動画を見るだけで機能は理解できるかと思います。UI が最新バージョンと少し違いますが機能に変わりは無いです。

CSS で言うところの「position: absolute; right: xx;」や「background-position: right bottom;」のような表現をデザインツールでできるところに感激です。サイズ変更・修正にも容易に対応できて効率的。

追加プラグインでより便利にフォロー

シンプルが故に物足りない部分は、世のエンジニア有志ご提供のプラグインを追加すればさらに効率アップ！
Electron 系エディタと言われる Atom や Visual Studio Code 、の機能追加に近い感じでしょうか。
フェンリルでも人気のものを含めた主要プラグインを簡単にご紹介。

• Sketch Runner
  プラグインのインストールや実行、シンボルの生成・配置など、キーボードのみでサクサク動いてくれる Sketch 内ランチャー機能プラグイン。必然的にプラグインが増えるのでここから探すのが速い！
• RenameIt
  レイヤー、アートボード名の検索・置換、接頭辞追加や連番入力などと多機能なリネームが可能。変換後のプレビューも表示されるので分かりやすい。
• Craft
  画像、テキストの一括取り込みなどダミーを簡単に挿入できる、プロトタイプ作成に便利な機能がセットになった GUI パネル付きのリッチなプラグイン。
• Sketch Measure
  サイズやカラーなどのガイド作成。 HTML として一括で書き出す機能も。（←これ最高）
• Font Finder
  その名の通りフォントファインダー。一括で探してくれます。
• HSL Color Picker
  HSL（色相・彩度・輝度）のカラーピッカー。(デフォルトは HEX と RGBA しか数値表示がない）

などなど。

先日、弊社エンジニアとデザイナーの意見交換からオリジナルプラグインが生まれるなど、プラグインによる業務効率化もできる素晴らしい動きも。イイですね！コラボレーション！

さらにガンバってね Sketch さん。

イイことばかりとは言い切れない、人間とは欲深いもので、実はもっと進化してほしいと思ったりもしています。

オブジェクト選択時が分かりづらい

特に複数オブジェクトを選択したとき、ページを跨って選択したとき、分かりづらいと感じます。

段落テキストの謎なスペース

Illustrator、Photoshop でも同じことは言えますが、行間分のスペースがテキストエリアに含まれてしまいます。せっかくのガイド表示がもったいない…。

バージョンアップに伴うプラグイン不具合

本体機能では無い宿命ですね…。（これは致し方ない気がします。）

最後に。

良いツール（道具）を使うのは精神衛生的にもいいですし、アウトプット・成果にもつながる大事なことだと思います。
Sketch を讃えていますが、ケース・バイ・ケースで適材適所にツールを選んでいくことも必要です。どんなお仕事でも言えることではないでしょうか？
写真編集は Photoshop を使いますし、イラスト・アイコン制作などは Illustrator で、と併用していくことでしょう。Adobe XD にも期待していたりします。
我々もアプリというツールを制作する上でこれらの経験を活かしながら、道具に振り回されることなくゴールを見据えて取り組んでいきたいですね。

フェンリルの Facebook ページでは、最新トピックをお知らせしています。よろしければいいね！してください！