Sketch3 FAQ!Sketch3でデザインをしていて困ったことと解決策

by
Tomoka Moriyama

こんにちは、森山です。 ちょっとドタバタしていて久しぶりのブログ投稿になりました。 今日はSketchネタをご紹介したいと思います。

さて以前のブログでもご紹介させていただきましたが、ウミではホームページのデザインツールとして「Sketch3」を昨年の8月頃より導入しています。 使い始めてはや10ヶ月・・・分からない事が出てくる時もまだ時々ありますが、サクサクとストレス無くデザインが制作できるようになってきました。コーダーさんとのデザイン共有や書き出しにも強いSketchは今では欠かせないデザインツールとなっています。

ウミではそんなSketchを使っていて困ったことや分からなかったことをFAQとして書き溜めてデザイナー間で共有しています。今日はそのFAQの中から皆様のお役にも立ちそうなものをいくつかピックアップしてご紹介したいと思います。

※ あくまで私個人の知る範囲で書かせていただいているため、情報に誤りや不足がある可能性もございます。予めご了承の上お読みいただけますと幸いです。

Q.イラレのように「選択範囲に整列」や「アートボードに整列」を切り替えられないの?

A. 切替えられます!

商品を一覧表示するホームページなど、ホームページをデザインしているとオブジェクトを整列させたい!ということが多々ありますのでWebデザイナーにとって「整列」は欠かせない機能です。 イラレなどとは使い勝手が少し違うので最初は戸惑いますが、SKetch3でもイラレのように「選択範囲に整列」や「アートボードに整列」を切り替えることもできます。 画面右側のインスペクタの整列アイコンでオブジェクトを整列させることができますが、選択しているオブジェクトの数によりその動きは下記のように変わってきます。

【 オブジェクトを1つだけ選択した時 】

オブジェクトを1つしか選択していない時に整列アイコンをクリックすると、標準でアートボードに整列されます。

【 オブジェクトを複数選択した時 】

オブジェクトを複数選択している時に整列アイコンをクリックすると、標準では「選択範囲に整列」となります。複数のオブジェクトをアートボードに整列させたい時は、オブジェクトを選択した状態で「Optionキー」を押してみてください。すると、整列パネルの各アイコンの周囲に枠線が表示されます。これが「アートボードに整列」になっている目印です。この状態でアイコンをクリックすると、複数のオブジェクトを一括でアートボードに整列させることができます。

Sketchの整列機能について

ちなみにイラストレーターでは、「キーオブジェクトに整列」というのができますが、今のところ私の知る限りではSketch3にはその機能は無いように思います。もし何か情報が分かったら追記させていただきたいと思います。

Q. 数値を指定して整列させられる?

A. 標準でもできますが、プラグインがおすすめです。

Illustratorでは標準で「数値を入力して整列」させられますね。この機能は複数のオブジェクトを等間隔で並べたい時にすごく便利です。で、同じようなことをSketchでやりたいと思って整列パネルを探してみても・・それらしきアイコンはありません。

調べてみたところ、SketchではメニューバーのArrenge内にある「Make Grid」という機能で数値入力して整列ができるようです。でも実はこれがかなり操作方法に癖があって分かりづらい... もう少しイラレやFireworksのようにシンプルに整列させる方法はないかとさらに調べてみたところ、プラグインを入れることで解決できることが分かりました。

Sketchのいいところは、標準の機能はシンプルだけど、ユーザーの好みに合わせて豊富なプラグインから好きなものをチョイスすることができることですね! 私はこの「数値を入力して整列」というのを非常によく使いますので下記のプラグインを入れています。

sketchdistributor

https://github.com/pez/sketchdistributor

Q. Sketchで作ったデザインをIllustratorやPhotoshopに書き出せないの?

A. できないと思われますが、手動でIllustratorへのコピペは可能です。

弊社で作成したデザインファイルをお客様側で編集されたいというご要望が時々あります。Sketchはまだ日本では扱われている方は少ないので、そんな時はたいてい「PhotoshopかIllustratorで編集したいんやけど・・・」っておっしゃられることが多いです。つい先日もそういったご要望があり、Sketchで作成したデザインファイルをpsdやaiに書き出せないかと調べていたのですが、レイヤーを保持したままファイルを一気に書き出す方法はとうとう見つけられませんでした。レイヤー状態を保持したままai(またはpsd)ファイルにするのは無理かと諦めていたのですが、ふとSketch↔イラレ間であれば編集データを保持したままファイル間でコピペができることを思い出し、変換したいデータをページまるごとコピーして手動でイラストレーターへペーストするという方法を思いつき、やってみました。すると無事にレイヤーを保持した状態でSketchのデータをイラストレーターに移すことができました!

グラデーション部分の情報は全て破棄されてしまいましたが、レイヤー情報はもちろん、テキストデータやベクターデータも無事に編集可能な状態で移せていました。ちょっと面倒ではありますが、ひとつの解決策としてご紹介させていただきます。

もしかして私の調査不足で、本当はファイルごと一括で書き出す方法があるのかもしれませんが・・ご存知の方がいらっしゃいましたらぜひ教えていただけると嬉しいです ^^; 何よりデザインソフトをSketch3へ切り替えてくれるデザイン会社さんが増えてくれることを切に願う今日この頃です。

Q. シアーはできますか?

A. はい、できます。

Illustratorのようにオブジェクトを斜めに変形する「シアー」というのがありますが、あれと同じことがSketchでも可能です。シアーしたいオブジェクトを選択した状態で、画面上部のツールバーの「Transform」を選択します。オブジェクトを囲む枠の上部中央の□をシアーしたい方向へドラッグすればOKです。

ツールバーの他、メニューバーの Layer > Transform > Transformc Layer から、または ⌘ + T のショートカットでも可能です。

Sketchのシアー・Transform機能について

Q. 文字を斜体にできますか?

A. 一応、できます。

斜体にしたいテキスト部分を選択した状態で、メニューの Type > Italic、またはショートカット ⌘I で斜体にすることができます。ちなみに Bold したい時は、⌘B、アンダーラインを引きたい時は ⌘U で適応できます。

ただし、冒頭で「一応」とさせていただいたのには訳がありまして、残念ながらフォントデータにItalicが含まれているものしか斜体にできないようです。つまり、日本語はほぼ全滅(斜体にできない)と考えていただいて間違いないかと思います。

もしどうしても日本語を斜体にしたいという場合は、今のところ私の知る限りでは、文字をアウトライン化した後に上でご紹介したシアーで変形させるしか方法が無いようです。ただしその場合はテキストデータとして扱えなくなってしまいますのでご注意ください。


他にもまだまだご紹介したいFAQがありますが、あまりに長くなりそうなので本日はこのへんでとどめておきます。

紹介している中で「これはできない」というものもありましたが、Sketch3の良い所はまだまだ発展途上であるところですので、今後改善されていく可能性が大いにあります。 私が使い始めた昨年8月からの10ヶ月間でも、最初はできなくてもどかしい思いをしたけどアップデートされて今はできるようになったというものがたくさんあります。

また折を見てSketch3のチップスを引き続きご紹介していければと思います。 最後までお読み頂きありがとうございました。

CONTACT

制作に関するご相談は下記までお気軽にお問い合せ下さい。

TEL:077-572-7155
[ 受付時間10:00-19:00 日祝休 ]
Shiga Office
〒520-0832滋賀県大津市粟津町2-63 CS石山ビル2F
TEL 077-572-7155
Tokyo Office
〒150-0002東京都渋谷区渋谷1-17-1 TOC第2ビル3F
TEL 03-6808-2878