Sketch3、ここがイヤ

毎日、長女に悪態をつかれながら保育園に送っている池島です。長女の送迎もあと4ヶ月と思うと、時の流れの早さを感じつつも、残りの月日を大切に過ごそうと思えてきます。

現在、弊社コーポレートサイトのリニューアルに取り組んでいます。
デザインカンプの作成に、Sketch3を使っていますが、使い込んでいくうちに、不便な点、使いにくい点などが見えてきました。

現時点での気付いた点と、その対応策を書いておこうと思います。

和文フォントの行間がおかしい

有名なバグですね。開発元でも把握していて、修正中のようですが、いつ直るのかわかりません。

対応策

• とりあえず、見た目が近い欧文フォントでダミーテキストを作っておく。
• Photoshopなどで、正しい行間のテキスト画像を作って貼り、それに合わせて調整。
• 気にしない。大まかに作っておいて、コーディング時になんとかする。

クライアント様にデザインをお見せしないといけない、という場合は、2番目が無難かな〜と思います。
何にしても、致命的なので、早く直して欲しいです。

レイヤーグループに入っているオブジェクトを、ダイレクトで選択できない

まずは一番上のグループが選択されてしまいます。ダブルクリックで下のグループに移動していって、何度目かにようやく目的のオブジェクトにたどり着きます。
他のレイヤーグループが上にあると、いつまでたっても選択できません・・・。

対応策

• オブジェクトを、レイヤーリストから選択するようにする。
• プラグインとかショートカットがあったら教えてください。

イラストをIllustratorからコピペすると、変なマスクレイヤーが足されていることがある

Illustartorで作ったイラストなどをコピペで取り込むと、レイヤーグループとして追加されます。その中に、新規でマスクオブジェクトが生成されていることがあります。
レイヤーが深くなったり、編集するときに邪魔です。

対応策

• イラストを、最初からSketch上で作成する。
• コピペする前に、Illustrator上でできるだけシンプルな構成にしておく。
• Sketch上で同じオブジェクトを複数使うときは、Illustratorからではなく、Sketchにすでにあるオブジェクトをコピペする。

オブジェクトを移動させたとき、意図しないところにスナップすることがある

オブジェクトを平行移動させたく、shiftを押しながら移動させているときに、無関係のオブジェクトなどにスナップして、ずれてしまうことがあります。

対応策

• マウスを使って移動せず、カーソルキーを使う。
• 邪魔をするオブジェクトは、一旦非表示にする。

ラインやボーダーが扱いにくい

ラインを引くときに、以下のような点が気になっています。

• ラインを引くとき、ガイドにスナップしない
• 特にラインの太さが1pxのとき、位置（X,Y）の数値が0.5刻み（xx.5）でないとぼやける
• 長さも0.5刻み（xx.5）になる

ラインの中心が基準になっているのはわかりますが、左上基準じゃないとわかりにくいです！

対応策

• ラインオブジェクトを使わず、長方形オブジェクトを使う。
• 慣れる。

写真をいじれるようになって欲しい

Photoshopレベルまではなくてもいいので、切り抜きや色調補正程度はできたらいいなあ。

対応策

• いつかそんな日が来るときまで、Photoshopでレタッチしてから取り込む。

レイヤー非表示ボタンはあるが、ロックボタンはないのでメニューから選択しないといけない

下のレイヤーを編集したいから、ちょっとロックしておきたい、というとき、メニューを開いて“Lock Layer”を選ぶのが面倒に感じます。

対応策

特になし。プラグインがあったり、今後出たりするのでしょうか。

フォントをボールドやイタリックにできない

HTMLで頻繁に用いられる、ボールドやイタリックなどのオプションがありません。

対応策

• フォントが元々持っているウエイトのバリエーションを利用する。
• フォントにバリエーションがない場合は、同じ文字を重ねてボールドに見せたり、注釈を入れるなどして暫定対応。

まとめ

思いつくままに書いてみましたが、まだまだ出てきそうだな、と思います。
しかし、これらの欠点を受け入れてでも使う価値があるツールだと実感しています。
書き出しや共有など、まだあまり使っていない機能やプラグインもたくさんありますので、もっと使いこなして業務効率を上げていきたいです。

また使っていくうちに気になることが出てきたら、取り上げてみたいと思います。
間違いや、他の解決策などありましたら、教えていただけますと助かります。

Sketchを活用したモックアップやUI設計などをご検討の企業様は、是非MMMにご相談下さいませ！

デロイト トーマツ ウェブサービス株式会社(DWS)

デロイト トーマツ ウェブサービス株式会社はアマゾン ウェブ サービス（AWS）に 専門性や実績を認定された公式パートナーです。