Sketchの使い方!UIデザインの作成方法を初心者にもわかりやすく解説!

Sketchとは、アプリやサイトのデザインを美しく、誰でも簡単に作成できるMac用のデザインソフト。どのような使い方をするソフトなのか、気になるポイントです。この記事では、アプリ開発者に欠かせないソフトのSketchで、UIデザイン作成する使い方を解説します。

Sketchの使い方!UIデザインの作成方法を初心者にもわかりやすく解説!のイメージ

目次

  1. 1Sketchとはどんなアプリ?
  2. Mac用UIデザイン設計のためのアプリ
  3. Sketchの使い方を覚えるメリットとは?
  4. 2Sketchの初心者の使い方について
  5. トライアル版のダウンロードとインストール
  6. Sketchの具体的な使い方
  7. Sketchでテンプレートを利用してデザイン作成する使い方
  8. Sketchで実機確認する使い方
  9. 3Sketchの使い方が便利になる機能
  10. 覚えておきたいショートカットキー
  11. プラグインのおすすめ
  12. 4Sketchで美しいUIデザインを作成しよう!

Sketchとはどんなアプリ?

Sketchの使い方について

サイトを作成、アプリを開発する際には、使いやすさや機能性だけではなく、UIデザインも重要なポイントです。美しく見た目の良いアプリやサイトは評価されますが、デザイン性を重視するあまり、使い勝手を損ねてはいけません。

そこでUIも考えられた美しいデザインを作れるアプリということで、SketchというMac用のソフトが人気です。こちらでは、Macでアプリ開発をする方に欠かせないソフトのSketchとは、どんなアプリで、どんな使い方をするのか、解説します。

Mac用UIデザイン設計のためのアプリ

Sketchとは、Mac用のUIデザインを作成するための専用ソフトです。オランダのBohemian Codingが開発したソフトで、2010年にリリースされました。最初はAppleのAppストアで販売されていましたが、アップグレードに関する価格の柔軟性に対応しきれないため、現在は専用ストアのみで販売されています。

従来のAdobe illustrator等のデザインソフトと比べ、Sketchの大きな特徴は、印刷するためのデザインを作成する機能が付いていない点です。Webサイトとスマホやタブレットのアプリといったデジタルコンテンツに必要な、デザイン開発のみ特化しているソフトで、WEB製作者やアプリ開発者から大きな支持を受けています。

買い切り方で永続的に使える

Sketchの使い方について

Sketchは有料でしか利用できません。2週間の無料トライアルがありますが、2週間経つとライセンスを購入しないと利用できません。しかし、現在流行の月額課金のサブスクリプションではなく、1回買い切り価格で購入できます。

個人向けの購入価格が99ドルと、日本円では1万円を超える価格ですが、この価格で購入すれば永続的に利用できます。サイトやアプリの作成を長く続けるのであれば、月額1,000円のサブスクリプションのアプリを使い続けるよりも、こちらの方が経済的です。

高い機能性と合わせて考えても、とても利用しやすいと言えます。

美しく洗練されたデザインを作れるのが魅力

アプリやサイトを利用していると、中には残念に思ってしまうような、素人っぽいデザインがあります。デザインが重視される昨今、いくらアプリやサイトの機能性が高くても、デザイン性が低かったり、デザイン性によって機能性が損なわれてしまうと、ユーザーからは支持されません。

その点、デジタルコンテンツのユーザーインターフェースも考えたデザインを開発するために作成されているSketchであれば、初心者でも簡単に美しいデザインを作成できます。アプリやサイトの使い勝手の良さ、UIも高いデザインを、誰でも簡単に作成できるようになります。

Sketchの使い方を覚えるメリットとは?

他にも優れたデザイン用ソフトがある中で、特にSketchの使い方を覚えるメリットはあるのか、ご紹介します。

小さいファイルサイズでデザインを作れる

Sketchをデザイン用ソフトとして利用するメリットは、ファイルサイズを小さくできる点です。Adobe Illustratorなどの有名なデザインソフトの多くが、パーツごとに1枚ずつの画像として貼っていきます。そのため、1枚のデザインの中にパーツを重ねれば重ねるほど、画像サイズが大きくなっていきます。

Webサイトやアプリを作る上で、読み込み速度も重要なため、デザインでファイルサイズが大きくなってしまうことは避けたい部分です。しかし、Illustratorの場合は、出来上がった画像を圧縮すると、線が荒くなり画質が大きく落ちてしまいます。

その点、Sketchは出来上がったデザインは最初からサイズが小さい上に、拡大や縮小をしても画像が荒くなることがありません。その点は、他のデザイン用ソフトと比べると大きなメリットです。

テンプレートが豊富で作業を効率化できる

Sketchでは、デザインを背景色を決める等、0から作ることもできます。しかし、あらかじめ出来上がったテンプレートを使って作業を効率化できます。利用するデバイスによって、テンプレートが豊富に用意されています。

PCサイトやiPhone用のデザインだけでなく、Android用のデザインも選択できます。Sketchにはありとあらゆるデバイスを想定したデザインを、テンプレートの読み込みだけで簡単に作れるメリットがあります。

iOS上での表示をすぐに確認できる

Illustratorなどと異なり、スマホやタブレットなどで動作させるためのUIデザインの作成を、念頭に開発されているのがSketchです。そのため、作成したデザインをすぐにiOSアプリ上で動作させられます。

PC上ではどうしてもわからない、スマホやタブレット上での動作を簡単に確認できるのは、他のデザインアプリにはない、Sketchの大きな特徴です。

Thumb3Dモデリングソフト「SketchUp」の使い方!機能や無料版について紹介!
3DモデリングソフトSketchUpの使い方!機能や無料版について紹介します。3Dモデリング...

Sketchの初心者の使い方について

Sketchの具体的な使い方をご紹介します。

トライアル版のダウンロードとインストール

まずはSketchのトライアル版をダウンロードし、インストールしましょう。以下のリンクからSketchのホームページを開き、

  • Try for Free」で無料トライアル版をダウンロード

Sketch - The digital design toolkit
Sketchの使い方について

  • ZIPファイルでSketchのインストーラーがダウンロードできるため、解凍して開く
  • インストールが開始される
  • インストール終了後にでてきた画面で「OK」をクリック
これで、Sketchを使えるようになります。

Sketchの具体的な使い方

Sketchがインストールできたら、実際にUIデザインの作成をしていきましょう。

アートボードの挿入

Sketchの使い方について

Sketchを開いたら、まずはデザインを作成するためのアートボードを追加して作成します。アートボードとは、デザインを描いていくためのキャンバスです。アートボードを追加するには、

  • Sketchの右上にある「+」をクリック
  • 表示されたメニューの中から「Artboard」を選択
  • 画面の右側に真っ白なアートボードが表示される

サイズの選択

アートボードが開いたら、次にデザインするWebサイトやアプリのサイズを選びます。Sketchでは、iPhoneやiPad、Apple Watchのバージョンごとの機種でキャンバスのサイズを選べます。

ここで注意すべきは、サイズの大きな機種でデザインしてしまうと、小さな画面のデバイスでは全て表示されないこともある点です。アプリやサイトを対応させたい機種のバージョンを考えながら、作成しましょう。作成したデザインがターゲットとしている機種に、どのように表示されるのかは、こまめに確認しながら作業を進めましょう。

背景色の設定

アートボードのサイズを決めたら、実際にデザインを開始しましょう。背景色を設定するところから始めます。

  • アートボードの右側の「Background collar」をクリック
  • カラーパレットが開かれ、色の設定が可能

描画する

Sketchの使い方について

背景色が決まったら、いよいよ実際の線や図形を描いていきましょう。

  • アートボードを開いたときの「」をクリックして「Shape」を選ぶ
  • 四角形や丸、三角などのさまざまな形を選択可能

Sketchの使い方について

図形を選択したら、アートボード上でドラッグすると、その図形が描けます。

Sketchの使い方について

ペンシルツールを使えば、自由に線を描けます。

Sketchでテンプレートを利用してデザイン作成する使い方

Sketchでは、テンプレートを使ってデザインできます。デザインに慣れていない初心者であれば、自分で0からデザインを作成するよりも、テンプレートを使ってデザインすることをおすすめします。アートボードを作成してサイズを決めたら、テンプレートを使って作成してみましょう。

テンプレートを選択する

テンプレートを選択する方法は、以下のとおりです。

  • File」をクリックし、「New Form template」を選択
  • iOSやAndroidなど作成するアプリで、ターゲットとするデバイスを選択できる
  • デバイスを選択したら、アートボードにそのデバイスに沿ったテンプレートが読み込まれる

パーツを配置していく

デバイスを選択したら、そのデバイスごとに必要なパーツを配置していきます。例えば、iPhoneなどのiOS
のアプリを選択したら、iOSアプリに欠かせないナビゲーションバーを配置していきます。テンプレートのページを開くと、利用できるパーツが並んでいます。

その中から必要なパーツを選択し、コピーします。コピーしたパーツを、デザインの作成ページに戻って必要な場所へ配置していきます。ペーストした後でも、ドラッグで位置を修正できます。

Sketchで実機確認する使い方

Sketchの使い方について

Sketchで作成したデザインを、実機で確認する方法をお伝えします。実際にスマホでSketchで作成したデザインを、ミラーリングして確認できます。Sketchをミラーリングするために、専用アプリをiPhoneにインストールしておきましょう。

‎「Sketch Mirror」をApp Storeで

Android用のアプリもあります。

Crystal: Sketch Mirror for Android - Google Play のアプリ

Sketchを利用しているMacと同じWi-Fiにスマホを接続するか、USB接続でMacに接続します。アプリ上でSketchで作成したデザインが、どのように表示されるのか確認できます。スマホをPCに接続した状態で、デザインやUIを微調整することも可能です。

ThumbSketchfabで3Dモデルをダウンロード・アップロードする方法を解説
SketchfabとはPCで作成した3DモデルをアップロードしたりダウンロードしたりできるW...

Sketchの使い方が便利になる機能

Sketchを利用する上で、使い方を便利にできる機能をご紹介します。

覚えておきたいショートカットキー

Sketchでは、ショートカットキーを利用できます。Sketchを利用する上で覚えておきたいショートカットキーは、以下のとおりです。
 

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

プラグインのおすすめ

Sketchの使い方について

Sketchには、Sketchの機能を拡張できるプラグインもあります。プラグインは、以下のページから入手できます。

Sketch - Extensions

Sketchを利用する上で絶対に入れておくべきプラグインをご紹介します。
 

プラグイン 機能
Automate フォントを入れ替えたり、スライスを作成したり、必要なくなったスタイルの削除、レイヤーの並び替えなどが簡単にできるようになるプラグインです。
Runner マウスを使わなければできないことを、キーボードのショートカットキーだけでできるようにするプラグインです。作業効率がこれ1つで大幅にアップします。
Copy & Paste Shadows 複数の同じようなアイテムが並んでいるときに、1つのアイテムにつけたシャドウをコピペして他のアイテムにも簡単にコピペできるプラグインです。

Thumb無料グラフィックデザイン作成ツールCanva(キャンバ)とは?何ができるか解説!
Canva(キャンバ)は、文書に添付する画像などを作成する時に便利なデザインソフトです。無料...

Sketchで美しいUIデザインを作成しよう!

この記事では、Macユーザーに人気のデザイン作成用ソフト「Sketch」の使い方をご紹介しました。デザイン用ソフトは数多く販売されていますが、Sketchの様にデジタルコンテンツのUIまで考えたデザインが作成しやすいソフトは、少ないのが現状です。

Illustratorなどのソフトを使っても、アプリやサイトのデザインは可能です。しかし、コスパや使い勝手を考えると、アプリやサイトのデザインはSketchが一番です。ぜひアプリやWebのデザインを行う方は、Sketchの使い方を覚えて、より使いやすくて美しいデザインを作成しましょう。

関連するまとめ

Original
この記事のライター
K.C
皆様のお役に立てる情報をお届けするために日々精進していきます。どうぞよろしくお願いします。