最近はPhotoshopと並行してSketchでもデザインしています。Sketchは爆速でデザインできると共にコーディングも手早く行うことができるので、短納期案件にも対応することができるすげーヤツです。
Sketchのイケていないところ
そんなスゲーSketchですが、デザインをしていてAdobe系アプリと比べて不便を感じるところがあります。それは文字の扱いです。
Sketchのベースラインシフトはsupとsubが基本
Sketchでベースラインシフトができないんです。厳密にはできるっちゃできるんですが、スタイルをリセットしていないsupタグとsubタグの範囲しかできません。
当サイトのロゴはベースラインシフトで文字を少し躍らせるようなあしらいにしています。もし、Sketchでこのあしらいをしようと思えば文字を分割してあげる必要があります。
リアルタイムのカーニングが苦手
段落のカーニングは全く問題ないのですが、個別のカーニングがSketchは苦手です。ショートカットを使って行う方です。
PhotoshopやIllustratorの操作感に慣れていると、カーニングの遅さが際立ちます。
ショートカットを押さえっぱなしで行わなければまだマシなのですが使い勝手的に疑問が残ります。
テキストのパスの流し込みが扱いにくい
IllustratorやFireworksのようにText on pathでパスにテキストを流し込むことができますが、動作的にちゃんとレンダリングできなかったりして少し扱いづらい印象です。レンダリングできていない場合はオブジェクトを移動させればOKです。
それでもSketchを使う理由
それでもSketchは手放せません。前述のイケてないところを加味しても長所が勝ってしまうからです！
ベースラインシフトも個別のカーニングもWebデザインでそんなに多用するものではありません。テキストを分割するかIllustratorで処理を行ったものをコピペすれば問題ありません！
それに文字の扱いが苦手とは言いましたがSketchにしかない、いかにもWebデザインのことわかってるやん！って機能もあります。
デザインカンプ制作にParagraphが便利すぎる
Sketchにはカーニングとラインハイトの設定の他にParagraphと言う機能があります。これはどういった機能かというとラインハイトとは別に改行をパラグラフにしてしまって指定した数値分余白が入る機能です。
この機能を使うと段落ごとに新たなテキストオブジェクトを作らなくても、一つのオブジェクトで複数の段落をデザインすることができます。
しかもコーディング時にも余白がわかりやすくていい感じです。
文字サイズ変更はテキストオブジェクトの選択で行える
段落の文字サイズのはわざわざテキストモードにしなくてもオブジェクト選択するだけで行えます。これは便利！
数値入力エリアが矢印キーで操作できるので微調整が行いやすい
文字サイズ、ラインハイト、カーニングなど、数値入力エリアがアクティブになっていると矢印キーで操作できるので、微調整が行いやすいです。
現状最速でデザインカンプが制作できるUIツール
Adobe系のWebデザインに使われるアプリ、Photoshop、Illustrator、Fireworksのどれを使うよりもSketchは速くデザインカンプを制作することができます。あくまでも僕的主観になりますが、文字の扱いも短所はありますが、それを上回る長所があります。
つかこの記事作成時点で99$ですよ！開発者のプロ根性を感じてしまうUIデザインツールです。
