Sketch触って色々やってみようの巻レポ(マニュアル付き)

Publish2013/05/15(水)

昨日うちの事務所で「Sketch触って色々やってみようの巻」と題してSketch.appの勉強会をしてみました。
15時くらいからまったりしつつ実際にアプリをさわって、「こんな事ができた」「こういうときどうしたらいいですかね?」というような感じでやったのですが、やはり色々な意見や発見などがあり非常に有意義でした。
せっかくなので簡易マニュアルくらいにまとめてみようとおもいます。

Sketch.appについては他のブログなんかで概要説明されてるので割愛します。
ではお題目を。

  1. グリッド
  2. アートボード
  3. テンプレート
  4. ツールバー
  5. 書き出し
  6. ルーラー
  7. リンク
  8. プリセット関連
  9. マスク
  10. ガイド
  11. カーニング
  12. キャンバスサイズ
  13. Rotate copies
  14. 強制終了しても元に戻る。
  15. CSSの書き出し
  16. 整列
  17. まとめ

グリッド

Sketchではガイドを引いたりルーラーを引いたりするのと同じようにグリッドでベースを作ることができます。
一つ一つのブロックサイズから決めていけるのでグリッドデザインが作りやすくなっています。

View → Show Gridで表示できます。
View → Show Gridで表示できます。

設定は簡単で、View → Gridsettingsでlayoutに変更しましょう。

設定は簡単で、View → Gridsettingsでlayoutに変更しましょう。

初期設定でSquareになっているのでLayoutに変更します。
設定は簡単で、View → Gridsettingsでlayoutに変更しましょう。

アートボード

メニューからアイコンをクリックするとアートボードモードになります。
Sketchではアートボードとエクスポートは普段の作業領域と違ったそれぞれのモードになります。
最初ちょっとこの感覚分かりにくいですがなれたら今がどのモードかは見たらすぐ分かるようになります。

これでアートボードモード
これでアートボードモードになってます。アイコンの様子でわかりますね。

で、ここから自分の指定したサイズでアートボードを作ります。
Fwでいうところのキャンバスみたいな感じに近いかと思います。

アートボードを作成して名前をつける
アートボードを作成して名前をつける

+をクリックするとアートボードが保存される
+をクリックするとアートボードが保存される

保存したアートボードはクリックするとどんどん複製できる
保存したアートボードはクリックするとどんどん複製できる

アートボードは自分でよく使うサイズを登録したり複製したりがとっても簡単です。
クリックだけでどんどんアートボードが増えていくのはやってみると結構気持ちがいいです。

あと、細かいところですがオブジェクトをアートボード間で移動させた場合には、レイヤーはアートボードに格納されます。
アートボード毎でのオブジェクト管理が自動的に行われるのはすごく便利です。

yokoにあったオブジェクトが…
yokoにあったオブジェクトが…

yoko2に移動しています!
yoko2に移動しています!

テンプレート

Sketchのテンプレート機能はかなり強力です。
自分で作ったテンプレートから開いたり、元からあるiOS用なんかのテンプレを使ったりできます。

既存のテンプレから開く場合は、File → New From Templateで開きます。
既存のテンプレから開く場合は、File → New From Templateで開きます。

自作テンプレートの保存は、File → Save as Templateで保存します。
自作テンプレートの保存は、File → Save as Templateで保存します。

ここで注意が必要なのは保存したテンプレートは当然ですがインストールしたマシンのみで適用されます。
違う環境で作業を行うときなどに「テンプレートがない!」っててんぱらないようにDropboxなんかにテンプレート用の元ファイルを保存しておけば使い回しが非常に便利になります。

ツールバー

Skwtchのデフォルトのツールバーは実は隠れているアイテムがあったりして全部が見えているわけではありません。
表示をカスタムする事で自分好みの環境を設定することができるので、よく使うものとかを分かりやすい配置で対応するといいかと思います。
ちなみに勉強会の時はみんながMacbookだったのですが、トラックパッドだと横に矢印がついてる系は深いクリックしないと反応しません。
ここには注意が必要かと。

View → Custmize Toolbar から要素をドラッグして設定
View → Custmize Toolbar から要素をドラッグして設定

書き出し

Sketchの強力な機能にファイルの書き出しがあります。試用版の時はPDFのみにしか書き出せませんが、購入後はExportから6種類に書き出せます。
svgでの書き出しがイラレと互換性があり、ベクターファイルへの互換性があります。
また、よく知られているように@2xでの書き出しも付いているので、Retina対応の時とかには重宝すると思います。

Fwを使っていた人の場合はスライスの設定がめちゃ重要って思うと思いますが、Sketchでもエクスポートモード時にスライスを設定できます。
名前の管理ももちろんできますし、Fwにはない設定範囲の選択項目などより柔軟に書き出しが行えます。

エクスポートモードに変更すると書き出し用のレイヤーが表示される
エクスポートモードに変更すると書き出し用のレイヤーが表示される。
Trim tranceparent pixelsにチェックを入れると書き出しレイヤーの中のオブジェクトサイズを自動で検出してくれて便利。

書き出しはこの6種類
書き出しはこの6種類。

追記:画像の書き出し時にFwのように一気に全てのレイヤーを書き出すこともできます。
それぞれのレイヤーに対して設定ができるのでFwのスライス管理とかなり似た感じになっています。
書き出したときのファイルサイズは同条件のpngで比べて見たところ1.2倍ほどSketchの方が重たかったです。
jpgとか他のサイズについては未検証です。

ルーラー

作業時にルーラーを表示して作業効率アップしたいっていう人も多いと思いますが、もちろんできます。
ただ、ワンクリックで戻せない。0に戻せない。
これは次回のバージョンで改善されるって英語サイトに書いてあるよって参加者の一人が見つけてくれたので、バージョンアップに期待しましょう。

View → Show Rulerでルーラーを表示する。
View → Show Rulerでルーラーを表示する。

リンク

オブジェクト要素のスタイルはリンク機能でまとめて管理することができます。
例えば配置してある複数個のボタンを一回の作業で全てを一気に変更するなんていう事ができます。
ただ、プリセットでリンクの設定自体を変更なんかができなかったりするので、挙動は実際にさわって確認してもらうのがいいかと思います。
口で説明するのは難しいですが、実際にやってみると腑に落ちると思います。

オブジェクトを選択し、+をクリックするとリンクに追加される。
オブジェクトを選択し、+をクリックするとリンクに追加される。他のオブジェクトをリンクさせる場合は、オブジェクトを選択して登録したリンクの部分をクリックすると外側に枠が付いてリンクしたことが分かります。

リンクされている要素の色を変更するとリンクしたオブジェクトの色が一気に変更になる。
リンクされている要素の色を変更するとリンクしたオブジェクトの色が一気に変更になる。

プリセット関連

自分で作ったスタイルをプリセットとして保存、登録しておくことができます。
よく使うデザインのスタイルをワンクリックでオブジェクトに適用させることができるので、かなり便利ですね。
文字色だけとかであればプリセットよりもカラー設定の方がいいかもしれません。
その辺は個人の好みに分かれる部分だと思います。

スタイルまとめての場合は、StlyePresetsに保存する。画面の左下にある方の+を押すと登録される
スタイルまとめての場合は、StlyePresetsに保存する。画面の左下にある方の+を押すと登録される。

色のみの登録の場合はカラーパレットに登録する。カラーパレットは画面右側でオブジェクト選択時に出てくるのでその時に+を押すと登録される。
色のみの登録の場合はカラーパレットに登録する。カラーパレットは画面右側でオブジェクト選択時に出てくるのでその時に+を押すと登録される。

マスク

埋め込んだ画像にマスクをかけるっていうのも、もちろんできますよ。
サイドのレイヤーを右クリックで「Use as Mask」からマスクをかけることができます。
ここで注意が必要なのはマスクがかかる順番です。
マスク設定のあるレイヤーの上にあるレイヤーにマスクが適用されます。
それはいいんですが、一つ上だけじゃなくて全部にかかってきます。
なので、マスクかけてるレイヤーとマスクかけたいレイヤーのみを選択して「Ctl+G」でグループ化すればその上のレイヤーはマスク対象外になります。

マスクをかける要素と画像を用意します。
マスクをかける要素と画像を用意します。

レイヤーを右クリックで「Use as Mask」
レイヤーを右クリックで「Use as Mask」

きれいにマスクがかかりました。
きれいにマスクがかかりました。
かかったマスク内の画像はマスクを解除しない状態で拡大縮小が行えるので非常に便利です。

ちなみにレイヤーのフォルダ管理はグループで管理する感じになります。
グループ化したらフォルダアイコンっぽいのでまとまるのでそこをリネームして分かりやすいように管理します。
イメージでいうとiPhoneのアプリをドラッグしてアプリに乗っけたらフォルダができるあんな感じです。

ガイド

ルーラーだけじゃなくてもちろんガイドも引けます。
ただ、ガイドの位置変更がルーラー上にあるかぶっている部分からじゃないと無理というのが少しいけてません。
Fwのように数値でガイドの位置を指定することもできません。
自分でドラッグするのみです。
ここはちょっと本当にいけてないので、次に改善して欲しい点ではあります。

この赤い線がガイド。ルーラー上でした移動できない…。ガイド作成はルーラー上でダブルクリックです。
この赤い線がガイド。ルーラー上でした移動できない…。ガイド作成はルーラー上でダブルクリックです。

カーニング

オブジェクト間の距離はopt押しながら選択することで数値が表示されます。
数値で分かるので微調整がしやすくて確認が容易なのは嬉しいポイントです。

キャンバスサイズ

Sketchのキャンバスはspaceキーを押しながらだったり、マジックマウスの上下の動きなんかでどんどん伸びていきます。
キャンバスサイズに限度がないらしいので大きなキャンバスで思いっきりデザインができますね。
単純にアイコンとかのファイルの管理なんかも一つのファイルで済んだりするので、かなり便利じゃないでしょうか。
後は気にするのはファイルサイズくらいですかね。

Rotate copies

機能的に面白いなと思ったのが回転して複製できる「Rotate copies」。
指定したオブジェクトを指定した個数円にそう形で複製します。
これも試しにやってみるとすごく爽快です。
実用的考えるとそういうのってどうかなと思いますが、例えばPathのクリックした後に出てくる円のようなデザインはこれで一瞬でできますね。
他にも使い道は自分のアイデア次第でなんとでもなりそうかなと思います。

オブジェクトを選択し、Edit → Paths → Rotate copiesをクリック
オブジェクトを選択し、Edit → Paths → Rotate copiesをクリック

何個コピーするのかを決める
何個コピーするのかを決める

6個やったらこんな感じになった
6個やったらこんな感じになった

強制終了しても元に戻る。

Sketchはいきなり落ちても大丈夫です。
強制終了させても復帰後の画面ではストップする前の作業分のデータからはじまります。
上で紹介した「Rotate copies」でどれだけの処理できるかなと試しまして、9999個分複製するっていうドSな指示出したらさすがに止まりました。
で、強制終了させてもっかい起動させると9999回複製する前の状態で起動しました。
いきなり落ちても大丈夫っていうのは、作業をする側にはすごく便利かなと思います。

CSS書き出し

Sketchでは6種類の書き出しが便利って書きましたが、最新版のFwにも実装されてたCSSの書き出しも非常に便利だと思います。
書き出したい要素のレイヤー上で右クリックするとCSSをコピーできます。
書き出されたCSSはベンダープレフィックスもついてるし、コメント付きだったりもするので運用するときにも便利そうですね。

レイヤー上で右クリックからCopy CSS AttributesでCSSをコピー
レイヤー上で右クリックからCopy CSS AttributesでCSSをコピー

生成されたCSSはこんな感じ。コメントやベンダープレフィックスもついて優しい感じ。
生成されたCSSはこんな感じ。コメントやベンダープレフィックスもついて優しい感じ。

整列

オブジェクトの整列もある程度いい感じに対応してくれています。
ツールバー上のやつである程度はできるんですが、オブジェクトを等間隔に配置したい場合は少し手間が必要で「GridTool」で指定してあげる必要があります。

整列するアイコンは上の方にある。丸で囲んである4つの□のアイコンがGridTool。
整列するアイコンは上の方にある。丸で囲んである4つの□のアイコンがGridTool。

GridToolで等間隔の整列は指定できる。少し面倒ではあるけど。
GridToolで等間隔の整列は指定できる。少し面倒ではあるけど。

まとめ

といった感じで、かなりよくできているなーというのが正直な感想です。
実際とある案件から使っていますが、今のところ何の問題もなく運用できています。
画像の切り抜きとか色補正とかはできないので、そういう部分はSketchと同じようなタイミングで安くなってたPixelmatorなんかで対応するのがいいのではないかなと思います。
それぞれが動作軽いのでAdobe系一個立ち上げとくよりかは2つ同時起動の方が早いかもっていう実感です。
もちろん作業している内容にもよりますけど。

参加してくださった皆さん(僕も含め)もある程度集中してさわったら一日あればある程度使いこなせるようになっている感じでした。
決して難しいソフトではありませんので,動作は軽いですし色々と今風に便利なのでまず使ってみるといいかなと思います。

参考リンク

Sketch.appのメニューを日本語に翻訳意訳してみましたよ。
無料テンプレまとめ
Sketchを買ったら読んでおきたい!基本的なことからちょっとした小技、ショートカットまとめ

ついでに

この勉強会やる前に個人的な思いつきでFlastUIのColor Swatchesを登録しといたらモックアップ作りが捗るかもと思って作ったのでついでに公開しておきます。
https://github.com/deroter/deroter.github.com/blob/master/flatuicolor.sketch.zip
これを使えば今っぽい感じの配色になるので作業が捗る…はずw

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、サポートやWebサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を平日毎日更新中。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
また、不定期で大阪を中心にWeb運用やブログなどをテーマにしたイベント「ふにセミWS」を開催しています。
サイトの運用や活用にお困りの方はお気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

About

ふにろぐとは?

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにすのお仕事

このブログを書いている「でぐち」がしている「ふにす株式会社」は大阪と京都の間にある高槻という街で、Webの運用サポートを中心に活動しています。
Webサイトの制作とかもしてますが、ブログを続けるためのサポートとか、会社をどうやってPRすればいいんだろうとか、そういうふわっとした事を相談してください。
どういう内容を相談できるのかをまとめましたので、参考にしていただければと思います。

ふにすにはどんな仕事が頼めるの?

ふにすWeb相談所

ソーシャルとか。

NewEntry

PickUP

Webサイトの運用に関する情報

ふにろぐで取り上げたWebサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Category

Month