UIデザインの作成ツール！誰でも分かるSketchの使い方【初心者向け】
初心者向けにSketchの使い方についての解説記事。アプリのUIデザインやWebデザインの作成ツールとして有名なSketchですが、初めて使う方でも分かるように細かく説明しています。デザイナーとしてスキルアップできるはずです。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女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の優れた機能だと思います。
Sketchの使い方
Sketchは2016年6月現在、Mac OS Xにのみ対応しています。Windowsからは使えませんのでご注意ください。
まずは下記のURLにアクセスして、Sketchのトライアル版をインストールしましょう。
左側の「download free trial」をクリックすると、zip形式でインストーラがダウンロードされます。
ダウンロードが完了したら、zipファイルを解凍してインストールします。
初回起動したときは、下のような画面が現れます。「OK」で進みましょう。
Sketchで実際に作業してみよう(描画編)
では、Sketchを実際に使ってみましょう。
アートボードの挿入
まずはSketchの描画機能を学んでいきましょう。最初に、描画スペースとなるアートボードを挿入します。
左側にある「＋」ボタンをクリックして、「Artboard」を選択します。
すると右側に、様々なデバイスのディスプレイサイズが表示されるので、自分の作成したいサイズを選びましょう。
今回はiPhone6を選択してみます。
背景色の設定
右側にある、「Background color」にチェックを入れ、背景色を選びます。今回は分かりやすいよう黒に設定しました。
図形を描いてみる
「＋」ボタンから、いろいろな図形を挿入することができます。
円を描いてみましょう。「Oval」を選択した後、アートボード上で左クリックしながらドラッグで好きな大きさの円を描くことができます。
Shiftを押しながらドラッグすると真円にできます。
図形を塗りつぶしてみましょう。右側のメニューから設定します。
塗りつぶしは「Fills」、図形の線は「Borders」です。図形の外や中に影をつけることもできます。
長方形も挿入してみましょう。「＋」ボタンから「Rectangle」を選んで描画します。
アートボードの端に触れるとガイドがでるので、きれいに配置することができます。
「Fills」の右にある「＋」ボタンを押すと、塗りつぶしのパターンを選択することができます。グラデーションをかけてみました。
スライスの使い方
先ほど描いた図形をスライスしてみましょう。スライスしたいオブジェクトを選択した状態で右側の「Export」を開いて
「Export ~」をクリックすると、スライスすることができます。
スライスしたものは、下のようにナイフマークが表示されるのでわかりやすいです。
マスクの使い方
Sketchではマスクも使うことができます。
まずはマスクしたい形を描画します。
左側のリストで、マスクとして使う図形より上にあるものが、マスクの対象となるので、順番を入れ替えておきます
マスクとして使いたい図形をリスト上で右クリックして「Mask」を選択します。
下の画面のようにマスクがかかりました。
Sketchで実際に作業してみよう(UI編)
Sketchには、UIデザインに便利なテンプレートがたくさん用意されています。スマートフォンのUIデザインを作成してみましょう。
テンプレートを呼び出す
先ほどと同じ手順でアートボードを用意したら、「File→New From Template」からテンプレートを呼び出しましょう。
下の画面ではiOSのUIデザイン用のテンプレートを読み込んでいます。
ナビゲーションバーを配置する
iOSアプリでよく使われている、ナビゲーションバーを配置してみましょう。
先ほど追加したテンプレートのページを開くと、iOSアプリ用のパーツがたくさん並んでいます。
ここで配置したいパーツを選択・コピーし、配置するページに移ってペーストしましょう。
アートボード内の適当なところにペーストして、ドラッグして位置を合わせます。
ナビゲーションバーの中のテキストは、ダブルクリックして編集したり、消したりすることもできます。
さらに、「Rectangle」や「Text」を配置してUIを作りこんでいきます。
実機でデザインがどう見えるか確認する
Sketchの機能でとても便利なのが、作成したデザインをすぐに実機で確認できるMirror機能です。
iOSアプリを通しての確認となりますので、あらかじめ下記のアプリを実機にインストールしておきます。
Sketch上で「Mirror」をクリックし、実機をPCと同一のWi-Fiネットワークにつなぐか、PCにUSB接続すれば、
実機のディスプレイ上でどう表示されるか確認することができます。
こちらはiPhoneから確認したときのスクリーンショットです。
応用編
最後に、Sketchのショートカットや、便利なプラグインをご紹介します。
ショートカット
使用頻度の高い機能のショートカットをまとめました。
| ショートカット | 実行結果 |
| A | アートボード作成 |
| R | シェイプ(四角形) |
| O | シェイプ(円) |
| L | 線描画 |
| V | ベクター描画 |
| Command + C | コピー |
| Command + V | ペースト |
| T | テキスト入力 |
| S | スライス |
他にもたくさんショートカットがありますので、公式のヘルプページもぜひ見てみてくださいね
プラグイン
プラグインを導入することで、より効率的に作業を行うことができます。プラグインの実行はメニューの中の「Plugins」から行います。
Plugin を追加する方法は、「Sketch Toolbox」を使う方法と、Terminalからコマンドで追加する方法があります。
Sketch Toolboxを使う方法は他のサイトでも多く解説されていますので、ここでは日本語での解説が少ないTerminalを紹介します。
メニューの「Plugins→Manage Plugins」で下のウィンドウが現れます。「Get Plugin」を押して公式のプラグイン検索ページに飛びましょう。
プラグインの名前やキーワードを検索し、目当てのプラグインを見つけたらクリックします。
ページの右側にある緑色の「Clone or download」をクリックし、表示されたURLをコピーしておきます。
Terminalを起動し、下記のコマンドを入力してください。このコマンドでSketch appのプラグインを配置するフォルダに移動できます。
$ cd ~/Library/Application Support/com.bohemiancoding.sketch3/Plugins/
次に、下記のコマンドでプラグインを追加します。
太字の「http://~」の部分は先ほどコピーしておいたURLを貼り付けます。
$ git clone http://~
Sketch appの再起動は必要なく、アプリを起動したままでもプラグインを追加することができます。
以下、おすすめのプラグインを３つ紹介します。
Content Generator
下の画像の「Type something」のように、ダミーのテキストを自動で入れてくれるプラグインです。サンプル画像をランダムで配置することもできます。
SketchPallet
あるファイルで使ったカラーを、他のファイルでも使いたい、というときに便利です。
現在のファイルで使っているカラーをパレットとして出力して、他のファイルで読み込みます。
RenameIt
レイヤーの名前を一括で付け直すことができます。
まずは使ってみよう！
いかがでしたでしょうか？Sketchはとても直感的に操作できるアプリケーションなので、まずはぜひ一回使ってみてください。
デフォルトで用意されている多様なテンプレートと、ショートカットやプラグインをうまく使えば、WebデザインやUIデザインの時間を大幅に短縮できるはずです。
以上、Sketchの使い方について解説しました。
最初は機能が多く慣れるまでに時間がかかるかもしれませんが、慣れればこれ無しではUI作成に困るくらいです。
デザイナーとしてスキルアップしたいという方は特に使ってみることをおすすめします。
[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
