いつも読んでいただきありがとうございます!
今回は久しぶりに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のダウンロード
こちらのページからダウンロードしましょう。
いきなりし支払いを請求されることはありませんのでご安心くださいー

フリートライアルであれば30日間無料で利用ができるようですね![Try for free]をクリックしたら直ぐに」ダウンロードがはじまります。
(2018/08月現在)
sketchの使い方を理解しよう
ダウンロードができたらsketchの使い方から触れていきましょう。そんなに難しくありません。インターフェースも見やすくて直ぐに馴染みます。
まずは大まかに画面の構図を説明します。
アートボードを呼び出す
insertからartbordを選択しましょう。
下の方に表示されるので選択してください!

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

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

アートボードが表示されました。この真ん中の真っ白のがアートボードです。
この白い部分がiPhoneのサイズと同じになっています。ここにデザインをしていくことが可能です。
図形を呼び出そう
左上のあるInsertをクリックします。
いろいろメニューがでてくると思いますが、この中からshapeのRectangleを選択します。

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

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

これをすることで図形に色を決めることができます。
テキストを追加しよう
左上のあるInsertをクリックして、この中からtextを選択します。
アートボードに文字を追加することがこちらでは可能になります。

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

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

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の使い方をアウトプットしていきたいです。