Webデザイナーにオススメ。「Sketch3」は軽快で使いやすいデザインツール。

デザインツール Sketch3

ここ数年、UIデザイナーに人気のデザインツールの一つに Sketch3 がよく挙げられます。周りを見ても使っている人が増えたなという印象があるのですが、自分も使い始めるようになって今ではメインのデザインツールとして手放せなくなりました。

SketchはFireWorksに変わるツール

オランダの Bohemian Coding が作った Sketch3 は名前の通り、既に version3。Dribbble でも数多くのsketchで制作した作品が掲載されています。昔の Web デザイン定番ツールといえば fireworks でしたが、Adobe が開発をやめたことをきっかけに注目されたのが、ベクタードローイングツールの Sketch。Webデザインが効率的に行えるように様々な工夫があり、今では、導入企業も多く Google や Apple なども使っているデザインツールになっているようです。

たった3秒で起動

Adobe 製品を長いこと使っていましたが、アプリ起動の遅さにいつも不満がありました。あの起動の遅さはバージョンが上がってもほとんど変わっていない気がします。
試しにMacbookPro,メモリ 8MB, OSX yosemite で 5 回ずつ起動させてみたところ、illustrator CC は起動までに約 10 から 15 秒かかりました。

イラストレーターの起動

一方、Sketch の起動時間は約 3 秒、爆速です。

シンプルなUI

sketch3の起動

画面左がレイヤーやアートボードの一覧を表示する領域、画面中央が描画領域、そして画面右が各要素の詳細を設定するインスペクタ領域で構成されています。また、画面上部はツールバーになっていて、結合や拡大縮小、マスクなどを行えるようになっています。Mac 標準のアプリケーションを使ったことがあれば、特に違和感のない構成になっているのではないでしょうか。

豊富なUIキット

sketchは複数のデバイスサイズに対応したアートボードに加え、効率的にデザインできるようにUIキットも数多く用意されています。

テンプレート選択

「File > New From Template」と選択し、「iOS UI Design」を選択すると、下のような UI kit が別ウィンドウで開きます。

iOS Ui kit

必要なパーツをコピペして使えば、実物により近い形でデザインしながら、効率的に作業することができますね。 他にも、Material Design や Bootstrap、Andoroid などもあります。これらのUI kit は Sketch App Sources で入手可能です。

また、Apple のサイトからは、Apple Watch の公式 Design Kit である「WatchKit」をダウンロードできるようです。このような最新 UI kit の情報を入手しておきたい人は、Sketch の公式サイトから Subscribe to Sketch News の購読を登録しておくのがオススメです。(無駄な情報がほとんどありませんよ。)

UI Kitをコピペすれば、さくっと作れる

iPhone6でのデザイン

上の画像は UI kit を使って作成しました。この程度のものなら 5 分ほどでできてしまいます。

1. アートボードを設定する

iPhone6アートボード作成

Sketch には複数のアートボードが用意されており、作成したいデバイスサイズを選ぶだけです。上の画像は iPhone6 用のアートボードなので、左上の[Insert]アイコンから Artboard を選択(もしくはショートカットキー A)でアートボード挿入モードにします。右側にアートボードの種類が表示されるので、iPhone6 を選択すれば、「375×667px」の iPhone6 サイズのアートボードが作成できます。

ステータスバーとナビゲーションバーをコピー&ペースト

コピペでUI配置

上で紹介した iOS UI kit を開いておき、ステータスバーをコピーし、iPhone6 のアートボード上でペーストします。
ペーストした後で、表示位置を右のインスペクタや素材自体をドラッグさせて任意の場所に移動させていきます。

マップにマスクを使う

マスクを使ってマップの調整

自分はデザインする時にマスクをよく使うのですが、Sketchでも簡単に行うことができます。
上の手順と同じようにマップを UI kit からコピペします。ペーストした状態では画面全部がマップで埋まってしまうので、マスクを使って表示領域を調整します。

「Insert > Shape > Rectangle」で四角形を選択するか、ショートカットキーの「R」でモードを切り替えて四角形を作ります。レイヤーの順番をマップが上に来るようにして、マップと作成した四角形の両方を選択し、ツールバーの「Mask」ボタンをクリックすると四角形の大きさにマップがくり抜かれます。

微調整する

画像もマップと同じようにマスクをかけ、他の部分も UI kit からコピペして位置を調整したり、インスペクタ領域で色を変えたりしてバランスを整えていけば完成です。

デザインの書き出しが簡単にできる

Sketch の嬉しい機能の一つに書き出し(エクスポート)機能があります。グルーピングされた要素やアートボード、スライスした個別パーツなどを一気に出力してくれます。複数のアートボードの中で1つだけ出力不要のがあれば、チェックボックスを外すことで除外してくれるのも良いです。

デザインエクスポート

ツールバーの「Export」をクリックし、出力形式と出力したいアートボードを選択するだけです。 エクスポートの出力オプションにはファイル形式とサイズ、サフィックス(ファイル名の後ろに加える文字列)を指定できます。サイズ指定では 2x(2倍の大きさで書きだすようにする。)が用意されているので、Ratina ディスプレイのような高解像度の画像形式用に出力することが可能になっています。さすが Mac 専用ツール。

参考サイトなど

他にも Sketch を使いやすくするプラグインや作成したデザインをリアルタイムでモバイル(iPhone)に表示させる Sketch Mirror などデザイン制作に役立つツールがあります。で、Sketch Mirror については「Sketch3を使うならモバイル用デザインに最適なSketch Mirrorも一緒に使おう。」という記事でも紹介していますよ。

海外サイトが多く日本語ドキュメントがあまりないのですが、その中でも以下のサイトは参考になりそうです。

Tips

  • Tips & Tricks blog

    公式サイトのドキュメンテーションに掲載されているブログです。

  • SKETCH TRICKS

    Sketchの小ネタや作成手順などが掲載されています。(最近話題のMediumですね。)

  • Sketch Shortcuts

    ショートカットまとめ。

プラグイン

デザインツールは進化がすごい

Sketch App Sources のように豊富な UI kit を入手できるおかげもあり、効率的に作業を行えるようになりました。これに Sketch Mirror などの他ツールを組み合わせれば、さらに効率性が上がります。
多機能な点ではイラストレーターなどの Adobe 製品に劣るかもしれませんが、Web やアプリデザインにおける使い勝手の面では Sketch で十分です。実際、自分は機能を全て引き出せているとは言えませんが満足度はかなり高いです。

Willemstad.sketchsketch の公式サイトからお借りしました。↑

頑張って使いこなせるようになれば、上のようなクオリティのものだって作れるようになるかも。

関連記事