UIデザインの作成ツール!誰でも分かるSketchの使い方【初心者向け】

初心者向けにSketchの使い方についての解説記事。アプリのUIデザインやWebデザインの作成ツールとして有名なSketchですが、初めて使う方でも分かるように細かく説明しています。デザイナーとしてスキルアップできるはずです。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

アプリのUIデザインなどを作る上で有名なツール「Sketch」

デザイナーの方でSketchを使っている人は多いでしょう。元からあるツールや機能が多くUIデザインを作成するのに非常に便利です。

また、プラグインを使えば自分でカスタマイズできるのが特徴です。

今回は、そのSketchの使い方を初心者の方でも分かるように詳しく説明しています。使ったことがないという人でもぜひ試してみてください。

 

なお本記事は、TechAcademyのUI/UXデザインオンラインブートキャンプの内容をもとに紹介しています。

 

Sketchとは

Sketchは、Bogemian Coding社によって開発されたMac用のグラフィックデザインです。

とくにWeb、UIデザインをするときに便利な機能が盛り込まれており、近年注目を集めています。

 

Sketchの便利な点

他のデザインソフトでも、Web、UIデザインに対応しているものがあります。代表的なのはAdobe社のPhotoshopでしょう。

Sketchの特徴は、冒頭にある通り、Web、UIデザインに特化している点です。そのため、これらを効率よくデザインできるよう設計されています。

下にSketchの特に優れた点を挙げてみました。

  • ベクターデータ : ファイル容量が小さく、拡大縮小しても線が汚くなりません。Photoshopでは全て画像データとして保存されるのでどうしてもファイルが大きくなってしまいます。
  • 豊富なテンプレート: 各デバイス向けのテンプレートが用意されているので、効率的にUIデザインができます。
  • 素早い実機確認: iOSアプリを通して、デザインがデバイス上でどう表示されるかすぐに確認することができます。これは他のデザインソフトにはない、Sketchの優れた機能だと思います。

 

[PR] スマホアプリの開発で挫折しない学習方法を動画で公開中

Sketchの使い方

Sketchは2016年6月現在、Mac OS Xにのみ対応しています。Windowsからは使えませんのでご注意ください。

まずは下記のURLにアクセスして、Sketchのトライアル版をインストールしましょう。

Sketch

sketch_download-620x297

左側の「download free trial」をクリックすると、zip形式でインストーラがダウンロードされます。

ダウンロードが完了したら、zipファイルを解凍してインストールします。

初回起動したときは、下のような画面が現れます。「OK」で進みましょう。

Screen-Shot-2016-06-19-at-5.15.21-AM-620x465

 

Sketchで実際に作業してみよう(描画編)

では、Sketchを実際に使ってみましょう。

アートボードの挿入

まずはSketchの描画機能を学んでいきましょう。最初に、描画スペースとなるアートボードを挿入します。

左側にある「+」ボタンをクリックして、「Artboard」を選択します。

Screen-Shot-2016-06-19-at-5.16.12-AM-620x465

すると右側に、様々なデバイスのディスプレイサイズが表示されるので、自分の作成したいサイズを選びましょう。

今回はiPhone6を選択してみます。

Screen-Shot-2016-06-19-at-5.17.47-AM-620x465

 

 背景色の設定

右側にある、「Background color」にチェックを入れ、背景色を選びます。今回は分かりやすいよう黒に設定しました。

Screen-Shot-2016-06-19-at-5.18.16-AM1-620x465

 

 図形を描いてみる

「+」ボタンから、いろいろな図形を挿入することができます。

円を描いてみましょう。「Oval」を選択した後、アートボード上で左クリックしながらドラッグで好きな大きさの円を描くことができます。

Shiftを押しながらドラッグすると真円にできます。

Screen-Shot-2016-06-19-at-5.18.49-AM-620x465

図形を塗りつぶしてみましょう。右側のメニューから設定します。

塗りつぶしは「Fills」、図形の線は「Borders」です。図形の外や中に影をつけることもできます。

Screen-Shot-2016-06-19-at-5.23.20-AM1-620x465

長方形も挿入してみましょう。「+」ボタンから「Rectangle」を選んで描画します。

アートボードの端に触れるとガイドがでるので、きれいに配置することができます。

Screen-Shot-2016-06-19-at-5.27.19-AM-620x465

「Fills」の右にある「+」ボタンを押すと、塗りつぶしのパターンを選択することができます。グラデーションをかけてみました。

Screenshot-2016-06-19-07.38.44-620x465

 

 スライスの使い方

先ほど描いた図形をスライスしてみましょう。スライスしたいオブジェクトを選択した状態で右側の「Export」を開いて

「Export ~」をクリックすると、スライスすることができます。

Screen-Shot-2016-06-19-at-5.37.15-AM1-620x465

スライスしたものは、下のようにナイフマークが表示されるのでわかりやすいです。

Screen-Shot-2016-06-19-at-5.40.27-AM1-620x465

 

 マスクの使い方

Sketchではマスクも使うことができます。

まずはマスクしたい形を描画します。

Screen-Shot-2016-06-19-at-5.41.25-AM-620x465

左側のリストで、マスクとして使う図形より上にあるものが、マスクの対象となるので、順番を入れ替えておきます

Screen-Shot-2016-06-19-at-5.45.37-AM-620x465

マスクとして使いたい図形をリスト上で右クリックして「Mask」を選択します。

Screenshot-2016-06-19-07.42.35-620x465

下の画面のようにマスクがかかりました。

Screen-Shot-2016-06-19-at-5.45.47-AM-620x465

 

Sketchで実際に作業してみよう(UI編)

Sketchには、UIデザインに便利なテンプレートがたくさん用意されています。スマートフォンのUIデザインを作成してみましょう。

テンプレートを呼び出す

先ほどと同じ手順でアートボードを用意したら、「File→New From Template」からテンプレートを呼び出しましょう。

下の画面ではiOSのUIデザイン用のテンプレートを読み込んでいます。

Screen-Shot-2016-06-19-at-5.50.23-AM-620x465

 

ナビゲーションバーを配置する

iOSアプリでよく使われている、ナビゲーションバーを配置してみましょう。

先ほど追加したテンプレートのページを開くと、iOSアプリ用のパーツがたくさん並んでいます。

ここで配置したいパーツを選択・コピーし、配置するページに移ってペーストしましょう。

Screen-Shot-2016-06-19-at-5.55.55-AM-620x465

アートボード内の適当なところにペーストして、ドラッグして位置を合わせます。

ナビゲーションバーの中のテキストは、ダブルクリックして編集したり、消したりすることもできます。

Screen-Shot-2016-06-19-at-5.57.36-AM-620x465

さらに、「Rectangle」や「Text」を配置してUIを作りこんでいきます。

Screen-Shot-2016-06-19-at-6.14.14-AM-620x465

 

実機でデザインがどう見えるか確認する

Sketchの機能でとても便利なのが、作成したデザインをすぐに実機で確認できるMirror機能です。

iOSアプリを通しての確認となりますので、あらかじめ下記のアプリを実機にインストールしておきます。

Sketch Mirror

Sketch上で「Mirror」をクリックし、実機をPCと同一のWi-Fiネットワークにつなぐか、PCにUSB接続すれば、

実機のディスプレイ上でどう表示されるか確認することができます。

Screen-Shot-2016-06-19-at-6.16.26-AM-620x465

こちらはiPhoneから確認したときのスクリーンショットです。

764aa186b85b76d3e1337b1457fc803f-576x1024

 

応用編

最後に、Sketchのショートカットや、便利なプラグインをご紹介します。

 ショートカット

使用頻度の高い機能のショートカットをまとめました。

ショートカット 実行結果
A アートボード作成
R シェイプ(四角形)
O シェイプ(円)
L 線描画
V ベクター描画
Command + C コピー
Command + V ペースト
T テキスト入力
S スライス

他にもたくさんショートカットがありますので、公式のヘルプページもぜひ見てみてくださいね

Sketchショートカット

 

プラグイン

プラグインを導入することで、より効率的に作業を行うことができます。プラグインの実行はメニューの中の「Plugins」から行います。

Plugin を追加する方法は、「Sketch Toolbox」を使う方法と、Terminalからコマンドで追加する方法があります。

Sketch Toolboxを使う方法は他のサイトでも多く解説されていますので、ここでは日本語での解説が少ないTerminalを紹介します。

 

メニューの「Plugins→Manage Plugins」で下のウィンドウが現れます。「Get Plugin」を押して公式のプラグイン検索ページに飛びましょう。

Screenshot-2016-06-19-12.04.50-620x465

Screenshot-2016-06-19-11.24.19-620x465

プラグインの名前やキーワードを検索し、目当てのプラグインを見つけたらクリックします。

Screenshot-2016-06-19-12.28.441-620x392

ページの右側にある緑色の「Clone or download」をクリックし、表示されたURLをコピーしておきます。

Screenshot-2016-06-19-12.29.11-620x378

Terminalを起動し、下記のコマンドを入力してください。このコマンドでSketch appのプラグインを配置するフォルダに移動できます。

$ cd ~/Library/Application\ Support/com.bohemiancoding.sketch3/Plugins/

次に、下記のコマンドでプラグインを追加します。
太字の「http://~」の部分は先ほどコピーしておいたURLを貼り付けます。

$ git clone http://~

Sketch appの再起動は必要なく、アプリを起動したままでもプラグインを追加することができます。

 

以下、おすすめのプラグインを3つ紹介します。

Content Generator

下の画像の「Type something」のように、ダミーのテキストを自動で入れてくれるプラグインです。サンプル画像をランダムで配置することもできます。

Screenshot-2016-06-19-12.16.29-620x465

 

 SketchPallet

あるファイルで使ったカラーを、他のファイルでも使いたい、というときに便利です。

現在のファイルで使っているカラーをパレットとして出力して、他のファイルで読み込みます。

Screenshot-2016-06-19-12.16.29-620x465-1

 

RenameIt

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

Screenshot-2016-06-19-12.09.39-620x465

 

まずは使ってみよう!

いかがでしたでしょうか?Sketchはとても直感的に操作できるアプリケーションなので、まずはぜひ一回使ってみてください。

デフォルトで用意されている多様なテンプレートと、ショートカットやプラグインをうまく使えば、WebデザインやUIデザインの時間を大幅に短縮できるはずです。

 

以上、Sketchの使い方について解説しました。

最初は機能が多く慣れるまでに時間がかかるかもしれませんが、慣れればこれ無しではUI作成に困るくらいです。

デザイナーとしてスキルアップしたいという方は特に使ってみることをおすすめします。

[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。