プログラミング

初心者でも簡単!sketchの使い方を解説します

初心者でも簡単!sketchの使い方

いつも読んでいただきありがとうございます!
今回は久しぶりにwebデザインについてに記事です。最近ではプログラミングばかりを学習していましたが、UI/UXについても書いていきたいと一念発起!

sketchの使い方の記事がなかったので書いていきますが、こちらではstrongsketchでデザイン作成の方法strongをお教えします!

 

 

webデザイナーにおすすめのsketch

photoshopやIllustrator派で揉めると思いますが、僕は断然sketchを推したいと思います!
理由としては、軽いというのが大きな理由ではないかなと思います。

 

ベクターデータが扱えること

ベクターデータに関しては大きいですね。photoshopでは画像になってしまい結構重くなってしまいます。
しかしsketchではベクターデータも扱えるので軽量でスムーズにデザイン作成ができます。軽いということは本当に素晴らしいです。

 

テンプレートがいっぱい

webデザインだけでなくiOSのアプリ作成用のテンプレートもあります。
実際の画面のようにテンプレートを呼び出して再現ができるのでUIデザインがとてもしやすいです

 

実機確認ができる

最近のphotoshopでもここはカバーできているかもしれませんが、sketchで作成したものが実際にのiPhoneで確認ができます。
作成したデザインがすぐに確認できるのはとても便利ですよね

 

 

sketchの使い方を理解できれば素早くデザイン作成可能!

残念ながらwindowsユーザーにはsketchは利用ができません。MacOSの対応です。
sketchは操作が難しそうですが、そんなこともなく僕でも直ぐに操作を理解できました。

まずはダウンロードからしていきましょう!

 

sketchのダウンロード

こちらのページからダウンロードしましょう。
いきなりし支払いを請求されることはありませんのでご安心くださいー

sketchのダウンロード

フリートライアルであれば30日間無料で利用ができるようですね![Try for free]をクリックしたら直ぐに」ダウンロードがはじまります。
(2018/08月現在)

 

 

sketchの使い方を理解しよう

ダウンロードができたらsketchの使い方から触れていきましょう。そんなに難しくありません。インターフェースも見やすくて直ぐに馴染みます。

まずは大まかに画面の構図を説明します。

 

アートボードを呼び出す

insertからartbordを選択しましょう。
下の方に表示されるので選択してください!

 

sketchのアトートボードを追加

 

mobileとtabletとDesktopの項目が表示されたと思います。ここで自分の作成したいデバイスを選択しましょう。

 

mobileを選択

 

ここではmobileを選択します。
PCで作成したい方はDesktopを選択してください!

 

アートボード

 

アートボードが表示されました。この真ん中の真っ白のがアートボードです。
この白い部分がiPhoneのサイズと同じになっています。ここにデザインをしていくことが可能です。

 

図形を呼び出そう

左上のあるInsertをクリックします。
いろいろメニューがでてくると思いますが、この中からshapeのRectangleを選択します。

矩形ツール

 

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

 

矩形ツール作成

 

なんとこんな簡単に図形を作ることができました。

図形に色をつけることもできます。
右側のFillsからFillをクリックするとカラーピッカーが表示されるので好きな色を選びましょう。

色を変更が可能

これをすることで図形に色を決めることができます。

 

テキストを追加しよう

左上のあるInsertをクリックして、この中からtextを選択します。

アートボードに文字を追加することがこちらでは可能になります。

テキストの追加

 

 

テンプレートを呼び出す

sketchにはテンプレートを呼び出すことができます。テンプレートとはなんだ?と思うかもしれませんが、簡単に言うと
既に作成されているデザインパーツのことになりますね。

File→New From Templateを選びweb designをクリックしましょう

 

アートボードの追加

 

なんと!既にiPhoneXのUIが表示されました。

 

sketchのテンプレート

 

pagesからsymbolsをクリックするとパーツ単位で既に出来上がっているものがあります。
sketchではテンプレートを使ってスマートにUIデザインが可能なのです。

 

 

sketchにはプラグインが豊富にある

プラグインのことは以前の記事で書いていたので、こちらに載せます。

https://loop-bitter.xyz/2017/11/01/sketch/

 

[voice icon=”https://loop-bitter.xyz/wp-content/uploads/2018/07/image1.png” name=”きゅん” type=”r”]既に記事書いてたけどプラグインについてまとめてます[/voice]

 

 

個人的に思うコト

sketchはサイコー!ということを伝えたい記事でした。
基本のきの部分を紹介できた感と思います。もっと応用的な部分もあるのですが、次回に書こうと思います。
sketchの使い方をアウトプットしていきたいです。

ABOUT ME
kyun65
フリーランスのweb屋。時間と場所に捉われず、やりたいことだけをやっています。loop-bitterはweb制作についてやフリーランスの情報を発信しています。NLPを駆使してコーチングも行っています!