1. HOME
  2. B'scre8
  3. ホームページ設計・制作
  4. 念願のSketch導入!実際使ってみた感想と今後の展望をまとめました
ホームページ設計・制作

念願のSketch導入!実際使ってみた感想と今後の展望をまとめました

こんにちは。ビーズクリエイトの野尻です。

今月に入りまして、ようやく念願のSketch導入ができましたので、そもそもSketchの何が良いのかを含めて、実際に使ってみた所感を取りまとめてみたいと思います。

Sketchを使うメリット

導入費用が安い

AdobeのCCツールと比較すると相当お安い印象です。
下記に簡単に比較してみました。

Illustrator ・月額2,180円のサブスクリプションタイプ
・年間26,160円
Photoshop ・月額980円のサブスクリプションタイプ
・年間11,760円
Sketch ・とりあえずインストールして、1ヶ月は無料で使える
・9,800円で一度購入すれば、毎月課金しなくてよい
・さらに2017年4月現在では買い切りで1年間の無償バージョンアップつき

photoshopと比較すると、初年度はそれほど変わりませんが、買い切りであることを考えると、翌年以降差がついてきそうです。

Web制作、UIデザインに特化している

  • ピクセルプレビュー(Illustratorなどの設定が甘いとよくあるピクセルズレが発生しない)
  • オブジェクトのCSS書き出し(デザインをそのままCSSに落とし込んでくれる)
  • ベクターデータ(解像度の変化に強い)
  • SVG書き出しなどがお手の物

動作が軽い

  • 起動が非常に早い
  • データが軽い

オートセーブ機能

  • 自動的にデザインをセーブして作業履歴をストレージに保存してくれる
  • 忙しいときに限って頻発するアプリケーションダウンによる精神崩壊から開放される
  • ただし、放置しておくとストレージを圧迫することが多いらしいので、必要に応じて機能の有効/無効を切り替える必要がありそう

ざっといじってみた所感

拡張機能で、かゆいところに手がとどく

Sketchは、随時有志による拡張機能プラグインがリリースされているようです。
試しにショートカットキーひとつで全レイヤーのロックを解除する機能を追加する下記プラグインを導入してみました

Unlock all Layers
https://blog.truthlabs.com/sketch-plugin-unlock-all-layers-1ff9252f0689

スクリーンショット 2017-04-28 16.38.54

ロックしたレイヤーを探す手間が省けて非常に具合がよくなりました!
こういった細かい使い勝手レベルでプラグインが存在することは非常に心強いです。

ツールバーカスタマイズで使いやすくできるのが便利

スクリーンショット 2017-04-28 16.40.00
画面上部のツールバーを自分好みにカスタマイズすることができます。photoshopやIllustratorだとこのあたりはなかなかカスタマイズしづらい部分です。使いそうなツール類をピックアップしておくことで、非常に使いやすくなりました。
ツールバーのカスタマイズはツールバー上で 右クリック > Custmize Toolbar からドラッグアンドドロップで簡単に行うことができます。

よく使う機能のショートカット把握がキモとなりそう

他のツールでも言えることですが、ショートカットキーが違ったりすると、作業効率が落ちるとともに、結構なストレスになります。
特によく使う機能のショートカットは、最初に把握しておくことが大事と思いました。
↓のサイトが分かりやすくまとめてくれています
無駄な作業時間を節約!Sketchの便利なショートカットまとめ
http://creive.me/archives/6576/

商品プロモーション用のペライチLPのデザインには向かない印象

Sketchは要素をリズミカルに配置したり、特定のインターフェイスを作り込むのに適しているツールと思います。(要はUIデザイン)
慣れによるところも多いと思いますが、Sketchは画像処理に弱く、凝ったビジュアルを作成することは若干苦手なようです。
例えば随所に広告的表現が必要となる商品プロモーション用の1ページペラのLPデザインをするときは、PhotoshopやIllustratorのほうが効率的であるように感じました。
適材適所でツールを活用していきたいところです。

今後ぜひマスターしたい機能

Auto Layout for Sketch

複数の画面サイズのデザインレイアウトを即時レビューできる拡張機能で、スマホ対応アプリなどをデザインする際に非常に効率的になりそうです。
ぶっちゃけこの機能が使いたくてSketch導入した経緯でもあります。ぜひ使いこなしたい!
スクリーンショット 2017-04-28 16.44.35
https://animaapp.github.io/Auto-Layout/index.html

Sketch Mirror

デザインデータを実際のスマートフォンなどにミラーリングできるそうです。
上記のAuto Layout for Sketchと合わせて、スマートフォン実機で確認しながらデザインを進められるのは、非常に効率的かつクオリティアップにもつながります。
スクリーンショット 2017-04-28 16.42.31
https://itunes.apple.com/jp/app/sketch-mirror/id677296955?mt=8&ign-mpt=uo%3D4

引き続き、素晴らしきSketchの世界を体感すべく、勉強していきたいと思います。