【初心者向け】Sketchの使い方をくわしく解説！

アプリのUIデザインなどを作る時に有名なツール、Sketch(スケッチ)。そのデザイナーの方でSketchを使っている方は多いでしょう。

Sketchには備わったツールや機能が多いのが特徴で、UIデザインの作成に非常に便利です。そのシンプルなデザイン性と使い方や特徴に魅力を感じるのではないでしょうか。

Sketchとは、Bogemian Coding社に開発されたMac用のグラフィックデザインで、WebやUIデザイン、インターフェイス作成をする時に便利な機能が特徴で、かつ使い方が比較的容易なことから、近年注目を集めています。

Sketch(スケッチ)といえば、IT業界でスタンダードとなるUIデザインツールです。Sketchは使い方や必要な基礎知識がシンプルなのが特徴です。

初心者の方や基礎知識のある方もある程度のインターフェイスのデザインは作成できますが、様々な機能や高度な使い方で、レベルの高いデザインを作成できます。

Sketch(スケッチ)はUIデザインツールとして、とくに優れているのが特徴です。Sketchの使い方の特徴としては、ベクターデータが扱えること、テンプレートが豊富にある、実機確認ができることです。基礎知識を覚えて効率よく使いましょう。

Sketch(スケッチ)の素晴らしい特徴は、基礎知識を覚えてすぐにWeb、UIデザインに特化した使い方ができる点です。そのため、Sketchをダウンロードし使い方を学べばインターフェイスを効率よくデザインできます。

Sketch(スケッチ)では、iOSアプリを通して、デザインがデバイス上でどう表示されるか確認できます。これは他のデザインソフトではない、インターフェイス作成におけるSketchの使い方で優れた点です。

Sketch(スケッチ)には各デバイス向けのテンプレートが用意されており、効率的にUIデザインができます。

SketchはWebデザインのみならずiOSのアプリ作成用のテンプレートもあり、Sketchをダウンロードし、使い方と基礎知識を学べば、実際の画面のように再現ができるのでUIデザインがしやすいのが特徴です。

Sketch(スケッチ)はベクターデータが素晴らしいです。ファイル容量が小さいので、拡大縮小しても線が汚くなりません。

例えば、Sketchに比べてPhotoshopは使い方で、全て画像データとして保存されるためファイルが大きくなってしまいます。

Sketch(スケッチ)とは難しそうですが、ダウンロードして使い始めれば、思ったよりもすぐに使い方を理解し基礎知識が身に付きます。

Sketchは有料で、料金は＄99 / 年 です。日本円で月額に換算すると1000円を切ります。他のソフトに比べるととてもお得です。​​​​​​まずはSketchをダウンロードしましょう！

Sketch(スケッチ)は、残念ながら現段階ではWindowsユーザーにはSketchはダウンロードできません。SketchはMacOSの対応です。MacOSを使っている方は、ぜひダウンロードして使い方をマスターし基礎知識を覚えましょう。

では早速始めましょう。まず、Sketch(スケッチ)の公式サイトをひらきます。（※英語）

画像のように公式サイトは英語表記となります。

Sketch(スケッチ)の公式サイトを開いたら、「Try for Free」をクリックしましょう。
すぐにzipファイルがダウンロードされます。

Sketchをダウンロード完了後、ダブルクリックして解凍、アプリケーションフォルダに移動させて利用できます。

Sketchをダウンロードできたら使い方から触れていきましょう。Sketchは使い方も決して難しくありませんし、インターフェイスも見やすくてすぐに馴染みます！

ここでは、アートボード作成、デバイスの選択から図形の挿入、スライス、マスク、色の変更の仕方を説明します。スライス、マスクに関しては他にも色々なやり方があるので少しずつ覚えましょう。

アートボードの新規作成、使い方について説明します。

まず、InsertからArtbordを選択します。

そうすると、MobileとTabletとDesktopの項目が表示されます。自分の作成したいデバイスを選択しましょう。

今回の例ではMobileを選択します。PCで作成したい方はDesktopを選択してください！

アートボードが表示されます。この四角い白いのがアートボードです。この白い部分がiPhoneのサイズになっています。このアートボードにデザインができます。

アートボードに図形を挿入するには、左上のあるInsertをクリックします。色んなメニューがありますが、例えばShapeのRectangleを選択します。

キャンバスの中をドラッグすると点線の四角形が現れるので、好きな大きさを決めてドロップし、図形を表示します。

こんなに簡単に図形を作ることができました！この使い方の容易さも、Sketchだからできる技です。次に、スライスについて説明します。

Sketchでは、レイヤーごと・グループごとでのスライスをすることができます。まず、スライスしたいオブジェクトを選択しましょう。今回はロゴをスライスしていきます。例としてこちらのサイトを使います。

このロゴはロゴタイプのレイヤーと、アイコンのレイヤーがグループになっていてスライスができそうです。一枚の画像として書き出したいので、グループごとのスライスをしていきます。

スライスするためには、グループを選択したまま、ワークスペースの右下にある「Make Exportable」をクリックします。「Export」という項目が出てきたら、画像の出力形式とサイズを選択します。

ロゴがこんな感じにスライスできました！

Sketchの画像のスライス機能の様々な使い方を学び、作業をもっと効率的にしていきましょう！

マスクとはオブジェクトのグループのことです。つまりマスクとは、オブジェクトをグループ化することで、上に重ねたオブジェクトがマスクしたオブジェクトの形状の領域のみ見えるようになります。デフォルトのツールバーに入っているこれが「マスク」です。

Sketchでは様々なマスク機能の使い方がありますが、今回はグラデーションを説明します。グラデーションマスクとは、画像を少しずつ透明にしたい時に使います。まず通常のマスクをかけます。

レイヤーからMaskを選択したまま、「Layer」、「Mask Mode」「Alpha Mask」の順にクリックします。こちらでは見た目に特別な変化はありません。

Maskが選択された状態で「Fills」、「Flat Color」、「Linear Gradient」の順にクリックします。そしてAlpha値を0に変更します。これで透明グラデーションをかけることが出来ます。

このようになります。

マスクしたいオブジェクトと、当てはめたいオブジェクトを複数選択し、マスクをクリックするだけでグループが出来上がりです！Sketchでのマスク機能とは、使い方が沢山あります。

そして色々な使い方で活用方法ができるマスクは、Sketchでデザインするうえで欠かせません。Sketchのマスク機能の使い方をマスターして、色々な表現の引き出しを増やしましょう！

Sketchで図形に色をつける使い方を説明します。色をつけることとは、閲覧者にページを見やすくする工夫のひとつです。Sketchで図形に色をつけるには、右側のFillsからFillをクリックするとカラーピッカーが表示されるので好きな色を選びます。

図形に色がつきました！

Sketchには、UIデザイン、インターフェイス作成に優れたテンプレートがたくさんあります。テンプレートとは、閲覧者に見やすいページにする工夫のひとつです。今回の例では、スマートフォンのUIデザイン、インターフェイスを作成してみましょう。

先ほどの説明のようにアートボードを用意したら、「File」、「New From Template」の順にクリックしてテンプレートを呼び出しましょう。

上の画面では、iOSのUIデザイン、インターフェイスのテンプレートを読み込んでいます。

パーツとは、iOSアプリでよく使うナビゲーションバーを配置するものです。その使い方を説明します。

先ほど追加したテンプレートのページを開くと、iOSアプリ用のパーツが並んでいます。美しいインターフェイスのために、ここで配置したいパーツを選択、コピーし、配置するページに移って貼り付けましょう。

アートボード内に貼り付けて、ドラッグして位置を調整します。ナビゲーションバー内のテキストは、ダブルクリックして編集、または消したりもできます。

更には、「Rectangle」や「Text」を配置してUIデザイン、特徴的なインターフェイスを作り込んでいくことができます。

上の画像のように中身を編集することが出来ます。

Sketchでとても便利な特徴が、難しくない使い方と、作成したデザインをすぐに実機で確認できるところです。iOSアプリを通しての確認となりますので、下記のアプリを実機にインストールしましょう。

Sketch Mirror
Sketch上で「Mirror」をクリックし、実機をPCと同じWi-Fiにつなぐか、実機をPCにUSB接続すれば、実機のディスプレイ上でどう表示されるか確認することができます。

iPhoneからの検索画面はこちら！

Sketchでの作業を効率化する時、もっとも早いのがショートカットキーの暗記です。はじめは遅くても、Sketchで実際に作業をし使い方を覚えていくとショートカットキーを指が覚えていきます。

ショートカットキーの使い方には慣れが必要ですが、早速Sketchでの作業に取り入れていきましょう。よく使うショートカットキーを紹介します。

オブジェクトの挿入に使えるショートカットの一覧です。

オブジェクト操作に使えるショートカットキーの一覧です。

オブジェクトの編集に使えるショートカットキーの一覧です。

レイヤーの操作に使えるショートカットキーの一覧です。

ディスプレイの操作に使えるショートカットキーの一覧です。

ユーティリティに使えるショートカットキーの一覧です。

他にもたくさんショートカットキーがあります。上の画像のように、Sketchの公式サイトでショートカットキーを確認することもできます。基礎知識を学び、ショートカットキーを使えるようになれば、使い方を覚える手間も省けます。

Sketchで基礎知識を覚え作業する時、「これもできたら」をできるようにするのがプラグイン。プラス必要な機能はプラグインで補い使い方を増やしましょう。はじめに、プラグインをスムーズにダウンロードするためのソフトを入れます。

Sketch Toolboxを入れましょう。ソフトを立ちあげて、検索フォームに入れたいプラグインの名前を検索。そのInstallのボタンを押すだけで完了です！

Sketch Palettes
Sketchで基礎知識を覚えデザインを作り込んでいると、どんどん新しくバージョンが出てきます。そんな時に別ファイルで同じカラーパレットを使いたいことはありませんか？

Sketch Palettesはカラーデータを保存・読み込みできます。GlobalColorのパレットがすっきり！

Align Text Baseline for Sketch
文字テキストのベースラインを揃えるプラグインです。Sketchは日本語フォントのLine-Height設定でバグがあるのでこちらを入れると便利です。

RenameIt
こちらはレイヤーの名前を一括で付け直すことができます。

RenameItのショートカットキーはこちら！

おすすめのプラグインの解説は以上となります。

いかがでしょうか？Sketchはシンプルで、直感的な使い方でできるアプリケーションなので、まずは使ってみてください。

デフォルトで用意されている多様なテンプレートと、ショートカットやプラグインを上手に使えれば、WebデザインやUIデザインの時間を大幅に短縮できます。以上、Sketchの使い方について説明しました。

最初は機能が多く基礎知識を習得するまでに時間がかかるかもしれませんが、慣れればこれ無しではUI作成に困るくらい使えるソフトです。デザイナーとしてスキルアップしたいという方は特に、使い方を覚えてSketchを使ってみましょう！