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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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