Webデザインを作成する時に欠かせないツールとして人気を博しているUIデザインツール・Sketch。

デザインツールであることから、Webデザインをする人だけが使うものと思っていませんか？

実はこのSketch、エンジニアにもありがたい機能が詰まったツールなのです。

今回はそんなSketchの魅力についてご紹介します。

  • Sketchとはどんなツールなのか
  • Sketchを使うとどんなメリットがあるのか
  • Sketchにある欠点とは？
  • Sketchの価格が気になる
  • Sketchの導入方法や使い方が知りたい
  • 便利な機能があれば教えてほしい

そんな人を対象にした内容をお届けします。

Sketchの概要

SketchはWebアプリケーションやWebサイトなどのUIデザインを設計するためのツールです。

UIデザインだけでなく、企画書やプレゼンテーションなどを作成するのにも使える便利さが魅力。

日本ではまだ人気途上にあるツールですが、世界を見渡してみると、Sketchの利用ユーザーは非常に数多くいます。

たとえば、AppleやAirbnb、Facebookなどの有名企業のデザイナーたち。彼ら彼女らもSketchを使用しています。


開発者

オランダにある会社で、現在はデン・バーグにオフィスを構えているBohemian Coding社が開発しています。


歴史

2010年に開発された当初、SketchはUIデザインに焦点を当てたツールではなく、ベクターツールでした。

そんなSketchがUIデザインツールとして注目を集め始めたのは2012年に2.0がリリースされた時。

UIデザイン作成に最適な機能が装備されたことで、徐々にデザイナーたちの目を引き始めました。

そしてSketchの人気上昇を勢いづける出来事が起こります。

2013年に発表された、Adobe「Fireworks」の開発終了です。

その時、UIデザインをするのにFireworksを使っていたデザイナーは数多くいました。

そんなデザイナーたちがFireworksの代替UIデザインツールとして選んだのが「Photoshop」や「Illustrator」、そして「Sketch」だったのです。

そこから便利な機能を追加したバージョンが開発されたSketchは、愛用者を増やしながら現在に至ります。


対応はMacのみ

SketchはMac OSのみ対応となっています。

Windows OSでは動きませんのでご注意ください。


Sketchの特徴

この項目では、Sketchの特徴に着目しました。


動作がスムーズ

Sketchの特徴の中で、特に注目すべき特徴です。

たとえスペックが高くないパソコンで作業したとしても、Sketchの動きは軽快です。


無駄な機能がついていない

この特徴が、前の「動作がスムーズ」という特徴にかかわってきます。

UIデザインに特化したツールなので、余分な機能がついていません。

その分、Sketchの動きはかなりスムーズに動きます。

また、余分な機能について学ぶための時間も削減できます。


リーズナブルな価格

後述しますが（「Sketchの価格」参照）、Sketchを利用するためには料金を支払わなければなりません。

しかし、Sketchの価格はかなりリーズナブル。

日本でよく使われているAdobe CCを購入するよりも格段にコストを下げることができます。


プラグインがたくさんある

より使いやすくなるプラグインがたくさんあるのもSketchの特徴です。

自分好みのSketchにカスタマイズすることができます。


直感的に扱える画面

Sketchを始めたばかりの人でも簡単に扱えるくらい、Sketchの画面はわかりやすく直感的です。

「こう動かせばこうなる」というのが何となくイメージできるので、他ツールに比べてマニュアルを開く回数は減るでしょう。

また、その時々に必要なツールを自動的に表示してくれるので、作業に集中することが可能です。


ライセンス形態

進化していっている途中のSketch。

「バージョン2.x」「バージョン3.x」では購入すれば、永続的に使えるという買い切りのライセンス形態でした。

しかし、「バージョン3.9」からは「ライセンスを購入後、1年経ったらアップデートライセンスを購入する」という形態になっています。

アップデートライセンスの料金やアップデートしなかった場合にどうなるかについては「Sketchの価格」をご覧ください。


デザインの確認が容易

Sketch Mirrorという機能を使えば、Sketchで作成したデザインをリアルタイムでiPhoneに表示可能です。

「デザインを実機で確認しながら作業を進めたい」という時。

そして、「デザインデータをアップロードする前にiPhoneにどう表示されるか確認したい」という時に重宝します。


Sketchのメリット

この項目では、Sketchを使うメリットについて見てみましょう。


シンボル機能が強い

Sketchのシンボル機能は、多彩なデザインを作り上げるのに有効な機能です。


動きが速い

UIデザインをするとなると、Webサイトならトップ画面や他ページなど、Webアプリでもたくさんの画面などのデザインの作成が必要です。

数十にも及ぶ画面のデザインをすることになるため、アートボードをいくつも開くことになるでしょう。

そんな時、Photoshopなど他デザインツールの場合はかなりツールの動きが鈍くなってしまいます。

ですが、Sketchはたくさんの画面を作成しても動作が鈍くなってしまう心配とは無縁です。


ベクター描画

最近のディスプレイは高解像度です。

Sketchはベクター描画なので、高い解像度を誇るディスプレイにも難なく対応することができます。


様々なサービスと連携できる

エンジニアが使用するツールなどとの連携が充実しているのもSketchの大きなメリットと言えます。

他UIデザインツールよりもSketchは外部連携できるサービスが多いという利点があります。

外部連携できるということは、わざわざSketchを開いて他のツールを開いてデータを移して…という手間が省けるということ。

作業効率を上げるための手段として見逃せないポイントです。


デザインをブラウザで確認可能

Sketchで作ったデザインデータは「InVision」「sympli」を使えば、ブラウザ上でCSSなどを確認することが可能です。

デザインを確認するためだけにデザインツールを使い分けているエンジニアも多くいます。

Sketchを使えば、エンジニアの手間・コストを省くことが可能です。

ちなみに、画像のエクスポートもブラウザ上でおこなうことができます。


Sketchのデメリット

どんなソフトにもデメリット（注意点）はあります。

Sketchのデメリットは何があるのか、包み隠さずご紹介します。


Macでしか使えない

現在、SketchはMac OSのみに対応しています。

そのため、Windowsユーザーの場合はPhotoshopやIllustratorなど他のデザインツールを使用する必要があります。

どうしてもSketchを使いたいという場合はMacを購入するしか対応策がないのが現状です。


言語環境が英語

SketchのUIは英語です。

直感的に使えるツールなので、操作する時にとても困るということはないでしょう。

ですが、日本語に対応している他ツールを使っていた人は特に違和感を覚える可能性があります。

合成フォントや縦書きなども対応していないのも欠点といえるでしょう。


SketchとPhotoshopとIllustratorの違い

SketchはUIデザインに特化しているツールです。

画像加工やデジタルペイントなどができるPhotoshop。

アイコンやロゴ作成ができたりベクター素材を作成できるIllustratorとは少しフィールドが違います。

しかし、「Sketch」「Photoshop」「Illustrator」はUIデザインツールとして比較されることが多いツールです。

この項目では、そんな3つのツールはどういう違いがあるのかについてご紹介します。


対応OS

SketchがMacのみに対応しているのに比べ、PhotoshopとIllustratorはMacはもちろん、Windowsにも対応しています。


マニュアルや書籍の多さ

これは圧倒的にPhotoshopやIllustratorが多いです。

ただ、SketchはPhotoshopやIllustratorほど複雑な機能がないので、触っていく中でどういう風に使えば良いのかを学ぶことができます。


画像加工ができるかどうか

SketchはシンプルなUIデザインツールです。

そのため、Sketchには基本的な画像加工機能しかついていません。

対するPhotoshopは画像加工（フィルターや効果など）機能が強力です。


外部連携

これはSketchが他2つのツールを圧倒しています。

Photoshopにも連携できるツールがあるにはありますが、Sketchほどの連携アプリ数はありません。

Illustratorに関して言えば、対応ツールがほぼない状態です。


動作

Sketchは必要ない機能を取り除き、UIデザインに必要な機能のみを搭載しています。

そのため、色んな使用用途を考えて多くの機能を付属しているPhotoshopとIllustratorに比べると、かなり動きが速いです。

「Photoshopの動きが遅くてストレスが溜まっている」という人がSketchを使用したら、あまりに動作性が違うので驚くでしょう。


Sketchの価格

Sketchの価格は年間99ドルです。

以前は一度購入したら、購入したバージョンはずっと使い放題でした。

しかし、「バージョン39」になってから「1年間のアップデートライセンス」というものに買い方に変化が。

要するに、購入して1年経ったらアップデートライセンスを99ドルで購入するということです。

もしアップデートをしなかった場合は使えなくなる…ことはありません。

ライセンスが失効してしまうわけではなく、購入した当時のバージョンの使用を継続することになります。

価格的にはリーズナブルですが、自分に合うかわからないのにお金を払うのは避けたい…という人もいるでしょう。

Sketchには「無料トライアル（30日間）」があるので、まずは試しに使ってみたいと考えている人もご安心ください


Sketchのダウンロード方法

この項目では、Sketchのダウンロード方法についてお伝えします。


公式サイトでお試し版をダウンロードする

公式サイトにアクセスし、右上の「TRY FOR FREE↓」をクリックしてください。

ここから30日間のお試し版をインストールすることができます。


ZIPファイルを展開する

自動的にZIPファイルのダウンロードが始まります。

ダウンロードが完了したら、ZIPファイルを開きましょう。


「Sketch.app」を開く

ファイルの中に「Sketch.app」というファイルがあるので、それをクリックします。

警告文が出ても気にせず先に進みましょう。


ライセンスを登録する場合

30日間の無料トライアルを終え、Sketchを使い続けたいと思ったらライセンス登録が必要になります。

その時は、公式サイトにアクセスして「Buy Now for $99」を選び購入しましょう。

登録メールアドレスにライセンスキーが届きます。

Sketchを開き、メニューバーの「Sketch」から「Register…」を選びます。

そして、ライセンスキーを入力したら登録完了です。


Sketchの使い方①インターフェイス

Sketchを使いこなしたいなら、まずはSketchのインターフェイスを確認するところから始めましょう。


メニューバー

上のほうに出てくるメニュー一覧です。

まずはどんなメニューがあるのか実際にクリックして確かめてみましょう。


ツールバー

Sketchでよく使用する機能が収めてあります。

配置が微妙と思ったら、右クリックで配置替えが可能なので試してみてください。

カスタマイズして自分好みのツールバーにしましょう。


キャンバス

画面中央にあります。

デザインを作成する際に使う場所です。


レイヤーリスト

画面左側にあります。

Sketchは1つの場所で「ページリスト」と「レイヤーリスト」をまとめて管理します。

ページリストでは作成したページを、レイヤーリストでは作成したレイヤーの一覧が保存されます。


インスペクター

画面右側にある、パラメーターなどを設定できる場所です。


Sketchの使い方②基本

ここではSketchの基本的な使い方をご紹介します。


アートボードを挿入する

アートボードは描画スペースのことです。

まずはそのアートボードを作成します。

左側の「＋」ボタンを押下し「Artboard」を選びます。

画面右（インスペクター）にディスプレイサイズなどが表示されます。

好きなサイズ・数値を選択してください。

サイズを選んだら、次は背景色選びです。

ここまで出来たら、あとは好みの機能を使ってみましょう。


図形を描く

「＋」をクリックし、「Oval」を選んでアートボードの上で左クリックしながらドラッグすれば円を描くことが可能です。

真円にしたいならSHIFTキーを押しながらドラッグしてみてください。

「＋」を押して「Rectangle」をクリックすると、長方形の描写が可能です。


スライスする

スライスしたいものを選び、右下にある「Export」を開きましょう。

「Export ●●（ファイル名）」ボタンをクリックすればスライスできます。


Sketchの便利な使い方①カラーパレット

よく使うカラーがあるという人は「カラーパレット」によく使う色を保存しておくと良いでしょう。

カラーパレットに保存しておくことで、すぐにその色を使うことができます。

全てのドキュメントで使う色なら「Global Colors」、特定のドキュメントで使う色なら「Document Colors」に登録しましょう。


Sketchの便利な使い方②Sketch Mirror

iOSアプリに「Sketch Mirror」というものがあります。

このアプリを使えば、Sketchで作成しているUIデザインをリアルタイム画面でチェックすることが可能です。


Sketchの便利な使い方③プラグインでカスタマイズ

プラグインを使うことで、Sketchでの作業効率は格段にアップします。

プラグインのやり方は「Sketch Toolbox」からおこなう方法と「Terminal」からコマンドで追加する方法の2つです。


Sketchの便利な使い方⑦ショートカットを活用する

「A」でアートボード作成、「O」でシェイプ（円）、「V」でベクター描画など、Sketchには様々なショートカットがあります。

ショートカットを覚えてしまえば、作業スピードはかなり向上するでしょう。

公式サイトのヘルプページにショートカットキーについて記載があるので、ぜひチェックしてみてください。


まとめ

今回解説したとおり、Sketchは直感的に動かすことができます。

初めて使うという人もあまり悩まずに動かせるデザインツールといえるのではないでしょうか。

Webデザインをする人だけでなく、エンジニアにも有り難いツール・Sketch。

Webデザイン作成をする人もWebデザインに関わる人も、まだSketchを使っていない人は導入をご検討ください。

導入すればわかるSketchの使いやすさ、ぜひ実感してみましょう。


toiroフリーランスは、SHIFTグループがプライムとして参画している独自案件をフリーランスエンジニア向けに紹介する唯一のプラットフォームサービスです。

エージェントによるサポートもありますので、ご利用を検討してみてはいかがでしょうか。​